De ce startup-urile au nevoie de un ghid de stil

Chiar și pentru un designer experimentat, crearea unui nou ghid de stil pentru un anumit produs este dificilă – există o mulțime de direcții de proiectare posibile, iar procesul poate deveni rapid copleșitor. Viața startup-ului este agitată, rapidă și plină de clișee precum „perfectul este inamicul gata”, „mișcă-te repede și sparge lucrurile” sau „lansează-l acum, remediază-l mai târziu”.

Elaborarea unui ghid de stil sub astfel de sloganuri și priorități fluctuante este o provocare, dar o necesitate pentru ca designul unui produs să aibă succes pe termen lung.

În ultimii ani, am auzit multe despre sisteme de proiectare, ghiduri de stil, biblioteci de modele și design atomic. Deși aceste instrumente sunt foarte utile, utilizarea lor poate părea exagerată atunci când doriți doar să creați câteva ecrane pentru un MVP sau să faceți demonstrația unei aplicații. Cu toate acestea, a avea un ghid de stil nu numai că vă va îmbunătăți procesul de proiectare în general, dar vă va face aplicația mai solidă și mai consistentă.

Să vorbim mai întâi despre principalele beneficii ale unui ghid de stil, apoi să ne referim la mediul de pornire provocator. În cele din urmă, vom discuta despre modul în care un ghid de stil evoluează mereu ca document viu.

Cele mai bune cinci motive pentru care un ghid de stil este o idee bună

1. Un ghid de stil face modelele concrete și brandingul clar

În calitate de designer singur la un startup – ceea ce este adesea cazul – nu există multe oportunități de a revizui și de a contesta deciziile de proiectare luate de alții din echipă. Deși toată lumea ar putea lucra în colaborare, design-urile nu sunt neapărat partajate cu alții. Aceasta înseamnă că există o singură persoană care validează proiectele finale.

Un ghid de stil va oferi unui startup îndrumări și documentație de referință. Va provoca unele dintre alegerile de design făcute de designer sau de echipă, deoarece acestea vor trebui validate în contextul global al aplicației. Proiectarea unei componente UI, deoarece funcționează bine pe un singur ecran, nu o va tăia. Un design bine gândit ar trebui să rezolve o singură problemă de design într-o singură situație, precum și o problemă generalizată care se găsește pe alte ecrane ale aplicației dvs.

Un ghid de stil face ca stilul general de design, liniile directoare ale mărcii, specificațiile și regulile să fie disponibile pentru toată lumea din compania dvs. Este la doar un clic distanță. Aceștia pot accesa o adresă URL pentru a accesa cu ușurință un ghid de stil online sau pentru a descărca un PDF. Designul devine treaba tuturor – nu mai este responsabilitatea exclusivă a echipei de proiectare. Este o abordare prudentă care va îmbunătăți interfața cu utilizatorul produsului dvs.

2. Un ghid de stil vă face designul mai consistent

Oferă un fel de dicționar pentru limbajul dvs. de proiectare a UI. Puteți folosi aceeași terminologie atunci când doriți să comunicați ceva ce ați exprimat deja. Imaginați-vă dacă am avea cuvinte ușor diferite pentru a exprima același lucru:

1. "Plouă; Am nevoie de umbrela mea.”
2. „Plouă, am nevoie de umbrela”
3. „Plouă, am nevoie de umbrela mea”

Poate face un limbaj poetic, dar greu de înțeles. În principiu, este aceeași idee cu interfața de utilizare a unui site sau a unei aplicații. Pentru ușurință în utilizare, ar trebui să inventați un „cuvânt” nou doar atunci când creați cu adevărat ceva nou. În acest fel, ești obligat de o regulă strictă care spune: „Numai componentele care rezolvă o problemă de design în mod repetat pe întregul produs sunt permise în produs și, ulterior, în ghidul de stil.”

Consecvența face produsul dvs. mai ușor de utilizat; un produs foarte utilizabil se poate traduce într-un angajament mai mare și vânzări.

