Kako sestaviti in tržiti uspešen komplet uporabniškega vmesnika

Zgodba za papirni komplet

Komplet uporabniškega vložka za papir

Glavni izziv, s katerim sva se pred dnevi srečala jaz in moja ekipa v podjetju Creative Tim, je bil, kako narediti naš hobi kot ekonomičen način za vzdrževanje sebe. Da bi to naredili, smo se morali naučiti, kako sestaviti čudovite UI komplete, ki jih ljudje dejansko želijo uporabljati in kako jih spraviti pred uporabnike. Po nekaj poskusih in veliko truda smo razumeli nekaj stvari, za katere mislimo, da lahko pomagajo vsem, ki poskušajo priti v ta prostor.
 
 Prvih nekaj mesecev je bil za razvoj izdelkov zadolžen moj partner Alex. Ko smo začeli z vleko nekaterih kompletov, smo od kupcev dobili povratne informacije, da želijo, da izpustimo več. Torej sem se neposredno vključil v kodiranje izdelka. Upoštevajte, da je bil to moj prvi poskus.
 
 V tem članku bom poskušal čim bolje razložiti svoja prizadevanja za ustvarjanje in nato iskanje občinstva za enega naših najbolj priljubljenih kompletov: Paper Kit. Poskušal bom dati čim več podrobnosti, tako da je rezultat tak, kot je na sliki, ki opisuje, kako narisati konja:

Pred nekaj leti sem na twitterju videl citat. Takole je: »Dajte mi šest ur, da seseknem drevo, in prve štiri ostrem sekiro.« Pripisan je Abrahamu Lincolnu. To je zame imelo veliko smisla in res spremenilo moj pogled na način, kako pristopim k delu.
 
 Včasih sem bila resnično usrano narejena oseba, ki se je borila skozi naloge. Skozi leta dela sem se naučil biti bolj potrpežljiv, ostriti sekiro. Kako to pomeni razvoj in UI Kit? V bistvu raziskave. Pred pisanjem katere koli vrstice kode sem pregledal vse UI komplete, ki sem jih našel na internetu.
 
 Trgi, kot so ThemeForest in BootstrapBay, imajo veliko različnih tem. Večina jih je zgrajena za določen namen. Običajno opravijo odlično delo, če poskušate zgraditi določeno predstavitveno mesto. Toda želeli smo zgraditi nekaj, kar lahko razvijalci za back-end uporabljajo pri zapletenem projektu. Zato smo mojo pozornost preusmerili na resnično kompleksna spletna mesta, kot so Airbnb, Uber, Twitter, Paper53 itd. Katere elemente uporabljajo? Kakšen dizajn imajo najraje?

Elementi

Potem, ko smo obiskali veliko spletnih mest z različnimi nameni: predstavitev, portfelj, družabno, smo sestavili seznam elementov, ki so jedro:

  • gumbi
  • vhodi
  • potrditveno polje / radio
  • navigacija
  • padajoči
  • prog palice / drsniki
  • meniji
  • tipografija
  • slike
  • obvestila
  • nalepke
  • vrtiljak

Zajemajo več kot 90% funkcionalnosti, ki jo potrebujete za izdelavo strani.

Oblikovanje in razvoj

Eden največjih trendov v oblikovanju v tem trenutku sta bila material in raven videz iOS. Te so mi bile zelo všeč, vendar niso bile moj slog. Želela sem zgraditi nekaj igrivega, zabavnega, enostavno slediti. Šel sem na veliko medijev za oblikovalce, kot so Dribbble in Behance. Vendar sem se sčasoma odločil za oblikovanje nekaj res kul mest, ki sem jih uporabil sam: Paper 53 in Headspace. Mislil sem, da izgledajo super in so imeli res pomirjujoč učinek, ko jih krmarite.
 
 Tako sem ustvaril barvno paleto s 6 barvami, da pokrijem osnovne razrede za Bootstrap. Vsa ozadja poskušajo spominjati na liste papirja, animacije pa naj bi posnemale premike kosa papirja. Za pisave sem šel z brezplačno pisavo, ki jo ponuja Google Fonts. Imenuje se Montserrat
 
 Komplet je lahko zelo koristen, vendar pogosto ljudje ne razumejo, kako ga uporabljati. Tako sem ustvaril 3 primere strani: prijavo, profil in ciljno stran, da pokažem, kaj lahko z njo sestavite. Ljudje bi jih lahko uporabljali tudi neposredno pri gradnji svojih projektov.

