Cum să construiți și să comercializați un kit UI de succes

Povestea din spatele kitului de hârtie

Kit UI de hârtie

Principala provocare cu care ne-am confruntat eu și echipa mea de la Creative Tim încă din prima zi a fost să facem din hobby-ul nostru un mod economic de a ne susține pe noi înșine. Pentru a face acest lucru, a trebuit să învățăm cum să construim kituri UI frumoase pe care oamenii doresc să le utilizeze și cum să le aducă în fața utilizatorilor. După câteva încercări și mult efort depus, am înțeles câteva lucruri care credem că pot ajuta pe oricine încearcă să intre în acest spațiu.
 
 În primele două luni, partenerul meu Alex s-a ocupat de dezvoltarea produselor. După ce am început să tragem cu tracțiune pe unele kituri, am primit feedback de la clienții noștri, spunând că au dorit să eliberam mai mult. Așa a fost punctul în care m-am implicat direct în codificarea produsului. Rețineți că aceasta a fost prima mea încercare.
 
 În timpul acestui articol, voi încerca să explic cât pot de bine eforturile mele de a crea și apoi de a găsi o audiență pentru unul dintre cele mai populare kituri noastre: Paper Kit. Voi încerca să ofer cât mai multe detalii posibile, astfel încât rezultatul este ca această imagine care descrie cum să deseneze un cal:

Acum câțiva ani am văzut un citat pe twitter. Se întâmplă astfel: „Dă-mi șase ore să tai un copac și voi petrece primele patru ascuțind toporul.” Este atribuit lui Abraham Lincoln. Acest lucru a avut mult sens pentru mine și mi-a schimbat într-adevăr perspectiva asupra modului în care abordez munca.
 
 Am fost o persoană cu adevărat plină de rahat, care se ocupă de sarcini. De-a lungul anilor mei de muncă, am învățat să fiu mai răbdător, să-mi ascuțesc toporul. Cum se traduce asta în dezvoltare și kit UI? Practic, cercetează. Înainte de a scrie orice linie de cod, am inspectat toate kiturile UI pe care le-am găsit pe internet.
 
 Piețele precum ThemeForest și BootstrapBay au o mare varietate de teme. Majoritatea sunt construite pentru un scop specific. De obicei fac o treabă excelentă dacă încercați să construiți un site de prezentare specific. Dar am vrut să construim ceva pe care un dezvoltator de back-end îl poate folosi cu un proiect complex. Prin urmare, mi-am îndreptat atenția către site-uri reale complexe precum Airbnb, Uber, Twitter, Paper53 etc. Ce elemente folosesc? Ce design preferă?

Elementele

După ce am traversat o mulțime de site-uri cu scopuri diferite: prezentare, portofoliu, social, am venit cu elementele care sunt nucleul:

  • butoane
  • intrări
  • casetă de selectare / Radio
  • navigare
  • scapă jos
  • bare de progres / glisante
  • meniuri
  • tipografie
  • imagini
  • notificări
  • etichete
  • carusel

Acestea acoperă peste 90% din funcționalitatea de care aveți nevoie pentru a construi o pagină.

Design și dezvoltare

Una dintre cele mai mari tendințe în materie de design în acest moment au fost Materialul și aspectul plat al iOS. Mi-au plăcut foarte mult, dar nu au fost stilul meu. Am vrut să construiesc ceva jucăuș, distractiv, ușor de urmărit. Am mers pe mai multe medii pentru designeri, precum Dribbble și Behance. În cele din urmă m-am instalat pe designul unor site-uri cu adevărat interesante pe care le-am folosit eu: Paper 53 și Headspace. Am crezut că arată grozav și au efect efectiv calmant atunci când le-ați navigat.
 
 Așa că am creat o paletă de culori cu 6 culori, pentru a acoperi clasele de bază pentru Bootstrap. Toate fundalurile încearcă să semene cu foi de hârtie, iar animațiile sunt menite să imite mișcările unei bucăți de hârtie. Pentru fonturile am mers cu un font gratuit oferit de fonturile Google. Se numește Montserrat.
 
 Un kit poate fi foarte util, dar de multe ori oamenii nu înțeleg cum să-l folosească. Așa că am creat 3 pagini de exemplu: o autentificare, un profil și o pagină de destinație pentru a arăta ce puteți construi cu acesta. Oamenii le-ar putea folosi și direct atunci când își construiesc proiectele.

