Un ghid pas cu pas pentru crearea unui sistem de proiectare

Introducere

În această eră a accesului oriunde și oriunde, ubicuitatea a devenit o normă. Cu toate acestea, se știe, de asemenea, că consistența înseamnă credibilitate. Utilizatorii sunt acum mai conștienți. O experiență rapidă și fără probleme este o așteptare de bază, indiferent de interfață.

În plus, timpul este un bun pe care nu vă puteți permite să îl irosiți. Toate acestea ar trebui să fie suficiente pentru a vă face să vă grăbiți să faceți mai mult cu site-ul sau interfața dumneavoastră. Cu toate acestea, încercarea de a fi consecvent cu 50 de componente diferite din design fără erori este o sarcină dificilă.

Dați drumul la tobe pentru că "Design System" este aici pentru a vă face viața mai ușoară.

Ce este un sistem de proiectare?

Un sistem de proiectare este o arhivă extinsă de componente reutilizabile clar documentate pe care echipa de produs le poate folosi pentru a crea experiențe digitale. Cu alte cuvinte, considerați sistemele de proiectare ca fiind sursa unică de adevăr pentru o companie în ceea ce privește proiectarea.

Mai mult decât ghidurile de stil sau bibliotecile de modele, un sistem de design este în continuă evoluție. Acest ecosistem de linii directoare legate de diverse entități, inclusiv de design UX, poate fi folosit ca un cadru de blocuri de construcție pentru orice proiect, pentru a se asigura că toate componentele sunt coerente și se potrivesc cu brandingul.

Deși este util atât pentru start-up-uri, cât și pentru afacerile în creștere și pentru întreprinderi, un sistem de proiectare devine un activ esențial și nenegociabil pe măsură ce un produs se dezvoltă. De asemenea, acesta poate influența în mod pozitiv obiectivele de afaceri, fluxul de lucru, munca în echipă, experiența utilizatorului și experiența generală a mărcii.

Care sunt avantajele unui sistem de proiectare?

Unele dintre meritele implementării unui proiect de sistem sunt

1. Crește eficiența, reducând în același timp timpul - Un beneficiu principal al oricărui sistem de proiectare este capacitatea de a crea și recrea rapid lucrări de proiectare și dezvoltare. Echipele pot utiliza elemente prefabricate pentru a diminua nevoia de a reinventa în mod constant roata și pentru a reduce riscul de inconsecvență.
2. Îmbunătățește coerența vizuală între pagini și canale - Lipsa unui sistem de design la nivelul întregii organizații poate duce la inconsecvență vizuală, la o experiență fragmentată a utilizatorului sau la o izolare față de branding. Un set coerent de standarde ajută, de asemenea, la gestionarea reproiectărilor majore sau a rebrandingurilor vizuale la scară largă.
3. Promovează un limbaj unificat - Un limbaj de proiectare comun reduce posibilitatea de a pierde timp de proiectare sau de dezvoltare din cauza comunicării greșite în cadrul și între echipele interfuncționale.
4. Permite o mai bună concentrare asupra unor probleme mai complexe - Echipele pot rezolva mai bine probleme complexe, cum ar fi prioritizarea informațiilor, gestionarea călătoriilor etc., atunci când sunt create componente simple ale interfeței de utilizare și neechivoce.
5. Servește drept instrument de referință și educațional pentru colaboratori - Un sistem de proiectare facilitează procesul de integrare în cazul schimbărilor de personal. De asemenea, facilitează accesul noilor colaboratori individuali la proiectarea UI UX sau la crearea de conținut.
6. Contribuie la crearea unui brand puternic și atemporal - Scopul unui sistem de design este de a comunica o anumită identitate și un anumit design în spatele produselor pe care le utilizează. Ajută la crearea unor mărci de impact și ajută oamenii să își amintească experiența de marcă. Acest lucru îi face pe oameni să se simtă mai conectați la o marcă și să aibă mai multă încredere în ea.

Un ghid în zece pași pentru construirea unui sistem de proiectare

Am elaborat un proces în zece pași pentru a ajuta compania dumneavoastră să creeze un sistem de proiectare.

1. Analizați temeinic procesul de proiectare existent.

Primul pas în elaborarea strategiei și inițierea oricărui proces este înțelegerea situației în care vă aflați în prezent. Revizuirea și analiza procesului actual de proiectare al organizației dvs. vă poate ajuta să înțelegeți mai bine proiectarea sistemului cel mai potrivit pentru marca dvs. Puneți-vă următoarele întrebări:

