Beneficiile creării unui sistem de proiectare

Ghidurile de stil există de ani de zile și au fost întotdeauna importante pentru identitatea vizuală a unei companii, dar rebrand-ul termenului a dat o nouă dimensiune întregului concept.

Pe vremuri, un designer UI crea o interpretare liberă a elementelor de bază. O privire de ansamblu asupra culorilor, fonturilor, butoanelor și, eventual, și a stilului pictogramelor și ar fi salvat pe un hard-disk, pentru a fi deschis doar când este trimis către agenții externe care au nevoie de o privire asupra direcției vizuale pentru un viitor proiect, sau noi începători pentru echipa de proiectare, dar foarte rar are o importanță deosebită pentru designerii interni care îl folosesc.

Principala bogăție de cunoștințe a fost în general plasată ferm în fruntea creierului designerului. Acest lucru ar însemna un val constant de probleme în jurul încercării de a-și aminti dacă un anumit model vizual a fost folosit înainte undeva. Acest lucru, de 9 ori din 10, s-ar ajunge într-un haos haotic de inconsecvență.

În ultimii ani, ghidul de stil a primit o reîmprospătare și odată cu introducerea conceptului de sistem de design sau limbaj de design. Odată cu aceasta, vine o abordare complet nouă, care poate influența în mod epic modul în care o echipă de produs abordează designul în ansamblu.

Cu un sistem solid, consistent, bine explicat și gândit, aspectul vizual al creării unui design devine total modular. Produse precum Craft by Invision sau Brand.ai au făcut ca faza de design vizual să fie aproape de drag and drop într-o anumită măsură.

Crearea de siguranță știind că elementele pe care le utilizați sunt în concordanță cu orice alt designer din echipă. Ele îndepărtează orice animozitate din faza de proiectare vizuală, aproape până la un nivel în care crearea de prototipuri de joasă fidelitate este de domeniul trecutului.

„Stilurile vin și pleacă. Designul bun este un limbaj, nu un stil.” – Massimo Vignelli

Nu voi folosi acest articol ca o modalitate de a explica cum să creez exact un sistem de design. Am scris deja un articol despre asta: Crearea unui limbaj de sistem de proiectare. Aceasta este mai degrabă o discuție unidirecțională despre modul în care o echipă de proiectare poate beneficia de pe urma investiției într-un sistem de proiectare.

O introducere în sistemul nostru de proiectare – QUIK

În ultimii câțiva ani, am fost puternic implicat în crearea de sisteme de proiectare în diverse companii, de la startup-uri până la organizații bine stabilite. Cea mai recentă afacere a mea a fost crearea sistemului nostru de design pentru Qstream.

Încă de la începutul timpului meu la Qstream, mi-am dat seama cât de esențial era să introducem un sistem proaspăt și funcțional echipei noastre de proiectare cât mai repede posibil. Inconsecvențele și alegerile slabe de design au afectat produsul și, pe măsură ce produsul și echipa de proiectare s-au extins, a fost vital să stabilim nava și să creăm un limbaj pe care fiecare designer să-l poată în totalitate.

Și odată cu asta, am început să creăm noul nostru sistem de design, denumit corect QUIK – Q stream U ser I nterface K it.

Pasul 1: Incoerențe

Din nou, nu am de gând să aprofundez prea mult procesul cu privire la modul în care am creat sistemul, dar voi face o scurtă trecere în revistă cu privire la modul în care am ieșit din buruieni.

Primul lucru de făcut a fost să faceți un audit total al componentelor vizuale din produs. Brad Frost a creat un articol grozav despre modul în care procedați pentru a efectua un audit al UI dacă sunteți interesat.

Aceasta poate fi o sarcină îngrozitoare, consumatoare de timp, monotonă, dar este atât de benefică. Acesta a) vă permite să înțelegeți în totalitate unde se află principalele inconsecvențe b) vă oferă o imagine de ansamblu foarte bună asupra elementelor importante și utilizate în mod constant în întregul produs c) vă oferă un curs intensiv despre cum funcționează exact produsul și d ) vă permite să arătați afacerii mai largi fragilitățile sistemului vizual existent și exact de ce este nevoie de un sistem de design nou, consistent.

Un fragment din auditul nostru UI care determină inconsecvența între interfața de utilizare a platformei.

Pasul 2: Crearea elementelor

Ne-am împărțit sistemul în 3 entități diferite.

