Kaip sukurti ir parduoti sėkmingą vartotojo sąsajos rinkinį

„The Paper Kit“ istorija

Popieriaus vartotojo sąsajos rinkinys

Pagrindinis iššūkis, kurį aš ir mano komanda „Creative Tim“ susidūrė nuo pirmosios dienos, buvo tai, kaip padaryti mūsų pomėgį ekonominiu būdu išlaikyti save. Norėdami tai padaryti, mes turėjome išmokti sukurti gražius UI rinkinius, kuriuos žmonės iš tikrųjų nori naudoti, ir kaip juos pateikti vartotojams. Po kelių bandymų ir įdėjus daug pastangų, mes supratome keletą dalykų, kurie, mūsų manymu, gali padėti kiekvienam, bandančiam patekti į šią erdvę.
 
 Per pirmuosius porą mėnesių mano partneris Aleksas buvo atsakingas už produktų kūrimą. Pradėję traukti kai kuriuos rinkinius, iš klientų sulaukėme atsiliepimų, sakydami, kad jie nori, kad išleistume daugiau. Taigi būtent tada aš įsitraukiau į produkto kodavimą. Atminkite, kad tai buvo pirmas mano bandymas.
 
 Šio straipsnio metu stengsiuosi kiek įmanoma geriau paaiškinti savo pastangas kuriant ir surandant auditoriją vienam iš mūsų populiariausių rinkinių: „Paper Kit“. Stengsiuosi pateikti kuo daugiau detalių, todėl rezultatas yra toks, kaip šis paveikslėlis, kuriame aprašoma, kaip nupiešti arklį:

Prieš porą metų Twitteryje pamačiau citatą. Tai vyksta taip: „Skirkite man šešias valandas nukirsti medį ir aš praleisiu pirmuosius keturis kirvio galandimo darbus.“ Tai priskiriama Abrahamui Linkolnui. Tai man padarė daug prasmės ir tikrai pakeitė mano požiūrį į požiūrį į darbą.
 
 Aš buvau tikrai „šūdas“ tipo žmogus, galintis atlikti užduotis. Per savo darbo metus išmokau būti kantriau, aštriau kirviu. Kaip tai gali būti sukurta kuriant ir UI rinkinį? Iš esmės tyrimai. Prieš rašydamas kodo eilutę, apžiūrėjau visus UI rinkinius, kuriuos radau internete.
 
 Tokios rinkos kaip „ThemeForest“ ir „BootstrapBay“ pasižymi didele temų įvairove. Daugelis jų yra pastatyti pagal konkretų tikslą. Paprastai jie atlieka puikų darbą, jei bandote sukurti konkrečią pristatymo svetainę. Bet mes norėjome sukurti tai, ką modernus kūrėjas gali naudoti sudėtingame projekte. Taigi, mes nukreipėme mano dėmesį į tokias sudėtingas svetaines kaip „Airbnb“, „Uber“, „Twitter“, „Paper53“ ir kt. Kokius elementus jie naudoja? Kokiam dizainui jie teikia pirmenybę?

Elementai

Apžiūrėję daugybę svetainių, turinčių skirtingus tikslus: pristatymą, aplanką, socialinius, mes sugalvojome elementų, kurie yra pagrindiniai, sąrašą:

  • mygtukai
  • įėjimai
  • varnelė / radijas
  • navigacija
  • išskleidžiamasis
  • progreso juostos / slankmačiai
  • meniu
  • tipografija
  • vaizdai
  • pranešimai
  • etiketes
  • karuselė

Jie apima daugiau nei 90% funkcijų, kurių jums reikia norint sukurti puslapį.

Projektavimas ir plėtra

Viena didžiausių dizaino tendencijų šiuo metu buvo „Material“ ir „iOS“ plokščia išvaizda. Man jie labai patiko, bet jie nebuvo mano stiliaus. Norėjau sukurti kažką žaismingo, linksmo, lengvai sekamo. Aš ėmiausi daugybės priemonių, skirtų dizaineriams, pavyzdžiui, „Dribbble“ ir „Behance“. Bet aš galų gale apsisprendžiau kurdamas tikrai įdomias svetaines, kuriomis naudojau save: „53 Paper“ ir „Headspace“. Aš maniau, kad jie atrodo puikiai, ir jie turėjo tikrai raminančią poveikį, kai jūs juos naršėte.
 
 Taigi aš sukūriau 6 spalvų paletę, skirtą pagrindinėms „Bootstrap“ klasėms. Visi fonai bando priminti popieriaus lapus, o animacija skirta mėgdžioti popieriaus lapo judesius. Šriftams aš pasinaudojau nemokamu šriftu, kurį pasiūlė „Google Fonts“. Jis vadinamas Montserratu.
 
 Rinkinys gali būti labai naudingas, tačiau dažnai žmonės nesupranta, kaip juo naudotis. Taigi aš sukūriau 3 puslapių pavyzdžius: prisijungimo, profilio ir nukreipimo puslapio, kad parodyčiau, ką su juo galite sukurti. Žmonės taip pat galėjo juos tiesiogiai naudoti kurdami savo projektus.

