Kā izveidot un laist tirgū veiksmīgu UI komplektu

Stāsts par papīra komplektu

Papīra UI komplekts

Galvenais izaicinājums, ar kuru kopš pirmās dienas esmu saskāries es un mana komanda Creative Tim, bija tas, kā padarīt mūsu hobiju par ekonomisku veidu, kā sevi uzturēt. Lai to izdarītu, mums bija jāiemācās izveidot skaistus UI komplektus, kurus cilvēki patiesībā vēlas izmantot, un kā tos nogādāt lietotāju priekšā. Pēc dažiem mēģinājumiem un daudzām pūlēm tajā esam sapratuši pāris lietas, kuras, mūsuprāt, var palīdzēt ikvienam, kurš mēģina iekļūt šajā telpā.
 
 Pirmo pāris mēnešu laikā mans partneris Alekss bija atbildīgs par izstrādājumu izstrādi. Pēc tam, kad sākām vilkt dažus komplektus, mēs saņēmām atsauksmes no klientiem, sakot, ka viņi vēlas, lai mēs izlaižam vairāk. Tāpēc es biju iesaistījies tieši produkta kodēšanā. Paturiet prātā, ka šis bija mans pirmais mēģinājums.
 
 Šī raksta laikā es centīšos pēc iespējas labāk izskaidrot savus centienus, veidojot un pēc tam atrodot auditoriju vienam no mūsu populārākajiem komplektiem: papīra komplektam. Es centīšos sniegt pēc iespējas vairāk informācijas, tāpēc rezultāts ir tāds kā šis attēls, kurā aprakstīts, kā uzzīmēt zirgu:

Pirms pāris gadiem twitterī ieraudzīju citātu. Tas notiek šādi: “Dodiet man sešas stundas nocirst koku, un pirmās četras es pavadīšu, asinot asu.” Tas tiek attiecināts uz Abrahamu Linkolnu. Tas man radīja daudz jēgas un patiešām mainīja manu skatījumu uz to, kā es vērošos darbā.
 
 Es kādreiz biju patiešām izdabājis sūdīgam cilvēkam, kurš darbināja uzdevumus. Savu darba gadu laikā esmu iemācījusies būt pacietīgāka, asināt savu cirvi. Kā tas izpaužas kā izstrādes un UI komplekts? Pamatā pētījumi. Pirms jebkuras koda rindas rakstīšanas esmu pārbaudījis visus UI komplektus, kurus atradu internetā.
 
 Tādos tirgos kā ThemeForest un BootstrapBay ir ļoti dažādas tēmas. Lielākā daļa no tām ir būvētas konkrētam mērķim. Viņi parasti veic lielisku darbu, ja jūs mēģināt izveidot īpašu prezentācijas vietni. Bet mēs gribējām izveidot kaut ko tādu, ko fona izstrādātājs var izmantot sarežģītā projektā. Tāpēc mēs pievērsām manu uzmanību reālām sarežģītām vietnēm, piemēram, Airbnb, Uber, Twitter, Paper53 utt. Kādus elementus viņi izmanto? Kādam dizainam viņi dod priekšroku?

Elementi

Pēc daudzu vietņu apmeklēšanas ar dažādiem mērķiem: prezentāciju, portfolio, sociālo, mēs nācām klajā ar galveno elementu sarakstu:

  • pogas
  • ieejas
  • izvēles rūtiņa / radio
  • navigācija
  • nomest lejā
  • progresa joslas / slīdņi
  • izvēlnes
  • tipogrāfija
  • attēlus
  • paziņojumi
  • etiķetes
  • karuselis

Tie aptver vairāk nekā 90% no funkcionalitātes, kas jums nepieciešama lapas izveidošanai.

Projektēšana un izstrāde

Viena no lielākajām dizaina tendencēm šobrīd bija materiāls un iOS plakanais izskats. Man tie ļoti patika, bet tie nebija mans stils. Es gribēju uzbūvēt kaut ko rotaļīgu, jautru, viegli sekojamu. Es devos daudzos nesējos dizaineriem, piemēram, Dribbble un Behance. Bet galu galā es izlēmu par dažu ļoti foršu vietņu, kuras es pats izmantoju, noformējumu: 53. papīrs un Headspace. Es domāju, ka viņi izskatījās lieliski, un viņiem bija patiešām nomierinoša iedarbība, kad jūs tos pārvietojāt.
 
 Tāpēc es izveidoju krāsu paleti ar 6 krāsām, lai aptvertu Bootstrap pamata klases. Visi foni mēģina līdzināties papīra lapām, un animācijas ir domātas, lai atdarinātu papīra lapas kustības. Fontu gadījumā es izmantoju bezmaksas fontu, ko piedāvā Google Fonts. To sauc par Montserrātu.
 
 Komplekts var būt ļoti noderīgs, taču bieži vien cilvēki nesaprot, kā to lietot. Tāpēc es izveidoju 3 lapu lapas: pieteikumvārdu, profilu un galveno lapu, lai parādītu, ko jūs varat izveidot ar to. Cilvēki tos varēja izmantot arī tieši, veidojot savus projektus.