3. Reutilizarea acelorași componente ale sistemului face aplicația dvs. mai ușor de utilizat

Ca și în exemplul de limbă, consecvența este cheia. Odată ce fiecare componentă este înțeleasă de utilizator, atunci când este utilizată din nou într-un context diferit, oamenii vor fi deja familiarizați cu comportamentul ei. Când vine vorba de interacțiunile utilizatorilor, această consistență îmbunătățește gradul de utilizare general al produsului.

Lucrul cu un sistem de proiectare bazat pe componente economisește bani și, de asemenea, face un produs mai ușor de actualizat. Dacă există o problemă de utilizare cu o componentă într-o anumită situație, aceasta poate fi remediată o dată și toate celelalte probleme potențiale cu acea componentă vor fi, de asemenea, actualizate.

4. Un ghid de stil face ca aplicația să se dezvolte mai rapid pe termen lung

Când echipa dvs. dezvoltă o componentă comună pentru un ecran, ei dezvoltă o soluție pe care o va folosi și în altă parte. Acest lucru economisește timp de dezvoltare - o mare parte din acesta. Când compania dvs. crește, acest lucru ar putea însemna economisirea de până la 10 ori a orelor de muncă necesare pentru a construi un nou ecran.

5. Un ghid de stil facilitează eficiența producției și inovația

Crearea unui ghid de stil face modelele mai accesibile și mai ușor disponibile pentru restul companiei. Dezvoltatorii și designerii pot prototipa o idee mai rapid și mai ușor. Bootstrap este adesea lăudat pentru că le facilitează dezvoltatorilor să creeze un prototip funcțional – ghidul de stil are același scop. Oferă o bază de referință pentru o nouă interfață de utilizare care va fi construită de dezvoltatori, fără ca echipa de proiectare să fie nevoită să creeze mai întâi ecranul (chiar dacă echipa de proiectare ar trebui să controleze ecranele finale).

Provocările unui startup, un ghid de stil în Flux

Crearea unui sistem de proiectare într-un mediu de pornire nu este atât de liniară pe cât ar putea fi într-o companie mai matură, unde sunt obișnuiți cu un proces mai eficient. La o companie mai tradițională, echipa de design efectuează cercetări UX, ideare și experimentare, apoi vine cu ghidul final de stil al mărcii. Acest proces nu se potrivește tuturor companiilor. Startup-urile lucrează într-un mediu în care viziunea lor și cerințele pentru produs sunt mereu în flux. Ei lucrează cu MVP-uri (produse minime viabile), versiuni incomplete ale aplicațiilor lor care sunt folosite pentru a-și testa ideea și pentru a-și arăta potențialul utilizatorilor.

Când vine vorba de crearea unui ghid de stil, aceasta poate deveni o problemă.

Într-un mediu care evoluează mereu, un designer se luptă de obicei să creeze un ghid de stil care ar trebui să fie oarecum „fixat”. Este posibil ca un designer să nu aibă timp să se gândească temeinic la toate componentele create, chiar dacă acestea ar putea ajunge în următoarea ediție a aplicației. Facebook și-a schimbat meniul de hamburger cu o navigare prin file atunci când s-au maturizat puțin. Crezi că cine a pus meniul de hamburger acolo în primul rând l-a adăugat și în ghidul de stil Facebook?

S-ar putea chiar să vă gândiți că nu este încă timpul să creați un ghid de stil. Poate vă dați seama că pe termen lung veți avea nevoie de unul, dar acum este mai important să deschideți ecrane pentru testarea de utilizare a aplicației. În plus, veți avea nevoie și de câteva pagini de marketing pentru a vă promova aplicația. Dintr-o dată, designul dvs. trebuie să se intensifice și, pe măsură ce creați ecrane, începeți să vedeți valoarea de a avea un ghid de stil care vă poate menține designul și marca companiei consistente.

