Înțelegerea sistemelor și modelelor de proiectare

Publicat: 2022-03-11

Deși poate părea o nouă modalitate de abordare a fluxului de lucru digital, conceptul de sistem de design nu este „nou” pentru industriile creative. La baza oricărui sistem de design se află un limbaj de modele de design care rezolvă problemele comune cu care se poate confrunta un designer.

Ideea unui limbaj de tipar a apărut din arhitectură și design urban cu peste 40 de ani în urmă și poate fi aplicată la aproape orice disciplină de design.

Citat de elemente de limbaj de design din Christopher Alexander, autorul cărții A Pattern Language. Elementele acestui limbaj sunt entități numite tipare. Fiecare tipar descrie o problemă care apare din nou și din nou în mediul nostru și apoi descrie nucleul soluției la acea problemă, în așa fel încât să poți folosi această soluție de un milion de ori.
Sistemele de proiectare sunt un subiect de discuție popular în lumea produselor digitale de astăzi, dar utilizarea unui set sistematizat de soluții de proiectare repetabile nu este o idee nouă.

Sistemele de design precum Material Design sunt un subiect la modă, dar o abordare sistematică a designului a fost parte integrantă a editorilor de reviste de zeci de ani. În timp ce răsfoiți paginile oricărei reviste importante, este ușor de observat că fiecare secțiune este definită în mod unic ca un șablon cu aspect comun, fonturi, culori etc.

Modelele de design utilizate pentru secțiunile de pagină permit textului și imaginilor să fie aranjate în mod consecvent și eficient într-un mod care completează viziunea creativă a unei publicații.

Când te uiți la reviste concurente, este ușor să vezi cum se compară limbajul de design al uneia cu celălalt.

Componentele sistemului de proiectare a revistei
De zeci de ani, industria revistelor s-a bazat pe sisteme de proiectare pentru a formata rapid conținutul scris și vizual cu consecvență.

Dacă nu au făcut-o deja, designerii din numeroase industrii vor încorpora în curând un limbaj de design și șabloane în fluxul lor de lucru. Pentru designerii de produse digitale, acest subiect evoluează și mulți învață pentru prima dată să proiecteze din biblioteci de modele în cadrul sistemelor complexe (sau chiar să ajute să le definească).

Există o complexitate suplimentară atunci când aliniați modelele de proiectare software cu o bază de cod front-end, ceea ce poate face ca învățarea unui limbaj de design să se simtă copleșitoare.

Limbile de design sunt holistice

Un limbaj de design, ca și orice limbaj, este complicat și conține nuanțe care pot părea confuze de învățat la început. Acesta este motivul pentru care ajută să ne gândim la un limbaj de design ca la un sistem complex „compus din multe componente care pot interacționa între ele”.

Pentru a înțelege un sistem complex, este important să ne gândim la limbajul de design în mod holistic :

  • Începeți cu o vedere de pasăre a modului în care designul influențează o marcă sau o afacere.
  • Apoi, contemplați rolul designului cu echipe interfuncționale și alți designeri.
  • În cele din urmă, luați în considerare modul în care designul afectează produsul și utilizatorii la un anumit moment.

Această perspectivă holistică subliniază un mod sistematic de a gândi despre fluxurile de lucru de proiectare și permite aplicarea cu ușurință a unui limbaj de design atunci când se rezolvă probleme specifice.

În practică, un limbaj de design este o resursă folosită pentru a ajuta la reducerea redundanței și la îmbunătățirea continuității în modul în care designerii abordează problemele comune de proiectare. De exemplu, o problemă comună cu care se confruntă designerii de produse este „trebuie să lansez un îndemn pentru ca utilizatorii să dea clic”.

Modele de design pentru butoanele Amazon
Sistemele de proiectare sunt deosebit de eficiente în rezolvarea problemelor recurente de proiectare a produselor, cum ar fi necesitatea unui buton de îndemn.

Acesta este ceva care a fost rezolvat înainte, așa că, în loc să reinventeze roata (sau butonul), limbajul de design ar defini un „model de design” pentru buton reutilizabil cu proprietăți prestabilite, cum ar fi culoarea și forma, împreună cu liniile directoare pentru cele mai bune practici.

Un limbaj de proiectare a unui produs digital este de obicei o resursă interfuncțională cu scopul de a îmbunătăți eficiența fluxului de lucru și colaborarea pentru echipe.

În unele cazuri, limbajul este extins la o bibliotecă de modele live care este conectată direct la baza de cod front-end și la analiza metrică a modelelor. Acest tip de sistem complex cu diferite dependențe face ca o abordare holistică a rezolvării problemelor să fie destul de necesară.

Modele de design complexe citate de neurologul Miguel Nicolelis. Cu miliardele sale de neuroni interconectați, ale căror interacțiuni se schimbă de la milisecundă la milisecundă, creierul uman este un sistem complex arhetipal.
În funcție de produs, echipă și resurse, există grade diferite de detaliu și complexitate a sistemului de proiectare.

