Дизайн-система: зачем она даже небольшому проекту

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

01Что это такое

Дизайн-система это набор правил и готовых элементов, из которых собираются все материалы бренда. В неё входят:

• токены: цвета, размеры шрифтов, отступы, скругления, записанные как точные значения;
• типографика: какие шрифты, в каких размерах и для чего;
• сетка: как устроены макеты разных форматов;
• компоненты: кнопки, карточки, плашки, иконки, шапки;
• правила: как всё это сочетается и чего делать нельзя

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

02Пример: партнёрская программа

Для партнёрской программы крупной компании в сфере кибербезопасности я делал ребрендинг. Главный элемент стиля это светящаяся оранжевая дуга на тёмном космическом фоне. Красиво, но как быть, когда нужен баннер 1 к 8 для сайта или вертикальный постер?

Поэтому в систему вошла модульная сетка форматов от 1:8 до 8:1: для каждой пропорции понятно, где стоит логотип, где заголовок и как ложится дуга. Цвета заданы точными значениями, orange #FE6E36 и space #150721, типографика на Ony Sans и Ony Semimono. После этого внутренние команды и партнёры могут делать новые материалы сами, не заказывая каждый баннер у дизайнера. Подробнее в кейсе о ребрендинге

03Зачем это небольшому проекту

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

04С чего начать

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

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