Problema este că nu știi exact când este momentul potrivit pentru a tranzacționa flexibilitate pentru stabilitate. Trebuie să decideți când ar trebui să începeți ghidul de stil și când ar trebui să vă concentrați doar pe crearea de ecrane. O abordare optimă poate fi să produceți un ghid de stil în același timp în care livrați ecrane - în acest fel, puteți avea tot ce este mai bun din ambele lumi.

Începeți cu ceva inspirație pentru UI

O modalitate bună de a începe, mai ales dacă nu sunteți designer, este să colectați exemple de stiluri de design care vă plac sau, mai important, la ce credeți că vor răspunde utilizatorii. Colectați cât mai multe exemple posibil și puneți-le într-un folder/placă InVision/placă Niice/etc. Ele pot fi folosite ca referință și inspirație împreună cu sensibilitatea dvs. de design. Puteți construi pe ele mai târziu pentru a crea o bibliotecă de modele.

De exemplu, când lucram la un ghid de stil pentru o companie care promovează artiști din industria divertismentului, ne-am întrebat dacă fundalurile deschise sau întunecate ar avea un impact mai mare asupra utilizatorilor noștri. M-am uitat la sute de site-uri diferite în jocuri/filme/producție vizuală pentru a vedea cum foloseau fundalurile întunecate și deschise.

Am realizat o fișă de referință unde am evidențiat cele mai comune modele. Un model pe care l-am identificat a fost că companiile din acea industrie au avut tendința de a folosi fundaluri mai întunecate atunci când își prezentau produsele, dar au folosit fundaluri albe în eforturile lor de marketing, comerțul electronic și magazine.

Nu trebuie să mergeți atât de adânc, dar am descoperit că a avea referințe vizuale ajută, nu numai în crearea unui ghid de stil, ci și în amintirea unora dintre cazurile de utilizare pentru care ar putea fi necesar să proiectați. Odată ce vă simțiți bine referințele pe care le-ați adunat, puteți începe să lucrați la designul vizual.

Proiectați componente solide UI

În timp ce lucrați la startup-uri, este mai greu să creați componente decât să creați pagini, cel puțin la început. Când proiectați o pagină, aveți adesea o idee despre cum va fi folosită. Nu este neapărat cazul când proiectați o componentă. Încercați să proiectați pentru un anumit caz de utilizare, dar doriți ca acesta să facă parte dintr-un sistem de proiectare universal și trebuie să îl abordați în acest fel. De exemplu, poate doriți să creați o componentă de sub-navigație cu trei butoane. Este posibil să aveți nevoie de el să funcționeze cu patru, cinci sau zece butoane și va trebui să funcționeze pe mobil, tabletă și desktop. Trebuie să te gândești înainte.

Vrei un anumit nivel de persistență sau putere de rezistență într-o componentă. Componentele obișnuite nu ar trebui să se schimbe des și trebuie să fie reutilizabile în multe locuri de-a lungul produsului. De exemplu, dacă sunteți interesat doar de o aplicație iOS, atunci doriți să vă testați componenta în funcție de numărul de opțiuni sau de lungimea conținutului, nu neapărat de dimensiunea ecranului. Ideea este că, dacă este viabil în UI în multe locuri din aplicația dvs., atunci știți că este o componentă care are potențialul de a face parte din ghidul dvs. de stil.

O pornire trebuie să pornească practic de la nimic și apoi să se miște rapid. Șeful tău ar putea dori un ecran proiectat până la sfârșitul zilei. Asta înseamnă că nu poți să dezvolți un întreg ghid de stil și apoi să vină cu ecranul. Și mai rău, s-ar putea să proiectați un ghid de stil cu componente care nu vor vedea niciodată lumina zilei, deoarece viziunea companiei s-a schimbat. După cum se spune, este mai bine să expediezi acum.

