Як створити та продати успішний комплект інтерфейсу

Історія за паперовим набором

Папір UI Kit

Основним завданням, з яким я зі своєю командою в Creative Tim стикалися з першого дня, було те, як зробити наше хобі економним способом підтримки себе. Для цього нам довелося навчитися створювати прекрасні набори інтерфейсу, якими люди насправді хочуть користуватися та як їх отримувати перед користувачами. Після кількох спроб і багато зусиль, докладених до цього, ми зрозуміли пару речей, які, на нашу думку, можуть допомогти кожному, хто намагається потрапити в цей простір.
 
 Протягом перших двох місяців мій партнер Алекс відповідав за розробку продуктів. Після того, як ми почали отримувати тягу на деякі комплекти, ми отримали відгуки від наших клієнтів, сказавши, що бажають, щоб ми випустили більше. Тож саме тоді я взяв участь у кодуванні продукту. Майте на увазі, це була моя перша спроба.
 
 Під час цієї статті я спробую пояснити якнайкраще свої зусилля у створенні та потім пошуку аудиторії для одного з наших найпопулярніших наборів: Paper Kit. Я спробую дати якомога більше деталей, тому результат такий, як ця картина, що описує, як намалювати коня:

Пару років тому я побачив цитату на Twitter. Виходить так: "Дайте мені шість годин, щоб зрубати дерево, і я проведу перші чотири заточки сокири". Це приписується Аврааму Лінкольна. Це мало для мене сенс і дійсно змінило мою точку зору на те, як я підходжу до роботи.
 
 Раніше я був справді нерозумним видом людини, використовуючи завдання. За роки роботи я навчився бути більш терплячим, гострити сокиру. Як це перекладається на розробку та інтерфейс користувача? В основному, дослідження. Перш ніж писати будь-який рядок коду, я ознайомився з усіма наборами інтерфейсу користувача, які знайшов в Інтернеті.
 
 Такі ринки, як ThemeForest і BootstrapBay, мають велику різноманітність тем. Більшість із них побудовані з певною метою. Зазвичай вони роблять прекрасну роботу, якщо ви намагаєтеся створити певний сайт для презентацій. Але ми хотіли створити щось, що розробник може використовувати в складному проекті. Тож ми перенесли мою увагу на реальні складні сайти, такі як Airbnb, Uber, Twitter, Paper53 тощо. Які елементи вони використовують? Якому дизайну вони віддають перевагу?

Елементи

Переглянувши безліч сайтів з різною метою: презентація, портфоліо, соціальні, ми склали список елементів, які є основними:

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

Вони охоплюють понад 90% функціональних можливостей, необхідних для створення сторінки.

Дизайн та розробка

Однією з найбільших тенденцій дизайну на даний момент стали Material та плоский вигляд iOS. Мені це дуже сподобалось, але вони були не в моєму стилі. Мені хотілося побудувати щось грайливе, веселе, легке для наслідування. Я пішов на багато засобів для дизайнерів, таких як Dribbble та Behance. Але я врешті-решт зупинився на розробці деяких справді класних сайтів, якими я користувався: Paper 53 та Headspace. Я подумав, що вони виглядають чудово, і вони по-справжньому заспокоюють, коли ви орієнтуєтесь у них.
 
 Тому я створив палітру кольорів з 6 кольорами, щоб охопити основні класи для Bootstrap. Усі фони намагаються нагадувати аркуші паперу, а анімація призначена для імітації рухів аркуша паперу. Щодо шрифтів, я пішов із безкоштовним шрифтом, запропонованим Google Fonts. Це називається Монтсеррат.
 
 Набір може бути дуже корисним, але часто люди не розуміють, як ним користуватися. Тому я створив 3 приклади сторінок: логін, профіль та цільову сторінку, щоб показати, що можна створити на ній. Люди також могли використовувати їх безпосередньо під час створення своїх проектів.

Сторінка реєстру, зроблена за допомогою паперового наборуСторінка профілю, виготовлена ​​з паперового набору.

Розробка передбачала створення файлів SASS для всіх компонентів. Ці файли Sass були складені до CSS та додані після завантаження. Отже, той, хто вже має проект Bootstrap, може просто додати користувацькі файли та отримати новий дизайн. Модифікації Javascript були мінімальними, оскільки ми грали лише з типовими анімаціями для деяких елементів за замовчуванням у Bootstrap.
 
 Розробивши елементи, ми протестували їх на всіх екранах браузера та пристроїв. Чудовим інструментом для цього є це. І заключна частина додавання зображень. Я зв’язався з деякими моїми фаворитами на папері 53 і запитав їх, чи нормально використовувати їхні малюнки. І вони з радістю зробили це :)
 
 Хороша новина полягає в тому, що проведення всіх попередніх препаратів призвело до загального часу розвитку в 3 тижні. Іухуу!

Акція

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

Комплект паперу пропонується безкоштовно завантажити у Creative Tim.

Оскільки більшість елементів, які ми використовували для створення набору, були з відкритим кодом, ми думали, що це справедливо, ми також випускаємо його безкоштовно для всіх. Тож ми створили репо на GitHub і кожен може зробити свій внесок у це.

Технічне обслуговування

Розвівши його, ми відкрили для себе нові речі, про які нам слід було подбати.

Найкращим способом для продовження нашої діяльності було створення PRO-версії, за яку користувачі зможуть платити. Тож ми озирнулися до особливостей, які ми не помітили, коли ми вперше склали план набору. Ми взяли ці елементи і побудували більший пакет. Продукт був хітом, і багато людей, які користувались безкоштовним набором, із задоволенням модернізували та розвивали свою продукцію ще простіше.
 
 Це дало нам час також розробити інформаційну панель з таким же дизайном. Це добре інтегрується для бек-енду. Отже, якщо ви будуєте свою презентацію та частину, з якою користувач взаємодіє, використовуючи комплект паперу; Панельна інформаційна панель - це прекрасний адміністратор. Ми також відкрили його та отримали позитивні відгуки.

Паперова панель приладів

Надалі ми плануємо створити більше версій для продукту. Ескіз вже доступний, і ми також будуємо версію PSD. Ми почали створювати версію Angular, це один з найбільших запитів наших користувачів. І ми дивимось на ReactJS, VueJS тощо.

Якщо ви зацікавлені у співпраці з нами, надішліть мені електронний лист на адресу cristina@creative-tim.com