5 Design System che un UX/UI Designer dovrebbe conoscere

Quelle cose già inventate e da cui prendiamo spunto per convenzione, mica perchè siamo pigri!

Il Design System è un insieme completo di standard di progettazione, documentazione e principi comprendente un toolkit (componenti e modelli riutilizzabili).

Perchè utilizzare un design system?

Perchè migliora il lavoro tra designer e dev.

Perchè il processo produttivo è più veloce.

Perchè è centralizzato, riutilizzabile e scalabile.

Perchè semplifica il lavoro di progettazione.

Perchè concede coerenza alla UI.

Gli/le UX/UI Designer di oggi si trovano di fronte a una molteplicità di sfide nel soddisfare le aspettative dell’utentə, garantendo al contempo un’esperienza fluida e coinvolgente delle applicazioni e dei siti web. In questo contesto, la conoscenza e la padronanza dei Design System è diventata non solo raccomandata, ma indispensabile.

Questo articolo si propone di guidarti attraverso cinque dei Design System più essenziali e influenti che ogni UX/UI Designer dovrebbe assolutamente conoscere.

Lets-a-go!

1. Material Design by Google

Material Design (nome in codice “Quantum Paper”) è il design system sviluppato da Google e presentato il 25 giugno 2014. Il designer Matías Duarte ha raccontato, nel Google keynote di presentazione nel 2014, che la sua nascita è fortemente collegata alla carta e all’inchiostro ma che “a differenza della carta reale, il nostro materiale digitale può espandersi e riformarsi in modo intelligente. Material ha superfici e bordi fisici. I layer e le ombre forniscono un significato su ciò che puoi toccare.”

Google infatti ha sintetizzato il concept in 9 principi:

• Material is the metaphor: una metafora materiale è la teoria unificante di uno spazio razionalizzato e un sistema di movimento. Il nostro materiale è basato sulla realtà tattile, ispirato al nostro studio di carta e inchiostro, ma aperto all’immaginazione e alla magia;
• Surfaces are intuitive and natural: le superfici e i bordi forniscono segnali visivi fondati sulla nostra esperienza della realtà. L’uso di attributi tattili familiari parla alle parti primarie del nostro cervello e ci aiuta a capire rapidamente le convenienze;
• Dimensionality affords interaction: i fondamenti di luce, superficie e movimento sono fondamentali per comunicare l’interazione degli oggetti. L’illuminazione realistica mostra le giunture, divide lo spazio e indica le parti in movimento;
• One adaptive design: un unico sistema di progettazione sottostante organizza interazioni e spazio. Ogni dispositivo riflette una diversa visione dello stesso sistema sottostante. Ogni vista è adattata alle dimensioni e all’interazione appropriate per quel dispositivo. Colori, iconografia, gerarchia e relazioni spaziali rimangono costanti;
• Content is bold, graphic, and intentional: il design audace crea gerarchia, significato e attenzione. Scelte cromatiche deliberate, immagini piene, tipografia su larga scala e spazio bianco intenzionale creano immersione e chiarezza;
• Color, surface, and iconography emphasize actions: l’azione dell’utentə è l’essenza del design dell’esperienza. Le azioni primarie sono i punti di flesso che trasformano l’intero progetto. La loro enfasi rende immediatamente evidente la funzionalità di base e fornisce un waypoint per l’utentə;
• Users initiate change: i cambiamenti nell’interfaccia prendono la loro energia dalle azioni dell’utentə. Il movimento che deriva dal tocco rispetta e rafforza l’utentə come motore principale;
• Animation is choreographed on a shared stage: tutte le azioni si svolgono in un unico ambiente. Gli oggetti vengono presentati all’utentə senza interrompere la continuità dell’esperienza anche mentre si trasformano e si riorganizzano;
• Motion provides meaning: il movimento è significativo e appropriato, serve a focalizzare l’attenzione e mantenere la continuità. Il feedback è sottile ma chiaro. Le transizioni sono efficienti ma coerenti.

Material Design

2. Human Interface Guidelines by Apple

Il “Human Interface Guidelines” (Linee guida per l’interfaccia utentə) di Apple è un design system creato dall’azienda per fornire ai developer, designer e creatori/creatrici di app mobili una serie di linee guida e principi di progettazione per creare un’esperienza utentə coerente e intuitiva su tutte le piattaforme Apple, come iOS, macOS, watchOS e tvOS. I suoi principi si condensano in questi punti:

1. Design degli elementi dell’interfaccia: Le linee guida coprono aspetti come icone, bottoni, tipografia, colori, sfondi, stili di testo e altro ancora. Ciò assicura che gli elementi dell’interfaccia siano coerenti in tutte le app.
2. Navigazione e interazione: Apple fornisce indicazioni su come progettare flussi di navigazione intuitivi e interazioni utentə coerenti, come il touch, lo swipe e le animazioni.
3. Gestione del contenuto: Le linee guida offrono consigli sulla presentazione e sulla struttura del contenuto, in modo che gli/le utentə possano accedere alle informazioni in modo semplice e chiaro.
4. Responsività e adattabilità: Poiché i dispositivi Apple variano in termini di dimensioni dello schermo e orientamenti, le linee guida includono principi per rendere le app reattive e adattabili a diverse dimensioni di schermo.
5. Accessibilità: Apple promuove l’accessibilità nella progettazione delle app, cercando di garantire che tutti gli/le utentə possano utilizzare le app senza barriere, indipendentemente da eventuali limitazioni fisiche.
6. Icone e immagini: Vengono fornite specifiche su dimensioni, risoluzione e stile delle icone e delle immagini per garantire una rappresentazione visiva uniforme.
7. Materiali di design: Apple offre una serie di materiali di design, come modelli di Sketch o Photoshop, per aiutare developer e designer a iniziare velocemente con le linee guida.

Seguendo le “Human Interface Guidelines”, designer e developer possono garantire che le loro app si integrino perfettamente con l’ecosistema Apple e forniscano agli/alle utentə un’esperienza coerente e di alta qualità.

È importante notare che il design system di Apple viene periodicamente aggiornato per tenere conto dei cambiamenti tecnologici, delle tendenze di progettazione e delle nuove funzionalità introdotte nei dispositivi Apple.

Design - Apple Developer

3. Spectrum by Adobe

Spectrum è il design system di Adobe, un insieme di linee guida, componenti e strumenti progettati per fornire una base solida per la progettazione e lo sviluppo delle esperienze utentə attraverso tutti i prodotti e le piattaforme Adobe.

Il nome “Spectrum” deriva dalla vasta gamma di prodotti e servizi Adobe, che vanno dalle applicazioni desktop come Photoshop e Illustrator alle applicazioni web come Adobe Creative Cloud e Adobe Experience Cloud. Spectrum unifica l’aspetto, l’interazione e le funzionalità di queste diverse piattaforme, garantendo che gli/le utentə abbiano una navigazione coerente e familiare in tutte le app Adobe.

Le caratteristiche chiave di Spectrum includono:

1. Design consistente: Spectrum stabilisce principi di progettazione chiari e coerenti, come la tipografia, la gestione del colore, gli spazi e le dimensioni, che vengono utilizzati in tutte le interfacce utentə di Adobe. Ciò crea un’esperienza riconoscibile per gli/le utentə.
2. Componenti riutilizzabili: Spectrum offre una vasta gamma di componenti di interfaccia utentə, come bottoni, caselle di testo, menu a discesa, modali e molto altro. Questi componenti possono essere facilmente integrati nelle app e consentono uno sviluppo più rapido ed efficiente.
3. Guida dell’interazione: Le linee guida di Spectrum forniscono indicazioni su come gestire gli stati interattivi degli elementi dell’interfaccia, come le animazioni, gli indicatori di caricamento e altro ancora, al fine di migliorare l’usabilità e l’esperienza utentə.
4. Accessibilità: Spectrum promuove la progettazione accessibile, consentendo a tutti gli/le utentə di accedere ai prodotti Adobe senza barriere. Ciò include una corretta gestione del contrasto dei colori, la disponibilità di testo alternativo per le immagini e altro ancora.
5. Supporto multi-piattaforma: Spectrum è progettato per funzionare su una varietà di piattaforme, come desktop, web e dispositivi mobili, garantendo un aspetto e un funzionamento coerenti in tutti questi ambienti.
6. Documentazione dettagliata: Adobe fornisce una documentazione completa su Spectrum, che include linee guida di progettazione, specifiche dei componenti e linee guida per gli sviluppatori. Ciò aiuta i team di progettazione e sviluppo a collaborare in modo più efficace.

Con Spectrum, Adobe cerca di creare un ecosistema intuitivo e “familiare” per i/le suoi/sue utentə, consentendo un flusso di lavoro più fluido e una migliore esperienza complessiva con i prodotti e servizi Adobe. Come per molti design system, Spectrum è soggetto a miglioramenti e aggiornamenti continui per adattarsi alle mutevoli esigenze e alle nuove tecnologie dell’industria.

Spectrum, Adobe's design system

4. Carbon Design by IBM

Carbon Design System è il design system di IBM, progettato per fornire una guida completa per la progettazione e lo sviluppo di prodotti digitali e applicazioni aziendali. È un sistema open-source che mira a creare esperienze utentə intuitive, accessibili e scalabili su tutte le piattaforme.

Le caratteristiche chiave di Carbon Design System includono:

1. Componenti riutilizzabili: Carbon offre un vasto insieme di componenti di interfaccia utentə, come bottoni, modali, tabelle, form, icone e molto altro. Questi componenti sono progettati per essere facilmente personalizzabili e riutilizzabili, consentendo uno sviluppo più rapido e coerente delle applicazioni IBM.
2. Design responsivo: Carbon è progettato per adattarsi a diverse dimensioni di schermo e dispositivi, garantendo un’esperienza utentə ottimale su desktop, tablet e dispositivi mobili.
3. Design basato sui principi di IBM: Carbon si basa su cinque principi guida di progettazione: “Purposeful”, “Intentional”, “Inclusive”, “Enterprise-first” e “Adaptable”. Questi principi sottolineano l’importanza di progettare con uno scopo, di essere consapevoli delle esigenze degli/delle utentə, di essere inclusivi e di adattarsi alle esigenze aziendali.
4. Accessibilità: Carbon Design System pone una forte enfasi sull’accessibilità, garantendo che le applicazioni e i prodotti sviluppati con esso siano utilizzabili da tutti, indipendentemente da eventuali limitazioni fisiche o sensoriali.
5. Linee guida per lo stile: Carbon fornisce linee guida dettagliate sulle scelte di stile, come tipografia, colori, spaziatura e dimensioni, per garantire una coerenza visiva tra le diverse applicazioni IBM.
6. Documentazione completa: Carbon offre una documentazione dettagliata che include esempi di utilizzo dei componenti, guide per gli sviluppatori e consigli per il design. Questo aiuta i team di progettazione e sviluppo a lavorare in modo più efficiente e collaborativo.
7. Community e supporto: Carbon è un progetto open-source con una community attiva di designer e sviluppatori che contribuiscono al suo sviluppo e miglioramento continuo. Ciò fornisce un supporto aggiuntivo e una piattaforma per lo scambio di idee e best practice.

Il design system Carbon è stato adottato da IBM per guidare la progettazione e lo sviluppo delle sue applicazioni interne ed esterne, contribuendo a creare un’esperienza utentə di alta qualità per i suoi clienti e utentə.

Carbon Design System

5. Fluent Design by Microsoft

Fluent Design System è il design system di Microsoft, introdotto inizialmente con il nome in codice “Project Neon” e poi ufficialmente annunciato come “Fluent Design System” nel 2017. Si tratta di un framework di progettazione multi-piattaforma progettato per creare esperienze utentə fluenti e coinvolgenti su diverse piattaforme Microsoft, come Windows, Xbox, Office, Microsoft Teams e altre.

Le principali caratteristiche di Fluent Design System includono:

1. Materiali di design: Fluent Design System si basa su una serie di materiali di design come luci, ombre e movimento. Questi elementi vengono utilizzati per creare un senso di profondità, realismo e fluidità nell’interfaccia utentə.
2. Elementi di design: Fluent Design System introduce diversi elementi di design chiave, come Acrylic, Reveal, Fluent icons e altri, che aggiungono dinamismo e animazioni all’interfaccia utentə.
3. Motion: Fluent Design System enfatizza l’importanza del movimento nella progettazione dell’interfaccia utentə. Le animazioni fluide e intuitive contribuiscono a guidare l’utentə attraverso l’esperienza e a rendere l’interazione più coinvolgente.
4. Coerenza multi-piattaforma: Fluent Design System è stato progettato per funzionare su diverse piattaforme Microsoft, garantendo che le esperienze utentə siano coerenti e familiari su tutti i dispositivi.
5. Personalizzazione: Il design system offre una certa flessibilità nella personalizzazione, consentendo agli sviluppatori e ai designer di adattare Fluent Design alle esigenze specifiche delle proprie app.
6. Responsività: Fluent Design System è stato sviluppato con un’attenzione particolare alla responsività, adattandosi a diverse dimensioni di schermo e dispositivi, da desktop a dispositivi mobili.
7. Accessibilità: Microsoft ha lavorato per garantire che Fluent Design System rispetti gli standard di accessibilità, consentendo a tutti gli/le utentə di accedere alle app e ai servizi Microsoft senza barriere.

Fluent Design System è stato introdotto per fornire un’esperienza utentə moderna su tutte le piattaforme Microsoft. Grazie al suo approccio basato sui materiali di design e sulla fluidità delle animazioni, Fluent Design System ha portato un aspetto e una sensazione rinnovati alle app e ai servizi Microsoft, migliorando l’esperienza dell’utentə su tutte le piattaforme.

Microsoft Design

Letture Consigliate

#SPEAKABEET about Material Design, Anna Grazia Longobardi x weBeetle, 2019

#SPEAKABEET about Material You, Anna Grazia Longobardi x weBeetle, 2021

Brano consigliato per la lettura