Užregistruokite puslapį, pagamintą naudojant popieriaus rinkinįProfilio puslapis pagamintas naudojant popieriaus rinkinį.

Tobulinimas reiškė kiekvieno komponento SASS failų kūrimą. Šie „Sass“ failai buvo kaupiami CSS ir pridedami po „Bootstrap“. Taigi, kažkas, kuris jau turi „Bootstrap“ projektą, gali tiesiog pridėti pasirinktinius failus ir gauti naują dizainą. „Javascript“ modifikacijos buvo minimalios, nes mes grojome tik su kai kurių numatytųjų „Bootstrap“ elementų numatytosiomis animacijomis.
 
 Sukūrę elementus, išbandėme juos visuose naršyklių ir įrenginių ekranuose. Puiki priemonė tai padaryti yra tai. Ir paskutinė vaizdų pridėjimo dalis. Aš susisiekiau su kai kuriais savo mėgstamais menininkais dėl 53 popieriaus ir paklausiau jų, ar gerai naudoti jų piešinius. Ir jie mielai tai padarė :)
 
 Geros žinios yra tai, kad atlikus visus ankstesnius pasiruošimo darbus, kūrimo laikas truko 3 savaites. Iuhuu!

Skatinimas

Kai viskas buvo paruošta, mes paskelbėme rinkinį ant popieriaus rinkinio. Mes taip pat pasidalinome rinkiniu su pora draugų, kad jie galėtų mums pranešti, jei ras kokių klaidų, kurias praleidome. Kai viskas įgavo žalią šviesą, mes padarėme keletą atvykstamųjų el. Pašto rinkodaros kampanijų, kuriose paskelbėme apie rinkinį (vartotojams, kurie jau užsiprenumeravo „Creative Tim“). Atsiliepimai buvo teigiami, todėl susisiekėme su kai kuriomis bendruomenėmis. Sulaukėme puikių atsiliepimų apie „Hacker News“, „Product Hunt“, „Reddit“. Dar daugiau, kai kurie ją pasiėmė ir panaudojo savo darbams. Imkime pavyzdį Chrisą Peną, kuris kartu su ja darė vaizdo įrašą.

Popierinis rinkinys, kurį nemokamai galite atsisiųsti iš „Creative Tim“.

Kadangi dauguma daiktų, kuriuos mes naudojome kurdami rinkinį, buvo atvirojo kodo, mes manėme, kad jis yra sąžiningas, todėl mes jį nemokamai išleidžiame visiems. Taigi sukūrėme repą „GitHub“ ir visi gali prie jos prisidėti.

Priežiūra

Nusiplovę jį atradome naujų dalykų, kuriais turėjome pasirūpinti.

Geriausias būdas išlaikyti savo veiklą judant į priekį buvo sukurti PRO versiją, už kurią vartotojai galės sumokėti. Taigi mes atsigręžėme į savybes, į kurias nepastebėjome pirmą kartą sudarydami rinkinio planą. Mes paėmėme tuos elementus ir pastatėme didesnę pakuotę. Šis produktas sulaukė populiarumo, ir daugelis žmonių, kurie naudojosi nemokamu rinkiniu, mielai tobulino ir tobulino savo produktus dar lengviau.
 
 Tai leido mums sukurti to paties dizaino prietaisų skydelį. Tai gražiai integruojasi į foną. Taigi, jei kuriate savo pristatymą ir tą dalį, su kuria vartotojas bendrauja, naudodamas popieriaus rinkinį; „Paper Dashboard“ suteikia puikų administratorių. Mes taip pat turime atvirųjų šaltinių ir sulaukėme teigiamų atsiliepimų.

Popieriaus prietaisų skydelis

Ateityje planuojame sukurti daugiau produkto versijų. Eskizas jau yra ir mes kuriame PSD versiją. Mes pradėjome kurti kampinę versiją, tai yra vienas didžiausių mūsų vartotojų prašymų. Ir mes žiūrime į „ReactJS“, „VueJS“ ir kt.

Jei jus domina bendradarbiavimas su mumis, atsiųskite man el. Laišką adresu cristina@creative-tim.com