Маркетинг кит

Какие задачи решает UI-kit в дизайне

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

1 — Структурирование работы над дизайном

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

2 — Создание дизайна в едином стиле

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

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

3 — Упрощение командной работы

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

4 — Экономия времени на проектировании дизайна

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

5 — Помощь веб-разработчикам

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

Как сделать UI-kit для сайта в Figma

Для наглядности давайте я покажу, как сделать UI-kit для простенького сайта в графическом редакторе Figma.

Первым делом создаем новый документ и рисуем в нем 2 фрейма: один — под будущий сайт (назовем его Main), а второй — для UI-kita с соответствующим названием.

Во фрейме Main напишем заголовок «Мой первый UI-kit» и подзаголовок «В этом уроке я научусь создавать UI-kit».

Далее настроим параметры текста (цвет и размер) и занесем их в UI-kit, создав из них стили.

Затем нарисуем текстовое поле и кнопку в UI-kit и сформируем из них компоненты.

Отрисуем несколько состояний для текстового поля (по умолчанию, в фокусе, ошибка) и для кнопки (по умолчанию, при наведении, неактивна). Каждое новое состояние — новый компонент.

Далее из этих элементов создадим в макете небольшую форму из 2 полей и кнопки.

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

В процессе работы, вы можете корректировать UI-kit, но главное, чтобы все изменения применялись сразу во всех макетах

Для этого важно создавать из элементов компоненты, а в самих макетах использовать их дочерние копии

Как разработать UI-кит. Пошаговый пример

Как только готовы прототипы, известны сценарии поведения пользователя и функции будущего продукта, можно приступать к разработке набора элементов.

Рассказываю, какие шаги нужно пройти, чтобы получился эффективный UI-кит, на примере сервиса «Врач42», который мы разрабатывали в digital-агентстве «Атвинта».

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

Шаг 1. Сетка, шрифты, цвета

Сначала рисуем сетку будущего веб-приложения. Это фундамент проекта. Сетка задаёт ритм в макетах и помогает frontend-разработчикам при вёрстке.

В этом проекте используем сетку из 16 колонок: она позволяет логично и вариативно расположить все нужные элементы.

Подобрали шрифты для заголовков, основного и второстепенного текста в интерфейсе.

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

Основным цветом страницы мы выбрали синий. Он наиболее социально-нейтральный и привычен для сайтов муниципальных учреждений.

После добавляем дополнительные цвета для кнопок и прочих элементов.

Что общего между UI-kit и походом в магазин

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

Каждый из нас ходит в магазин за покупками. И у каждого из нас есть свой любимый гипермаркет, в котором мы знаем где какой продукт лежит. Заходя в него, мы сразу идем в нужные нам отделы, берем все необходимое и оплачиваем покупку.

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

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

Почему покупают UI-киты

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

По моим наблюдениям, чаще всего это эмоциональная покупка. Из категории «увидел классную штуку, хочу с ней поработать в редакторе» — покрутить, поменять цвета, поиграть со шрифтами. Скорее всего, такая работа никуда не пойдёт и останется в ноутбуке у дизайнера.

Дизайн-системы покупают студии, чтобы наладить процессы разработки продуктов, повысить качество и сократить временные расходы. UI-киты пользуются спросом у фрилансеров junior- и mid-уровней. У них основная задача — сделать проект вовремя и красиво.

Роман Банкс

сооснователь Slice Design

Что входит в UI-kit

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

Навигация

В больших проектах навигация выполнена в виде отдельной панели (горизонтальной или вертикальной), которая занимает свое строго отведенное место.

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

В проектах попроще, например в корпоративных сайтах или лэндингах, навигация более простая и чаще всего состоит из обычных текстовых ссылок.

Для навигации отрисовываются следующие состояния:

• По умолчанию с активным пунктом меню
• С пунктом меню при наведении
• Навигация в свернутом состоянии (если требуется)
• Навигация при скролле (если требуется)

Навигация заносится в UI-kit отдельным блоком и потом переиспользуется на всех страницах проекта.

Текстовые поля

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

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

Обычно для текстовых полей рисуют 7 состояний:

• по умолчанию
• при наведении
• в фокусе
• в заполненном состоянии
• в неактивном состоянии
• требование обязательного поля
• ошибка валидации

Формы

Формы состоят из текстовых полей, о которых мы говорили выше. Наиболее популярными являются формы регистрации и подписки, оформления заказа и формы обратной связи.

Формам нужно уделять особое внимание, потому что они являются конверсионными элементами. Чем лучше они спроектированы, тем проще пользователю взаимодействовать с системой

В UI-kit они заносятся готовыми блоками для дальнейшего удобного использования в других частях дизайна.

Кнопки

Кнопки используются во всех интерфейсах без исключения. Именно поэтому их обязательно стоит заносить в UI-kit.

Для кнопок рисуют минимум 3 состояния:

• по умолчанию
• при наведении
• неактивное состояние

Некоторые прописывают еще состояние при нажатии, но это не обязательно.

Иконки

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

UI-элементы

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

Цвета и шрифты

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

Possible contents of a sales kit

