Ako zostaviť a uviesť na trh úspešnú súpravu používateľského rozhrania

Príbeh papierovej súpravy

Súprava papierového používateľského rozhrania

Hlavnou výzvou, ktorej sme od prvého dňa čelili ja a môj tím v spoločnosti Creative Tim, bolo, ako z nášho hobby urobiť ekonomický spôsob, ako sa udržať. Aby sme to dosiahli, museli sme sa naučiť, ako zostaviť krásne súpravy používateľského rozhrania, ktoré ľudia skutočne chcú používať, a ako ich dostať pred používateľov. Po niekoľkých pokusoch a veľkom úsilí sme pochopili niekoľko vecí, o ktorých si myslíme, že môžu pomôcť každému, kto sa snaží dostať do tohto priestoru.
 
 V priebehu prvých mesiacov bol vývoj produktov zodpovedný za spoluprácu môj partner Alex. Keď sme začali s trakciou na niektorých súpravách, dostali sme spätnú väzbu od našich zákazníkov, ktorí vyjadrili želanie, aby sme vydali viac. Preto som sa priamo zapojil do kódovania produktu. Nezabudnite, že toto bol môj prvý pokus.
 
 Počas tohto článku sa pokúsim čo najlepšie vysvetliť svoje úsilie pri vytváraní a následnom hľadaní publika pre jednu z našich najobľúbenejších súprav: Paper Kit. Pokúsim sa poskytnúť čo najviac detailov, takže výsledok je ako tento obrázok popisujúci, ako nakresliť koňa:

Pred pár rokmi som videl ponuku na Twitteri. Vyzerá to takto: „Dajte mi šesť hodín, aby som porezal strom a prvé štyri brúsim sekeru strávim.“ Je to pripisované Abrahámovi Lincolnovi. Toto pre mňa malo veľký zmysel a skutočne zmenilo môj pohľad na spôsob, akým pristupujem k práci.
 
 Kedysi som bol typom človeka, ktorý sa dostal do riti a plnil úlohy. Počas mojich rokov práce som sa naučil byť trpezlivejší, zaostrovať sekeru. Ako sa to premieta do vývoja a súpravy používateľského rozhrania? V podstate výskum. Pred zapísaním akéhokoľvek riadku kódu som skontroloval všetky sady používateľského rozhrania, ktoré som našiel na internete.
 
 Trhy ako ThemeForest a BootstrapBay majú širokú škálu tém. Väčšina z nich je postavená na konkrétny účel. Zvyčajne odvádzajú skvelú prácu, ak sa snažíte vytvoriť konkrétnu prezentačnú stránku. Chceli sme však postaviť niečo, čo môže koncový vývojár použiť pri zložitom projekte. Preto sme svoju pozornosť zamerali na skutočné komplexné stránky, ako sú Airbnb, Uber, Twitter, Paper53 atď. Aké prvky používajú? Aký dizajn uprednostňujú?

Prvky

Potom, čo sme prešli množstvom stránok s rôznymi účelmi: prezentácia, portfólio, sociálne, sme prišli so zoznamom základných prvkov:

  • tlačidla
  • vstupy
  • checkbox / radio
  • navigácia
  • rozbaľovací
  • ukazovatele priebehu / posuvníky
  • ponuky
  • typografie
  • snímky
  • oznámenia
  • etikety
  • kolotoč

Tieto pokrývajú viac ako 90% funkcií, ktoré potrebujete na vytvorenie stránky.

Dizajn a vývoj

Jedným z najväčších trendov v dizajne v súčasnosti bol materiál a plochý vzhľad iOS. Tieto sa mi naozaj páčili, ale neboli to moje štýly. Chcel som postaviť niečo hravé, zábavné, ľahko sledovateľné. Išiel som na veľa médií pre návrhárov, ako je Dribbble a Behance. Nakoniec som sa však uspokojil s návrhom skutočne skvelých webov, ktoré som sám používal: Paper 53 a Headspace. Myslel som, že vyzerali skvele a mali skutočne upokojujúci účinok, keď ste ich navigovali.
 
 Vytvoril som teda farebnú paletu so 6 farbami, aby som zakryl základné triedy pre Bootstrap. Všetky pozadia sa snažia podobať listom papiera a animácie majú napodobňovať pohyby papiera. Pre písma som išiel s voľným písmom ponúkaným spoločnosťou Google Fonts. Volá sa to Montserrat.
 
 Súprava môže byť veľmi užitočná, ale ľudia často nechápu, ako ju používať. Vytvoril som teda 3 vzorové stránky: Prihlasovacie meno, Profil a Vstupnú stránku, aby som ukázal, čo s tým môžete vytvoriť. Ľudia ich mohli použiť aj pri stavbe svojich projektov.

