03 Mag 2023

Che cos’è un Design System?

Che cos’è un Design System?

Lavorare come UI/UX designer richiede di dotarsi di uno o più design system nel corso della propria carriera. Ma che cos’è un design system?
Potremmo dire che è un sistema di norme che codifica con puntualità, ma anche margini di flessibilità, l’aspetto e le funzionalità di un prodotto (che sia un sito web, una applicazione per dispositivi mobile o l’interfaccia di un totem in aeroporto).

Il nome design system fa riferimento all’approccio creativo del design; è infatti sistemico e sistematico. Un design system per essere tale deve fornire linee guida che assicurino uniformità e coerenza al proprio progetto, sia nel momento in cui viene realizzato, sia quando sarà necessario ampliarlo (o ridurlo) in futuro.
Solitamente in un buon design system vengono incluse linee guida sulla tipografia (quali font usare e in quale circostanza), colori (una palette che specifichi le tonalità e le percentuali di utilizzo dei colori all’interno del progetto) ma anche motion (come si muovono, se si muovono, gli elementi interattivi del progetto). Vengono inoltre codificati tutti i componenti del progetto (il loro aspetto).
Un buon design system discende chiaramente dal brand (e quindi dagli elementi che lo caratterizzano) ma va oltre il classico UI-kit che molti designers creano (o scaricano a seconda del tempo e del budget a disposizione) per realizzare i propri progetti. In questo articolo vediamo gli elementi salienti ed immancabili di un buon design system.
Se vuoi approfondire questi temi puoi leggere i nostri articoli riguardanti il mondo UI/UX:

Oppure, puoi seguire il nostro popolarissimo corso su Adobe XD e l’experience design, online o in aula fisica.

Gli elementi essenziali di un design system

I colori in un design system

Dotarsi di una palette colore, solitamente fatta di 5 colori, è la base di partenza per ciascun design system. Una buona palette colori dovrebbe discendere, chiaramente, dal brand per cui stai lavorando. Qualora non fosse disponibile o, stai creando un design system da zero, ecco alcuni accorgimenti per avere una palette colori all’altezza della sfida.

Scegli un colore iniziale che meglio identifica il progetto. Il secondo colore può essere, banalmente, il suo complementare (se scegli ad esempio il verde, il complementare sarà il viola; se invece scegli il blu, il complementare sarà il giallo). Potete affidarvi ad Adobe Color per creare una palette colore utilizzando diverse regole, come quella dei colori complementari.

Color-palette-per-un-design-system

Una volta scelti due colori principali è bene dotarsi di un terzo colore, di accento, che abbia un ottimo rapporto di contrasto con gli altri due e possa essere utilizzato nel caso in cui sia cruciale segnalare all’utente una determinata azione.
Gli ultimi due colori di una palette dovrebbero essere sempre colori neutri, non troppo luminosi. I grigi sono fondamentali in un progetto di UI/UX.
Con quale quota dovresti usare i colori della palette che hai creato? Dipende chiaramente dal progetto, ma molti designers usano una regola piuttosto nota nel mondo dell’interior design, la regola del 60-30-10. Ovvero, tre colori fanno la parte da leone in quota (approssimativa ) del 60, del 30 e del 10%. Anche se utilizzerete verosimilmente tre colori nel vostro progetto è sempre bene dotarsi di altri due colori (e non trascurate mai i grigi/ colori neutri).

Regola-60-30-10-ui-color-palette

Tipografia

Come nel caso dei colori, un buon design system deve includere almeno due typeface (famiglie di font) e diversi font (cioè stili attribuiti alle suddette famiglie di caratteri). È necessario inoltre specificare il peso (la dimensione, o la scala) dei font per indicare chiaramente dove e come verranno utilizzati i font in questione. Ad esempio, per una call to action è possibile usare un font con un peso maggiore rispetto al testo di un paragrafo (pur utilizzando lo stesso typeface). Un titolo deve avere una scala (un peso) maggiore di un paragrafo. In un design system dovrebbe essere inoltre chiarito come utilizzare eventualmente il corsivo (è un modo elegante di attrarre l’attenzione al posto del convenzionale grassetto).

Design-system-tipografia

Stondature ed ombre

Quando realizzate un design system dovrai chiarire anche se gli elementi che progetti, come i bottoni, i campi dei form e le call to action saranno stondati o spigolosi, se saranno dotati o meno di ombreggiatura (per staccarli più o meno bene dallo sfondo). Un buon design system deve infatti prevedere la presenza di queste regole per garantire la massima coerenza ed uniformità a tutto il progetto, nel momento presente e nel futuro.

Stondature-e-ombreggiature

Motion

Che tipo di interazione è prevista tra l’utente e gli elementi dell’interfaccia? Esistono transizioni morbide, veloci, sincopate. Un buon design system deve essere in grado di prevedere come si muoveranno (se si muoveranno) gli elementi UI progettati. Il movimento può aiutare e guidare l’utente nel suo percorso, oppure, potrebbe distrarlo. È quindi d’obbligo chiarire nel design system cosa e come si muoveranno gli elementi… e soprattutto, perché?

motion espero_1

Conclusioni

Nel mondo della UI/UX è bene avere a disposizione un design system per rendere coerente il proprio progetto, nel tempo e nei dispositivi in cui vedrà la luce. Regole precise riguardanti i colori, la tipografia e la motion sono solo alcuni degli elementi (sicuramente i più visibili) di un design system completo. Nel nostro corso riguardante Adobe XD e l’experience design troverai i metodi per creare un design system in XD in pochi passaggi.

Contattaci per maggiori informazioni!

Articolo di Matteo Masciotti
Adobe Certified Instructor / Design Specialist
Dal 2014 ad oggi in veste di Adobe Certified Instructor ha collaborato con i centri Adobe Autorizzati a Milano e a Londra; ha inoltre lavorato in Canada come design specialist e attualmente fornisce consulenze e formazione sui software Adobe per migliorare i flussi di lavoro per i content creators. Tutti gli articoli di Matteo Masciotti »
Se ti è piaciuto questo articolo e vuoi rimanere aggiornato su novità e promo attive, iscriviti alla nostra newsletter (per te anche un codice sconto)!
Serve aiuto?
Chatta con noi
Valutazione di Google
4.9
Basato su 147 recensioni
js_loader