Дизайн
a.timohov
1648

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). Этот цвет будет использоваться больше всего при проектировании всех элементов интерфейса.

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

Советую группировать элементы по назначению на страницах (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 публикую в НЕКОММЕРЧЕСКОМ Телеграм-канале. Жду всех, кому интересен мой контент 😘.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "a.timohov", "author_type": "self", "tags": [], "comments": 26, "likes": 18, "favorites": 116, "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 }
0
{ "id": 94935, "author_id": 379652, "diff_limit": 1000, "urls": {"diff":"\/comments\/94935\/get","add":"\/comments\/94935\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/94935"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
26 комментариев
Популярные
По порядку
Написать комментарий...
8

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

Ответить
0

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

Ответить
6

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

Ответить
5

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

Ответить
0

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

Ответить
5

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

Ответить
4

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

Ответить
1

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

Ответить
4

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

Ответить
0

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

Ответить
2

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

Ответить
0

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

Ответить
3

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

Ответить
0

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

Ответить
1

вот блин =(

Ответить
2

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

Ответить
0

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

Ответить
1

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

Ответить
0

Просвятите

Ответить
2

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

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

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

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

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

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

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

Ответить
2

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

Ответить
1

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

Ответить
0

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

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }