Ищем разработчика, который без ума от JavaScript и клёвых анимаций
Дизайн
a.timohov
2166

UI Kit: от идеи до распространения

Доброго времени суток дизайнеры и простые читатели vc.ru. В этой статье хочу поделиться своим опытом создания UI Kit'а, так как статьи на эту тему слишком поверхностные и вообще мне не помогли. Мы рассмотрим как создать дизайн-систему пошагово от начала до конца. Итак начнем.

В закладки

Идея

Не буду долго рассуждать на эту тему, иначе вам быстро надоест статья и вы её закроете. Просто придумайте для какой сферы вы создаёте Kit. Я разбил дизайн-систему UI Kit на две ветки:

- целевая (например для магазинов одежды или социальных сетей);

- абстрактная (проектируя общие элементы, такие как primary и secondary buttons, checkbox, switch buttons и тому подобные широконаправленые элементы)

В моём случае это была абстрактная дизайн-система.

Просмотр конкурентов

Перед началом работы стоит просмотреть уже существующие UI Kit'ы (желательно близкие к вашей теме). Такие можно найти на различных ресурсах по дизайну, будь-то Freebiesbug, UPlabs или просто проекты на Behance.

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

Начало

Итак. Что рисовать мы придумали, для какой целевой аудитории будет UI Kit тоже определили. Теперь выбираем программу для проектирования интерфейсов и начинаем. Инструментом дизайна, в моем случае, выступила Figma.

Создаём frame. Размер будет меняться, поэтому можно выбрать один из готовых шаблонов.

Определимся с основным цветом Kit'a: я выбрал матовый розовый (pink). Этот цвет будет использоваться больше всего при проектировании всех элементов интерфейса.

Объявление на vc.ru Отключить рекламу
Маркетинг
Как бизнесу заработать в соцсетях в 2020 году: полноценное руководство с прогнозами и примерами
Пошаговая рабочая стратегия продвижения бизнеса в соцсетях с медиапланом и примерами внедрения от директора «Студии…

Первый элемент

Советую группировать элементы по назначению на страницах (page): buttons, switchers/checkers, other elements и другие.

Я начал с primary button, что и вам советую. От неё проще всего отталкиваться, т.к. компонентов в ней по минимуму. Размер кнопки выбираете сами, но учтите, что подобные ей кнопки тоже должны быть аналогичного размера (secondary, disabled и т.д.). Заливаем, выбранным ранее, цветом плашку и подбираем цвет текста по контрасту. Наша первая кнопка готова!

Создаём стили

В Figma есть такая функция как "Styles", которая выступает своеобразной палитрой всех цветов в данном UI Kit.

Создаём стили из тех цветов, что у нас появились после первой кнопки (в стили заносим цвет текста и цвет самой кнопки; соответственно их и называем). Это нужно для того, чтобы пользователь мог изменить цвет всех элементов с того самого pink на любой другой, не бегая по всем страницам файла.

Сам я этого не сделал, но и элементов в моём примере не так уж много :)

Компоненты

После создания первого элемента UI Kit'а группируем всё содержимое кнопки (а именно: фон и текст) в компонент (Component). Далее выбираем слой с текстом и в боковом меню справа настраиваем положение текста при изменении размера кнопки. Это адаптивность. То есть ваш текст будет по центру даже если ширина плашки будет длиннее, чем в вашем первоначальном варианте.

Процесс

Дальше по накатанной: создаём элемент, создаём стили, если появился новый цвет, группируем в компонент, адаптируем.

Элемент за элементом и вот уже на вашем фрейме целый набор готовых решений.

Почти готово

Теперь, когда элементы готовы и расположены по нужным местам и страницам, можно создать экран-презентацию. Он будет самым первым, что увидит пользователь. Тут я вам не помощник. Каждый дизайнит по своему :)

После того, как вы всё закончите, сохраните проект в том формате, который поддерживает ваша программа.

Распространение

Ресурсов по распространению дизайн-работ немало, но не все одобрят вашу работу. Есть платные (просто забудьте о них, не приносят доход практически) и бесплатные (Freebiesbug, FreebiesFigma, UI Bundle и тому подобные). Обычно на вторых есть кнопка "Submit freebies". Заполните форму и отправьте ваш UI Kit на модерацию.

Возможно вам повезёт, его одобрят и опубликуют на своём сайте.

Если всё таки жажда денег берёт верх, то загрузите ваш макет на торговую площадку для креативов gumroad.com или любую подобную, выставьте цену и таким образом собирайте деньги с продажи вашего UI Kit'а.

P.S. Никто не запрещает продавать вручную, предлагая и всячески пиаря, свой продукт кому угодно.

Возможно я что-то упустил или неправильно рассказал, но я постарался, практически на пальцах, объяснить принцип разработки UI Kit'а.