Crearea unui ghid de stil grozav necesită timp și, pentru că va deveni fundamentul sistemului dvs. de design, doriți să o faceți corect. Într-un mediu de pornire, trebuie să lucrați la ghidul de stil cu totul în tandem.

Ghidul de stil ca document viu

Ar trebui să vă gândiți la ghidul dvs. de stil ca pe o lucrare în curs. Asemenea unui startup care își dă seama de strategia, vei descoperi ghidul tău de stil pe măsură ce mergi. Îl veți edita și ajusta în timp, până când devine fundamentul interfeței dvs. de utilizare. O abordare utilă este să porniți prima machetă în același timp în care începeți ghidul de stil. Deschide două fișiere cu software-ul tău preferat (în cazul meu, Sketch); unul numit page name și celălalt styleguide de stil. Pe măsură ce lucrați la designul ecranului, puteți începe să vă însămânați ghidul de stil cu elementele care compun designul dvs.

Pe măsură ce începeți să faceți mai multe dintre acestea, veți observa devreme că unele componente sunt candidații principali pentru includerea în ghidul de stil. De exemplu, dacă v-ați hotărât pe un stil de pictogramă, atunci toate pictogramele dvs. pot intra în ghidul de stil chiar de la început.

De obicei, creez o secțiune numită „pictograme realizate până acum”. Dacă la un moment dat cineva are nevoie de o pictogramă, trebuie mai întâi să verifice această secțiune înainte de a crea una nouă.

Alte elemente evidente de luat în considerare sunt culorile, butoanele, selectoarele, titlurile, anteturile, corpul textului etc. Dacă utilizați un stil special pentru marketing, puteți lua în considerare introducerea acestuia în ghidul de stil și etichetarea lui în mod corespunzător. Este în regulă dacă nu ești complet stabilit cu un anumit articol. Puteți să rafinați elementele UI din sistemul dvs. de design mai târziu, atunci când va apărea oportunitatea, și să actualizați ghidul în mod corespunzător. Nu uitați, ghidul de stil este un document viu , mai ales la un startup.

În cele din urmă, când încep să pun machete în ghid, știu că încep să ajung la un punct în care toate componentele ar trebui să fie aproape de starea lor finală. Această parte marchează punctul de vârf în procesul de creare a ghidului de stil – acum poți sărbători! O modalitate bună de a sărbători o astfel de piatră de hotar este să creați un logo sau o pictogramă (luați în considerare să o denumiți) pentru versiunea 1.0 a ghidului de stil.

Unii oameni merg până la imprimarea sigla/icoana ca un autocolant, astfel încât echipa să aibă un fel de trofeu. Acesta este și punctul în care mă întorc de obicei la modul mai tradițional de a lucra cu ghidul, deschizând mai întâi acel ghid de stil și apoi creând un fișier nou pentru orice interfață trebuie făcută.

Concluzie

În calitate de designer, prin crearea unui ghid de stil cât mai devreme posibil, te asiguri că startup-ul tău respectă un standard mai înalt de calitate. Poate fi o provocare, dar merită efortul. Un ghid de stil solid și bine rotunjit nu numai că vă va ajuta să aveți un produs mai bun, ci vă va ajuta și să reduceți costul dezvoltării.

Există o modalitate de a face acest lucru chiar și într-un mediu cu ritm rapid în care se iau decizii rapide și, uneori, design-urile trebuie să se schimbe rapid. Sperăm că procesul descris mai sus îi va ajuta pe designeri de la orice startup să facă față provocărilor de complexitate și viteză, creând în același timp un ghid de stil robust în beneficiul produsului.

• • •

Citiri suplimentare pe Blogul Toptal Design:

• eCommerce UX – O privire de ansamblu asupra celor mai bune practici (cu infografic)
• Importanța designului centrat pe om în proiectarea produsului
• Cele mai bune portofolii de designeri UX – Studii de caz și exemple inspiratoare
• Principii euristice pentru interfețele mobile
• Design anticipator: Cum să creați experiențe magice pentru utilizator