Дизайн
Roman Kamushken
3139

Как сделать UI Kit для продажи, или почему каждый дизайнер должен попробовать сделать свой продукт

Сегодня у любого дизайнера есть возможность заработать на собственном дизайн-продукте. Иконки, иллюстрации, шаблоны сайтов и приложений можно превратить в цифровой продукт и продавать по всему миру.

В закладки

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

Пример шаблонов для профиля пользователя из S8 design system

Я расскажу о поэтапном плане создания коммерческой дизайн-системы. Узнаете как сделать и выпустить на рынок свой продукт. Расскажу что сделать перед началом работы, как подготовиться и составить план. Отдельно рассмотрю этапы разработки дизайн-системы для Figma. В последней части дам советы как продвигать и раскручивать. В статье только личный опыт и наблюдения самоучки.

Кто и зачем это покупает

Дизайнеры, разработчики, менеджеры и владельцы бизнеса покупают дизайн-системы, чтобы не рисовать с нуля все мелочи, а сразу начать собирать макеты из готовых деталей. Подход к экранному дизайну изменился и требует тонкой настройки каждого компонента. Стили, ограничители, нейминг, сетка и общий порядок в дизайн-системе нужно создать, потратив время. Вы не сможете просто открыть Sketch, XD или Figma и начать делать шаблоны. Вы начинаете всегда с пустого экрана, а для работы требуются базовые элементы: кнопки, списки, карточки и тп. Где все это взять? Либо создать все компоненты самому, отладить и протестировать их, потеряв месяц,либо купить что-то готовое.

Зачем создавать дизайн-продукт

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

Качественная презентация — это хороший способ продвижения вашей поделки

Какие дизайн-продукты существуют

  • Набор иконок
  • Набор иллюстраций
  • Набор для прототипирования
  • Шаблоны сайтов
  • Шаблоны приложений
  • Презентации
  • Шрифты
  • Дизайн-системы, и т.д.

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

Вы можете углубить будущую дизайн-систему в любую из тематик, особенно если с ней уже работали: Ecommerce, Cryptocurrency, Social, Project management и т.д… За более нишевый продукт вы имеете право назначать высокую цену, а затем плавно снижать, если результата нет. Но продукт в узкой специализации сложнее продать, так как он требуется меньшинству. Однако, когда такой покупатель находится он может выложить $200 и больше за индивидуальную лицензию. Рекомендую разрабатывать систему по выбранной теме, но обязательно показать как легко она переделывается в другую.

​Чем больше готовых вариантов - тем лучше

Вы рискуете только временем

Это ваше единственное вложение — время. Но оно в любом случае вернётся к вам опытом. Решая те дизайн-задачи, которые вам интересны вы поднимите качество портфолио на новый уровень. Проверено на себе. И я стараюсь воспринимать себя объективно. Итак, при благоприятном исходе вы получите первую продажу и очень крутые ощущения. Кто-то нашёл полезным вашу поделку и заплатил за копию. У вас пропадёт желание спать, голову будут кружить дальнейшие планы развития вашего проекта.

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

Вы улучшаете портфолио

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

Выше я упомянул о том что, у меня не получилось с первого раза, но спустя полгода я сделал разворот и стал больше исследовать перед второй попыткой. Исследования — это важный этап перед стартом и я хочу подробнее на нем остановиться. Глубже анализируя паттерны и популярные продукты, мне удалось добиться успешного опыта в продажах коммерческих библиотек Figma, поэтому буду рассказывать о создании дизайн-шаблонов сделанных из компонентов или “дизайн-системы”.

Вам нужен план перед началом

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

Исследования

Выберите инструмент

Выбор инструмента для будущей дизайн-системы — это выбор рынка, на котором вы будете работать. Я предпочитаю Фигму, вам может оказаться удобнее работать с XD, например. Важно, чтобы инструмент развивался, имел свою аудиторию. Если уже кто-то продаёт на этом рынке — это отлично, переиспользуйте их идеи, пропустив через взгляд на свой продукт. Если вы первый, есть повод насторожиться.