Lucrul minunat despre învățarea unui limbaj de design este că colegii de echipă sunt de obicei destul de pasionați de interfața și interacțiunile folosite pentru a defini un produs. Învățarea unei noi limbi este în general o provocare, dar poate fi și o experiență captivantă care leagă o echipă!

Întrebări frecvente pentru „proiectează” gândirea sistemelor

Fluența cu un limbaj de design va asigura calitatea sistemului prin evanghelizare, care poate include:

  • Formarea de noi designeri;
  • Mentorarea angajaților juniori și managementul contractorilor; sau
  • Lucrul direct cu inginerii pentru a rafina front-end-ul produsului înainte de lansare.

Prin aceste eforturi de colaborare, un designer va putea să se asigure că liniile directoare ale sistemului sunt respectate sau rafinate în funcție de nevoi.

Oricare ar fi sarcina, există câteva întrebări frecvente despre sistemele de proiectare, considerând că un designer poate fi tras la răspundere pentru:

La ce ar trebui să mă gândesc atunci când proiectez într-un sistem de proiectare?

În funcție de complexitatea sistemului de proiectare, este important să începem prin a lua o abordare cuprinzătoare a problemei care se rezolvă. Luați în considerare exemplul de buton de mai înainte.

Dacă culoarea este presetată să fie #1f9efc și un designer o face #1b3e9b fără a consulta mai întâi alți designeri care folosesc aceeași bibliotecă de modele, acest lucru ar putea cauza o eroare de sistem.

Când lucrați într-un sistem de proiectare, gândiți-vă la modul în care problema rezolvată va afecta întregul ciclu de dezvoltare a produsului. În multe cazuri, nu va exista și nu ar trebui să existe un impact prea mare, deoarece biblioteca de modele a fost deja validată.

Dacă o problemă care este rezolvată este nouă pentru sistemul de proiectare, ar putea exista o oportunitate de a evolua biblioteca de modele și de a ajuta la definirea unui nou model de proiectare.

Când sistemul evoluează, este nou pentru fluxul de lucru al unei echipe. Aici este nevoie de flexibilitate, deoarece modelele de design se vor repeta în timp. Cu toate acestea, deși este ușor să schimbați culoarea unui buton, complexitatea mai mare a sistemului trebuie luată în considerare în orice moment.

Pentru aceasta, este util să se definească o taxonomie pentru organizarea sistemului de proiectare și a bibliotecii de modele. Terminologia utilizată ar trebui să fie ușor de înțeles transfuncțional.

Elemente ale diagramei modelului de proiectare Faceți clic pentru a vedea imaginea la dimensiune completă.
Această diagramă oferă o ierarhie la nivel înalt pentru modul în care poate fi organizată biblioteca de modele a unui sistem de proiectare.


Prin gruparea artefactelor de proiectare în subiecte înțelese în mod obișnuit, biblioteca de modele permite sistemului să funcționeze în fluxurile de lucru în echipă și să dezvolte comunicarea în modul în care se vorbește despre modelele de design.

Cum știu când trebuie să sparg un model sau să creez un nou model într-un sistem de design?

Necesitatea de a rupe sau de a crea un nou model de design depinde de obicei de maturitatea sistemului. Când un sistem de design evoluează, tiparele se schimbă frecvent. Pe măsură ce sistemul devine stabilit, ar trebui să existe un proces de solicitare a modificării care să ajute la asigurarea continuității și calității.

De asemenea, este important de luat în considerare complexitatea unui sistem. Dacă modificarea unui model afectează alți designeri și echipe, implementarea procesului poate dura mai mult și necesită adesea un nivel mai profund de efort sau resurse (de exemplu, actualizarea ghidurilor pentru limbajul de proiectare, biblioteci de modele sau baza de cod front-end).

În general, o bibliotecă de modele nu este menită să fie rigidă. Gândiți-vă la el ca la o cutie de instrumente care poate rezolva probleme și poate finaliza sarcini. Dacă toate încercările de a proiecta în limitele bibliotecii de modele nu ating obiectivele proiectului, intuiția poate duce la căutarea unui nou instrument – ​​sau poate la o schimbare a modelului existent.

Aruncă o privire la diagrama de mai jos. O regulă generală este că identitatea și elementele , care sunt elementele de bază ale mărcii, se schimbă rareori, deoarece ajută la definirea mărcii și a artefactelor de design.

Sistem de proiectare tipografie și branding

Majoritatea organizațiilor mari au ghiduri de stil separate pentru elementele legate de marcă – în special logo-uri, culori și fonturi, care nu se schimbă frecvent. Pentru elemente precum butoanele, aceasta poate sau nu să se repete în funcție de evoluția limbajului de design, dar și acestea au modificări mai puțin frecvente datorită conexiunii lor la toate aspectele produsului.

Modificările modelelor de design sau modelele noi apar adesea la nivel de componente și interacțiuni , deoarece acestea definesc fluxurile de utilizator și seturile de caracteristici. Este obișnuit ca fluxurile de utilizatori noi să fie definite într-o foaie de parcurs de produs, în special atunci când se lansează funcții.

Noile modele de design vor avea proprietăți similare cu modelele deja definite în bibliotecă (cum ar fi fonturile și culorile), dar pot necesita actualizări de interfață sau stări interactive care sunt în plus față de limbajul de proiectare.

