Когда бренд закрепляется на рынке, ему нужна дизайн-система: как мы создали гайдлайн для визуальной коммуникации клиента

Частая проблема у компаний: разные дизайнеры по-своему интерпретируют стилистику бренда. Причина — отсутствие понятных приемов, принципов и правил, по которым строятся макеты. С такой ситуацией столкнулась компания Sleep.8, и наша команда maryco разработала для нее подробный гайдлайн с новыми стилеобразующими элементами под разные ценовые сегменты.

О чем вы узнаете в статье, или что включает дизайн-система бренда:

— Зачем клиенту понадобилась дизайн-система

— Правила использования логотипа

— Шрифтовые пары

— Разработке разных цветов для ценовых сегментов и праздников

— Гибкий паттерн

— Правила отбора фото и фильтр для маски в Instagram

— Композиции и приемы для видео

— Разные лэйауты для креативов

— И наконец, как гайдлайн ускоряет создание креативов

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

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

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

Что мы должны были сделать:

Несколько версий логотипа

Кажется, что логотип — неизменная константа, и достаточно просто придумать одно изображение. Но это не так. Во-первых, необходимо учесть охранное поле (свободное пространство) вокруг логотипа, чтобы он легко считывался и не «склеивался» с другими элементами.

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

У клиента уже была полная версия логотипа и сокращенная знаковая, последняя использовалась для аватаров в соцсетях и в качестве элемента на макетах. Мы сформулировали требования к размеру логотипа в зависимости от носителя и зафиксировали охранное поле. Для полной горизонтальной версии мы создали дополнительное решение — фоновую плашку: она нужна, чтобы логотип хорошо читался поверх фотографий или на цветастом фоне.

Так выглядит проработанный раздел гайдлайна о логотипе.

Шрифтовые сочетания

Шрифты — один из элементов фирменного стиля, инструмент, с помощью которого создается визуальный порядок. Шрифт позволяет выстроить визуальную иерархию: отделяет заголовок от другой текстовой информации. А еще есть акцидентный шрифт, чтобы выделить ключевую фразу или слово.

Поэтому важно подобрать шрифтовые сочетания и прописать, как они соотносятся друг с другом. Для Sleep.8 мы оставили один ведущий шрифт для текстовых блоков — Airport, клиент использовал его раньше. И подобрали два дополнительных: акцидентный Dela Gothic One и второй наборный Commissioner. В последнем тонкие начертания, которые по стилистике подходят для конкретного ценового сегмента, о котором мы скажем дальше.

Фирменные цвета важно адаптировать под использование в онлайн-среде: один и тот же оттенок может по-разному воспроизводится на печатных и диджитал-носителях. В брендбуке у нашего клиента были приглушенные цвета. Мы освежили их, подобрав более яркие оттенки для рекламных баннеров.

Кроме того, мы ввели цветовое кодирование. Обсудив с клиентом новое решение, выбрали три палитры по ценовым сегментам.

Низкий ценовой сегмент

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

Четверка. Преобладает нейтральный темный или светлый фон. Один из акцентных цветов используется в большей пропорции.

Двойка. Преобладает нейтральный темный или светлый фон. Два акцентных цвета используются в близкой пропорции.

Фон. Один из акцентных цветов используется как фон, остальные оттенки — монохромные.

Средний ценовой сегмент

Здесь мы сохранили прежнюю палитру: она состоит из серого и синего. Цветовые акценты в макетах служат не в качестве фона, а подчеркивают типографику: например, появляются в заголовках.

Сегмент люкс

Для креативов в рамках этой категории мы выбрали серо-графитовую гамму, она нейтральная и легко воспринимается. Кстати, интересная деталь: темно-зеленый цвет не подходил для этих задач, клиент сказал нам, что в Испании он не считывается как атрибут премиального сегмента.

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

Раньше Sleep.8 использовала в макетах паттерны-линии. Мы предложили более сложные и современные геометрические паттерны. Они строятся на сочетании треугольника и прямоугольника со скругленными углами: достаточно соединить вместе две фигуры в любую композицию, а потом — закруглить углы. Получившиеся комбинации форм используются как фон или выделяют другие элементы креатива: например, фотографию продукта.

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

Мы разбили все снимки на категории:

— Люди, взаимодействующие с продуктами компании.

— Продукция.

— Тематические фото.

— Среда, то есть интерьеры магазина или дома с товарами Sleep.8.

Кроме того, мы собрали примеры неудачных фотографий и объяснили ошибки.

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

Приемы из пресета мы использовали и для маски в Instagram. С ее помощью сотрудники Sleep.8 смогут снимать товары и автоматически применять нужную цветокоррекцию: например, для публикации в видеосториз прямо из салонов.

Мы придумали приемы для динамических креативов разных ценовых категорий. В нижнем ценовом сегменте анимация более подвижная и насыщенная по приемам.

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

В люксовой категории приемы наиболее сдержанные и плавные.

Мы созванивались с маркетологами клиента, чтобы узнать, какие макеты они используют для рекламы, какие есть рубрики. Для разного типа рекламных креативов мы продумали свои принципы построения.

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

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

Фотография и логотип на плашке.

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

Макет из двух частей: фотография и текст расположены отдельно. Для таких носителей мы разработали несколько вариантов сеток.

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

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

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

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

Над проектом работали:

Вероника Октябрь — арт-директор;

Андрей Тельминов — креативный дизайнер;

Розалия Каримова — моушн-дизайнер.