Лого vc.ru

Кейс из России: Как создать собственный UI-кит

Кейс из России: Как создать собственный UI-кит

Дизайнер Ник Паркер поделился с vc.ru своим опытом разработки UI-кита — набора элементов интерфейса, а также рассказал о принципах его разработки, площадках, на которых их можно приобрести или выставить на продажу.

Поделиться

Просматривая проекты на Behance и шоты на Dribbble, мы часто сталкиваемся с красивыми интерфейсными элементами, которые собраны воедино и создают прекрасную законченную картину. Такие элементы, как кнопки, «хлебные крошки», вертикальные и горизонтальные меню, плееры, формы, называются набором элементов интерфейса (User Interface Kit) или, проще говоря, UI-кит.

Что такое UI-кит

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

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

White UI Kit by Mike | Creative Mints

UI-киты создаются для различных проектов:

  • блоги;
  • магазины;
  • административные панели;
  • лэндинги.
Они разделяются по устройствам, для которых создается дизайн:
  • для веба;
  • для мобильных девайсов;
  • десктоп-приложения.
UI-киты дополняются различными бонусами, например, иконки, бесплатные примеры страниц (характерно для платных UI-китов). Также они могут быть представлены в версии для разработчиков (HTML5 и CSS3).

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

Идея

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

На рынке молодежной одежды представлен перспективный и развивающийся бренд «Ларус» (Larus), который занимается производством. Их продукция отличается от многих аналогичных вещей, представленных в аналогичном сегменте, так как производитель очень трепетно относится к деталям. Все это великолепие сразу теряется на фоне их сайта, который не соответствует качеству и направленности бренда.

Страница продукта (larusodejda.ru)

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

В процессе работы я отметил для себя, что команда Larus активно развивает околобрендовое сообщество. Они освещают в социальных сетях новости о дружественных брендах, рассказывают, кто носит бренд «Ларус», как создавались те или иные коллекции и откуда черпается вдохновение.

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

Структура

Для начала я определился с наполнением UI-кита. Существуют как базовые элементы, так и те, что относятся к конкретной тематике. Я выявил следующие категории:

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

Сетка

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

Сетка 1200 пикселей

Цвета

Главная цель была в том, чтобы конечный пользователь UI-кита мог с легкостью изменить цветовое решение. Акцентным цветом был выбран оранжевый, так как он символизирует творческое начало, уникальность и активность. Я использовал один акцентный цвет с двумя оттенками. Зеленый и красные цвета взяты для сообщений и уведомлений о результате той или иной операции, например ввода пароля.

Цветовая схема

Шрифты

Вы можете использовать абсолютно любые веб-шрифты, как платные, так и бесплатные. В первом случае стоит убедиться в том, что вы владеете соответствующей лицензией на использование шрифтов и можете передать их в использование вашим конечным пользователям. Во втором случае я рекомендую вам использовать шрифты Google Fonts. Среди них можно найти достаточно интересные и красивые комбинации. Лучше всего использовать два-три шрифта, не более. В One Brand UI Kit применены:

Изображения

Здесь дело обстоит так же, как и со шрифтами. Можно использовать платные или бесплатные изображения с фотостоков (unsplash, stocksnap.io), можно создавать их самим. Опять же, необходимо убедиться в том, что лицензия позволяет вам их использовать в UI-ките.

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

Категории

Навигация

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

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

Формы

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

Формы

Подвалы (Футеры)

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

Подвалы (футеры)

Виджеты

На любом современном сайте мы можем увидеть количество фолловеров компании в социальных сетях, недавние твиты и фотографии в Instagram. Для магазина и блога также будет важна информация по посещаемости и количеству купленных товаров. Виджет «Погода», по-моему, избитый прием, и я не стал его включать в свой UI-кит. Всю эту информацию можно расположить на разных страницах сайта.

Виджеты

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

Здесь должны быть представлены все базовые элементы, а именно кнопки, поля ввода, чек-боксы, радиокнопки. Не стоит забывать, что у контролов существует несколько состояний. Например, для кнопки это default, hover, active, disabled.

Базовые элементы

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

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

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

Элементы для магазина

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

Элементы для магазина

Примеры страниц

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

Примеры страниц

Организация элементов в исходных файлах

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

Организация слоев в Sketch

Файлы готового UI-кита

Не так давно это были преимущественно PSD-файлы, теперь к ним добавились и Sketch-файлы. Существуют также киты, которые подготовлены и для Photoshop, и для Sketch. Возможно, в скором времени, при появлении Project Comet, появится и третий формат. Я даже допускаю вариант развития событий, при котором формат Photoshop отойдет на второй план, так как Project Comet является полноценной средой для дизайнеров и проектировщиков интерфейсов и он полностью совместим с другими продуктами от Adobe.

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

  • название;
  • описание;
  • что находится внутри;
  • какие особенности;
  • какие использованы шрифты и изображения.

Презентация

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

Огромный рынок UI-китов