• Sales letters – a sales letter is a basic component of the sales kit and it is used as a basic sales pitch. In cases where there isn’t a specific target customer in mind, it is quite generic, but if there is a specific customer in mind, it might be customized to contain certain attributes.
• Company brochure – brochures included in sales kit usually have company information on them. This includes company history, vision, mission and accomplishments. It may also include information on the company’s industry experience, location, capabilities and business history.
• Products brochure – this kind of brochure will contain detailed information about the products or services offered. That information may also include manufacturing processes, level of customer service offered as well as the kind of customers being sought.
• Sales sheet for product/service – when a consumer shows interest in a specific product, then this piece of document is used to persuade the prospective client to purchase by showing the features as well as benefits of that particular commodity.
• Industry or customer specific sales sheet – this is a customized sales document that is aimed at a specific industry of prospective customers. It tells of services that can be offered as well as highlight the know-how in a particular field.
• Sales kits will vary depending on what the company deems necessary to promote sales. Some may include positive press releases about the company or its products while it is not rare to find customer testimonials, news on awards as well as digital sales representations.

Что ещё делают на продажу, кроме китов

Любые инструменты и ресурсы, которые позволяют дизайнерам работать лучше или быстрее. Например:

• иллюстрации;
• наборы иконок;
• шаблоны для Webflow/Tilda;
• плагины и скрипты для Figma/Sketch;
• мокапы;
• 3D-объекты;
• конструкторы флоучартов;
• шаблоны презентаций;
• паттерны.

Чем успешнее ваш продукт решает задачи дизайнера, тем популярнее он будет. Однажды мне надоело каждый раз кропать лица из фотографий в Unsplash для аватарок пользователей, и я подготовил нарезку в трёх форматах. Разместил её на Behance, в Dribbble и Twitter. На сегодня её скачали 5000 человек и прислали мне $65 чаевых. Да, это мелочь — но и сам продукт небольшой, я потратил на него не больше пары часов. Так что продуктом или инструментом в данном случае может быть всё что угодно.

Когда пора делать UI-кит

Можно использовать два подхода:

• Отрисовываем элементы и дополняем UI-кит по ходу работы над макетами. Тогда frontend-разработчики смогут приступить к своей работе после дизайна.
• Или как делал я в приведённом примере: в первую очередь готовим UI-кит со всеми необходимыми элементами и их состояниями. После чего собираем макеты, а разработчики параллельно готовят дизайн-систему.

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

UI-kit — что это простыми словами

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

Во-первых, UI — это аббревиатура от словосочетания «User Interface», что в переводе с англ. означает «Пользовательский Интерфейс».

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

Таким образом, соединив оба слово, у нас получится UI-kit — готовый набор элементов пользовательского интерфейса. Осталось разобраться, что означает слово «элементы».

Любой пользовательский интерфейс состоит из определённых элементов:

• Навигация
• Кнопки
• Иконки
• Карточки
• Таблицы
• Поля ввода
• Цвета
• Шрифты
• и другое

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

Definition

A sales kit is a case or folder that contains data about a product, a service or a company offering the commodity on sale. A sales kit basically contains promotional content aimed at increasing sales and raising awareness about the brand. Sales kit is also referred to as sales support material and it can be customized to specific clients or be generic. Information in a sales kit may be in form of:

• Audio/video tapes
• Models
• Samples
• Brochures
• Demonstration kit
• Literature

A sales kit can be customized for various prospects and it helps a company to explain its business, its products on offer and point out how different it is to the competitors. Since a sales kit basically works to raise brand recognition, proper packaging is essential. The sales kit of most companies is a professionally developed carrying size envelope that bears the company name and logo.

Как продвигать

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

Важная сторона любого коммерчески успешного продукта — пиар

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

В этом особенно преуспели UX Power Tools — их блог на Medium сейчас читают больше 24 тысяч человек. При этом их основной продукт — дизайн-система для Sketch App.

Запуск продуктов на Product Hunt до сих пор даёт мощный импульс вашим продажам. PH — прекрасная платформа для привлечения новых пользователей и получения ценных отзывов. Но к запуску на ней нужно хорошо подготовиться.

Стандартная практика — предлагать часть продукта или урезанную версию бесплатно, так называемое freebies. Это очень эффективное средство продвижения платных продуктов.

Сколько зарабатывают на UI-китах

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

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

Возьмём для примера один из самых продаваемых китов на площадке — Baikal UI Kit от потрясающих ребят из Great Simple. Его цена $58, он был куплен 368 раз, это значит, что выручка составляет $21 344!

Но не спешите радоваться. Во-первых, комиссия площадки за неэксклюзивное размещение составит $2 + 55% от стоимости продукта. Это означает, что из всей суммы продаж доход авторов — лишь $9 273. Кроме того, UI-кит был размещён на площадке в декабре 2015 года, что в пересчете даёт нам всего $201,5 в месяц!

Эти цифры покажутся совершенно несерьёзными, если вы сравните их с самым популярным шаблоном для WordPress. Всё ещё хотите делать киты? Кстати, в этом видео Алексей Рыбин из Great Simple подробно рассказывает о том, как они работали над этим и другими продуктами:

Заключение и немного инспирейшена

Вполне реально зарабатывать $5–10 тысяч долларов в месяц на продаже одних только UI-китов и готовой графики. Такие примеры есть, и, я уверен, при правильном подходе можно найти свою нишу — рынок большой и динамичный. Другой вопрос, насколько вы готовы работать в условиях, когда все вокруг выпускают очень похожие продукты, а крупные компании в любой момент могут свести на нет все ваши усилия.

Хочу напоследок показать пару ссылок и интервью с крутыми профессионалами, которые во многом сформировали эту индустрию и не перестают радовать качеством своих продуктов.

• L Store;
• Files.Design;
• Slice Design;
• UX Power Tools;
• Nice Very Nice.