Как создать и продать успешный комплект пользовательского интерфейса

История позади бумажного комплекта

Paper UI Kit

Основная проблема, с которой я и моя команда в Creative Tim столкнулись с первого дня, заключалась в том, чтобы сделать наше хобби экономичным способом поддержания себя. Чтобы сделать это, нам нужно было научиться создавать красивые комплекты пользовательского интерфейса, которые люди действительно хотят использовать, и как сделать их доступными для пользователей. После нескольких попыток и больших усилий мы поняли пару вещей, которые, по нашему мнению, могут помочь любому, кто пытается попасть в это пространство.
 
 В течение первых нескольких месяцев мой партнер Алекс отвечал за разработку продуктов. После того, как мы начали набирать обороты по некоторым комплектам, мы получили отзывы от наших клиентов, заявив, что они хотели, чтобы мы выпустили больше. Так что это было то, что я был вовлечен непосредственно в кодирование для продукта. Имейте в виду, это была моя первая попытка.
 
 В этой статье я постараюсь как можно лучше объяснить мои усилия по созданию, а затем найти аудиторию для одного из наших самых популярных наборов: Paper Kit. Я постараюсь дать как можно больше подробностей, поэтому результат будет таким, как на рисунке, описывающем, как нарисовать лошадь:

Пару лет назад я увидел цитату в твиттере. Это звучит так: «Дайте мне шесть часов, чтобы срубить дерево, и я проведу первые четыре заточки топора». Это приписывают Аврааму Линкольну. Это имело большой смысл для меня и действительно изменило мою точку зрения на то, как я подхожу к работе.
 
 Раньше я был по-настоящему дерьмовым человеком, справлялся с задачами. За годы работы я научился быть более терпеливым, точить свой топор. Как это относится к разработке и UI Kit? В основном, исследования. Перед написанием какой-либо строки кода я проверил все комплекты пользовательского интерфейса, которые я нашел в Интернете.
 
 Рынки, такие как ThemeForest и BootstrapBay, имеют большое разнообразие тем. Большинство из них построены для определенной цели. Они обычно делают отличную работу, если вы пытаетесь создать конкретный сайт презентации. Но мы хотели создать что-то, что внутренний разработчик может использовать со сложным проектом. Поэтому мы переключили мое внимание на реальные сложные сайты, такие как Airbnb, Uber, Twitter, Paper53 и т. Д. Какие элементы они используют? Какой дизайн они предпочитают?

Элементы

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

  • кнопки
  • входные
  • флажок / радио
  • навигация
  • падать
  • индикаторы выполнения / ползунки
  • меню
  • типография
  • изображений
  • уведомления
  • этикетки
  • карусель

Они охватывают более 90% функциональности, необходимой для создания страницы.

Дизайн и развитие

Одной из самых больших тенденций в дизайне на данный момент были Material и iOS-дизайн. Мне это очень нравилось, но они были не в моем стиле. Я хотел создать что-то игривое, веселое, легкое в исполнении Я использовал много средств для дизайнеров, таких как Dribbble и Behance. Но в конце концов я остановился на дизайне некоторых действительно крутых сайтов, которые использовал сам: Paper 53 и Headspace. Я думал, что они выглядели великолепно, и они имели действительно успокаивающий эффект, когда вы перемещались по ним.
 
 Поэтому я создал цветовую палитру из 6 цветов, чтобы охватить основные классы для Bootstrap. Все фоны пытаются напоминать листы бумаги, а анимация предназначена для имитации движений листа бумаги. Для шрифтов я выбрал бесплатный шрифт, предлагаемый Google Fonts. Это называется Монтсеррат.
 
 Набор может быть очень полезным, но часто люди не понимают, как его использовать. Таким образом, я создал 3 примера страниц: логин, профиль и целевую страницу, чтобы показать, что вы можете создать с помощью нее. Люди могут также использовать их непосредственно при создании своих проектов.

Страница регистрации сделана с комплектом бумагиСтраница профиля сделана с комплектом бумаги.

Разработка подразумевала создание файлов SASS для каждого компонента. Эти файлы Sass были скомпилированы в CSS и добавлены после Bootstrap. Таким образом, тот, у кого уже есть проект Bootstrap, может просто добавить пользовательские файлы и получить новый дизайн. Модификации Javascript были минимальными, так как мы играли только с анимацией по умолчанию для некоторых элементов по умолчанию в Bootstrap.
 
 После разработки элементов мы протестировали их на всех экранах браузера и устройства. Отличный инструмент для этого - вот это. И заключительная часть добавления изображений. Я связался с некоторыми из моих любимых художников на Paper 53 и спросил их, можно ли использовать их рисунки. И они были счастливы сделать это :)
 
 Хорошей новостью является то, что все предыдущие приготовления привели к общему времени разработки в 3 недели. Iuhuu!

Продвижение

Когда все было готово, мы разместили комплект на Paper Kit. Мы также поделились этим комплектом с парой друзей, чтобы они могли сообщить нам, нашли ли они какие-либо ошибки, которые мы пропустили. Когда все получили зеленый свет, мы провели несколько маркетинговых кампаний по электронной почте, объявляя о наборе (для пользователей, уже подписавшихся на Creative Tim). Отзывы были положительными, поэтому мы обратились к некоторым сообществам. Мы получили отличные отзывы на Hacker News, Product Hunt, Reddit. Более того, некоторые подняли его и использовали для своей работы. Возьмите пример Крис Пена, который сделал видеоурок с ним.

Paper Kit предлагается для бесплатной загрузки на Creative Tim.

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

техническое обслуживание

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

Наилучшим способом для продолжения нашей деятельности было создание версии PRO, за которую пользователи смогут платить. Таким образом, мы оглянулись на функции, которые упустили из виду, когда впервые разработали план комплекта. Мы взяли эти элементы и собрали большую упаковку. Продукт был хитом, и многие люди, которые использовали бесплатный комплект, были рады обновить и разработать свои продукты еще проще.
 
 Это дало нам время разработать приборную панель с таким же дизайном. Это хорошо интегрируется для серверной части. Итак, если вы создаете свою презентацию и ту часть, с которой пользователь взаимодействует с помощью набора бумаги; Paper Dashboard отлично подходит для администратора. Мы также открыли его и получили положительные отзывы.

Бумажная панель

В будущем мы планируем создать больше версий для продукта. Эскиз уже доступен, и мы также создаем PSD-версию. Мы начали создавать версию Angular, это один из самых больших запросов от наших пользователей. И мы смотрим на ReactJS, VueJS и т. Д.

Если вы заинтересованы в сотрудничестве с нами, отправьте мне письмо на cristina@creative-tim.com