Мысли
May 24, 2019

Как сделать айдентику для себя

Большой большой лонгрид о том, как мы с Сашей Буяновой сделали мне айдентику.

Концепция

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

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

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

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

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

Основным референсом были иллюстрации Ноушена. Но я не хотел копировать их стилистику. Идея была в том, чтобы использовать минимум цветов, а лучше один — чёрный. Такие иллюстрации дешевле в производстве, плюс они не создают путаницы, что это сайт именно редактора, а не иллюстратора. То есть это история про креатив, но не про творчество. И да, это разные вещи.

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

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

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

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

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

  1. Написал тексты, отредактировал. Отложил отредактировал ещё раз.
  2. Прикинул, сколько будет иллюстраций. Позже понял, что зря. Пока не сверстаешь текстовую часть, не поймёшь наверняка.
  3. Прочитал книгу Мюллера-Брокмана и несколько статей о модульных сетках. Список литературы и ссылки — под статьёй.

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

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

Референсы, которые смотрел, пока готовил сайт

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

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

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

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

Шлифовка

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

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

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

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

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

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

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

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


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