← 
В блог

Бюро |

Айдентика для себя или экспресс-дизайн в действии

Думаю, важно делиться не только результатами каких-то проектов, но и процессом. Поэтому я решил рассказать, как мы вместе с Саше Буяновой за пять дней сделали мне логотип и айдентику для сайта и блога.

Получился целый лонгрид. Внутри про то, как мы искали идеи, образы, подбирали референсы, работали с эскизами и тестировали дизайн. По-моему получился классный знак.

Концепция

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

Получился список из четырёх пунктов, которые определили стиль сайта и будущей айдентики:

  • Минимум цветов: чёрный, белый и один акцентный для кнопок или ссылок. Я не очень хорошо умею работать с цветовыми палитрами, поэтому предпочитаю функциональность красоте.
  • Иллюстрации вместо фотографий. Если и использовать фото, то чёрно-белые или более холодными оттенками, чтобы не нарушать визуальный язык.
  • Айдентика должна быть живой и гибкой. В идеале так, чтобы её можно было развивать бесконечно. Плюс она должна быть интернациональной, и не ограничиваться кириллицей, поэтому шрифтовый логотип не подходит.
  • Визуальный язык айдентики показывает, что это сайт редактора. Важно передать, что здесь уважают текст, хорошую типографику, создают что-то из ничего.

Референсы и характер

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

Ноушен одновременно служил и площадкой для мудборда, и референсом.

Основным референсом были иллюстрации Ноушена (да, снова). Но я не хотел копировать их стилистику. Главное, чтобы иллюстрации содержали минимум цветов, а лучше один — чёрный. Это удешевляет производство и помогает не путать редактора с иллюстратором.

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

Первые эскизы были такими. Чтобы не запутаться, я начал использовать принцип из Студии Лебедева — нумеровать варианты.

Чтобы не запутаться в эскизах, нумеруйте их.

Я выбрал четвёртый. Пока Саша работала над ним: экспериментировала с деталями, образами и ситуациями — я занимался сайтом.

Проектирование и дизайн

Прежде я верстал сайты без дизайна. Садился и сразу писал код. В этот раз я решил сделать всё по порядку: контент, дизайн, вёрстка — как мы обычно делаем в бюро.

Минут за 40 я написал текст и сразу же перевёл его на английский. Отложил отредактировал. Прикинул, сколько будет иллюстраций. Позже понял, что зря. Пока не расставишь текстовую часть, не поймёшь наверняка.

Открыл Фигму и осознал, что ничего не знаю про модульные сетки. Прочитал книгу Мюллера-Брокманна и несколько статей. Список литературы и ссылки — под статьёй.

После изучения сеток, определился со шрифтами. К тому моменту было понятно: основой лендинга будут иллюстрации и сильная типографика. Я изучил сайты, которые мне нравятся:

Большинство сайтов и брендов сегодня предпочитают гротески. Их стало так много, что и различить уже невозможно. Чтобы создать глобальный контраст, нужна была хорошая уверенная антиква.

На сайте «Гугл Фонтс», я подобрал шрифтовую пару: Lora и Merriweather. У этих гарнитур хорошо проработана кириллица, а ещё они отлично сочетаются друг с другом. Основным выбрал Merriweather, так как он более строгий и шире. Для заголовков, подписей к фото и цитатам оставил Lora — более изящный и открытый.

Апдейт: спустя три дня оставил только гарнитуру Lora, так как Merriweather всё же оказалась слишком тяжёлой для чтения и восприятия.

Прежде чем сесть рисовать макет в Фигме или Скетче, подумайте, что будет основой вашего сайта. Если фотографии, то вам не нужно заморачиваться со шрифтами. Подойдёт и хорошо набранная Гельветика. Но если ярких фото или рисунков не будет, типографика выходит на первый план.

Не буду вдаваться в технические нюансы работы с Фигмой — это тема для отдельного лонгрида. Последовательность действий примерно такая: настроил сетку, расставил блоки, подумал, что это лучший макет на свете, похвалил себя, посмотрел сериал. Через час вернулся к макету, понял, что это полная хрень и пересобрал всё заново.

Так выглядит мой сайта в «Фигме». Интерфейс понятный, легче «Скетча».

Дальше оставалось только сверстать макет. Это самое трудоёмкое. Хотел отказаться от «Бутстрапа», но тогда на вёрстку ушло бы слишком много времени. Пока что остался на нём, в планах переписать главную, почистить код.

Шлифовка

Золотое правило редактора — отложить текст и вернуться к нему через пару дней. С иллюстрациями, логотипами и сайтами так же.

Когда вам покажется, что всё круто и нужно прямо сейчас сменить все аватарки и загрузить сайт на сервер, притормозите. Закройте ноутбук и отложите графический планшет в сторону. Сходите на прогулку, позвоните маме, выспитесь, встретьтесь с друзьями — главное, забудьте о тексте/дизайне/сайте.

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

Финальная версия заставки и обложки для соцсетей

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

Тестирование

Когда всё готово, протестируйте айдентику в деле. Загрузите новый логотип в соцсети, поживите с ним, посмотрите на него в интерфейсе разных программ. Я в такие моменты полагаюсь на интуицию и ощущение. Тут как с людьми в жизни: если это ваш человек, вы это почувствуете.

Например, у моей айдентики есть качество, которое сразу проявило себя в соцсетях, особенно в Инстаграме — моя сториз теперь выбивается из общего визуального ряда.

Об этом говорил Денис Башев в одной из своих лекций на «Дизайн Просмотре»: чёрно-белые знаки более контрастны на фоне разноцветных городов, вывесок, наружной рекламы. С интернетом происходит то же самое — он захламляется. И лучший способ выделиться — выбрать стиль, который будет контрастен по отношению к тому медиуму, в котором находится ваш бренд.

Книги и ссылки для чтения

  1. Йозеф Мюллер-Брокманн «Модульные системы в графическом дизайне»
  2. Дизайн-системы в клиентских проектах
  3. Модульные сетки в блоге «Тильды»
  4. Что такое модульные сетки
  5. Красивая и практичная сетка в интерфейсах
  6. 7 основных вопросов о модульных сетках
  7. Гид на Хабре о том, как с нуля построить сетку для дизайн-макета
  8. Ещё один подробный гид по сеткам

Комментировать

Комментировать