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

UI-кит

Чтобы разработчикам было проще заверстать всё, что мы нарисовали, мы собираем для них UI-кит: сборку всех компонентов, которые используются в проекте, с их подробным описанием.

01. Компоненты

В проекте есть UI-кит с представлением для всех компонентов, которые используются в интерфейсе. В зависимости от компонента, должны быть отображены следующие состояниям:

  1. наведении
  2. дефолт
  3. нажатие
  4. фокус
  5. обработка данных
  6. ошибка

02. Данные

Компоненты должны быть отрисованы с учетом разных данных:

  1. минимальный и максимальный контент
  2. пустые и заполненные компоненты: например, пустая карточка без изображения и заполненных данных

03. Стили

В UI-ките должны быть представлены все стили, которые используются в проекте:

  1. H1-H4 заголовки
  2. текстовые стили
    1. наборный
    2. второстепенный
    3. дополнительный
    4. кнопки
  3. палитра цветов
  4. эффекты
    1. тени
    2. размытия
  5. базовые модули для отступов

04. Графические материалы

Все графические материалы, которые используются в проекте собраны в одном месте:

  1. иконки
  2. изображения
  3. бейджик для социальных сетей
  4. фавиконки (270x270, 172x172, 64x64)

📃 Материалы

  1. Пример UI-кита из проекта «Привезем»
  2. Пример UI-кита из проекта «Sparx»
  3. Пример UI-кита из проекта «EdgePlayer»

✅ Чек-лист