Например, вокруг пропавшего с радаров Invision Studio дизайн-рынок не заметен, а вокруг редкого Axure он понемногу существует. Да, он гораздо меньше чем рынок Sketch’a. А этот настолько огромен, что переполнен шаблонами и ui китами, поэтому средняя цена за копию ниже. Все эти факторы надо взвесить перед выбором направления. Но для начала переходите на популярный дизайн-инструмент, если не сделали этого раньше и начните понемногу изучать, какие продукты похожие на ваш уже существуют.

Выберите тематику

Тематику дизайн-продукта необходимо определить, чтобы он приобрёл спецификацию. Например,с помощью этой системывы можете прототипировать в стиле material design, аэта свежая Figma библиотекасодержит больше округлых форм и выполнена в ином стиле. Это две дизайн-системы, но у каждой своё назначение. Причем рынок ждёт еще больше новых тематик, поэтому смело придумывайте.

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

Выбор UI гайдлайнов

Пользователи покупают дизайн продукт, еще и потому что им нравится экстерьер. Но если со стилем промахнуться — покупать не станут. Поэтому важно следить за тем как изменяется дизайн сервисов, соцсетей, веб-приложений — это поможет сделать актуальный UI. Например, после редизайна Twitter в моду снова входят скруглённые кнопки. И Pinterest давно уже в этом стиле. Значит имеет смысл брать с них пример, тогда кто-нибудь может подумать “О! Этот дизайн в стиле нового Twitter. Беру!”. Тёмные темы тоже стали популярны, нельзя это игнорировать. Тренды быстро меняются и дизайн-продукты устаревают, поэтому UI надо делать в том виде, который популярен сегодня. Если нет представления о стиле — исследуйте.

Какие компоненты делать

Для полноценной дизайн-системы потребуется отрисовать много разделов с простыми компонентами — кнопки, табы, диалоги, календари, чипсы и так далее. Предусмотреть придётся весь набор, который только сможете придумать.

Хотите открою тайну? В мире не появляется новых компонентов, меняется только экстерьер. Любой дашборд — это в основном те же кнопки, списки и таблицы. Поэтому вы можете отправиться за идеями на эти ресурсы Mobbin, Webframe или Nicelydone и составить себе мудборд тех компонентов, которые нужны для начала. После нескольких интенсивных исследований у вас появится обширный список, где будут все-все компоненты, которые вам останется упорядочить и перерисовать в своем стиле.

Сколько шаблонов делать и каких

Чем ваши шаблоны универсальнее, тем выше шанс заинтересовать потенциального покупателя. Подумайте о том как сделать гибкую дизайн-систему, в которой много готовых заранее решений. Предусмотрите все варианты и состояния, ведь разработчики могут задавать вопросы: меняются ли кнопки при onHover, как выглядит активный инпут и тому подобное. Значит нужно учесть и состояния компонентов в будущей системе. Для вашей ранней версии выберите те паттерны, которые встречаются чаще всего в жизни: Таблицы, Навигация, Профиль, Настройки и так далее. Из этих базовых деталей можно собрать практически любое приложение. Поэтому, когда вы даёте много популярных шаблонов на выбор — это делает дизайн-продукт более функциональным.

Используйте доступные ресурсы

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

Сделайте себе moodboard

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

Теперь вы готовы к старту

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

Мы выяснили, что создать свой дизайн-продукт стоит попробовать каждому дизайнеру.Вы либо прокачаетесь, либо заработаете и прокачаетесь. Но потребуется инвестировать собственное время. Готовы ли вы тратить вечера вне офиса ради собственного проекта? Или тратить дни напролёт, понимая что за эту работу вам не заплатят сразу, если вообще заплатят?

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

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

Пишите в личку, если вы UI/UX профессионал и работаете в Фигме. Я отвечу на все оставшиеся вопросы, если вы хотите попробовать свои силы в создании коммерческой дизайн-системы. Мне нужны новые продукты и вы будете получать 70% с каждой продажи. Я строю сильную команду UI-мейкеров, предоставляю продвижение и размещение на setproduct.com вашего дизайн-продукта: иконок, иллюстраций или системы для Figma. Давайте продавать вместе!

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

