Il design system è uno strumento potente composto da una raccolta di componenti, principi e linee guida destinato alla progettazione di prodotti digitali.
Fornisce all’azienda e al team di sviluppo numerosi benefici, finendo anche per fornire un’esperienza coerente all’utente finale, indipendentemente dal dispositivo o dalla tecnologia utilizzata.
Spesso però abbiamo un’idea sbagliata dei sistemi di progettazione, ovvero li consideriamo come solo un set di assets e componenti da utilizzare per costruire un prodotto.
A nostro avviso, il design system è l’incarnazione stessa di un sistema di concetti che definiscono un brand, stiamo parlando quindi non solo di linee guida e principi, ma anche di filosofia e linguaggi di un brand.
Implementare un design system all’interno del proprio team di lavoro può portare numerosi benefici, tra i quali possiamo trovare:
👉 scalabilità, perché permette di evolvere un prodotto digitale, partendo da basi già consolidate, sia a livello di design che a livello di infrastruttura tecnologica;
👉 consistenza, in quanto avendo delle linee guida e dei componenti standardizzati possiamo rendere i nostri prodotti digitali coerenti dal punto di vista funzionale e visuale;
👉 collaborazione, soprattutto tra il team di design e di sviluppo, ma anche con gli stakeholder.
Dobbiamo immaginare il nostro Design System come una scatola dei Lego, in cui ogni componente corrisponde a un mattoncino. Ognuno di essi è un tassello importante per la nostra progettazione e per questo dobbiamo curare molto bene la parte della documentazione.
Come possiamo iniziare?
Iniziare un’attività enorme come può essere quella di costruire un Design System da zero può sembrare uno scoglio insormontabile.
Quando ci troviamo di fronte a queste tipologie di “imprese” quello che può aiutare è porsi un obiettivo e chiedersi: quali problemi vogliamo risolvere? Come vogliamo, o abbiamo bisogno, di strutturare il nostro lavoro in modo che sia di facile mantenimento?
Dopodiché si parte facendo un’analisi di ciò che attualmente abbiamo all’interno dei nostri file di progetto e quindi:
👉 effettuare un primo audit di ciò che è in produzione e che non è stato disegnato; in questo modo avremo traccia anche di possibili casistiche da implementare nei nostri componenti;
👉 individuare i colori, icone, shadow, spacing, grid/column system che sono attualmente presenti nei nostri prodotti digitali. Questi sopra citati nello specifico sono i più importanti in quanto costituiscono le fondamenta di tutto il nostro Design System;
👉 individuare la tipografia utilizzata su tutti i nostri touchpoint (quindi dalla schermate mobile, a quelle Web, alla tipografia utilizzata per mandare le email, ecc);
👉 individuare pattern ricorrenti, in modo da rintracciare anche eventuali disallineamenti o possibili comportamenti da adeguare;
👉 creare la documentazione scritta che dovrà servire come enciclopedia di riferimento per tutti i membri del team e dove saranno racchiuse tutte le regole di utilizzo dei componenti, pattern e altri componenti di UI.
Ora che abbiamo fatto tutti questi passaggi, una buona pratica è fare ricerca su come altre società o aziende hanno implementato il Design System e come lo usano all’interno dei propri flussi di lavoro.
Quindi quali sono le componenti?
Come abbiamo detto prima, il design system è molto di più di una libreria di componenti, andiamo perciò a vedere quali sono gli elementi più comuni che compongono un sistema di progettazione:
👉 Libreria di componenti
Conosciuto meglio come UI Kit, questa libreria contiene una raccolta di componenti di User Interface come button, form, menù, checkbox e così via.
👉 Libreria dei pattern
È una raccolta di soluzioni di design ricorrenti progettate sui modelli mentali del pubblico.
Per esempio, un menù verticale a drop down è utilizzato per mostrare un elenco di opzioni.
👉 Brand guidelines
Le brand guidelines sono delle regole che governano non solo come un brand deve apparire ma anche come comunicare.
Solitamente rappresentano i colori e i font da utilizzare, oppure lo stile delle immagini e come deve essere usato il logo.
Queste guidelines sono molto importanti per mantenere una coerenza nella comunicazione, di qualsiasi tipo essa sia.
👉 Brand values
I valori del marchio sono le convinzioni e i principi che un’azienda rappresenta e desidera comunicare ai propri clienti e al pubblico.
Questi valori vengono utilizzati per guidare il processo decisionale dell’azienda e modellare i suoi messaggi.
👉 Design principles
I design principles sono un insieme di valori che mantengono l’intero team sullo stesso percorso durante il processo di progettazione.
I principi di progettazione dovrebbero essere specifici, sfumati e utilizzabili.
Ad esempio i design principles di Spotify è TUNE (tone, usable, necessary, emotive).
👉 Libreria di icone
È una raccolta di icone in diversi formati e stili che possono essere utilizzate nei progetti digitali.
👉 Content guidelines
È comune trovare nei design system anche le linee guida per i contenuti.
Aiutano a garantire coerenza e qualità in tutti i contenuti, oltre ad allinearli al marchio.
👉Accessibility guidelines
Le linee guida sull’accessibilità sono un insieme di standard e raccomandazioni che contribuiscono a garantire che tutti gli utenti, indipendentemente dalle loro capacità, possano accedere e utilizzare il prodotto.
👉 Design tokens
I design token usano nomi con valori codificati che rappresentano elementi dell’interfaccia come colori, caratteri, spaziatura, animazioni e così via, per la creazione di interfacce multipiattaforma, consentendo una comunicazione più veloce fra developer e designer.
I vantaggi del design system
Un design system professionale è in grado di fare la differenza, infatti grazie a una progettazione di questo tipo traggono vantaggio il team, l’azienda e anche gli utenti.
Per il team, si riduce la tempistica dello sviluppo con la possibilità di concentrarsi su problemi di maggiore importanza, piuttosto che su semplici elementi dell’interfaccia.
L’azienda vede diminuire i costi di sviluppo del prodotto e l’aumento di utenti grazie al miglioramento della UX e alla coerenza fra le diverse piattaforme.
Per gli utenti, ci sarà un’elevata fruibilità d’uso, un’esperienza di navigazione semplice e veloce e una sensazione di familiarità nell’utilizzo del servizio o prodotto digitale.
Esempi di successo di design system
Nel corso degli ultimi anni il numero e la velocità con cui si progettano le interfacce è aumentato drasticamente.
Tutte le grandi digital company hanno investito nella creazione del loro design system, qui di seguito i design system più iconici che abbiamo individuato:
👉 Material Design: sviluppato da Google, questo è uno degli scrigni per la progettazione di design semplici ed eleganti;
👉 Human Interface Guidelines: Apple fornisce una serie di risorse pratiche e linee guida visive, costruite sui principi di design di Steve Jobs;
👉 Fluent Design System: sviluppato da Microsoft, questo design system è molto innovativo e in linea con i trend del momento;
👉 Atlassian Design System: uno dei migliori in termini di completezza;
👉 IBM Carbon Design System: brilla con le sue caratteristiche principali, offrendo numerosi strumenti e risorse visive per i designer e gli sviluppatori di Adobe, Axure e Sketch;
👉 Polaris: fornisce una guida per la progettazione della piattaforma Shopify;
👉 Uber: il colosso dello spostamento ci regala un impeccabile design system;
👉 Airbnb Design System: il linguaggio di Airbnb per costruire esperienze impeccabili;
👉 Designers Italia: è il punto di partenza sviluppato per la creazione di prodotti digitali per le pubbliche amministrazioni in Italia. Ideato per garantire servizi digitali semplici, accessibili, equi e inclusivi per tutti i cittadini;
👉 Sirio: il design system costruito per INPS (Istituto Nazionale della Previdenza Sociale).
Se ti va di approfondire ti consigliamo di visitare anche ADELE, una repository pubblica gratuita fornita da UXPin, con tantissimi altri design system di grandi aziende in tutto il mondo.
Conclusioni
Ora hai capito come il Design System può rivoluzionare il modo in cui si progettano prodotti digitali e come questi possono crescere nel tempo.
