UI-Kit

Что это?

UI-Kit – это набор готовых решений пользовательского интерфейса. Зачастую это кнопки, инпуты, меню, чек боксы, разные переключатели, и прочие стандартные элементы взаимодействия с сайтом.

Для чего нужно это знать?

Именно UI-kit является первым и обязательным элементом создания любого качественного UI-дизайна. К тому же он помогает сэкономить на создании новых элементов дизайна. Если в компанию приходит, например, новый человек, ему не нужно долго искать кнопку, которую следует вставить на сайт – она уже есть в огромном документе дизайн-системы, пользоваться которым могут все сотрудники с определенным уровнем доступа. У дизайн-системы есть ещё одно преимущество — коммуникация в команде. С её помощью создавать продукт можно в разы быстрее, ведь каждый участник процесса точно знает что и как ему делать: разработчик знает паттерны создания прототипа для вашего ресурса, дизайнер и разработчик могут реализовать компоненты вместе, а проект-менеджер всегда может указать какой именно элемент следует изменить и почему. Задача визуального языка – передать ценности бренда потребителю. Например, чтобы передать домашнюю атмосферу, можно использовать теплые тона и соответствующие изображения. Чтобы передать какой-то другой характер бренда, например, строгость и честность, использовать определенные шрифты и формы.

Какие базовые понятия включает этот навык?

UI Kit — основа компонентного дизайна. Так называется подход, при котором дизайнер сначала создает отдельные элементы, а потом собирает из них интерфейс. - Цвета и шрифты. Добавление в набор основных цветов, которые используются в дизайне, помогает сделать интерфейс гармоничнее. Элементы не будут смотреться чужеродно. - Шрифты добавляются по той же причине, что и цвета. - Поля для ввода. Например, это поле для поиска или авторизации. Обычно поля — компоненты форм, но в наборе их могут размещать и отдельно. У текстовых полей может быть до семи-восьми вариантов отображения: обычный, при наведении и нажатии, в момент ввода, после ввода, при ошибке и другие. - Кнопки и ссылки. Обычно каждая кнопка представлена в наборе минимум в трех вариантах. Они показывают, как элемент выглядит в обычное время, в момент наведения или нажатия и в ситуациях, когда он неактивен — то есть когда кнопку нельзя нажать. - Формы. Например, форма регистрации или комментирования, подписки на рассылку или обратной связи. Удобство заполнения и дизайн влияют на конверсию. - Иконки. Графические элементы необходимы для создания управляющих и информационных компонентов. Например, кликабельное изображение «Корзины» в интернет-магазинах либо яркий кружок, который говорит о новых уведомлениях. - Элементы навигации, хедеры и футеры. Содержат типовые элементы либо выглядят шаблонно. Например, футеры содержат список контактов и вспомогательный блок навигации. - Виджеты. Это интерактивные блоки, которые отображают часто обновляемую информацию. Например, погоду, курс валют и прочее. Простые виджеты могут быть в наборах, особенно в тематических — созданных специально для определенной сферы. Например, в личном кабинете обучающего или развивающего сервиса может быть виджет с прогрессом, взятый из UI Kit для EdTech. - Элементы для e-commerce. Это элементы каталогов, карточек товаров, фильтры, блоки с популярными или просмотренными товарами и прочее. - Другие графические элементы. Это поп-апы, инфографика, диаграммы и другие шаблонные графические компоненты.

Где я могу освоить этот навык?

Освоить навык «Ui-Kit» ты можешь проходя обучение на нашем менторинге по программе «UX/UI Дизайн». В первом проекте ты познакомишься с этим навыком и с тем, как с ним работать, а в следующих трех укрепишь свои знания, посредством использования знаний, полученных на первом этапе.