1. Brand – Identitatea de marcă a unui produs este alcătuită din elemente cheie care creează identitatea vizuală. Culorile, tipografia și iconografia sunt esențiale pentru orice platformă.
2. Elemente – Elementele sunt alcătuite din cele mai mici părți reutilizabile ale sistemului. Aceste elemente sunt reciclate în mod constant în toate zonele sistemului. (butoane, intrări)
3. Componente – O componentă este o colecție de elemente, care sunt utilizate în mod obișnuit una lângă alta pentru a identifica un model comun într-un flux. (Alerte, tabele, carduri etc.)

Următorul pas este prioritizarea, pe baza auditului UI, a elementelor utilizate cel mai frecvent în cadrul produsului. Acestea vor fi primele domenii pe care le abordați mai întâi.

Odată ce am identificat elementele cheie pentru sistem, era timpul să începem să creăm stilul și regulile în jurul fiecărei zone. Am abordat mai întâi culorile, tipografia, spațierea și iconografia generală înainte de a trece la elementele mai formate, cum ar fi butoanele, intrările etc.

O privire de ansamblu asupra întregului nostru sistem până în prezent.

Evident, cu cât sistemul merge mai adânc, cu atât elementele sunt mai puțin frecvente, dar totul face parte din dezvoltarea sistemului și ca limbajul general să fie cât mai consistent posibil în toate aspectele produsului.

(Avem și un alt proiect în desfășurare în jurul stilului nostru de ilustrare, dar îl voi păstra pentru un alt articol, puteți vedea mai multe despre el aici)

O mostră a stilului nostru ilustrativ folosit pe platformă.

Pasul 3: Implementare

Momentan suntem în această fază. Sincer să fiu, probabil că nu vom ieși niciodată din această fază. Un lucru pe care trebuie să-ți dai seama înainte de a accepta o provocare ca aceasta este că nu se va termina niciodată. Dezvolti un produs, nu este un proiect care se va termina în cele din urmă. Va fi în continuă evoluție și creștere.

Tot ce trebuie să faceți este să aruncați o privire asupra modului în care echipele de produse s-au restructurat pentru a satisface echipele de sisteme de proiectare, mulți optând pentru designeri concentrați exclusiv pe lucrul direct la sistemul lor de proiectare, nimic altceva. Sistemul a devenit o parte integrantă a unui nucleu de produse. Când este creat corect, un sistem de proiectare creează concentrare, claritate și încredere și, la rândul său, va crea coerență în întregul produs și va grăbi transformarea dezvoltării produsului. Ce nu este de iubit!

„Un sistem de proiectare nu este un proiect. Este un produs care servește produse.” – Nathan Curtis

Legarea sistemelor

Crearea unui sistem de design care să funcționeze pe întregul produs este un lucru. Ne aflăm, de asemenea, în mijlocul creării liniilor directoare ale mărcii, precum și al conturării principiilor noastre de design. (Din nou, mai multe articole de urmat referitor la procesul nostru).

Considerăm că este esențial să creăm o bază solidă în toate aspectele designului înainte de a trece mai departe, deoarece fără schelele adecvate, aceasta va cauza probleme în continuare. Crearea unui set solid de linii directoare și principii ne va ajuta să ne ghidăm în direcția corectă atunci când începem să creștem.

Planul, odată ce avem QUIK la un nivel care credem că este consumabil, este să creăm un Playbook care să găzduiască caracteristicile cheie ale personalității și entității de bază ale produselor noastre.

• Ghid de marcă – un set de linii directoare care vor prezenta personalitatea mărcii noastre, precum și caracteristicile cheie, cum ar fi tonul vocii, culorile, constrângerile logo-ului etc.
• QUIK – un sistem reunit pentru a uni convingerile și metodologiile noastre de design pe platforma noastră într-un singur loc central.
• Principii de proiectare – Scopul principiilor este de a ne asigura că rămânem ancorați în orice moment de ceea ce este cu adevărat important pentru Qstream și clienții noștri. Ne vor ajuta să luăm decizii care se aliniază cu obiectivele lor.

Mergand inainte

Ne vom strădui să creăm coerență pe platforma noastră. Mai avem un drum lung de parcurs. Toată lumea, din toate unghiurile echipei de produs, este pe deplin conștientă de faptul că aceasta este o provocare monstruoasă, dar suntem la fel de conștienți de importanța acesteia pentru scalabilitatea produsului.