Kuidas luua ja turundada edukat kasutajaliidese komplekti

Paberikomplekti taga olev lugu

Paberi UI komplekt

Peamine väljakutse, millega mina ja mu meeskond Creative Timil alates esimesest päevast silmitsi seisime, oli see, kuidas muuta meie hobi ökonoomseks viisiks enda ülalpidamiseks. Selleks pidime õppima, kuidas ehitada ilusaid kasutajaliidese komplekte, mida inimesed tegelikult kasutada tahavad, ja kuidas neid kasutajate ette tuua. Pärast seda, kui oleme teinud mõned katsed ja teinud palju pingutusi, oleme aru saanud paarist asjast, mis meie arvates võivad aidata kõigil, kes proovivad sellesse ruumi pääseda.
 
 Esimese paari kuu jooksul vastutas toodete arendamise eest mu partner Alex. Pärast mõne komplekti veojõu alustamist saime klientidelt tagasisidet, öeldes, et nad soovivad, et me vabastaksime rohkem. Nii et see oli punkt, millesse ma olen sattunud otse toote kodeerimisega. Pidage meeles, et see oli minu esimene katse.
 
 Selle artikli jooksul püüan võimalikult hästi selgitada oma jõupingutusi ühe meie kõige populaarsema komplekti: paberikomplekti loomisel ja seejärel publiku leidmisel. Püüan anda võimalikult palju üksikasju, nii et tulemus on selline, nagu see pilt kirjeldab, kuidas hobust joonistada:

Paar aastat tagasi nägin twitteris tsitaati. See kõlab nii: “Andke mulle kuus tundi puu maha raiuda ja ma veedan esimesed neli kirve teritamiseks.” See omistatakse Abraham Lincolnile. See tegi minu jaoks palju mõtet ja muutis tõesti minu vaatenurka lähenemisele tööle lähenemisel.
 
 Ma olin kunagi väga pask-tüüpi inimene, kes andis ülesannetele jõudu. Oma aastatepikkuse töö jooksul olen õppinud olema kannatlikum, teritama oma kirvest. Kuidas see tähendab arenevat ja UI-komplekti? Põhimõtteliselt teadusuuringud. Enne koodirea kirjutamist olen kontrollinud kõiki UI komplekte, mille leidsin Internetist.
 
 Turgudel, nagu ThemeForest ja BootstrapBay, on väga erinevaid teemasid. Enamik neist on ehitatud kindlale otstarbele. Tavaliselt teevad nad suurepärase töö, kui proovite üles ehitada konkreetse esitluskoha. Kuid me tahtsime ehitada midagi sellist, mida tausta arendaja saaks keeruka projektiga kasutada. Niisiis suunasime meie tähelepanu sellistele keerukatele saitidele nagu Airbnb, Uber, Twitter, Paper53 jne. Milliseid elemente nad kasutavad? Millist disaini nad eelistavad?

Elemendid

Pärast paljude erinevate eesmärkidega saitide tutvustamist: esitlus, portfoolio, sotsiaalsed saidid välja elemendi, mis on tuum:

  • nupud
  • sisendid
  • ruut / raadio
  • navigeerimine
  • rippmenüüst
  • edenemisriba / liugurit
  • menüüd
  • tüpograafia
  • pilte
  • teatised
  • sildid
  • karussell

Need katavad üle 90% lehe ehitamiseks vajalikest funktsioonidest.

Kujundus ja arendus

Üks disaini suurimaid suundumusi oli hetkel Materjal ja iOS-i välimus. Mulle need väga meeldisid, kuid need ei olnud minu stiil. Tahtsin ehitada midagi mängulist, lõbusat, hõlpsalt jälgitavat. Käisin paljudel disaineritel, näiteks Dribbble ja Behance. Kuid lõpuks otsustasin mõne tõeliselt laheda saidi, mida ma ise kasutasin, kujundamise: Raamat 53 ja Headspace. Arvasin, et need nägid suurepärased välja ja neil navigeerimisel oli neil tõesti rahustav mõju.
 
 Seega lõin Bootstrapi põhiklasside katmiseks 6 värvitooniga värvipaleti. Kõik taustad üritavad meenutada paberilehti ja animatsioonid on mõeldud paberitüki liikumist jäljendama. Fontide jaoks läksin koos tasuta fontidega, mida pakkus Google Fonts. Selle nimi on Montserrat.
 
 Komplekt võib olla väga kasulik, kuid sageli ei saa inimesed aru, kuidas seda kasutada. Seega lõin 3 näidislehte: sisselogimise, profiili ja maandumislehe, et näidata, mida saate sellega luua. Inimesed saaksid neid ka otse oma projektide koostamisel kasutada.

