Kako izgraditi i plasirati uspješan UI komplet

Priča iza Papir Kit

UI papir za papir

Glavni izazov s kojim smo se ja i moj tim kreativnog tima suočili od prvog dana bio je kako da hobi učinimo ekonomičnim načinom uzdržavanja. Da bismo to učinili, morali smo naučiti kako izraditi prekrasne UI setove koje ljudi zapravo žele koristiti i kako ih pribaviti pred korisnicima. Nakon nekoliko pokušaja i puno truda koji smo uložili u njega, shvatili smo nekoliko stvari za koje mislimo da mogu pomoći svima koji pokušaju ući u ovaj prostor.
 
 Tijekom prvih nekoliko mjeseci, moj partner Alex bio je zadužen za razvoj proizvoda. Nakon što smo započeli vuču nekih setova, dobili smo povratne informacije od kupaca rekavši da žele da otpustimo više. Dakle, to je stvar u kojoj sam se izravno uključio u kodiranje proizvoda. Imajte na umu da je ovo moj prvi pokušaj.
 
 Tijekom ovog članka pokušat ću objasniti najbolje što mogu kako bih stvorio, a zatim i pronašao publiku za jedan od naših najpopularnijih setova: Paper Kit. Pokušat ću dati što više detalja, pa je rezultat poput ove slike koja opisuje kako nacrtati konja:

Prije nekoliko godina vidio sam citat na twitteru. Ide ovako: "Dajte mi šest sati da sječem stablo i provest ću prve četiri oštrenje sjekire." To se pripisuje Abrahamu Lincolnu. To je za mene imalo smisla i stvarno promijenilo moju perspektivu na način na koji pristupim radu.
 
 Nekada sam stvarno bila usrano urađena osoba, snalazeći se kroz zadatke. Tijekom godina rada naučio sam biti strpljiviji, naoštriti svoju sjekiru. Kako se to odnosi na razvoj i UI Kit? U osnovi, istraživanje. Prije pisanja bilo kojeg retka koda, pregledao sam sve UI komplete koje sam pronašao na internetu.
 
 Tržišta poput ThemeForest i BootstrapBay imaju veliku temu. Većina ih je izgrađena za određenu svrhu. Obično rade sjajan posao ako pokušavate izgraditi određeno web mjesto za prezentacije. Ali željeli smo izgraditi nešto što pomoćni programer može upotrijebiti sa složenim projektom. Stoga smo moju pažnju preusmjerili na stvarne složene stranice poput Airbnb, Uber, Twitter, Paper53 itd. Koje elemente koriste? Koji dizajn više vole?

Elementi

Nakon što smo prošli kroz mnoštvo web stranica s različitim namjenama: prezentacija, portfelj, društveno, došli smo do popisa elemenata koji su temeljni:

  • tipke
  • ulazi
  • okvir / radio
  • navigacija
  • padajući
  • trake / klizači napretka
  • izbornici
  • tipografija
  • slika
  • obavijesti
  • etikete
  • karusel

Oni pokrivaju više od 90% funkcionalnosti koja vam je potrebna za izradu stranice.

Dizajn i razvoj

Jedan od najvećih trendova u dizajnu u ovom trenutku bili su Izgled materijala i iOS-a. Jako su mi se svidjele, ali oni nisu bili moj stil. Htio sam izgraditi nešto zaigrano, zabavno, lako slijediti. Nastavio sam mnogo medija za dizajnere, poput Dribbblea i Behancea. Ali na kraju sam se zaustavio na dizajnu nekih stvarno cool stranica koje sam koristio: Paper 53 i Headspace. Mislila sam da izgledaju sjajno i da imaju stvarno smirujući učinak kad ih plovite.
 
 Tako sam stvorio paletu boja sa 6 boja, kako bih pokrio osnovne klase za Bootstrap. Sve pozadine pokušavaju nalikovati listovima papira, a animacije trebaju oponašati pokrete papira. Za fontove sam gledao besplatni font koji nudi Google Fontovi. Zove se Montserrat
 
 Kit može biti vrlo koristan, ali često ljudi ne razumiju kako ga koristiti. Tako sam stvorio 3 primjere stranice: prijavu, profil i odredišnu stranicu da pokažem što možete graditi na njemu. Ljudi bi ih mogli izravno koristiti i u izradi svojih projekata.

