Fate spazio al Design System!

User Experience

19 Giu, 2019

I sistemi di progettazione, o Design Systems, significano qualcosa per te? Sentiamo spesso parlare di loro, di atomic design e di tutta una serie di tendenze che gli ruotano attorno. Ci sono anche importanti conferenze sull’argomento.

I Design Systems, che sono stati fiorenti per diversi anni, si sono ritagliati un posto importante nel panorama dei progetti digitali. Gli strumenti sono sempre più performanti, permettendoci di progettare i componenti di sistema e condividerli con il maggior numero possibile di persone.

In un ecosistema in cui proliferano nuove tendenze, e non necessariamente sostenibili, è legittimo chiedersi se l’investimento ne valga la pena.

Oggi abbiamo la contezza necessaria per valutare il Design System come strumento e i vantaggi che potrebbe offrire.

Qual è lo scopo del Design System?

Un Design System, come una style guide, è uno strumento interno e specifico dell’azienda. Si tratta di un insieme di documenti, strumenti e regole utilizzate per sviluppare un’interfaccia, un’unica repository. Quando il Design System è concepito in modo coerente e adattato ad un progetto, diventa il suo stesso centro nevralgico. È un punto di contatto per tutti gli stakeholder del progetto, una biblioteca di riferimento e molto altro ancora. Inizialmente, questo sviluppo risponde ad un’esigenza: deve adattarsi al mondo digitale in cui viviamo, che, come sapete, è in continua evoluzione. Le “regole”, o le migliori pratiche di design e di esperienza di oggi, saranno rapidamente sostituite da altre.

L’idea è quindi la seguente: rispondere a questo costante cambiamento, immaginare di poter sviluppare un prodotto, o un sito, utilizzando uno strumento: il nostro famoso Design System.

Fondamentalmente è una Style Guide o una libreria Sketch?

Non proprio, se non del tutto. La guida di stile è parte del Design System, ma non è l’unico elemento che lo compone.

Per anni, i team di progettazione hanno sviluppato guide di stile, librerie di contenuti, ecc. Allo stesso modo, gli sviluppatori hanno utilizzato strumenti come Bootstrap per semplificare il loro lavoro. L’obiettivo è, quindi, quello di riunire tutti questi elementi in modo che un team possa imparare, creare e crescere con un unico strumento centralizzato: il Design System. In effetti, quest’ultimo riprende i principi delle guide di stile, ma va ben oltre. Si tratta di un framework completo per la progettazione. Un insieme di regole, principi, vincoli e buone pratiche che può essere utilizzato da tutti i membri dello stesso team. Ad esempio per ingrandire la linea, è possibile richiamare gli elementi in modalità “ready to use” direttamente da una libreria condivisa. Questi componenti sono implementati e codificati e consentono a un team di progettare, sviluppare e mantenere la qualità del prodotto.

sketch prime Fate spazio al Design System!

Sembra semplice se lo si guarda in questa modo, ma da cosa è composto?

Come avrete capito, il Design System non deve essere considerato come un unico elemento, bensì comprende un ventaglio molto più ampio di componenti.

Sulla base di questo principio, non si tratta, quindi, di una singolo variabile, ma di una serie di elementi che probabilmente evolveranno costantemente con prodotti e tecnologie emergenti. Un Design System può, quindi, essere costituito da una guida di stile, regole strutturali, componenti e modelli, e tutti i tipi di risorse che un progetto richiede. Se siete curiosi, UX Pin ha creato Adele, Design System repository pubblica.

L’obiettivo primario è quello di facilitare il lavoro dei team che lo utilizzeranno. Dobbiamo, quindi, guardare le cose da una prospettiva diversa dal semplice “che cosa lo compone”. È, invece, necessario chiedersi chi saranno gli utenti e come useranno il Design System. Infatti, non esiste un solo e unico modo per progettarlo, ma c’è ne sono tanti quanti sono i team che li utilizzano. Ponendo le domande giuste, possiamo creare un Design System che si adatta perfettamente agli obiettivi di un team e di un progetto. Ad esempio, rigoroso o piuttosto flessibile, con una vocazione ad evolvere rapidamente, ma anche la libertà o meno che lascerà agli attori del progetto, ecc.

Tuttavia, un metodo di costruzione è accettato all’unanimità: l’Atomic Design. L’obiettivo di questo metodo, ideato da Brad Frost, è quello di progettare componenti di sistema in grado di adattarsi ai rapidi cambiamenti. Il nome “Atomic” si riferisce direttamente alla metafora della chimica ed evoca l’aspetto “vivo” ed evolutivo del metodo.

La progettazione atomica si basa su una metodologia composta da cinque fasi distinte e direttamente collegate tra loro per creare sistemi di progettazione in modo più efficiente e gerarchico. I cinque step sono i seguenti: Atomi, Molecole, Organismi, Modelli, Pagine. Non si tratta di un processo lineare, ma piuttosto di un modello che aiuta a progettare interfacce o prodotti come un insieme coerente e una collezione di set. Ognuno dei cinque passi gioca un ruolo chiave nella gerarchia del Design System.

step atomic design Fate spazio al Design System!

 

Gli atomi

Stanno alla base della costruzione e servono come sostegno per la realizzazione dei blocchi dell’interfaccia. Sono composti da elementi HTML semplici, come pulsanti, colori, tipografia, etichette, input e qualsiasi altro elemento che non può esistere da solo senza alterarne la funzionalità.

