UI-кит 🎨

В 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)

Поведение макетов ⚙️

Учитывайте в работе эти нюансы, чтобы добиться хорошего результата:

01. Выравнивание

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

02. Адаптив

Макеты должны быть адаптированы под базовые разрешения, утвержденные на конкретном проекте. Минимально должна быть отрисована мобильная версия и оставлены комментарии по поведению макетов на FullHD разрешении (1920px)

03. Сценарии

В макетах отображены все сценарии, которые пользователь может пройти в рамках взаимодействия с интерфейсов:

1. получение данных с сервера
2. отправка данных на сервер
3. валидация инпутов в форме
4. успешное состояние формы
5. отдельные сценарии функционала (например: поиск, корзина, оформление заказа, пагинация и т.д.)