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

Историята зад хартиения комплект

UI комплект за хартия

Основното предизвикателство, с което се изправихме аз и моят екип от Creative Tim от първия ден, беше как да превърнем хобито си в икономичен начин да поддържаме себе си. За да направим това, трябваше да се научим как да създаваме красиви UI комплекти, които хората всъщност искат да използват и как да ги накарат пред потребителите. След няколко опита и много усилия, вложени в него, разбрахме няколко неща, които смятаме, че могат да помогнат на всеки, който се опитва да влезе в това пространство.
 
 През първите няколко месеца моят партньор Алекс ръководеше разработката на продуктите. След като започнахме да получаваме сцепление на някои от комплектите, получихме обратна връзка от нашите клиенти, казвайки, че искат да освободим повече. Така че това беше въпросът, че се включих директно в кодирането на продукта. Имайте предвид, че това беше първият ми опит.
 
 По време на тази статия ще се опитам да обясня възможно най-добре усилията си в създаването и след това намирането на аудитория за един от най-популярните ни комплекти: Paper Kit. Ще се опитам да дам колкото е възможно повече подробности, така че резултатът е като тази картина, описваща как да нарисувате кон:

Преди няколко години видях цитат в Twitter. Това става така: „Дайте ми шест часа да отсека дърво и аз ще прекарам първите четири заточване на брадвата.“ Приписва се на Ейбрахам Линкълн. Това имаше много смисъл за мен и наистина промени моята гледна точка за начина, по който подхождам към работата.
 
 Аз бях истински глухар човек, който се захранва със задачите. През годините на работа се научих да бъда по-търпелив, да изостря брадвата си. Как се превежда това към разработването и UI Kit? По принцип, изследвания. Преди да напиша всеки ред код, проверих всички UI комплекти, които намерих в интернет.
 
 Пазари като 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. Дори нещо повече, някои го вдигнаха и го използваха за собствената си работа. Вземете пример Крис Пена, който направи видеоурок с него.

Комплект хартия, предлаган като безплатно изтегляне на Creative Tim.

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

Поддръжка

След като го пуснахме, открихме нови неща, за които трябваше да се погрижим.

Най-добрият начин за поддържане на нашата дейност напред беше създаването на PRO версия, за която потребителите ще могат да плащат. Така че погледнахме назад към функциите, които пренебрегнахме, когато за първи път направихме плана за комплекта. Взехме тези елементи и изградихме по-голям пакет. Продуктът беше хит и голяма част от хората, които използваха безплатния комплект, се радваха да надграждат и развиват продуктите си още по-лесно.
 
 Това ни даде време да разработим и табло със същия дизайн. Това се интегрира добре за задния край. Така че, ако изграждате вашата презентация и частта, с която потребителят взаимодейства, използвайки комплекта Paper; таблото за хартия прави чудесен администратор. Също така сме го отворили и получихме положителни отзиви.

Табло за хартия

В бъдеще планираме да създадем повече версии за продукта. Скицата вече е налична и ние също изграждаме PSD версията. Започнахме да създаваме ъгловата версия, това е една от най-големите заявки от нашите потребители. И ние разглеждаме ReactJS, VueJS и т.н.

Ако се интересувате от сътрудничество с нас, изпратете ми имейл на cristina@creative-tim.com