Дизайн-система: что это и нужна ли она сайту малого бизнеса

Что такое дизайн-система простыми словами

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

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

Примеры открытых дизайн-систем российских компаний:

Из зарубежных самая известная — Material Design от Google. Её принципы лежат в основе интерфейса Android и множества сайтов.

Полистать такие системы полезно и владельцу бизнеса: сразу видно, насколько подробно крупные компании описывают даже простую кнопку. У Gravity UI, например, для каждого компонента есть примеры, варианты размеров, описание свойств и готовый код. Малому бизнесу такая глубина не нужна, но сам принцип тот же: один раз договориться, как выглядит элемент, и дальше не изобретать его заново.

Из чего состоит дизайн-система

Обычно выделяют четыре уровня: от самых мелких решений к самым крупным.

Дизайн-токены

Токен — это название для конкретного значения. Вместо «красный #E8452C» в макетах и коде используется «основной цвет». Если через год бренд решит сменить оттенок, его меняют в одном месте, и он обновится на всём сайте.

Токены описывают:

• цвета (основной, акцентный, фон, текст, ошибки, успех);
• типографику (шрифты, размеры заголовков и текста, межстрочный интервал);
• отступы (шкала, например 4, 8, 16, 24, 32, 48, 64 px);
• радиусы скругления и толщину обводок;
• точки перелома для адаптива (при какой ширине экрана меняется сетка).

О сетке и отступах подробнее — в статье модульная сетка сайта.

Компоненты и их состояния

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

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

Документация

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

Дизайн-система, брендбук и UI-кит: в чём разница

Три термина постоянно путают. Коротко:

Брендбук отвечает на вопрос «как выглядит наш бренд», дизайн-система — «как выглядит и работает наш интерфейс». Цвета и шрифты обычно берутся из брендбука, а дальше дизайн-система раскладывает их по экранам и состояниям. Подробно о брендбуке — в статье разработка брендбука, о минимальном наборе фирменного стиля — в статье фирменный стиль для малого бизнеса.

Когда дизайн-система окупается

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

Признаки, что вам пора навести порядок:

• на сайте пять оттенков «фирменного» цвета и четыре вида кнопок;
• новая посадочная страница каждый раз рисуется с нуля и стоит как первая;
• после смены подрядчика половина страниц выглядит иначе;
• мобильная версия ломается по-разному на разных страницах;
• простая правка (цвет кнопки, шрифт) занимает дни.

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

Минимальная дизайн-система для небольшого сайта

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

1. Палитра. Основной цвет, акцентный, 2–3 оттенка серого для текста и фона, цвета ошибки и успеха. Для каждого — код и название.
2. Шрифты. Один для заголовков, один для текста (можно один на всё). Шкала размеров: H1, H2, H3, основной текст, мелкий текст — отдельно для компьютера и телефона.
3. Отступы. Шкала из 6–8 значений, кратных 4 или 8 пикселям. Правило: между секциями — одно значение, внутри карточек — другое.
4. Кнопки. Основная, второстепенная, текстовая ссылка. Все состояния, размеры для компьютера и телефона.
5. Формы. Поле ввода, выпадающий список, чекбокс согласия, сообщение об ошибке, сообщение об успешной отправке.
6. Карточки. Услуга, товар, отзыв, сотрудник: одна структура, разное наполнение.
7. Типовые блоки. Первый экран, преимущества, этапы работы, цены, отзывы, вопросы и ответы, форма заявки, подвал.
8. Иконки и изображения. Один стиль иконок, правила для фотографий (пропорции, обработка).
9. Короткие правила. Одна основная кнопка на экран, тексты кнопок — глаголы, заголовки без точки в конце.

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

Условный пример: сколько экономит мини-система

Пример условный, не кейс студии. Компания по установке окон в Нижнем Новгороде: основной сайт и 6 посадочных страниц под разные услуги в течение года.

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

Как заказать дизайн-систему и не переплатить

Пошагово:

1. Сначала решите, что нужно сейчас. Сайт-визитке не нужна документация на 100 страниц. Сформулируйте: «нужны токены, кнопки, формы и 8 типовых блоков».
2. Проверьте, что уже есть. Логотип, фирменные цвета, шрифты из брендбука — исходные данные для системы.
3. Попросите систему как часть дизайна сайта. Дешевле, чем отдельный проект потом. В нормальном процессе дизайнер всё равно создаёт стили и компоненты — важно, чтобы их передали вам в порядке.
4. Уточните, что вы получите. Файл с библиотекой стилей и компонентов, страницу-образец с правилами, при необходимости — переменные для разработчика.
5. Проверьте адаптив. Каждый компонент должен быть нарисован для телефона. Подробно — в статье адаптивная вёрстка.
6. Пропишите права и исходники в договоре. Без исходных файлов система бесполезна при смене подрядчика. Что обязательно прописать, — в статье заказать дизайн сайта.
7. Назначьте ответственного. Кто-то должен следить, чтобы новые страницы собирались по правилам, иначе через полгода система расползётся.

Частые ошибки

• Делают систему ради системы. Документация на 80 страниц для лендинга, которую никто не откроет.
• Рисуют компоненты без состояний. Кнопка без состояния «загрузка» и поле без ошибки — и разработчик придумывает их сам.
• Не связывают с кодом. Макеты живут своей жизнью, сайт — своей. Через год они уже не совпадают.
• Забывают о мобильной версии. Шрифты и отступы для компьютера на телефоне не работают.
• Не обновляют. Новый блок сделали на странице акции, но не добавили в систему. Следующий подрядчик его не найдёт.
• Копируют чужую систему целиком. Открытые системы крупных компаний — отличный образец, но их компоненты рассчитаны на сложные продукты и чужой бренд.
• Не учитывают тёмную тему. Если она планируется, цвета нужно сразу задавать токенами для обеих тем. Подробнее — в статье тёмная тема сайта.

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