Registreerige paberikomplektiga tehtud lehtPaberikomplektiga tehtud profiilileht.

Arendus tähendas SASS-failide loomist iga komponendi jaoks. Need Sassi failid kompileeriti CSS-i ja lisati pärast Bootstrap-i. Niisiis, keegi, kellel juba on alglaadimisprojekt, saab lihtsalt lisada kohandatud failid ja saada uue kujunduse. Javascripti modifikatsioonid olid minimaalsed, kuna me mängisime Bootstrapis ainult mõne vaikimisi kasutatava elemendi vaikimisi animatsioonidega.
 
 Pärast elementide väljatöötamist katsetasime neid kõigil brauseri ja seadme ekraanidel. Suurepärane vahend selleks on see. Ja piltide lisamise viimane osa. Võtsin mõne oma lemmikkunstnikuga ühendust paberil 53 ja küsisin neilt, kas nende joonistusi on lubatud kasutada. Ja nad tegid seda hea meelega :)
 
 Hea uudis on see, et kõigi varasemate ettevalmistuste tegemine viis arenguaega kokku 3 nädalat. Iuhuu!

Edendamine

Kui kõik oli valmis, postitasime komplekti paberikomplekti. Oleme komplekti ka paari sõbraga jaganud, et nad saaksid meile teada anda, kui leiavad mõni viga, millest me ilma jäime. Kui kõik sai rohelise tule, tegime mõned sissetulevad meiliturunduskampaaniad, milles kuulutati välja komplekt (kasutajatele, kes on juba Creative Tim'i tellinud). Tagasiside oli positiivne, nii et jõudsime mõne kogukonna poole. Saime suurepäraseid vastuseid Hacker News, Product Hunt, Reddit kohta. Veelgi enam, mõned võtsid selle üles ja kasutasid seda oma töö jaoks. Võtke näiteks Chris Pena, kes tegi sellega videoõpetuse.

Paberikomplekt, mida pakutakse tasuta allalaadimiseks saidil Creative Tim.

Kuna enamik esemeid, mida komplekti loomisel kasutasime, olid avatud lähtekoodiga, arvasime, et see on õiglane, vabastame selle ka kõigile tasuta. Nii lõime GitHubis repo ja kõik saavad sellesse oma panuse anda.

Hooldus

Pärast selle pesemist avastasime uusi asju, mille eest me hoolitsema pidime.

Parim viis edasise tegevuse jätkamiseks oli PRO versiooni valmistamine, mille eest kasutajad saavad maksta. Niisiis vaatasime tagasi funktsioonidele, millest jätsime tähelepanuta, kui tegime esmakordselt komplekti plaani. Võtsime need elemendid ja ehitasime suurema paki. See toode oli hitt ja paljud tasuta komplekti kasutanud inimesed uuendasid ja arendasid oma tooteid veelgi hõlpsamini.
 
 See andis meile aega ka sama kujundusega armatuurlaua väljatöötamiseks. See integreerub tausta jaoks kenasti. Niisiis, kui loote oma esitlust ja osa, millega kasutaja suhtleb paberikomplekti abil; paberi juhtpaneel annab suurepärase administraatori. Oleme seda ka avatud lähtekoodiga ja saanud positiivseid ülevaateid.

Paberi armatuurlaud

Tulevikus plaanime luua tootele rohkem versioone. Sketch on juba saadaval ja ehitame ka PSD versiooni. Oleme alustanud nurkversiooni loomist, see on meie kasutajate üks suurimaid nõudmisi. Ja me uurime ReactJS, VueJS jne.

Kui olete huvitatud meiega koostööst, saatke mulle e-kiri aadressil cristina@creative-tim.com