За последний год рынок продуктов для дизайнеров и разработчиков очень вырос. Все больше компаний переходит к гибкой методологии разработки и быстрому запуску продуктов, что ставит дизайнеров в жесткие временные рамки. А благодаря таким компаниям, как Google, мы получаем готовый и эффективный метод построения пользовательского интерфейса с точки зрения UX, используя принципы Material design. Используя UI-киты, дизайнер существенно экономит время. Ему нужно всего лишь отредактировать элементы в своем редакторе.

Существует огромное количество площадок, где можно покупать и продавать UI-киты. В среднем цена качественного продукта равна $35 за большое количество элементов в форматах PSD и Sketch. Есть и более дорогие продукты, которые выпускаются дизайнерскими студиями с именем в данном сегменте, например Great Simple. Можно найти продукты и дешевле, но это не значит, что они менее качественные. Например, цена моего продукта OneBrand UI Kit равна $12 — это связано с тем, что он подготовлен только для Sketch.

Рассмотрим основные торговые площадки с точки зрения продажи:

Designmodo Market. Здесь продаются только высококачественные продукты. Ребята из Designmodo очень разборчивы, и попасть к ним на площадку очень сложно. Направив им свой продукт, не удивляйтесь, если вам вообще не ответят, так как отвечают они только тем, кто им интересен с точки зрения продукта, выставленного на продажу. С каждой продажи они вам предлагают получить 70%. Цену на продукт можно устанавливать самому.

UI8. На мой взгляд,  это вторая по значимости площадка. Так же, как и на Designmodo,  здесь жесткий отбор. Ваш продукт должен соответствовать необходимым требованиям, и, если это так, вы сможете попасть в административную панель продавца. За последние два месяца они здорово изменили свою площадку и улучшили кабинет продавца. Они тоже предлагают 70% с каждой продажи. Цена, как и в первом случае, остается за вами.

Creative Market. Здесь тоже присутствует отбор, но он менее требовательный. Вы можете стать продавцом всего лишь с одним продуктом — при условии, что он качественный. Ценовая политика такая же, как у двух первых площадок, —  70% и ваша цена.

Envato. Graphicriver и Themeforest. Не такие требовательные, как все остальные. Рассмотрение продукта модераторами может затянуться на неделю, после чего вы можете внести совсем незначительные изменения и снова неделю ждать.

Не так давно у них произошли кое-какие изменения. PSD-файлы загружаются на Graphicriver, а Sketch-файлы — на ThemeForest. Но последняя категория, Sketch Templates, на сайте официально не представлена, необходимо связываться с представителем лично.

Envato предлагает меньше всех с одной продажи — 50%, но дадут больше, если продавать только у них. Установить свою цену можно только на Graphicriver, проделать то же самое с Themeforest довольно сложно. Например, я изначально выставил за свой продукт $12, но они поставили $15, и я уже больше недели жду, когда они ее изменят.

Если вы не хотите продавать на площадках, советую воспользоваться сервисом Gumroad. Здесь все деньги будут вашими.

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

Скачать Free Sample One Brand UI Kit можно здесь.

Зачем всем этим заниматься

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

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Эти примеры в принципе какие-то стремные, кто их вообще купит..

Автор статьи может быть купил :)

0

с таким логотипом виси, ты вообще не имеешь права писать чтото про дизайн

это виси курильщика

0

Так это же Baikal ui, только цвета другие

0

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

Этот UI - ужасен и грязен. Перфекционисты нервно плачут в сторонке.

0

Ребзя, а подскажите какой-нить круглый кириллический шрифт аля упомянутый Montserrat. Ни Lato, ни Gotham Pro кириллических у гугла нету, а сконвертированные не сильно хорошо рисуются

0

возможно Museo Sans кириллический подойдет, но не уверен, что они у гугла есть

0

Узкий он
За webfont.ru спасибо

0

geometria, но в открытом доступе только light есть вроде

0

и сколько если не секрет поднимаете с продажи ui китов?

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
ave ego

Популярным станет когда за ту же цену количество доступного контента сравняется с американским. А то платите также, а смотреть можете в 10 раз меньше.

Роскомнадзор заявил об отсутствии претензий к Netflix из-за «непопулярности сервиса» в России
0
Борис Моренко

Название отличное. Лучше только stalin.tv)

Французский видеосервис Molotov привлёк $22 млн от Михаила Фридмана и других инвесторов
1
Yuriy Belonozhkin

В начале 2016 года мы шифровали как могли (Эзоповым языком и смайликами)

Акционеры Facebook раскритиковали инвестора Андриссена за помощь Цукербергу втайне от совета директоров
1
Yuriy Belonozhkin

Перед перезапуском Secret он решил поразмяться на блог-сервисе)

Сооснователь Secret запустил анонимную блог-платформу IO
0
Николай Анников

Основатель компании владеющей супер защищенным мессенджером не смог сохранить переписку в тайне?

Акционеры Facebook раскритиковали инвестора Андриссена за помощь Цукербергу втайне от совета директоров
0
Показать еще