Reģistrējiet lapu, kas izgatavota, izmantojot papīra komplektuProfila lapa izgatavota ar papīra komplektu.

Izstrāde nozīmēja izveidot SASS failus visiem komponentiem. Šie Sass faili tika apkopoti CSS un pievienoti pēc Bootstrap. Tātad, kādam, kam jau ir Bootstrap projekts, var vienkārši pievienot pielāgotos failus un iegūt jauno dizainu. Javascript modifikācijas bija minimālas, jo mēs spēlējām tikai ar noklusējuma animācijām dažiem Bootstrap noklusējuma elementiem.
 
 Pēc elementu izstrādes mēs tos pārbaudījām visos pārlūku un ierīču ekrānos. Lielisks rīks, lai to izdarītu, ir šis. Un attēlu pievienošanas pēdējā daļa. Es sazinājos ar dažiem saviem iecienītākajiem māksliniekiem uz 53. papīra un pajautāju viņiem, vai ir pareizi izmantot viņu zīmējumus. Un viņi ar prieku to izdarīja :)
 
 Labā ziņa ir tā, ka visu iepriekšējo sagatavošanās darbu kopējais izstrādes laiks bija 3 nedēļas. Iuhuu!

Paaugstināšana

Kad viss bija gatavs, mēs esam ievietojuši komplektu papīra komplektā. Mēs esam arī kopīgojuši komplektu ar pāris draugiem, lai viņi varētu mums paziņot, ja viņi ir atraduši kļūdas, kuras mēs esam pamanījuši. Kad viss ieguva zaļo gaismu, mēs rīkojām dažas ienākošās e-pasta mārketinga kampaņas, paziņojot par komplektu (lietotājiem, kuri jau abonēja vietnē Creative Tim). Atsauksmes bija pozitīvas, tāpēc mēs sazinājāmies ar dažām kopienām. Mēs saņēmām lieliskas atbildes par Hacker News, Product Hunt, Reddit. Pat vairāk, daži to paņēma un izmantoja saviem darbiem. Piemēram, Kriss Pena, kurš ar to veica video apmācību.

Papīra komplekts, kas tiek piedāvāts kā bezmaksas lejupielāde vietnē Creative Tim.

Tā kā lielākā daļa komplekta izveidošanai izmantoto priekšmetu bija atvērtā pirmkoda, mēs domājām, ka tas ir tikai godīgi, tāpēc mēs to visiem atbrīvojam arī bez maksas. Tātad mēs izveidojām repo vietnē GitHub, un visi var dot savu ieguldījumu tajā.

Apkope

Pēc tam, kad to iemērc, mēs atklājām jaunas lietas, par kurām mums bija jārūpējas.

Labākais veids, kā turpināt savu darbību, bija tādas PRO versijas izveidošana, par kuru lietotāji varēs samaksāt. Tāpēc mēs atskatījāmies uz iespējām, kuras mēs aizmirsām, kad pirmo reizi sastādījām komplekta plānu. Mēs paņēmām šos elementus un uzbūvējām lielāku iepakojumu. Šis produkts bija pozitīvs rezultāts, un daudzi cilvēki, kuri izmantoja bezmaksas komplektu, labprāt jaunināja un izstrādāja savus produktus vēl vienkāršāk.
 
 Tas deva mums laiku arī informācijas paneļa izstrādei ar tādu pašu dizainu. Tas labi integrējas fona apstākļos. Tātad, ja jūs veidojat prezentāciju un daļu, ar kuru lietotājs mijiedarbojas, izmantojot papīra komplektu; papīra informācijas panelis nodrošina lielisku administratoru. Mēs to esam arī atklāti ieguvuši un saņēmuši pozitīvas atsauksmes.

Papīra informācijas panelis

Nākotnē mēs plānojam izveidot vairāk produkta versiju. Skice jau ir pieejama, un mēs arī veidojam PSD versiju. Mēs esam sākuši izveidot leņķisko versiju, tas ir viens no lielākajiem pieprasījumiem no mūsu lietotājiem. Un mēs skatāmies ReactJS, VueJS utt.

Ja jūs interesē sadarboties ar mums, atsūtiet man e-pastu uz cristina@creative-tim.com