Кому интересно, вот мой UI Kit. Его можно скачать бесплатно с Dropbox.

А на этом у меня всё, спасибо всем тем, кто дочитал до конца. До новых статей!👋🏻

Уведомления о новых статьях, новости, анонсы и всё, что связано со мной как с автором на vc.ru публикую в НЕКОММЕРЧЕСКОМ Телеграм-канале. Жду всех, кому интересен мой контент 😘.

UI/UX-дизайнерАвтор статей на vc.ruАвтор Telegram-канала Кофейня Дизайнера
{ "author_name": "a.timohov", "author_type": "self", "tags": [], "comments": 26, "likes": 19, "favorites": 137, "is_advertisement": false, "subsite_label": "design", "id": 94935, "is_wide": false, "is_ugc": true, "date": "Fri, 29 Nov 2019 11:42:58 +0300", "is_special": false }
Объявление на vc.ru Отключить рекламу
0
26 комментариев
Популярные
По порядку
Написать комментарий...
9

Разрабы Фигмы так старались, делали продукт, добавляли удобный функционал шаринга... Но зачем это все? Можно же просто экспортнуть файл и залить на дропбокс.

Ответить
0

Так никто не запрещает распространять своими способами макет. 
ui8, creativemarket и тому подобные в помощь.

Ответить
8

Вы точно поняли, что я написал?

Ответить
6

Мое мнение: тот кто не разбирается – он и не знает о существовании китов, а тот кто разбирается – либо не будет юзать сторонний продукт, либо у него давно уже есть кит который он юзает, посколько большинство из продаваемых китов одинаковые и там нет никаких интересных решений 🤷🏻‍♂️

Ответить
5

В UIkit’ах давно нет смысла, проще сразу верстать компонентами, это экономит кучу времени 

Ответить
0

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

Ответить
4

Спасибо за материал по очень узкой и актуальной теме! Я писал о чём-то похожем, но с большим акцентом на хороший план перед созданием коммерческого UI kit'a

Ответить
1

Мне понравилось!

Ответить
4

Интерес победил и я все-таки не поленился скачать и загрузить исходник. Вопрос один только. А что с размерами элементов? С практической точки зрения, как пользоваться китом? Высота инпута 100px и шрифт в 30px, это где Вы такое используете?

Ответить
0

Так Вы можете менять размеры как угодно.

Ответить
2

Вячеслав прав, действительно, странный набор элементов. Который нет смысла использовать в реальной работе, а ведь это его основная цель. Размеры довольно странные и разные, при попытке привести это к одному знаменателю элементы разваливаются.
Вот пример изменения с попыткой сохранить пропорции:

Ответить
0

Буду исправлять, спасибо!

Ответить
4

Дизайн-система и UI-кит - это очень разные вещи.

Ответить
0

Как я заметил, очень многие дизайнеры не видят разницы 🤔🤷🏻‍♂️

Ответить
1

Это не делает им чести, разница есть и существенная.

Ответить
0

Просвятите

Ответить
2

Если очень крупными мазками, то дизайн система: UI-кит + гайдлайн + код 

Ответить
1

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

Ответить
0

Так топикстартер и не упоминал вроде как такое слово, как дизайн-система. Начнем с того, что далеко не везде она нужна, в отличии от грамотного U KIT'a (не говорю, что здесь он грамотный - не смотрел). Но Ui guaidelines, это вторая стадия после кита, и делают ее далеко не всегда изза банальной ненадобности. Собственно вопрос: это куда вы проорали что дс не кит?

Ответить
0

«Так топикстартер и не упоминал вроде как такое слово, как дизайн-система.»

Это есть в первом же абзаце в подводке к статье. 

«Начнем с того, что далеко не везде она нужна, в отличии от грамотного U KIT'a»

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

И, кстати, система работает с более мелкими элементами, чем базовые элементы кита. Дизайн-система строится с молекул. А UI-кит это уже набор атомов. То есть, вырастить из UI-кит дизайн систему может не получиться. Скорее всего, придется перерисовывать с нуля.

«Собственно вопрос: это куда вы проорали что дс не кит?»

Собственно вопроса я не понял. Я никуда не орал. Дизайн система — не UI-кит.

Ответить
3

—Как нарисовать и продать UI кит? 
—Рисуйте и продавайте.

Ответить
0

Это намек на то, что статья "пустышка"? :)
Я старался подробнее рассказать, но я не буду рассказывать как нарисовать прямоугольник, как его закруглить и какой шрифт выбрать.

Ответить
1

вот блин =(

Ответить
2

Если где-то я не прав или же у вас своё мнение по поводу какого-то момента, то пишите в комментариях. Будет интересно почитать)

Ответить
1

Поставил плюс вашей статье.

Ответить
0

Обновлённый и исправленный файл в Телеграме

Ответить

Комментарии

null