Pagina de înregistrare făcută cu kit de hârtiePagina de profil realizată cu kit de hârtie.

Dezvoltarea a însemnat crearea de fișiere SASS pentru fiecare componentă. Aceste fișiere Sass au fost compilate în CSS și adăugate după Bootstrap. Deci, cineva care are deja un proiect Bootstrap poate adăuga doar fișierele personalizate și obține noul design. Modificările Javascript au fost minime, deoarece am jucat doar cu animațiile implicite pentru unele dintre elementele implicite din Bootstrap.
 
 După dezvoltarea elementelor, le-am testat pe toate ecranele browserului și dispozitivelor. Un instrument minunat pentru a face acest lucru este acesta. Și partea finală a adăugării imaginilor. Am luat legătura cu unii dintre artiștii mei favoriți de pe Hârtia 53 și i-am întrebat dacă este bine să folosească desenele lor. Și au fost fericiți să facă asta :)
 
 Vestea bună este că efectuarea tuturor preparatelor anterioare a dus la un timp total de dezvoltare de 3 săptămâni. Iuhuu!

Promovare

Când totul a fost gata, am postat kitul pe Paper Kit. De asemenea, am împărtășit kit-ul cu câțiva prieteni, astfel încât să ne poată anunța dacă găsesc erori care ne lipseau. Când totul a luat undă verde, am făcut câteva campanii de marketing prin e-mail care anunță kitul (pentru utilizatorii abonați deja la Creative Tim). Feedback-ul a fost pozitiv, așa că am ajuns la unele comunități. Am primit răspunsuri grozave la Hacker News, Product Hunt, Reddit. Și mai mult, unii au ridicat-o și au folosit-o pentru propria lor muncă. Ia exemplu Chris Pena, care a făcut un tutorial video cu acesta.

Paper Kit oferit ca descărcare gratuită pe Creative Tim.

Deoarece majoritatea articolelor pe care le-am folosit pentru a crea kit-ul au fost open-source, am considerat că este corect să îl lansăm și gratuit pentru toată lumea. Așa că am creat o repo pe GitHub și toată lumea poate contribui la aceasta.

întreținere

După ce l-am întins, am descoperit lucruri noi de care a trebuit să avem grijă.

Cea mai bună modalitate de a ne menține activitatea înaintând a fost realizarea unei versiuni PRO pe care utilizatorii vor putea să o plătească. Așa că ne-am uitat înapoi la caracteristicile pe care le-am trecut cu vederea atunci când am făcut planul pentru kit. Am luat acele elemente și am construit un pachet mai mare. Produsul a fost un succes și o mulțime de oameni care au folosit kit-ul gratuit s-au bucurat să își actualizeze și să își dezvolte produsele și mai ușor.
 
 Acest lucru ne-a dat timpul să dezvoltăm și un tablou de bord cu același design. Acest lucru se integrează frumos pentru back-end. Deci, dacă vă construiți prezentarea și partea cu care utilizatorul interacționează folosind kitul de hârtie; Tabloul de bord de hârtie creează un admin excelent. De asemenea, am extras-o și am primit recenzii pozitive.

Tabloul de bord din hârtie

În viitor, intenționăm să creăm mai multe versiuni pentru produs. Schița este deja disponibilă și construim și versiunea PSD. Am început să creăm versiunea Angular, aceasta este una dintre cele mai mari solicitări ale utilizatorilor noștri. Și ne uităm în ReactJS, VueJS etc.

Dacă sunteți interesat să colaborați cu noi, trimiteți-mi un e-mail la [email protected]