Написать
{ "author_name": "Roman Kamushken", "author_type": "self", "tags": [], "comments": 22, "likes": 21, "favorites": 172, "is_advertisement": false, "subsite_label": "design", "id": 83890, "is_wide": false, "is_ugc": true, "date": "Thu, 19 Sep 2019 21:16:15 +0300", "is_special": false }
0
{ "id": 83890, "author_id": 158696, "diff_limit": 1000, "urls": {"diff":"\/comments\/83890\/get","add":"\/comments\/83890\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/83890"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
22 комментария
Популярные
По порядку
Написать комментарий...
6

Кто-нибудь покупал хоть раз UI kit? токачестно.

Не знаю ни одного дизайнера который бы купил UI kit для проекта.

Или ЦА таких продуктов не дизайнеры?!

Ответить
3

Их покупают манагеры и разрабы, которым нужно собрать быстро прототип, а не дизайнеры

Ответить
2

Я покупал UI kit. Подтверждаю, я не дизайнер.

Ответить
0

Он вам помог? Удалось с его помощью решить требуемую задачу?

Ответить
2

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

Ответить
1

я покупаю иконки иллюстрации большие киты и я дизайнер в чем проблема?

Ответить
0

Проблема пока стоит только в том, чтобы больше людей стало понимать в чем выгода таких покупок.

Ответить
0

Я могу сказать судя по собственной статистике - понимание ценности таких ресурсов только начинает прививаться нашим соотечественникам. Но основная ЦА это США и Европа. Мы делаем - они покупают.

Ответить
1

Спасибо за отличную статью. Подписываюсь.

Ответить
0

Спасибо, текст хороший. Хотелось бы еще узнать, какую комиссию сервисы берут за размещение. И в целом, сколько можно с этого заработать?

Ответить
0

Мне на третий месяц после старта уже стало прилетать эквивалентно зарплате топового продуктового дизайнера в столице. Но я 100% на этом сконцентрировался сразу же, мне не мешала офисная работа. Сервисы отщипывают в среднем 2.5-5% с продажи.

Ответить
6

Ну ты сказочник

Ответить
0

Сказка быль, да в ней намёк

Ответить
0

Сервисы отщипывают в среднем 2.5-5% с продажи.

А твой сервис будет забирать 30% с каждой продажи =)

И я правильно понимаю, что ты продавал сразу на своей платформе, а не на других (UI8 и пр)?

Ответить
0

Сначала Gumroad возмёт свои законные 2.5%, потом уже 30 на 70 наши.

Но сначала нужны продукты. Если тебе удастся сделать бестселлер - % может быть пересмотрен в сторону 80 на 20.

Да, я сразу нацеливался на развитие собственного ресурса и планирую держать знак качества и дальше, чего не сказал бы о UI8

Ответить
0

А как покупать? Фрилансер не юрлицо сделает работу и как ее купить? Как потом подтвердить права на использование данного набора? И есть ли у дизайнера права на использование шрифтов и прочих деталей? Сейчас же все более-менее норм шрифты имеют свой прайс. Или это все для не масштабных работ? Мы же не знаем как внезапно и далеко может взлететь любой проект. 

Ответить
0

Покупать с помощью банковской карты.

К каждому продукту идёт текст лицензионного соглашения, где перечислено что можно, а что нельзя. Шрифты в таких случаях используются OFL или с Google Fonts.

Ответить
0

Представим набор использовали и проект стал новым Фейсбуком. Дизайнер может заявить права на свою работу и просить долю или еще что. Понятно, что мы типа оплатили тодасе. Но как и чем это может быть доказано? Или допустим, другой проект начнет качать права, что наш дизайн схож с их дизайном и мы им должны возместить ущерб. Ну бывали в новостях случаи. Как этот момент решается?

Ответить
0

Еще раз напишу тоже самое: к каждой продаже идёт лицензионное соглашение, где все эти моменты оговариваются

Ответить
0

Кроме того, в любой гибкой дизайн-системе достаточно заменить в проекте цвета на свои и поменять шрифт через глобальные стили Фигмы. И получится уже совсем другой по дизайну вид. А на всё уйдет несколько минут.

Ответить
0

Как подготовить лицензионное соглашение?

Когда его нужно показыать? Человек по идее должен согласится с ним поставить галочку. 

Ответить
0

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

Ответить
{ "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" }