UI Kit для дизайнеров — что это такое и зачем необходим, как создать и использовать в проектах

Большинство пользователей с первого взгляда узнает лендинг или рассылку от МТС, Тинькофф и Яндекса. Все благодаря фирменным цветам, шрифтам, иконкам и другим деталям, которые формируют запоминающийся визуальный образ брендов. Чтобы закрепиться в сознании аудитории, компании стремятся соблюдать единый стиль на всех платформах: на сайтах, в мобильных приложениях, в социальных сетях и в маркетинговых кампаниях. Для этого они разрабатывают брендбуки и гайдлайны с четкими указаниями по дизайну, а также UI-киты. Что это такое и зачем они нужны, разбираемся в статье.

UI Kit — что это такое

UI Kit (User Interface Kit) — библиотека готовых компонентов для проектирования интерфейса. Она состоит из кнопок, иконок, переключателей, полей для ввода, списков, таблиц и других UI-элементов, с которыми взаимодействуют пользователи. Чтобы каждый раз не отрисовывать объекты вручную, дизайнеры сохраняют их в отдельный документ, а затем собирают из них страницы сайтов и экраны мобильных приложений, как из кирпичиков. Помимо графических элементов, в UI-набор входят стандарты оформления: правила использования шрифтовых пар, цветовой палитры, отступов, сеток и анимированных эффектов. Вместе они формируют единый визуальный стиль.

Крупные компании создают собственные UI-киты, которые отражают идентичность бренда. Однако в интернете доступны и бесплатные наборы для сайтов, десктопных программ и приложений для веб, iOS и Android. Они учитывают специфику каждой платформы, ее стилистику и способ использования. Их разрабатывают UX/UI-дизайнеры: они оформляют документы в форматах, которые поддерживают графические редакторы. Тем, кто работает в Фигме, подходят файлы с расширением .FIG. А тем, кто предпочитает фотошоп, — PSD-файлы.

UI Kit для сервиса доставки еды

Как UI Kit применяется в дизайне и какие задачи решает

UI-кит облегчает работу дизайнеров и разработчиков по созданию сайтов и приложений. Рассмотрим основные задачи, которые он решает.

Стандартизация дизайна. UI-кит помогает добиться единообразия интерфейса и согласованности внешнего вида цифровых продуктов компании. Дизайнеры используют одинаковые элементы на всех страницах сайтов и приложений, поэтому они выглядят, как единое целое. Кроме того, благодаря готовым наборам компания соблюдает фирменный стиль на разных площадках, что способствует росту узнаваемости бренда.

Оптимизация пользовательского опыта. UI Kit повышает юзабилити продукта, поскольку гарантирует правильную логику работы всех элементов. Похожие объекты выглядят и функционируют одинаково, что упрощает взаимодействие с интерфейсом и делает его интуитивно понятным.

Экономия времени. Даже на небольших лендингах встречаются кнопки и формы, которые повторяются в нескольких местах. Что уж говорить о крупных интернет-магазинах, корпоративных порталах и новостных изданиях. Чтобы не создавать одинаковые элементы с нуля, их помещают в UI-кит, а оттуда вставляют на страницы в нужное место — это ускоряет проектирование интерфейса. Если потребуется изменить дизайн отдельных компонентов, достаточно отредактировать мастер-элемент в наборе, а остальные объекты обновятся автоматически.

Масштабирование. В процессе развития проекта в его структуре могут появляться новые разделы и блоки. Они должны сочетаться с существующими страницами и экранами. UI-кит помогает быстро расширять сайты и приложения и сохранять общий стиль.

Улучшение командной работы. UI-набор помогает сделать совместную работу дизайнеров и разработчиков комфортнее. Специалисты получают образцы, как должны выглядеть и вести себя компоненты интерфейса. Они служат хорошей подсказкой как для старожилов, так и для новичков в команде. По ним сверяют кодировку цвета, размер и прочие параметры. К тому же, скачать нужный элемент из UI-кита немного быстрее, чем искать его в десятках макетов или запрашивать у коллег.