Stran za registracijo narejena s kompletom papirjaStran s profilom iz papirja.

Razvoj je pomenil ustvarjanje datotek SASS za vse komponente. Te datoteke Sass so bile sestavljene v CSS in dodane po zagonu programa Bootstrap. Torej lahko nekdo, ki že ima projekt Bootstrap, samo doda datoteke po meri in dobi nov dizajn. Spremembe Javascripta so bile minimalne, saj smo se igrali le s privzetimi animacijami za nekatere privzete elemente v programu Bootstrap.
 
 Po razvoju elementov smo jih preizkusili na vseh zaslonih brskalnika in naprav. Odlično orodje za to je to. In zadnji del dodajanja slik. Na papirju 53 sem stopil v stik z nekaterimi mojimi priljubljenimi umetniki in jih vprašal, če je v redu, da uporabim njihove risbe. In to so z veseljem storili :)
 
 Dobra novica je, da so vse prejšnje priprave pripeljale do skupnega časa razvoja 3 tedne. Iuhuu!

Promocija

Ko je bilo vse pripravljeno, smo komplet postavili na Paper Kit. Komplet smo delili tudi z nekaj prijatelji, da bi nam lahko sporočili, če so našli kakšne hrošče, ki smo jih pogrešali. Ko je vse dobilo zeleno luč, smo izvedli nekaj vhodnih oglaševalskih akcij po e-pošti, s katerimi smo naznanili komplet (uporabnikom, ki so že bili naročeni na Creative Tim). Povratne informacije so bile pozitivne, zato smo se obrnili na nekatere skupnosti. Odlično smo se odzvali na Hacker News, Product Hunt, Reddit. Še več, nekateri so ga pobrali in uporabili za svoje delo. Vzemimo za primer Chris Pena, ki je z njim opravil video vadbo.

Papirni komplet je na voljo kot brezplačen prenos na Creative Tim.

Ker je bila večina predmetov, ki smo jih uporabili pri izdelavi kompleta, odprtokodnih, smo mislili, da je to samo pošteno, tudi za vse ga brezplačno izdamo. Tako smo ustvarili repo na GitHubu in vsi lahko prispevajo k temu.

Vzdrževanje

Po tem, ko smo jo potegnili, smo odkrili nove stvari, za katere moramo skrbeti.

Najboljši način za nadaljevanje naše dejavnosti je bila izdelava različice PRO, ki jo bodo uporabniki lahko plačali. Tako smo se ozrli nazaj do lastnosti, ki smo jih spregledali, ko smo prvič naredili načrt za komplet. Vzeli smo te elemente in sestavili večji paket. Izdelek je bil hit in veliko ljudi, ki so uporabljali brezplačni komplet, je z veseljem nadgrajevalo in razvijalo svoje izdelke še lažje.
 
 To nam je dalo čas, da razvijemo tudi armaturno ploščo z enako zasnovo. To se lepo vključuje za hrbtni del. Če torej gradite predstavitev in del, s katerim uporabnik sodeluje z uporabo kompleta Paper; Nadzorna plošča Paper je odličen skrbnik. Prav tako smo ga odprli in dobili pozitivne kritike.

Papirna plošča

V prihodnosti načrtujemo ustvarjanje več različic izdelka. Sketch je že na voljo, gradimo pa tudi različico PSD. Začeli smo ustvarjati kotno različico, to je ena največjih zahtev naših uporabnikov. In gledamo v ReactJS, VueJS itd.

Če vas zanima sodelovanje z nami, mi pošljite e-pošto na cristina@creative-tim.com