Registrujte stránku vyrobenú pomocou súpravy Paper KitStránka profilu vyrobená pomocou súpravy na papier.

Vývoj znamenal vytvorenie súborov SASS pre všetky komponenty. Tieto súbory Sass boli skompilované do CSS a pridané po Bootstrap. Takže niekto, kto už má projekt Bootstrap, môže jednoducho pridať vlastné súbory a získať nový dizajn. Úpravy jazyka Javascript boli minimálne, pretože sme hrali iba s predvolenými animáciami pre niektoré z predvolených prvkov v Bootstrap.
 
 Po vývoji prvkov sme ich testovali na všetkých obrazovkách prehliadača a zariadení. Skvelý nástroj na to je toto. A posledná časť pridávania obrázkov. Spojil som sa s niektorými z mojich obľúbených interpretov na papieri 53 a opýtal som sa ich, či je v poriadku používať ich kresby. A boli radi, že tak urobili :)
 
 Dobrá správa je, že všetky predchádzajúce prípravy viedli k celkovému vývojovému času 3 týždne. Iuhuu!

povýšenie

Keď bolo všetko pripravené, zverejnili sme súpravu na papierovej súprave. Súpravu sme zdieľali aj s niekoľkými priateľmi, aby nám dali vedieť, či našli nejaké chyby, ktoré nám unikli. Keď sa všetko rozsvietilo zeleným svetlom, urobili sme niekoľko prichádzajúcich e-mailových marketingových kampaní, v ktorých sme oznámili súpravu (používateľom, ktorí sa už prihlásili na odber služby Creative Tim). Spätná väzba bola pozitívna, a tak sme oslovili niektoré komunity. Na Hacker News, Product Hunt, Reddit sme dostali ohromné ​​odpovede. Ešte viac to niektorí vyzdvihli a použili na svoju vlastnú prácu. Zoberme si napríklad Chris Pena, ktorý s tým urobil videonávod.

Paper Kit ponúka ako bezplatné stiahnutie na Creative Tim.

Pretože väčšina položiek, ktoré sme použili pri zostavovaní súpravy, boli open-source, mysleli sme si, že je spravodlivé, že ju tiež vydávame zadarmo pre všetkých. Vytvorili sme repo na GitHub a k tomu môže prispieť každý.

údržba

Po tom, čo sme to uverili, sme objavili nové veci, o ktoré sa musíme postarať.

Najlepším spôsobom, ako udržať našu aktivitu vpred, bolo vytvorenie verzie PRO, za ktorú budú môcť používatelia platiť. Keď sme prvýkrát zostavili plán pre súpravu, obzerali sme sa späť na funkcie, ktoré sme prehliadli. Zobrali sme tieto prvky a postavili väčšie balenie. Produkt bol hitom a mnoho ľudí, ktorí používali súpravu zdarma, bolo potešením upgradovať a vyvíjať svoje výrobky ešte ľahšie.
 
 Toto nám dalo čas vyvinúť aj prístrojovú dosku s rovnakým dizajnom. To sa pekne integruje pre back-end. Ak teda vytvárate svoju prezentáciu a časť, s ktorou používateľ interaguje s použitím súpravy Paper; panel Dashboard je vynikajúcim správcom. Tiež sme ho otvorili a získali pozitívne recenzie.

Papierový informačný panel

V budúcnosti plánujeme vytvorenie ďalších verzií produktu. Náčrt je už k dispozícii a pripravujeme aj verziu PSD. Začali sme s vytváraním verzie Angular, čo je jedna z najväčších požiadaviek našich používateľov. Pozeráme sa na ReactJS, VueJS atď.

Ak máte záujem o spoluprácu s nami, pošlite mi e-mail na adresu cristina@creative-tim.com