Основные элементы UI Kit

Содержимое набора зависит от специфики проекта, однако базовые элементы UI-кита часто повторяются. Рассмотрим их подробнее.

Цвета

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

Оттенки, которые включают в набор:

• Primary — основной цвет. За его основу берут фирменный оттенок бренда.
• Secondary — дополнительный цвет. В качестве него используют второй фирменный цвет бренда или более светлый оттенок основного.
• Success — цвет для выделения успешных действий, таких как выполненный вход или оплаченный заказ.
• Error — цвет, предупреждающий об ошибках, например, неправильном пароле. 
• Links — цвет ссылок. 
• Text — цвет текста. Его пишут черным или серым, чтобы он хорошо выделялся на фоне и был читабельным.
• Background — цвет фона.
• Градация серого — оттенки, которые используют для отделения карточек и кнопок от белого фона.
• Темная тема — дополнительные оттенки фона, текста и элементов интерфейса для создания «ночного» режима сайта или приложения.

Вариант оформления цветовой схемы

Шрифты

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

• шрифт;
• начертание;
• размер;
• межстрочный интервал;
• высота строки.

Чтобы текст смотрелся гармонично, рекомендуют использовать 1-2 шрифта и создавать визуальную иерархию с помощью стилей. Если планируется адаптация сайта под мобильную версию, в UI-ките указывают особенности типографики для каждого типа устройств.

Примеры оформления заголовков, подзаголовков и текстовых блоков в UI-наборе

Иконки

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

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

Подборка иконок для UI-набора

Поля для ввода

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

• Initial — начальное состояние;
• Active — поле выбрано, по нему кликнули курсором;
• Typing — ввод текста;
• Filled — поле заполнено;
• Disabled — поле неактивно;
• Success — поле заполнено верно;
• Error — ошибка.

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

Разные состояния полей для ввода в UI-наборе

Кнопки

Кнопки встречаются во всех современных интерфейсах без исключения. Они бывают разных видов: основные и второстепенные, текстовые и с иконками. Обычно их отрисовывают и добавляют в набор в четырех вариантах:

• Regular — спокойное состояние;
• Hover — при наведении курсора;
• Pressed — при нажатии;
• Disabled — кнопка неактивна.

Размер объектов может отличаться в десктопной и мобильной версиях продукта, поэтому в UI-кит включают маленькие, средние и большие кнопки. 

Формы

К ним относят статичные блоки и всплывающие окна: формы регистрации, обратной связи, оформления заказа и подписки на рассылку. Этим элементам уделяют особое внимание, поскольку они являются конверсионными объектами. Чем удобнее они спроектированы, тем легче пользователям взаимодействовать с ними и тем выше шансы, что они выполнят целевое действие. Формы состоят из полей для ввода, чекбоксов и радиокнопок. В UI-кит их вставляют в виде готовых блоков.

Пример оформления формы в UI-наборе

Хедеры и футеры

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

• Хедер — шапка сайта, отображается в верхней части страницы. В ней размещают ключевые компоненты навигации, такие как меню, поисковая строка, контактные данные, корзина и личный кабинет. У хедера бывает несколько состояний, каждое из которых необходимо отрисовать и поместить в набор. Например, после авторизации на сайте, в нем должны появиться элементы управления профилем.
• Футер — самый нижний блок сайта, также известный как подвал. Он может дублировать меню веб-ресурса, содержать контактную информацию, форму подписки или обратной связи, ссылки на соцсети и правовые документы. Состояние футера не меняется, поэтому достаточно отрисовать его один раз.

Футер в UI-ките

Навигационные элементы

Навигация — важная часть любого интерфейса. От того, как она продумана, зависит, как быстро пользователь сможет сориентироваться на сайте или в приложении и насколько удобно ему будет переключаться между разделами. В UI Kit могут входить:

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