• Care este abordarea actuală a organizației dumneavoastră în materie de proiectare?
• Care sunt instrumentele existente pe care le utilizează organizația dumneavoastră?

Asigurați-vă că evaluați nivelul de maturitate al echipei de proiectare a produsului. Acest lucru vă va ajuta la accesarea aproximativă a timpului necesar pentru implementarea noului sistem în organizația dumneavoastră.

2. Determinați alfabetul mărcii dvs.

Alfabetul unei mărci ar conduce la identitatea mărcii, adică la valorile mărcii și ale produsului și la limbajul mărcii. Limbajul mărcii cuprinde forme, fonturi, culori, animații, voce și ton.

Designerii vor folosi un limbaj vizual definit de alfabetul mărcii. Revizuirea ghidurilor de marcă și discuțiile cu părțile interesate vă pot ajuta să înțelegeți identitatea și limbajul mărcii.

3. Efectuarea unui audit pentru produsul curent AI

Efectuarea unui audit al interfeței cu utilizatorul al produsului actual vă va ajuta să abordați o provocare majoră în materie de proiectare a produsului: duplicarea designului. Auditul urmărește să atingă două obiective -

• Atrageți atenția asupra zonelor din cadrul produsului care prezintă neconcordanțe semnificative.
• Distingeți cele mai utilizate și esențiale elemente ale produsului.

Un audit al IU este un proces în mai multe etape. Identificarea și analiza principalelor proprietăți ale interfeței de utilizare și utilizarea lor în componente este crucială. Puteți utiliza instrumentele disponibile pentru a vedea numărul de culori și caractere unice din foile de stil. Apoi, puteți descompune mai departe fiecare design de site web în elemente individuale.

4. Stabiliți principiile de proiectare ale sistemului dumneavoastră

Pentru a crea o experiență excelentă pentru utilizator, este imperativ să înțelegem motivele care stau la baza deciziilor de design. În plus, un set clar de obiective facilitează definirea principiilor de proiectare și coordonarea cu echipele.

Doriți să aveți un proces de sistem de proiectare? Începeți cu aceste întrebări:

• Ce creați
• De ce o faci
• Cum îl veți construi

Principiile de design trebuie să reflecte valorile și viziunea mărcii dumneavoastră.

5. Construiți o bibliotecă de componente

Cunoscută și sub numele de Biblioteca de modele, aceasta ar trebui să includă toate elementele funcționale și decorative ale interfeței dvs. de utilizator. Evaluați componentele în funcție de proiect, de nevoile utilizatorilor și de obiectivele de afaceri și rețineți-le pe cele de care aveți nevoie.

6. Stabilirea regulilor

Sistemele de proiectare nu sunt construite pentru a limita proiectanții la o anumită direcție de proiectare. Dimpotrivă, se presupune că trebuie doar să le ofere designerilor și dezvoltatorilor un cadru fundamental care extinde direcția creativă și lasă loc pentru inovație.

Acestea sunt două abordări ale regulilor sistemului de proiectare, așa cum se menționează în cartea lui Alla Kholmatova:

• Reguli stricte - proiectanții și dezvoltatorii urmează un proces riguros pentru a introduce noi modele sau componente.
• Reguli lejere - Aceste reguli permit designerilor și dezvoltatorilor să creeze fără a respecta constrângeri stricte, în cazul în care consideră că astfel se obține un design mai bun.

La fel ca în multe alte aspecte ale vieții, este esențial să se găsească echilibrul corect între aceste reguli, astfel încât produsul să fie consecvent și în același timp creativ.

7. Alegeți modelul de guvernanță

Sistemele de proiectare dinamice și în continuă evoluție necesită un proces simplu de aprobare și implementare a modificărilor. Există trei modele de guvernanță:

• Modelul solitar - Un individ sau un grup de indivizi "conduce" direct procesul de proiectare a sistemului.
• Model centralizat - O singură echipă este responsabilă și conduce evoluția sistemului.
• Modelul federativ - Mai multe persoane din mai multe grupuri conduc procesul de proiectare a sistemului.

În timp ce fiecare dintre aceste modele are avantajele și dezavantajele sale, modelul solitar, în special, poate duce la faptul că o persoană responsabilă poate deveni un blocaj pentru executarea mai multor sarcini. Cel mai bun pariu este să folosiți o combinație de modele diferite în concordanță cu nevoile dumneavoastră.

