Этапы создания фирменного стиля для бизнеса. Разбираем по шагам, как сделали это в КОД9
Время прочтения: 15 минут
В этой статье рассказываем об этапах создания фирменного стиля для бренда. Думаем, что материал вам пригодится, если тоже разрабатываете фирменный стиль для своей компании и хотите узнать, как этот процесс устроен у других. Кстати, в другой статье мы уже показали, как придумали своё название:
Собрали сайт за 2 недели
Нам нужно было общаться с клиентами и показывать кейсы, поэтому мы начали делать сайт до того, как создали айдентику. Первый прототип мы собрали за две недели вместе с дизайнером из нашей команды. На этом этапе в первую очередь было важно, чтобы на странице были кейсы и форма для сбора контактов. Про внешний вид тоже подумали, но пока старались не заморачиваться слишком сильно. Процесс выглядел так:Собрали референсы
Смотрели на понравившиеся сайты других агентств и думали, чем они нас цепляют и почему.Сделали прототип
Решили, что хотим взять за основу дизайна крупные геометрические формы и контрастные цвета. Первая версия выглядела так:
Макет первого сайта
Раскатились и постепенно доработали сайт:
немного поменяли главную и добавили ещё страницы.Взялись за фирменный стиль
Мы хотели создать цепляющий и сильный образ, чтобы запомниться и выделиться на фоне студий-конкурентов. У нас уже был такой опыт. Раньше мы работали с зарубежными клиентами под другим брендом, в 2010, 2013 и 2025 годах получали награду «сайт дня» от . В Smashing Magazine отмечали наш шрифт и подачу команды на сайте — мы тогда нарисовали иллюстрации с каждым из нас. Всё это помогло в развитии: мы смогли привлечь целевой трафик, и в студию обратились первые серьёзные клиенты. Подробности о том, как мы работали на зарубежном рынке, есть в другой статье:Вот как тогда выглядел наш сайт — в первой версии мы показали этапы разработки как дорогу, а позже сравнили работу над приложениями с подготовкой самолёта к взлёту. Выглядит актуально даже спустя 10 лет.
Этапы разработки мобильных приложений показали как дорогу
Сравнили разработку с подготовкой самолёта к взлёту
В сайте для нового бренда мы решили не фокусироваться на той же идее. Теперь хотели, чтобы дизайн отражал наше самоощущение. Через 3 месяца получилось вот так:
Новый фирменный стиль: команда стала главным акцентом на сайте
Теперь фирменный стиль помогает в найме: соискатели на собеседованиях стали хвалить наш дизайн. Когда слышим такие положительные отзывы, понимаем, что можем совпасть в видении. А ещё айдентика КОД9 попала в подборку лучших работ на сайте Dprofile:
Весной 2024-го у кейса почти полторы тысячи просмотров
Теперь по порядку расскажем, через какие этапы разработки фирменного стиля мы прошли.
Наняли арт-директора
Мы понимали, что фирменный стиль — это сложная задача, в ней будет много обратной связи и переговоров. Без лида одному дизайнеру было бы сложно. Поэтому мы нашли арт-директора, чтобы он задавал вопросы, управлял ожиданиями и контролировал процессы.Арт-директор собрал бриф
Чтобы лучше понять задачу. Вот некоторые вопросы, которые он задавал:
Опирались на эти вопросы, чтобы описать арт-директору задачу
Затем он нашёл ещё одного дизайнера
Мы решили усилить команду: было важно, чтобы новый дизайнер разбирался в айдентике и имел опыт разработки фирменного стиля. Арт-директор составил список кандидатов, а мы осматривали портфолио. Выбрали специалиста, работы которого запомнились больше всего. Ещё обращали внимание на то, как человек общается, так как понимали, что проект будет длиться долго, от нас будет много фидбэка, и важно, чтобы всем было комфортно взаимодействовать.Подобрали референсы
Арт-директор помог понять, каким мы видим фирменный стиль компании. Процесс был такой:- Обсудили наши представления о стильном дизайне — что считаем удачными решениями, а что отталкивает.
- Арт-директор собрал похожие примеры графического дизайна и айдентики: работы с Behance, сайты других агентств.
- Мы оставили комментарии к примерам и расположили картинки по такому принципу: сначала удачные, затем средние, а потом те, что нравятся меньше всех.
Референсы, которые нам понравились
Если вам нужно сформировать свои предпочтения в дизайне, попробуйте пройтись по тем же шагам, что и мы. Технология такая:
- Найдите 20–30 референсов.
- Поставьте им оценки, например, от 1 до 5.
- Соберите вместе изображения с высокими оценками. Скорее всего, они будут похожи между собой.
Разработали логотип
Мы передали дизайнеру готовую задачу, которую структурировали с арт-директором. Референсы пригодились и здесь — добавили их к задаче, чтобы наглядно показать, к какому фирменному стилю стремимся.Всего для создания лого нам потребовалось 4 итерации. Вот первый набросок:
Этот набросок дизайнер нарисовал пальцем на планшете
Дальше покажем все версии логотипов, поделимся, как были устроены обсуждения и как мы давали дизайнеру фидбэк.
Первый вариант
Состоял из надписи «код» и стилизованной девятки из кругов. Сначала она показалась удачной, но потом поняли, что она слишком сильно ассоциируется с логотипом Figma:
Первая версия
Иконка приложения с первым вариантом
Во втором варианте
Сделали акцент на технологичности, а букву «К» — похожей на стрелку:
Вторая итерация логотипа
Её можно удачно обыграть на разных носителях:
Вывеска с буквой «К» похожа на указатель
Нам уже нравилось, но хотели добавить бунтарства. Пошли дальше, но оставили задумку со стрелочкой.
Третья версия
Взяли лучшее из первых двух вариантов и объединили.
В третьей версии соединили лучшее из предыдущих и добавили новую цифру 9
Четвёртая версия
Тогда мы закончили прорабатывать буквы и взялись за девятку. Поняли, что у неё есть потенциал стать фишкой фирменного стиля наравне со стрелочкой из «К». Вышло строго и аутентично:
В лого нет скрытой задумки, оно просто нравится нам и решает задачи компании
Нам понравилось, но казалось, что название не читается и выглядит слишком абстрактно. Ниже переписка, где мы обсуждали этот момент:
Обсуждаем итоговый вариант лого
В итоге решили, что нам не так важно, читается ли название в логотипе. Вот почему:
- Людям, которые заходят на сайт, скорее всего, уже известно, как называется студия.
- Когда проводим презентацию компании или даём визитку на мероприятии, то рассказываем о себе и точно произносим название.
Слева — все итерации, справа — итоговая версия
В последнем варианте всё сошлось — мы пришли к тому, чего хотели.
Реализовали потен циал девятки на разных носителях
Выбрали другие элементы
Дальше коротко расскажем, как подбирали оставшиеся элементы дизайна: цвета, шрифты, 3D-элементы.Шрифты
Нам нужен был минималистичный шрифт, чтобы попасть в общую концепцию. Поэтому мы искали моноширинные шрифты: у таких хорошая читаемость и их легко комбинировать с другими. Думали взять Roboto Mono, но в нём нам не хватило технологичности, поэтому остановились на Ingram Mono.
Основной шрифт — Ingram Mono, акцентный — Handjet
Цветовая палитра
Ещё на этапе подбора референсов почувствовали, что нас цепляет чёрный цвет. А ещё на нём легко расставить акценты, поэтому дизайнеру будет удобно работать. Выбрали этот цвет основным, а акцентными — салатовый, фиолетовый и серый.
Палитра нашего фирменного стиля
3D-элементы
Такие детали залипательно выглядят на сайте и помогают его оживить. Мы думали о них с самого начала, но взялись за создание ближе к концу. Сначала важно было проработать цвета и логотип.Думаем, что такие элементы стоит внедрять в дизайн, потому что они делают его узнаваемым. Нам нравится, как выглядит 3D с салатовым цветом. Один из первых элементов, которые мы создали, так и остался на сайте:
У дизайнера сразу появился образ стеклянных светящихся букв, когда он работал с лого
Стали экспериментировать
Мы не дожидались, когда будут готовы все элементы и гайдбук, и стали примерять новые элементы на разных площадках. Наш арт-директор советует пробовать айдентику в деле как можно раньше. Так вы посмотрите на фирменный стиль свежим взглядом и найдёте слабые места. Понимаем, что большой компании важно потратить время и создать яркий визуальный язык на старте, но малому и среднему бизнесу можно смело экспериментировать на ходу.Блог на vc.ru
Начали примерять наш стиль на обложки статей. На примерах «до» и «после» можно отследить процесс развития нашего дизайна — до и после создания стиля:
Было приятно видеть, как преображаются обложки
YouTube-канал
Там мы выпускаем подкаст «Код за деньги»: говорим о российском бизнесе с владельцами студий и сотрудниками ИТ-компаний, обсуждаем разработку, аутсорсинг и аутстаффинг.Оформили весь канал по-новому: поменяли шапку, аватарку и обложки к видео.
Youtube-канал в фирменном дизайне компании
