Перейти к основному содержимому

От брендбука к UI-киту

Как превратить брендбук в токены и UI-компоненты, которые команда разработки внедряет на сайте и в продукте.

Обсудить проект
1 мин чтенияЕва Кауфман · Креативный директор

Брендбук, который живёт только в PDF, не переживает продуктовый спринт. Задача креативного директора — превратить цвет, типографику и тон в систему, которую разработчики применяют без перерисовки каждого экрана.

Сначала токены, потом страницы

Цвет, шкала шрифтов, отступы и радиус — это именованные токены, а не разовые hex. Один токен на маркетинговом сайте и в продукте делает обновление бренда одной правкой.

Компоненты в духе бренда

Кнопки, карточки и формы должны выглядеть как бренд без ручного CSS на каждой странице. Опишите состояния hover, focus, ошибка и disabled — кит покрывает реальный UI, не только hero.

Передача, которую команда внедрит

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

Ключевые выводы

  • Сначала назовите цвет, шрифт и отступы токенами.
  • Опишите состояния компонентов, а не только hero.
  • В спецификации должен быть токен, а не обрезанный скриншот.

Связанное

    От брендбука к UI-киту | LULA-SOFT