8. Definirea structurii componentelor

Duplicarea componentelor funcționale reprezintă o provocare semnificativă în sistemele de proiectare. Acest lucru are ca rezultat un sistem inflexibil și impune proiectanților (și dezvoltatorilor) să creeze elemente noi de fiecare dată când apare un nou scenariu.

Proiectele de sistem reușite sunt foarte ușor de reutilizat și permit utilizatorilor să le folosească ca bază pentru produsele lor. Prin urmare, se recomandă dezvoltarea de elemente care pot fi reutilizate în diferite conținuturi.

Criterii pentru componente reutilizabile și scalabile:

• Modular - Componente independente și elemente interschimbabile.
• Compozabile - Fuzionează componentele existente pentru a crea altele noi
• Personalizabile- Componente personalizabile care funcționează într-o multitudine de contexte.

9. Asigurați-vă că toate echipele folosesc un limbaj unitar

Scopul unui sistem de proiectare este, printre altele, de a facilita munca în echipă fără cusur. Prin urmare, integrarea sistemului în fluxul de lucru al echipelor este vitală. Aceasta crește productivitatea, oferind în același timp valoare membrilor echipei.

Înțelegerea mai bună a modului în care diverse persoane utilizează sistemul de proiectare în procesul inițial de integrare vă poate ajuta să modificați sistemul în consecință.

10. Transmiteți modificările în mod regulat

Un proces de proiectare de sistem evoluează odată cu organizația și nu poate fi static. Prin urmare, după introducerea sistemului în organizație, este esențial să comunicați toate modificările și să țineți organizația la curent.

Un registru de modificări concis și bine întreținut poate ajuta utilizatorii să înțeleagă diversele actualizări și modul în care acestea le vor afecta activitatea.

Trei exemple exemplare pentru a vă ajuta să începeți

Sistemul de proiectare Atlassian

