Tot ce trebuie să știți despre sistemele de proiectare

Publicat: 2020-05-06

Designul devine din ce în ce mai complex. Procesele moderne de proiectare necesită o colaborare strânsă între toate echipele implicate în crearea produsului. Când timpul de lansare pe piață joacă un rol atât de esențial în dezvoltarea produselor, echipele de proiectare se străduiesc să optimizeze procesul pentru a crea produse rapid, fără a sacrifica experiența utilizatorului.

Pentru a face acest lucru, echipele de produse schimbă modul în care proiectează produsele digitale - introduc sisteme de proiectare pentru a face procesul de proiectare mai transparent și mai previzibil.

În acest articol, vom explora conceptul de sisteme de proiectare și pașii cheie pentru construirea de noi sisteme de proiectare.

Aplicați-vă sistemul de design utilizând stilul tematic Elementor

Ce este un sistem de proiectare?

Un sistem de proiectare este o colecție de componente reutilizabile, ghidate de practici clare, care permite unei echipe de produse să creeze un produs mai rapid. Gândiți-vă la un sistem de proiectare ca la o singură sursă de adevăr pentru echipele de produse care le permite să proiecteze și să dezvolte produse.

Mulți designeri se întreabă ce ar trebui să includă în sistemul lor de proiectare. Fiecare organizație are nevoi diferite și este imposibil să oferiți o listă universală de elemente pe care fiecare sistem de proiectare ar trebui să le utilizeze. Cu toate acestea, există câteva elemente pe care multe sisteme de proiectare le împărtășesc:

Componente și modele

Componentele sunt elemente funcționale ale designului. Gândiți-vă la ele ca la blocuri ale sistemului dvs. de proiectare. Combinate, componentele formează biblioteci la care designerii se referă și le folosesc atunci când creează produse.

Modelele sunt protocoalele care furnizează o formă de manual de construcție pentru care proiectanții se referă la utilizarea componentelor.

Ghiduri de stil

Ghidurile de stil sunt livrabile care se concentrează pe stilurile grafice (culori, fonturi, ilustrații) și utilizarea lor. Ghidurile de stiluri ar trebui create în funcție de valorile mărcii (de exemplu, utilizarea culorilor mărcii pentru elemente funcționale, cum ar fi butoanele de îndemn).

Principii de proiectare

Principiile de proiectare sunt regulile de ghidare care ajută echipele să ia decizii de proiectare semnificative. Principiile de proiectare reflectă convingerile comune ale echipei de proiectare.

Cum să construiți un sistem de proiectare în 10 pași

Pași:

  • 1. Analizează-ți procesul actual de proiectare
  • 2. Identificați alfabetul mărcii
  • 3. Efectuați un audit UI
  • 4. Definiți principiile de proiectare
  • 5. Creați o bibliotecă de componente / modele
  • 6. Definiți regulile
  • 7. Stabiliți o strategie de guvernanță
  • 8. Definiți structura elementelor
  • 9. Asigurați-vă că toate echipele folosesc limba partajată
  • 10. Comunică modificările

1. Analizează-ți procesul actual de proiectare

Pentru a înțelege mai bine tipul de sistem de proiectare pe care doriți să îl implementați, trebuie să începeți prin a revizui și analiza abordarea actuală pentru proiectare la compania dvs. Găsiți răspunsurile la următoarele întrebări:

  • Care este procesul de proiectare pe care îl urmează compania dumneavoastră?
  • Care sunt instrumentele existente pe care le folosește compania dvs.?

De asemenea, se recomandă evaluarea nivelului de maturitate a proiectării echipelor de produse. Aceste cunoștințe vă vor ajuta să estimați timpul necesar pentru introducerea sistemului în organizația dvs.

2. Identificați alfabetul mărcii

Limbajul vizual pe care designerii îl vor folosi ar trebui să se bazeze pe alfabetul unei mărci. Alfabetul include identitatea mărcii (valorile mărcii și produselor) și limbajul mărcii (culori, fonturi, forme, animații, voce și ton). Definiți identitatea mărcii, precum și limbajul acesteia, prin revizuirea liniilor directoare ale mărcii și intervievarea părților interesate, apoi consultați aceste informații atunci când lucrați la principiile de proiectare și ghidurile de stil.

3. Efectuați un audit al interfeței de utilizare

Una dintre cele mai periculoase probleme în proiectarea produselor este duplicarea proiectelor, ceea ce duce la fragmentare, iar fragmentarea duce la inconsecvență. Identificarea duplicării elementelor de proiectare ajută o echipă să evite scenariul în care membrii echipei construiesc un element de la zero doar pentru a descoperi că există deja o versiune similară a acestuia.

