Како изградити и пласирати успешан УИ комплет

Прича иза Папир Кит

Папир УИ Кит

Главни изазов с којим смо се ја и мој тим у креативном тиму суочили од првог дана био је како да хоби учинимо економичним начином уздржавања. Да бисмо то учинили, морали смо научити како да направимо прелепе УИ сетове које људи заправо желе да користе и како да их набаве пред корисницима. Након неколико покушаја и много труда који смо уложили у то, схватили смо неколико ствари за које мислимо да могу помоћи свима који покушају да уђу у овај простор.
 
 Током првих неколико месеци, мој партнер Алек био је задужен за развој производа. Након што смо почели да вучимо неке од комплета, добили смо повратне информације од купаца рекавши да желе да отпустимо још. Дакле, то је била ствар којом сам се директно укључио у кодирање производа. Имајте на уму да је ово мој први покушај.
 
 Током овог чланка покушаћу да објасним што сам више могу како бих створио, а затим и пронашао публику за један од наших најпопуларнијих сетова: Папер Кит. Покушаћу да дам што више детаља, тако да је резултат попут ове слике која описује како нацртати коња:

Пре неколико година видео сам цитат на твитеру. То иде овако: „Дајте ми шест сати да сечем дрво и провест ћу прве четири оштрење секире.“ То се приписује Абрахаму Линцолну. Ово је за мене имало смисла и заиста је променило моју перспективу на начин на који прилазим раду.
 
 Некада сам била стварно усрано урађена особа, напајајући се задацима. Током година рада научио сам бити стрпљивији, оштрити моју секиру. Како се ово односи на развој и УИ Кит? У основи, истраживање. Прије писања било које линије кода, прегледао сам све УИ комплете које сам пронашао на интернету.
 
 Тржишта попут ТхемеФорест и БоотстрапБаи имају велику тему. Већина њих је изграђена за одређену сврху. Обично раде сјајан посао ако покушавате да направите одређену презентацију. Али желели смо да направимо нешто што помоћни програмер може да користи са сложеним пројектом. Стога смо ми скренули пажњу на праве сложене странице попут Аирбнб, Убер, Твиттер, Папер53 итд. Које елементе користе? Који дизајн више воле?

Елементи

Након што смо прошли кроз мноштво веб локација са различитим сврхама: презентација, портфолио, друштвени, дошли смо до листе елемената који су језгро:

  • дугмади
  • улази
  • цхецкбок / радио
  • навигација
  • испустити
  • траке / клизачи
  • менији
  • типографија
  • слике
  • обавештења
  • етикете
  • вртиљак

Они покривају више од 90% функционалности која вам је потребна за прављење странице.

Дизајн и развој

Један од највећих трендова у дизајну у овом тренутку били су Материал и иОС стан изглед. Јако су ми се свиделе, али они нису били мој стил. Желео сам да изградим нешто заиграно, забавно, лако за праћење. Отишао сам на много медија за дизајнере, попут Дрибббле-а и Беханце-а. Али на крају сам се осврнуо на дизајн неких стварно цоол сајтова које сам користио: Папер 53 и Хеадспаце. Мислила сам да изгледају сјајно и да имају заиста умирујући ефекат када их крећете.
 
 Тако сам створио палету боја са 6 боја, да покријем основне класе за Боотстрап. Сва позадина покушава да личи на листове папира, а анимације имају за циљ опонашати покрете папира. За фонтове сам се обрачунао са бесплатним фонтом који нуди Гоогле Фонтови. Зове се Монтсеррат
 
 Кит може бити веома користан, али често људи не разумеју како да га користе. Тако сам створио 3 примера странице: Логин, Профил и Одредишну страницу да покажем шта можете да направите на њему. Људи би их такође могли директно користити приликом изградње својих пројеката.

Страница регистратора направљена са комплетом папираСтраница профила направљена са комплетом папира.

Развој је значио стварање САСС датотека за све компоненте. Ове Сасс датотеке су састављене у ЦСС и додате после Боотстрапа. Дакле, неко ко већ има Боотстрап пројекат може само додати прилагођене датотеке и добити нови дизајн. Модификације Јавасцрипта биле су минималне јер смо се играли само са заданим анимацијама за неке подразумеване елементе у Боотстрапу.
 
 Након што смо развили елементе, тестирали смо их на свим екранима претраживача и уређаја. Одлично средство за то је ово. И последњи део додавања слика. Ступио сам у контакт са неким од својих фаворита уметника на Папер 53 и питао их да ли је у реду да користе њихове цртеже. И они су то радо урадили :)
 
 Добра вест је да је обављање свих ранијих припрема довело до укупног времена развоја од 3 недеље. Иухуу!

Промоција

Када је све било спремно, комплет смо поставили на Папер Кит. Комплет смо поделили и са неколико пријатеља како би могли да нас обавештавају ако пронађу грешке које смо пропустили. Кад је све добило зелено светло, урадили смо неколико улазних маркетиншких кампања путем е-поште најавивши комплет (корисницима који су већ претплаћени на Цреативе Тим). Повратне информације су биле позитивне, па смо се обратили неким заједницама. Добили смо сјајне одговоре на Хацкер Невс, Продуцт Хунт, Реддит. Чак штавише, неки су га покупили и користили за свој рад. Узмимо за пример Цхрис Пена, који је урадио видео туториал с њим.

Папирни комплет доступан је као бесплатни довнлоад на Цреативе Тим-у.

Пошто је већина предмета које смо користили за креирање комплета отвореног кода, мислили смо да је то само фер, такође га бесплатно објављујемо за све. Тако смо направили репо на ГитХуб-у и сви могу да допринесу томе.

Одржавање

Након што смо га лансирали, открили смо нове ствари о којима морамо водити рачуна.

Најбољи начин да наставимо са активностима напред је стварање ПРО верзије коју ће корисници моћи да плаћају. Тако смо се осврнули на карактеристике које смо превидјели када смо први пут направили план за кит. Узели смо те елементе и направили већи пакет. Производ је био пун погодак и многи људи који су користили бесплатни комплет радо су надограђивали и развијали своје производе још лакше.
 
 Ово нам је дало времена да развијемо и контролну таблу са истим дизајном. Ово се лепо интегрише у позадину. Дакле, ако правите презентацију и део са којим корисник комуницира помоћу пакета за папир; Папирна табла чини одличног администратора. Такође смо га отворили и добили позитивне критике.

Папирна табла

У будућности планирамо створити више верзија за производ. Скетцх је већ доступан, а правимо и ПСД верзију. Започели смо са прављењем Ангулар верзије, ово је један од највећих захтева наших корисника. А ми гледамо у РеацтЈС, ВуеЈС, итд.

Ако сте заинтересовани да сарађујете са нама, пошаљите ми мејл на адресу цристина@цреативе-тим.цом