Design system: de ce aplicațiile bune arată la fel peste tot

Aplicațiile bune arată la fel pe fiecare ecran pentru că sunt construite dintr-un singur set de piese: culori, fonturi, spații și componente definite o dată și refolosite peste tot. Setul ăsta se numește design system. Pentru tine, ca proprietar al aplicației, înseamnă ecrane noi făcute mai repede, utilizatori care nu se pierd și mai puține greșeli de corectat după lansare.

Ce e un design system, fără jargon

Gândește-te la el ca la o cutie de piese de construcție, cu instrucțiuni. Are trei niveluri:

1. Valorile de bază. Culorile, cu nume după rol, nu după nuanță: „principal”, „fundal”, „eroare”, „text secundar”. Mărimile de text, spațierile dintre elemente, rotunjirea colțurilor. În echipele de produs li se spune adesea „tokens”.
2. Componentele. Butonul, câmpul de text, cardul, lista, bara de navigare de jos. Fiecare cu toate stările lui: normal, apăsat, dezactivat, cu eroare, în încărcare.
3. Regulile. Câte butoane principale ai pe un ecran (de obicei unul), cum scrii un mesaj de eroare, când apare o fereastră de confirmare și când nu.

Google și Apple își publică propriile sisteme pentru Android și iOS. O aplicație de firmă nu trebuie să le copieze, dar se sprijină pe ele: pornești de la ce știe deja utilizatorul de pe telefonul lui și adaugi identitatea ta.

De ce contează să arate la fel

Utilizatorul învață o singură dată. Dacă butonul principal are aceeași culoare și formă pe fiecare ecran, omul nu se mai întreabă ce se apasă. Fiecare variație inutilă e un mic moment de ezitare.

Schimbi o dată, se schimbă peste tot. În Figma, unde desenăm aplicațiile, componentele sunt elemente refolosibile: există o componentă principală, iar copiile ei de pe ecrane rămân legate de ea și primesc orice modificare. Dacă decizi că butoanele devin mai rotunde, nu repari o sută de ecrane. Repari una.

Designerul și programatorul vorbesc aceeași limbă. Când în fișierul de design scrie „buton principal” și „spațiere M”, programatorul are în cod aceleași piese, cu aceleași nume. Diferențele dintre machetă și aplicația reală scad mult.

Regulile de accesibilitate intră o dată, în piese

Partea bună: regulile de lizibilitate le pui o singură dată, în componente, și fiecare ecran nou le moștenește.

Dacă butonul din design system respectă contrastul și mărimea, nimeni din echipă nu mai poate „uita” regula pe ecranul 47.

Cât de mare trebuie să fie pentru o aplicație mică

Nu-ți trebuie un document de două sute de pagini. Pentru o aplicație de firmă cu 15–30 de ecrane, un design system bun încape în:

• o pagină cu culorile pe roluri și fonturile pe niveluri (titlu, subtitlu, text, etichetă);
• o scară de spațieri, de exemplu 4, 8, 16, 24, 32;
• 10–15 componente, cu toate stările lor;
• o jumătate de pagină de reguli.

Regula noastră de lucru: când o piesă apare a doua oară, devine componentă. Așa sistemul crește odată cu aplicația, nu înaintea ei.

Dacă firma are deja o identitate vizuală, culorile și fonturile vin de acolo. Am scris despre câte culori are nevoie un brand în articolul despre paleta de culori și despre alegerea fonturilor în articolul despre fonturile de brand.

Ce primești la final

La o aplicație făcută cu design system, pe lângă aplicație rămâi cu trei lucruri: fișierul de design cu toate componentele, lista de valori pe care o folosește programatorul și pagina de reguli. Cu ele, următoarea funcție se desenează mult mai repede, chiar dacă o face altă echipă. Dacă pregătești o aplicație, vezi ce facem în studioul de aplicații.