(https://atlassian.design/)

Atlassian Design System, o companie australiană renumită de software pentru întreprinderi, își propune să ofere o colaborare perfectă între echipele agile și dispersate din întreaga lume.

Trello și Jira, două dintre instrumentele de colaborare ale Atlassian, utilizate pe scară largă, reflectă pe deplin filozofia de proiectare a companiei. Această filozofie constă în valorificarea experienței digitale pentru a crește productivitatea și potențialul general al echipelor și al membrilor individuali ai acestora.

Acestea fiind spuse, Atlassian Design System oferă tehnici agile și o urmărire eficientă a fiecărei etape a unui proiect, de la planificarea produsului până la livrare. Acest lucru produce, în cele din urmă, rezultate benefice ale creării și livrării de produse. Sistemul lor de proiectare include în principal:

1. Orientări de proiectare
2. Standarde de marcă
3. Produs
4. Ilustrație
5. Prototipuri
6. Marketing
7. Personalitate

Sistemul de proiectare IBM

(https://carbondesignsystem.com/migrating/guide/design)

IBM este un prim exemplu de mare întreprindere IT care operează la nivel global și care își urmează propriul sistem de proiectare.

Capacitățile lor includ totul, de la consultanță în afaceri și finanțare până la crearea de software, găzduire/management IT și soluții care conectează software-ul cu hardware-ul.

Principiul fundamental al IBM este acela de a impulsiona în mod constant progresul, fie că este vorba de o societate umană sau de un brand, folosind știința, rațiunea și intelectul.

Potrivit IBM, un design bun nu este doar o necesitate, ci și un angajament față de utilizatori. Iată câteva dintre funcțiile remarcabile ale Carbon Design System, care oferă dezvoltatorilor și designerilor care lucrează cu Adobe, Axure și Sketch o mulțime de instrumente și resurse:

1. Vizualizarea datelor
2. Modele
3. Componente
4. Orientări
5. Tutoriale

Sistemul de proiectare Uber

(https://baseweb.design/)

Cu toții am luat cel puțin o dată un Uber. Compania americană de tehnologie se bazează pe mișcare, inclusiv pe livrarea de alimente, transport de persoane, ridesharing de la egal la egal și micromobilitate cu ajutorul scuterelor și al bicicletelor electrice.

Uber are nevoie de un design de sistem eficient pentru ca acest tip de serviciu să funcționeze perfect în toate sub-brandurile, cele interne, produsele și proiectele.

Atributele principale ale sistemului Uber Design System sunt:

1. Arhitectura mărcii
2. Compoziție
3. Tonul vocii
4. Mișcare
5. Ilustrație
6. Fotografie
7. Iconografie
8. Culoare
9. Logo
10. Tipografie

Indicații pe care trebuie să le cunoașteți înainte de a vă crea primul sistem de proiectare

1. Comunicarea timpurie și clară este noul tău cel mai bun prieten

Poate fi complicat să vă implicați imediat consumatorii interni. De fapt, feedback-ul lor poate împiedica procesul dacă este ambiguu, dacă este furnizat prea devreme în cadrul unui ciclu de lansare alfa sau beta sau dacă nu este util.

Spuneți clienților dumneavoastră, utilizatorii sistemului de proiectare, de ce aveți nevoie pentru a vă asigura că primiți un feedback constructiv. Dacă vă aflați într-un ciclu timpuriu de pre-lansare, fiți sincer și clar cu privire la informațiile exacte pe care le doriți. Acest lucru indică faptul că sunteți în căutarea celor mai semnificative defecte ale produsului și nu a criticilor de înaltă fidelitate.

Fiți atenți să nu gândiți prea mult, să vă ofiliți mintea, dar nu ezitați să comunicați prea mult.

2. Pașii tăi nu sunt singurul lucru pe care trebuie să-l urmărești

O piesă crucială care lipsește în stabilirea priorităților este adesea urmărirea utilizării sistemelor de proiectare. Este imperios necesar să se înțeleagă unde este utilizat sistemul, de către cine, cât de des și frecvența actualizărilor.

Implementarea unor statistici zilnice cu privire la echipele care utilizează exact ce versiuni ale bibliotecii permite o înțelegere corectă a ratei de adoptare, actualizare și retrogradare.

Atunci când identificați echipele care se actualizează rar, puteți trece la cunoașterea problemelor care blochează actualizarea și, ulterior, să le remediați.

3. Mecanismele de feedback sunt la fel de subestimate ca și Rhaeghal din GOT

Pentru a vă asigura că sistemul dvs. nu este doar valoros pentru utilizatori, ci și ceva la care aceștia se simt implicați și la care au contribuit în mod activ, o piesă cheie va fi existența unor modalități simple, dar directe, prin care oamenii să ofere feedback (Slack, e-mail etc.) și să contribuie la sistem.

Furnizați întotdeauna instrucțiuni despre cum și unde să oferiți feedback în cât mai multe zone posibile și nu presupuneți niciodată nimic, mai ales că un utilizator va găsi feedbackul în locul pe care îl considerați cel mai evident.

Un sistem de proiectare este steaua polară de care are nevoie organizația dumneavoastră

Un sistem de design de succes, bine realizat, devine parte din coloana vertebrală a unei companii, ceea ce duce la experiențe consistente și amplificate. În plus, designerii și dezvoltatorii au ocazia de a comunica mai bine scopul produsului, în loc să fie blocați la asamblarea unor elemente de bază.

Orice generalist poate fi partenerul dumneavoastră în realizarea unui proiect, dar numai un specialist în design identifică problemele, provocările și aspirațiile actuale pentru a crea un sistem de design special pentru dumneavoastră. Acum nu este momentul să așteptați. Cu acest ghid amplu despre cum să creați un sistem de design, sunteți la doar o inițiativă distanță de o transformare completă a procesului dvs. de producție.

Referințe

https://ionic.io/resources/articles/why-every-company-needs-a-design-system

https://www.baianat.com/books/merits-of-design-systems/design-systems-and-their-benefits

https://www.uxpin.com/create-design-system-guide/

https://builtin.com/design-ux/11-benefits-design-systems

https://elementor.com/blog/design-system/

https://www.nngroup.com/articles/design-systems-101/

https://www.uxpin.com/studio/blog/best-design-system-examples/#h-4-uber-design-system

https://www.eleken.co/blog-posts/7-design-systems-examples-for-your-inspiration

https://aufaitux.com/blog/best-design-systems/

https://www.copycat.dev/blog/design-system-examples/

https://builtin.com/design-ux/design-system

https://www.editorx.com/shaping-design/article/design-system-examples

https://medium.com/spotify-design/5-things-i-wish-id-known-before-starting-a-design-system-at-spotify-f8624abf1081