De aceea, clasificarea tuturor componentelor vizuale din produs ar trebui să fie prima sarcină pe care o face echipa de proiectare înainte de a construi un sistem de proiectare. Trebuie să te uiți la calitățile vizuale ale elementelor tale de design. Această activitate are două obiective:

  1. Evidențiați zonele cu cele mai semnificative inconsecvențe din cadrul produsului.
  2. Identificați cele mai importante și mai utilizate elemente și componente ale produsului.

Un audit UI este un proces în mai mulți pași. Este esențial să identificați mai întâi principalele proprietăți ale interfeței de utilizare, cum ar fi culorile, fonturile, imaginile și numai apoi, să analizați modul în care aceste proprietăți trebuie utilizate în componente. Utilizați un instrument precum CSS Stats pentru a vedea câte culori unice, tipuri de caractere aveți în foile de stil.

Google's background colors
Google.com are 62 de culori de fundal unice.

După ce aveți informații despre stil, puteți explora componentele. Metodologia de proiectare atomică a lui Brad Frost vă va ajuta să împărțiți fiecare pagină web în elemente individuale (atomi, molecule și organisme).

Brad Frost’s Atomic Design methodology
Metodologia de proiectare atomică a lui Brad Frost

4. Definiți principiile de proiectare

Înțelegerea motivelor care stau la baza deciziilor de proiectare este esențială pentru crearea unei experiențe excepționale de utilizator. De aceea, atunci când vine vorba de stabilirea principiilor de proiectare pentru un sistem, este esențial să coordonați echipele în jurul unui set clar de obiective pentru a menține coerența și echilibrul.

Principiile de proiectare ar trebui să răspundă la trei întrebări fundamentale:

  • Ceea ce construim,
  • De ce îl construim
  • Cum îl vom construi

Este vital ca principiile de proiectare să reflecte cu adevărat valorile organizației dvs. și să fie alături de viziunea generală.

5. Creați o bibliotecă de componente / modele

Colectați toate părțile funcționale și decorative ale interfeței dvs. de utilizare - câmpuri de intrare, butoane, formulare, imagini, pentru a numi câteva - evaluați-le în funcție de nevoile proiectului (în conformitate cu nevoile utilizatorilor / obiectivele de afaceri) și lăsați doar ceea ce aveți nevoie .

6. Definiți regulile

Unul dintre obiectivele principale ale unui sistem de proiectare este extinderea direcției creative. Sistemul nu trebuie să blocheze proiectanții într-o anumită direcție de proiectare. În schimb, ar trebui să ofere proiectanților și dezvoltatorilor un cadru care să ofere suficientă libertate pentru a explora diverse abordări înainte de a selecta una pe care să o urmeze.

În cartea sa, „Sisteme de proiectare”, Alla Kholmatova definește două tipuri de reguli:

  • Reguli stricte. Proiectanții trebuie să urmeze un proces riguros pentru introducerea de noi componente și modele în sistemul de proiectare.
  • Reguli libere. Regulile libere acționează mai degrabă ca recomandări, decât constrângeri stricte. Proiectanții și dezvoltatorii pot sări peste reguli atunci când consideră că, fără reguli, pot crea un design mai bun.

Găsind un echilibru între reguli stricte și reguli libere, găsim un punct dulce între strictețe și flexibilitate.

7. Stabiliți o strategie de guvernanță

Sistemele de proiectare sunt dinamice și evoluează întotdeauna. De aceea, este crucial să definiți procesul de aprobare a modificărilor sistemului dvs. de proiectare. Crearea unei strategii clare de guvernanță este esențială pentru a vă asigura că sistemul dvs. de proiectare se poate adapta la schimbări.

În articol, Modele de echipă pentru scalarea unui sistem de proiectare, Nathan Curtis definește trei modele diferite de guvernanță:

1. Modelul solitar: În acest model, un „stăpân” (un individ direct responsabil sau un grup de indivizi) guvernează sistemul de proiectare.

the solitary model illustration
În modelul solitar, comandantul pune la dispoziție un sistem. Imagine: Nathan Curtis.

2. Model centralizat: în acest model, o echipă este responsabilă de sistem și îndrumă evoluția acestuia.

the centralized model illustration
În modelul centralizat, o echipă centrală de proiectare produce și susține un sistem pentru alte echipe. Imagine: Nathan Curtis.

3. Model federat: În acest model, mai multe persoane din mai multe echipe sunt responsabile de sistem.

the federated model illustration
În modelul Federated, designerii din mai multe echipe de produse lucrează împreună la sistem. Imagine: Nathan Curtis.