Навигационные элементы отрисовывают в разных состояниях: в свернутом виде, при скролле и с пунктами меню при наведении курсора. Поскольку MacOS и Windows, iOS и Android имеют существенные различия, навигацию подстраивают под особенности каждой платформы. 

Раздел навигации в UI Kit

Виджеты

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

Пример оформления виджетов в UI-наборе

Компоненты для e-commerce

У сферы интернет-торговли — своя специфика, которая отражается и на содержимом UI-кита. Набор для интернет-магазинов и маркетплейсов содержит такие элементы как каталог, фильтры, блоки с популярными и просмотренными продуктами. Рассмотрим один из самых распространенных компонентов — карточку товара. Она включает в себя заголовок, текст, картинку и кнопку с call-to-action (призывом к действию) и другие детали. Например, артикул и переключатель фотографий на случай, если их прикреплено несколько.

Оформление карточки товара в UI-ките

Остальные графические элементы

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

Видеоплеер — дополнительный элемент в UI-наборе

UI Kit, гайдлайны и дизайн-системы: в чем разница

UI Kit часто путают с гайдлайном и дизайн-системой. Разберемся, чем отличаются эти документы. 

• UI-кит содержит только визуальные элементы и шаблоны, которые используют для проектирования интерфейсов. 
• Гайдлайн объясняет, как использовать элементы из UI-набора. В нем прописывают требования к размещению объектов в интерфейсе, правила их сочетания и расставления акцентов. 
• Дизайн-система включает в себя гайдлайн, UI-кит, руководство по брендингу, редполитику и другие документы, которые закрепляют философию бренда, принципы взаимодействия с аудиторией, tone of voice и методологию дизайна. 

Где можно взять UI Kit

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

Самостоятельное создание

Самостоятельная разработка UI-кита подходит крупным проектам, которым важно соблюдать узнаваемый фирменный стиль. Она позволяет создать уникальные элементы интерфейса, которые будут ассоциироваться с брендом и формировать его визуальный образ. Кроме того, такой подход позволяет продумать внешний вид и поведение компонентов. Доверить эту задачу можно штатному специалисту или отдать ее на аутсорс — фрилансеру или дизайн-студии. 

Процесс разработки состоит из 4-х этапов:

• Прототипирование. Сначала создается прототип — схематичная модель продукта, которая отображает расположение экранов и элементов интерфейса. Это нужно, чтобы составить список объектов и шаблонов, которые предстоит спроектировать.
• Создание стилей. Работа над UI-китом начинается с проработки цветовых схем и типографики, поскольку объекты предстоит раскрасить разными красками, а к некоторым из них добавить надписи.
• Разработка UI-элементов. Их отрисовывают в одном из графических редакторов, например, Sketch или Figma. Первым делом создают «атомы» — самые маленькие компоненты интерфейса: иконки, чекбоксы и инпуты. Из них складывают «молекулы», например, кнопки и формы. А молекулы объединяют в «организмы» — карточки товаров, хедеры и футеры. Из нескольких организмов получается шаблон, например, каталог интернет-магазина.
• Оформление документа. Все элементы объединяют в одном файле. Чтобы упростить навигацию по нему и быстро находить нужные компоненты, его делят на тематические разделы.

Готовые наборы элементов UI Kit

Для разработки небольшого сайта или лендинга подходят готовые наборы, которые можно купить или скачать бесплатно в интернете. В сети доступны UI-киты для разных платформ и ниш бизнеса. Элементы желательно уникализировать и адаптировать под фирменный стиль компании, например, «покрасить» в корпоративные цвета. 

Делимся подборкой источников для поиска качественных UI-наборов:

• UI8. На этом сайте профессиональные дизайнеры публикуют UI Kit для Figma, Sketch, Adobe XD или Framer. В библиотеки есть элементы, выставленные на продажу, и бесплатные компоненты — их ищите в разделе Freebies.
• Freepik. На данный момент на портале доступно около 9 000 элементов по запросу «UI Kit». Это векторные изображения в формате EPS, который подходит для Adobe Illustrator. В сутки можно скачать до 10 объектов бесплатно.
• UI Store. В разделе UI Kits вы найдете готовые экраны, шаблоны и элементы для Figma, Sketch и Adobe XD. Обратите внимание, разрешено ли использовать выбранный вами набор в коммерческих целях и нужно ли указывать его автора на сайте.
• Figma Elements. Открытое сообщество дизайнеров, которое делится компонентами для проектирования интерфейсов в Фигме. Наборы разделены по тематикам: для трэвел, финтех, фитнес и других видов проектов.
• UI Garage. Киты удобно сгруппированы по типам продуктов. Есть наборы для лендингов, мобильных приложений, вайрфреймов и сайтов. Макеты можно использовать без указания авторства разработчиков.

ТОП-7 примеров лучшей реализации UI Kit

Рассмотрим 7 примеров удачных UI-наборов. Они подскажут, как грамотно организовать библиотеку элементов и какие компоненты в нее включить. 

VK UI. ВКонтакте — самая популярная социальная сеть в России. Она постоянно масштабируется и модернизируется, пополняется новыми разделами и функциями. Сохранять единый стиль и быстро расширять платформу разработчикам помогает дизайн-система, которая объясняет, как соединить визуальный язык с технической реализацией. Документ удобно структурирован: каждой группе элементов посвящен отдельный раздел. Среди них — баннеры, кнопки, формы, счетчики и другие виды объектов.

UI Kit ВКонтакте

Base by Uber. Цифровая экосистема Uber включает в себя сервисы для заказа такси, аренды автомобилей, доставки продуктов и другие приложения, которые востребованы у клиентов по всему миру. Чтобы продукты выглядели одинаково на Android, iOS и веб, компания разработала удобный UI Kit, в котором зафиксирован дизайн элементов для разных платформ.

UI-набор экосистемы Uber

Газпром. У компании огромное количество дочерних организаций, у многих из них — свои сайты и приложения. Чтобы поддерживать имидж, бренд создал отдельный сайт Consta, на котором собраны UI-наборы для разных операционных системы и гайды по их использованию. 

UI-кит Газпрома

Тинькофф. У онлайн-банка целое семейство проектов, которое объединяет единый визуальный стиль. Быстро выпускать их на рынок помогает Taiga UI — набор готовых компонентов для создания гибких интерфейсов мобильных и десктопных приложений в сфере финансовых услуг. Элементы адаптированы под разные модели устройств. Их отличает гибкость — каждый объект можно подогнать под специфику проекта.

Фрагмент UI-кита Тинькофф

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

Материалы для проектирования мобильных приложений Госуслуг

Иви. Онлайн-кинотеатр доступен на разных устройствах, от смартфонов до телевизоров. Чтобы обеспечить удобство его использования на всех девайсах и ускорить разработку интерфейсов, команда продукта собрала UI-кит, который со временем превратился в дизайн-систему. Особое место в ней занимают пиктограммы: авторы признались, что их разработка — отдельный подпроект. Благодаря документу сервис интуитивно понятен пользователям, а его оформление не «провисает» ни на одной из платформ. 

Пиктограммы из UI-набора Иви

Mediascope. Портал компании регулярно пополняется свежими исследованиями. Чтобы быстро верстать новые страницы, разработчики подготовили шаблоны, которые достаточно отредактировать под специфику контента. 

Цветовая палитра Mediascope в UI-ките

Заключение

Создание UI-кита — объемный проект, который требует вложения сил и времени. Однако в будущем он сэкономит рабочие часы дизайнерам и фронтенд-разработчикам, ускорит релиз цифровых продуктов и упростит их поддержку. Набор готовых элементов гарантирует визуальное единообразие всех страниц и экранов сайтов и приложений, а также удобство их использования клиентами.