Le molecole

Proprio come in chimica, le molecole sono gruppi di atomi legati che acquisiscono nuove e distinte proprietà. Nel nostro Design System sono gruppi di semplici atomi che lavorano insieme. Ad esempio, un titolo del modulo, un campo di ricerca e un pulsante possono essere combinati per creare una molecola del modulo di ricerca.

Le organizzazioni

Sono componenti di interfaccia utente relativamente complessi composti da gruppi di molecole e/o atomi. Queste organizzazioni formano sezioni separate di un’interfaccia. Ad esempio, un menu o una griglia dell’elenco prodotti.

I modelli

A questo livello, dimentichiamo le analogie della chimica e torniamo ad elementi che ci sono più familiari. I modelli sono utilizzati per strutturare il contenuto. Sono un insieme dei nostri organismi. Normalmente già sviluppati (in codice), i Template permettono di verificare l’organizzazione e la prioritizzazione delle varie organizzazioni create e di testarne i comportamenti.

Le pagine

Questi sono esempi specifici di Template che compongono la struttura della pagina che si andrà ad ottenere. In questa fase, tutti i segnaposto sono stati sostituiti da contenuti finali (testi, immagini, colori, pittogrammi, organismi e molecole finalizzate).

Tenendo conto della natura dinamica del contenuto, Atomic Design permette di creare sistemi in cui tutti i componenti sono graficamente distinti, cosa impossibile da ottenere caso per caso, sulle pagine.

Oggi non dobbiamo più pensare in termini di “schermi” o “pagine”, ma in termini di componenti di sistema ed elementi modulari. Non progettiamo più pagine, ma elementi di interfaccia che possono essere utilizzati in qualsiasi ambiente (mobile, desktop, schermi, orologi, ecc.).

Questo è ciò che Google ha fatto, ad esempio, con Material Design: un insieme di regole di progettazione ideate per essere applicate alle interfacce grafiche. Progettato per adattarsi ai diversi media, Material Design è stato utilizzato dal colosso americano per unificare lo stile grafico delle sue applicazioni e piattaforme.

 

È davvero utile?

Non è sfuggito a nessuno che il modo in cui progettiamo le nostre interfacce sta cambiando. In un’agenzia digitale, sembra essenziale mettere regolarmente in discussione i flussi di lavoro e le tecniche di co-creazione per essere sempre più efficienti senza perdere di vista la qualità e la coerenza di un progetto. E’ vero che creare un Design System sembra essere un investimento, ed è così. E’ ancora legittimo chiedersi se vi sia o meno interesse a prendere l’iniziativa. È chiaro che uno strumento di questo tipo offre una moltitudine di vantaggi se applicato.

design system atomic design Fate spazio al Design System!

Mantenere la coerenza complessiva tra gli elementi dell’interfaccia

È un sistema di riferimento unico e universale. Il fatto di creare rapidamente una guida di stile, e di lavorare ad atomi, ci obbliga a mantenere una reale coerenza e a non duplicare gli elementi grafici del progetto.

Miglioramento dell’efficienza

I sistemi di progettazione consentono di risparmiare tempo e denaro. Invece di creare componenti da zero, progettisti e sviluppatori possono utilizzare gli elementi esistenti e creare nuove pagine in modo più efficiente e rapido. Non è, quindi, più necessario, in fase di creazione, rifiutare tutti gli schermi, né tutti i punti di rottura.

Prenditi più tempo per pensare all’experience

Poiché gli elementi visivi sono già delineati nel Design System, questo offre una maggiore flessibilità nella progettazione di un sito o di un prodotto. Costruire o progettare attraverso elementi separati ci permette di concentrarci sull’essenziale e di focalizzarci sull’experience.

Semplificare lo sviluppo

Il Design System riunisce tutti gli elementi necessari alla progettazione di tutte le pagine del sito. Gli sviluppatori saranno in grado di modificare facilmente gli elementi presenti in diversi luoghi. La manutenzione e gli aggiornamenti sono agevolati da un sistema di condivisione delle versioni. Poiché ogni elemento viene sviluppato nel corso del progetto, è possibile eseguire i test in un ambiente reale in tempi più rapidi.

Migliore comunicazione in team

Questo processo rappresenta la fonte di una verità univoca valida per tutti gli user. Permette di avere la stessa logica relativa alla progettazione di un’interfaccia o al suo sviluppo (con un linguaggio comune per i nomi dei componenti).

Un’apertura a supporti multipli

Una volta costruito, è possibile progettare un’interfaccia sia per un televisore che per uno smartphone. Grazie alla flessibilità e modularità degli atomi, è possibile creare la stessa interfaccia per supporti diversi mantenendo armonia ed ergonomia. Lo stesso principio si applica alla densità di contenuti che un’interfaccia può contenere. I componenti possono essere facilmente impilati, duplicati o modificati grazie a specifiche regole di gestione.

I Design System forniscono un vantaggio anche ai creativi che potranno dedicare più tempo agli aspetti da loro curati: animare atomi e molecole o dare un senso alle diverse componenti in modo che lavorino insieme, ma anche monitorare gli sviluppi in modo che il risultato finale corrisponda alla visione desiderata.

Un vero e proprio metodo di lavoro da integrare nei flussi, il Design System facilita le mansioni di tutti e permette di concentrarsi sull’obiettivo più importante: immaginare una user experience al servizio dei KPI individuati all’inizio del progetto.

 

Lascia un commento.