Managerul de produs sau proprietarul produsului care lucrează cu un designer va oferi cerințe pentru funcții noi care se aliniază cu obiectivele de afaceri. Când decideți să spargeți sau să creați un nou model de design, amintiți-vă de teoria sistemelor complexe și asigurați-vă că soluția este o decizie comună.

Bibliotecă de limbaje de modele ale sistemului de proiectare
Un exemplu de pagină dintr-un ghid de stil al sistemului de design.

Iată câțiva pași de care trebuie să luați în considerare atunci când vă gândiți cum să rupeți sau să schimbați un model de design:

  1. Asigurarea controlului calitatii si continuitatii

    Amintiți-vă că calitatea este un obiectiv comun al produsului. Toată lumea este responsabilă pentru a se asigura că sistemul de proiectare își face treaba.

    Luați întotdeauna acea abordare holistică și gândiți-vă la impactul potențial al ruperii unui model sau al creării unui nou model.

    Intreaba-te pe tine insuti:

    • Este ruperea unui tipar singura modalitate de a-mi rezolva problema?
    • Cum ar fi afectate alte echipe dacă încalc acest tipar?
    • Ce s-ar întâmpla cu biblioteca de modele dacă rup acest model?
  2. Comunicați cu Colaboratorii

    Discutați cu designerii și membrii echipei interfuncționale pentru a vedea dacă altcineva are aceleași restricții. Aflați totul despre cerințele platformei și despre cum ar funcționa un model propus în întreaga familie de produse.

    Intreaba-te pe tine insuti:

    • Cine a mai lucrat la acest produs sau platformă?
    • Care sunt cele mai bune practici ale platformei pentru care proiectez?
    • Cu cine pot vorbi, care ar putea să mă ajute cu decizia și recomandările mele?
  3. Înțelegeți capacitățile front-end

    Aflați ce este posibil pentru implementarea front-end. Dacă modificarea este pur și simplu o actualizare a proprietăților HTML/CSS/JavaScript, de obicei nu necesită ruperea unui model sau crearea a ceva complet nou.

    Mai degrabă, ar putea fi o simplă actualizare a ghidului pentru limbajul de proiectare. În calitate de designer, este important să lucrezi îndeaproape cu front-end și să găsești eventual modalități de a colabora săptămânal sau zilnic.

    Intreaba-te pe tine insuti:

    • Echipa front-end a fost conectată la această actualizare de design?
    • Modificarea pe care o iau în considerare este o actualizare front-end?
    • Lipsește ceva din ghidul de bune practici?
  4. Validați Decizia

    Dacă se stabilește că este necesar un nou model, decizia ar trebui validată cu colaboratorii și utilizatorii finali și aliniată cu obiectivele de afaceri.

    Dacă componentele front-end sunt legate de valori, un test A/B rapid va ajuta la validare. Dacă nu, efectuarea de teste de utilizare va funcționa grozav.

    Intreaba-te pe tine insuti:

    • Are echipa noastră un proces de solicitare de modificare pentru validarea noilor modele de design?
    • Ce trebuie să fac pentru a-mi valida decizia?
    • Această decizie creează un nou flux de utilizatori sau este o caracteristică adăugată?

Aceeași muncă, mentalitate diferită

Atunci când proiectează în cadrul unui sistem, este esențial ca designerii de produse să adopte mentalitatea de ansamblu care este necesară pentru luarea deciziilor. Principiile unui sistem complex și ale gândirii sistemelor îi vor ajuta pe designeri pe măsură ce își dezvoltă cariera. Același lucru este valabil și pentru procesul de construire dintr-o bibliotecă de modele.

Modele de design UI
De la Mailchimp la Mozilla, mentalitatea și metodologia folosite pentru a crea o bibliotecă de modele pot fi aplicate unei game variate de produse și aplicații digitale.

Aceste abordări sunt utile pentru a începe un nou limbaj de design sau pentru a contribui la unul existent, deoarece odată ce mentalitatea este la locul său, metodele sistematice devin, ei bine, „sistematice”.

Știind că alte industrii și discipline de design au folosit metode similare de simplificare a fluxurilor de lucru de mulți ani, oferă designerilor de produse un punct de referință excelent pentru cele mai bune practici.

La sfârșitul zilei, proiectarea în cadrul unui sistem nu va transforma complet modul în care se face munca. Sigur, vor exista câteva instrumente noi pentru conectarea și gestionarea complexităților, dar în cele din urmă, este o trecere la o mentalitate holistică care va ajuta cu adevărat la îmbunătățirea fluxurilor de lucru.

• • •

Citiri suplimentare pe Blogul Toptal Design:

  • Cum să creați un ghid de stil de schiță, o bibliotecă și un kit UI
  • Declarații de proiectare a problemei - Ce sunt acestea și cum să le încadrați
  • Folosește-ți inspirația – Un ghid pentru Mood Boards
  • Design colaborativ - Un ghid pentru proiectarea de succes a produselor pentru întreprinderi
  • Proiectați viitorul: instrumentele și produsele care ne așteaptă