Mobios
April 28, 2019

Правильное построение UI-kit. Тема 5

Работа на время.

Передача готового макета верстальщику

Давайте для начала разберемся, что такое UI kit. Дословно это переводится как «набор пользовательского интерфейса», то есть это файл(или несколько файлов), содержащий в себе элементы интерфейса, выдержанные в едином стиле.

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

Структура может быть следующей:

Сетка – модульная сетка+шрифтовая(интерльяжная)

Компановка страниц – зонирование, навигация, header, footer

Шрифтовая схема – принципы верстки текстов, заголовки, выносной текст

Цветовая схема – кодирование, зонирование

Элементы интерфейса- кнопки, переключатели, поля ввода и т.д.

Графика – иконки, иллюстрации

Фотографии – размеры, ракурсы, обработка

Анимация

Интерактив Стоит учесть: если вы разрабатываете адаптивный дизайн, важно описать поведение элементов при разных разрешениях страницы.