Fiecare dintre modele are puncte tari și puncte slabe, dar modelul solitar este cel mai fragil dintre ele, deoarece prezintă un risc încorporat - atunci când o persoană este responsabilă de atât de mult, acea persoană poate deveni rapid un blocaj pentru finalizarea multor sarcini.

În multe cazuri, este posibil să utilizați o combinație de modele. De exemplu, modelul echipei Salesforce este o combinație de modele centralizate și federate. Sistemul de proiectare Lightning al Salesforce are o echipă de bază responsabilă cu gestionarea sistemului, dar există și contribuabili care acționează ca o federație de practicanți.

8. Definiți structura elementelor

Multe sisteme de proiectare suferă de duplicarea elementelor funcționale - membrii echipei creează componente care sunt prea concentrate pe un caz de o singură utilizare. Drept urmare, sistemul devine inflexibil, iar utilizatorii săi (designeri și dezvoltatori) trebuie să creeze noi componente de fiecare dată când trebuie să acopere un nou scenariu.

Dacă analizăm orice sistem de proiectare de succes precum Material Design, observăm că astfel de sisteme sunt extrem de reutilizabile. Reutilizarea ridicată permite proiectanților și dezvoltatorilor să utilizeze Designul materialelor ca bază pentru produsele lor.

Se recomandă dezvoltarea de componente care nu sunt legate de un caz de o singură utilizare, dar care pot fi refolosite în contexte multiple. Pentru a fi reutilizabile și scalabile, componentele trebuie să fie următoarele:

  • Modular. Componentele modulare sunt autonome - nu au nicio dependență. Modularitatea ajută la crearea de componente reutilizabile și interschimbabile.
  • Compozabil. Este posibil să creați componente noi prin combinarea componentelor existente.
  • Personalizabil. Este posibil să ajustați și să extindeți componentele pentru a le face să funcționeze într-o varietate de contexte.

9. Asigurați-vă că toate echipele folosesc limba partajată

Scopul fundamental al unui sistem de proiectare este de a facilita munca echipelor, motiv pentru care încurajarea tuturor să-l folosească este chiar mai important decât construirea unuia. Sistemele de proiectare ar trebui să fie integrate în fluxul de lucru al echipelor, să devină o parte cheie a productivității zilnice a proiectantului și dezvoltatorului și să ofere valoare membrilor echipei.

Dacă tocmai ați început să încorporați un sistem de proiectare în procesul de proiectare al organizației dvs., efectuați o serie de interviuri pentru a înțelege modul în care oamenii îl folosesc și utilizați aceste informații pentru a vă ajusta sistemul de proiectare.

10. Comunică modificările

Un sistem de proiectare nu este o colecție statică de artefacte; este un produs secundar al designului de produs care evoluează împreună cu organizația. Odată ce echipele încep să utilizeze un sistem de proiectare, este vital să comunicați modificările și actualizările întregii organizații. Expediați actualizările în mod regulat și cu un jurnal de schimbări. Jurnalul ar trebui să spună utilizatorilor ce modificări au fost introduse în noua versiune și modul în care actualizările vor avea impact asupra muncii lor.

Salesforce design system's what's new page
Lightning Design System de la Salesforce are o pagină încorporată „Ce este nou” care conține informații despre modificările care au fost introduse în sistemul de proiectare

Exemple de sisteme de proiectare

Iată câteva sisteme de proiectare populare.

Design material de către Google

Material Design este un limbaj de proiectare dezvoltat de Google în 2014. Ideea de a crea acest limbaj de design a fost simplă - pentru a oferi designerilor și dezvoltatorilor un instrument care le va permite să creeze produse intuitive și frumoase. Designul materialelor este un sistem foarte adaptabil care poate fi utilizat pentru diverse produse.

Material Design by Google

Sistem de proiectare fulger de către Salesforce

Lightning Design System permite echipelor de produse să construiască experiențe de afaceri bogate și aplicații personalizate cu tiparele și să stabilească cele mai bune practici care sunt native pentru Salesforce.

Lightning Design System by Salesforce

Concluzie

Un sistem de proiectare bine realizat servește drept stea de nord pentru dezvoltarea produsului. Devine o parte a ADN-ului unei organizații care ajută echipele de produse să producă experiențe de utilizator mai consistente și amplifică o cultură bazată pe design. Sistemele de proiectare încurajează oamenii care lucrează la produs să privească dincolo de elementele de construcție și să se gândească la scopul proiectării lor.

Cu Elementor 3.0, puteți gestiona cu ușurință sistemele de proiectare dintr-o singură pagină.