Stranica registra napravljena s kompletom papiraStranica profila napravljena s kompletom papira.

Razvoj je značio stvaranje SASS datoteka za sve komponente. Ove datoteke Sass sastavljene su u CSS-u i dodane nakon pokretanja sustava. Dakle, netko tko već ima Bootstrap projekt može samo dodati prilagođene datoteke i dobiti novi dizajn. Izmjene Javascripta bile su minimalne jer smo se igrali samo sa zadanim animacijama za neke zadane elemente u Bootstrapu.
 
 Nakon što smo razvili elemente, testirali smo ih na svim ekranima preglednika i uređaja. Odličan alat za to je ovo. I završni dio dodavanja slika. Stupio sam u kontakt s nekim od mojih omiljenih umjetnika na Paper 53 i pitao ih je li u redu da koriste njihove crteže. I bili su sretni zbog toga :)
 
 Dobra vijest je da je obavljanje svih prethodnih priprema dovelo ukupno vrijeme razvoja od 3 tjedna. Iuhuu!

Promocija

Kad je sve bilo spremno, komplet smo postavili na Paper Kit. Komplet smo podijelili i s nekoliko prijatelja kako bi nas mogli obavijestiti otkriju li kakve bube koje smo propustili. Kad je sve dobilo zeleno svjetlo, izveli smo nekoliko ulaznih marketinških kampanja putem e-pošte najavljujući komplet (korisnicima koji su već pretplaćeni na Creative Tim). Povratne informacije su bile pozitivne, pa smo kontaktirali s nekim zajednicama. Dobili smo sjajne odgovore na Hacker News, Product Hunt, Reddit. Čak štoviše, neki su ga pokupili i koristili za svoj rad. Uzmimo za primjer Chris Pena, koji je s njim napravio video vodič.

Komplet papira dostupan je kao besplatni download na Creative Timu.

Pošto je većina predmeta koje smo koristili za izradu kompleta bila otvorenog koda, mislili smo da je to samo fer, također ga besplatno objavljujemo za sve. Tako smo stvorili repo na GitHub-u i svi mogu doprinijeti tome.

Održavanje

Nakon što smo ga pokrenuli, otkrili smo nove stvari o kojima moramo voditi računa.

Najbolji način za održavanje aktivnosti prema naprijed bilo je stvaranje PRO verzije koju će korisnici moći platiti. Stoga smo se osvrnuli na značajke koje smo previdjeli kad smo prvi put napravili plan za kit. Uzeli smo te elemente i napravili veći paket. Proizvod je bio pun pogodak i puno ljudi koji su koristili besplatni komplet rado su nadograđivali i razvijali svoje proizvode još lakše.
 
 To nam je dalo vremena i za izradu nadzorne ploče s istim dizajnom. Ovo se lijepo integrira za back-end. Dakle, ako gradite prezentaciju i dio s kojim korisnik interaktivno djeluje pomoću papira; nadzorna ploča papira čini izvrsnog administratora. Također smo ga otvorili i dobili pozitivne kritike.

Nadzorna ploča papira

U budućnosti planiramo stvoriti više verzija za proizvod. Sketch je već dostupan, a pravimo i PSD verziju. Započeli smo s stvaranjem Angular verzije, ovo je jedan od najvećih zahtjeva naših korisnika. A mi gledamo u ReactJS, VueJS, itd.

Ako ste zainteresirani za suradnju s nama, pošaljite mi e-mail na cristina@creative-tim.com