Generated with Avocode. Generated with Avocode. Generated with Avocode. Group 15 close hat Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. Generated with Avocode. path40

UI kit — что это и зачем дизайнеру

Начинающим дизайнерам сложно уследить за всеми терминами, особенно, когда вокруг столько противоречивой информации. Разбираемся, что такое UI kit.

UI kit — что это такое?

UI kit — это готовый набор графических элементов в формате исходного файла (например, PSD или Sketch). Один дизайнер создает набор и выкладывает в общий доступ или продает, а другой скачивает и использует для своего интерфейса.

Пример UI kit от Mike | Creative Mints

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

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

Какие задачи решает UI kit

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

Унификация для сложного проекта

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

Создание базы знаний

Когда над проектом работают сразу несколько дизайнеров и разработчиков, а в команду постоянно приходят новые люди, становится труднее передавать знания. Один дизайнер знает, как должен выглядеть и работать элемент, новичку нужны подсказки. Чтобы всякий раз не тратить время «старожилов» команды, тот может заглянуть в kit.

Ускорение работы

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

Итак, если у вас постоянно развивающийся сложный проект, над которым работает большая команда (например, интернет-магазин), — вам нужен UI kit. Если вы делаете небольшой конечный продукт малой командой (например, разрабатываете лендинг), — можно обойтись без кита.

Какие элементы входят в UI kit

Набор элементов кита зависит от того, для чего его создавал дизайнер. UI kit будет разным для e-commerce и корпоративного сайта, блога и музыкального плеера. Самые распространенные элементы:

Элементы навигации

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

Навигация в UI kit. Источник.

Формы

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

Формы в UI kit. Источник

Футеры

Они могут содержать только контакты, если вы делаете лендинг, или дублировать меню, если интернет-магазин.

Подвалы в UI kit. Источник

Виджеты

Все показатели на дашборде, которые важны для сайта: количество подписчиков, последние фото в Instagram, погода, курс валют и так далее.

Виджеты в UI kit. Источник

Контролы и поля ввода

Кнопки, поля ввода и остальные базовые элементы.

Состояние кнопок в UI kit. Источник 

Элементы блога

То, как будут отображаться новости и статьи.

Элементы блога в UI kit. Источник

Элементы e-commerce

Фильтры, каталог, карточка товара, разные варианты отображения, похожие и «вы недавно смотрели»-товары.

Как вы уже поняли, многие дизайнеры оформляют UI kit в виде презентации. В ней они часто показывают примеры готовых страниц, собранных из разных элементов. По сути, UI kit — это самодостаточный продукт, который можно продать и купить. Для этого существуют специальные торговые площадки, такие как Designmodo Market, UI8, Creative Market и другие.

Можно ли сделать универсальный UI kit или использовать один и тот же на разных проектах? Теоретически да, но обычно киты разрабатываются индивидуально под конкретный проект — и учитывают его бизнес-задачи и фирменный стиль.

На многих сервисах можно найти и бесплатные UI kit — например, на Freebiesbug и Graphic Burger. Это удобно для начинающих дизайнеров: можно использовать готовые решения в своих интерфейсах.

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

Курс «UX-дизайн»
Создавайте эффективные и полезные решения при помощи нового уникального подхода в дизайне. В течение курса вы узнаете, как сделать не просто визуально привлекательные проекты, но и кардинально изменить мышление бизнеса в диджитал, оцифровать любой продукт и сделать его максимально конкурентоспособным.
  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Комментарии

0
Чтобы оставить комментарий,  авторизуйтесь
Хочешь получать персональную подборку статей по дизайну?
Подпишись на рассылку Skillbox
Новогодняя распродажа курсов