Создание фирменного стиля для развлекательного сайта anekdotix.ru

Задача: 

Разработать дизайн и фирменный стиль сайта

Что мы сделали: 
  • Разработали авторские художественные элементы
  • ​Создали шрифотовую гамму
  • ​Осуществили верстку с разбивкой по содержанию 
Результат: 

Создали «воздушную» структуру в декорации акцентированных желтых элементов.

Внедрили авторскую коллекцию иконографики для поддержки навигации

Сформировали для сайта гарнитуры контрастных шрифтов

Создали универсальные элементы фирменного стиля.

Концепция фирменной стилистики обязана быть контрастной и независимой 

Диана Зайцева
UX/UI дизайнер. Руководитель разработки

Фирменный стиль Anekdotix

Работа над коммерческими и развлекательными проектами – это, как говорят в веселом южном городе, две большие разницы. Судите сами. Продающие страницы нередко запускают в сыром виде, с допущениями и багами – дальше начинается тестирование, доработка и поиск оптимальных продвигающих решений. На юмористическом портале подобное невозможно, ведь приятные эмоции хочется получать сразу, а не по частям. Это столь же противоестественно, как улыбка половиной рта – в лучшем случае выглядит, как гримаса. Наш кейс о проекте, который с первых шагов вызывал смех – сложно сохранять деловой настрой, разрабатывая сайт шуток, приколов и анекдотов.

Отступление в тему:

- Сема, у Вас на голове сидит муха.

- Вы хотите сказать, что там вместо мозгов г**но?

- Я не знаю. Но муху-то не обманешь!

Наша задача сделать сайт хорошего настроения на который стремятся посетители, а не насекомые.

ANEKDOTIX: серьезная работа над смешным сайтом

В поставленной задаче сразу определялось приоритетное направление – дизайн страниц. С наполнением у заказчика проблем не возникает, ресурс ориентирован на активных авторов и позитивную аудиторию.

Итак, улыбки в сторону и начинаем конкретизацию рабочих целей:

  • разработка фирменного стиля – color-концепт, логотип, гарнитуры шрифтов;
  • создание иконографики для визуализации разделов и поддержки навигации;
  • структурная архитектура – формирование и насыщение зрительного поля.

С последним справились быстро:двухколоночная верстка с разбивкой по содержанию. В блоке основной информации посты окружены набором нативных функций – звездный рейтинг, кнопки социальных сетей, переходы на подчиненную страницу и аккаунт автора. Отдельно колонка с ТОПом, тегами и категориями, виджетами социальных сетей – наша целевая аудитория активно делится на этих платформах смешными записями.

И все же без небольшого хулиганства не обошлось. Типовую форму регистрации и входа на сайт выполнили в двух вариантах – после авторизации в ней появляется крупное изображение пользователя и лист его активности: рейтинг и подписчики, посты и комментарии, оценки и сообщения. Помимо информационной функции, получили и психологический эффект. Фотография пользователя расположена в одном визуальном ряду с внедренным в хедер крупным изображение команды проекта – это стирает грань и создает эффект сопричастности. Каждый должен помнить, что смех – дело коллективное.

Отступление в тему:

- Сколько стоят твои гробы, Яша?

- По 15.

- Да, у Изи, конечно, по 20, но там же есть где развернуться!

Наш сайт далек от дел скорбных, но что-то общее все-таки прослеживается: структура получилась с обилием «воздуха», легко и свободно воспринимаемой. Одним словом, есть где развернуться.

Иконографика и дизайн: один шаг от серьезного до смешного

Разработка авторских художественных элементов – это основа индивидуального дизайна. В минималистичной графической манере требуется объяснить пользователям навигационное значение каждого пункта. В anekdotix.ru мы применили комбинированный подход – контрастные иконки совмещены с анкорным меню: характеризующая графика привлекает внимание, а текст с обозначением выпадающих элементов лишь подчеркивает направление навигации. Все объекты иконографики окрашены в желто-золотистые позитивные тона, что на преобладающем бледно-молочном полотне страницы выглядит стильно и акцентировано. Ту же колористику использовали для выделения заголовков форм первого экрана – желто-белый визуальный концепт составил позитивную цветовую карту. Подсознательную точку для закрепления цветовосприятия поставило групповое изображение команды проекта – часть наших героев для фотосессии одели желтые фирменные майки.

Отступление в тему:

Моисей считал, что все от Бога.

Соломон утверждал, что все от головы.

Христос учил, что все идет от сердца.

По Фрейду – от секса.

Эйнштейн доказал, что все относительно.

Неизвестно, как там было на самом деле, но к восприятию графического дизайна это имеет отношение непосредственное– сколько людей, столько и мнений.

Фирменный стиль: пластичность и универсальность

Концепция фирменной стилистики обязана быть контрастной и независимой – такое утверждение мы положили в основу работы над сайтом anekdotix. Форма не диктует содержания и не догматична – любой компонент может быть извлечен и использован отдельно без потери функциональных свойств. Чем добиться? Конечно, шрифтами и декорацией. При их сохранении элементы способны менять цвет, конфигурацию, область применения, но оставаться узнаваемыми атрибутами фирменного стиля.

Создавая шрифтовую гамму, дизайнеры использовали прием противопоставления.

  • В шапке сайта – крупные рубленые гротеск-шрифты. Широкое начертание и межсимвольные интервалы, контрастные и массивные. Они привлекают внимание и дают ощущение стабильности и постоянства.
  • Логотип – использована свободная форма современных начертательных шрифтов. Тот же рубленый гротеск без засечек, но с плавными изгибами пластичных переходов. В них практически не встречаются прямые углы и ровные линии, но в то же время он хорошо читается. Запоминающееся начертание и контрастность – отличный шрифтовой задел для создания логотипа. К тому же использовали отдельный декоративный элемент-выноску – bubble. Она подчеркнула название сайта и завершила формирование законченной графической композиции.

Примененное в логотипе решение работает при любых условиях. Его можно использовать в полиграфическом исполнении, на сувенирной продукции, для печати на майках или компакт-дисках, фирменных бланках и, конечно же, на интернет-ресурсах. Уникальность начертания дает свободу фантазии в цветовых решениях, брендовый знак не потеряется и в полноцвете радуги, и монохроме оттенков серого.

Почти серьезно: что у нас получилось

  • Светлая «воздушная» структура в декорации акцентированных желтых элементов.
  • Внедрение авторской коллекции иконографики для поддержки навигации.
  • Формирование для сайта гарнитуры контрастных шрифтов.
  • Создание универсальных элементов фирменного стиля.

Отступление в тему:

Приезжий старому одесситу около неработающего фонтана:

- Скажите, этот фонтан когда-нибудь на вашей памяти бил?

- Молодой человек. Он бил, бьет и будет бить!

Желаем такой же вечной судьбы и веселых посетителей сайту Anekdotix.ru. С дизайном и фирменным стилем от Zexler’a у него есть для этого все необходимые условия!

Таким образом, мы имеем:

разработали

фирменный стиль

сформировали

зрительное поле

Демонстрация макета (Прокрутите макет для того чтобы посмотреть его полностью)

Скриншот Фирменный стиль Anekdotix
Ещё классные кейсы
Получить классное предложение
Очень оперативно рассмотрим заявку и сделаем для Вас замечательное предложение

Наша задача - сделать сайт хорошего настроения!

Дмитрий Карпинский
Директор по пропаганде