Design system, l’inventario degli elementi che compongono un sito web
Quando ci troviamo a progettare un sito web, dopo aver strutturato le logiche e i flussi di interazione, risulta fondamentale la creazione delle linee guida visive. Tutti gli elementi e le componenti, infatti, devono essere coerenti fra loro e con l’identità visiva del brand. Proprio per rispondere a questa esigenza si parla di design system o, abbreviato, DSM.
Design system: cosa è
Con design system ci si riferisce all’insieme di regole e linee guida che definiscono la progettazione visiva di un prodotto digitale. Concretamente un DSM ha la forma dei template grafici che la squadra di visual design trasferisce al team di sviluppo per mostrargli la forma finale che dovrà assumere il sito web.
Ampliando lo sguardo, il design system rappresenta un vero e proprio modo di approcciarsi alla progettazione: non più per pagine, ma per singoli elementi che compongono la pagina. Il suo impatto è tale che Figma ha costruito un hub dedicato, designsystems.com, in cui raccogliere articoli, discussioni, casi studio e riflessioni sull’argomento.
L’inventario accurato di mattoncini e componenti
Facciamo un esempio e proviamo a immagine la costruzione di un sito web come se fosse il gioco dei mattoncini Lego. Consideriamo il mattoncino come l’elemento minimo per poter partire: tanti mattoncini creano una costruzione. Anche se originano dagli stessi mattoncini, però, non tutte le costruzioni sono uguali: possono avere colori diversi o ricorrere a mattoncini di diverse forme e dimensioni.
Esattamente così funziona un design system: vengono disegnati pezzo per pezzo, mattoncino per mattoncino, tutti gli elementi e tutte le componenti di un sito web. Dagli elementi più semplici come frecce e titoli, fino ad arrivare alle componenti più complesse che accorpano fra loro i vari elementi, come per esempio dropdown e caroselli.
Design system: come lo facciamo noi
Tutto parte dalla domanda: come costruiamo un’interfaccia digitale coerente?
E la risposta: definendo le sembianze visive di ogni singolo elemento che compone quell’interfaccia.
Partiamo ponendo massima attenzione alla scelta del font e alla scala tipografica. Infatti, non basta stabilire i caratteri da utilizzare, ma è fondamentale definirne anche le grandezze, le disposizioni e come devono essere combinati fra loro in base alle specifiche situazioni.
Svolgiamo lo stesso minuzioso lavoro per le griglie, i pattern, le color palette, le icone, le illustrazioni, le immagini e tutti gli altri elementi alla base di sito o dell’app. Poi passiamo alla progettazione visiva di elementi e componenti: bottoni, titoli, accordion, pop-up, tendine, etc.
Infine, progettiamo ogni componente in ottica responsive, così che si declini su ogni tipo di device.
Tutti i vantaggi di un solido inventario
Elaborare un DSM ha molti vantaggi. Innanzitutto, aiuta a mantenere coerenza e continuità all’interno di un ecosistema digitale, a prescindere da quanto ampio e complesso questo ecosistema possa essere. Inoltre, un design system contribuisce attivamente anche a migliorare l’esperienza dell’utente, garantendo una navigazione fluida e responsive su tutte le piattaforme.
Infine, un DSM è uno strumento molto efficace per velocizzare e semplificare le attività di manutenzione di un sito, anche quando la lavorazione si protrae per tempi lunghi o coinvolge molti designer.
Per concludere…
A design system is a complete set of standards intended to manage design at scale using reusable components and patterns. Fessenden
Così Therese Fessenden nel suo articolo su NNGroup definisce un DSM, ponendo l’accento sulla scalabilità. Infatti, è importante creare gli elementi e le linee guida che garantiscano coerenza a un sito web ma è altrettanto importante che questi standard siano flessibili e sappiano adattarsi all’aggiunta di elementi che si potrebbero rendere necessari in futuro.
I tuoi prodotti digitali hanno alla base un design system accurato? Parliamone insieme!
Noi di Swipando aiutiamo persone e brand ad esprimere le proprie idee e a crescere in modo sostenibile.
© 2023 Swipando Srl - Tutti i diritti riservati - C.F. e P. IVA 02903460901