Dati 2020 sui Design System per il web

Un resoconto dello State of Design System Survey di Google

I Design System definiscono l’aspetto e le dinamiche interattive di gran parte delle app mobile e delle web app che utilizziamo oggi. Le aziende adottano soluzioni personalizzate o si affidano agli standard dettati delle grandi organizzazioni del web. Qual è la situazione di questi paradigmi progettuali secondo i dati del 2020?

A dicembre 2020 il sito material.io ha pubblicato un articolo di Abla Hamilton, ricercatrice di Material Design presso Google, sullo stato dell’arte dei Design System nel panorama internazionale. Hamilton espone i dati raccolti dallo State of Design System Survey, un questionario annuale incentrato sull’evoluzione di questi paradigmi progettuali, sui professionisti che li adottano e sui processi che li vedono coinvolti.

Il 76% degli intervistati può essere annoverato tra quelli che Nikolas Klein di Figma definisce creators, ovvero chi inventa o documenta patterns di design ad uso di altri professionisti che devono applicarli ai progetti come le linee guida progettuali adottate dai programmatori per tradurre in codice web i componenti grafici disegnati dagli UI designer.

In questo articolo riportiamo una sintesi dei dati salienti esposti da Hamilton per inquadrare in modo conciso il metodo, le risorse e le tecnologie adottate delle aziende che si occupano di design del software per il web.

Gli elementi di un Design System

Tra le molte risorse, un Design System in prevalenza comprende una libreria di icone (84%), un kit UI (83%), una Style Guide (76%) e una libreria di componenti per gli sviluppatori (74%).

Le icone e la Style Guide definiscono l’identità visiva del Design System da applicare ai progetti. Il kit UI permette agli UI designer di progettare le interfacce adottando componenti grafici con colori, font e icone coerentemente alle linee guida stabilite.
La libreria di componenti è la traduzione in codice di quanto definito dai designer e consente agli sviluppatori di trasporre il Design System su un software funzionante.

Grafico percentuali asset design system

La top 3 delle risorse più comuni all’interno di un Design System.
I Design System più usati

Già dal 2019 nella top 3 dei Design System più usati si sono aggiudicati il podio Material Design di Google, Human-Interface di Apple e Bootstrap.

Allargando il discorso anche alle librerie di componenti, sempre nel 2019 il 58% degli intervistati metteva al primo posto Material Design di Google, seguito da risorse in-house, ovvero progettate dalle aziende in modo autonomo.

Nel 2020 l’80% delle aziende ha costruito un proprio Design System in-house. I motivi dietro a questa scelta riguardano una migliore aderenza al brand aziendale (27%), la necessità di far fronte a use-cases specifici (22%) e i limiti tecnici del framework o dello stack tecnologico adottato dagli sviluppatori (14%).

Analizzando le risposte più nel dettaglio, Hamilton è arrivata alla conclusione che le aziende si appoggiano ai Design System delle grandi case tech come Google e Apple per farne un riferimento e una fonte d’ispirazione, ma costruiscono le proprie risorse operative personalizzate in-house per rispondere meglio alle esigenze dei loro progetti.

Grafico percentuali dei design system più diffusi

La top 3 dei Design System più diffusi già dal 2019.

A proposito, se non sai di cosa si tratta leggi il nostro articolo cos’è Material Design di Google?

I software più usati per gestire il processo di design

Nel 2019 la gestione dei Design System in senso ampio vedeva Sketch al primo posto come software utilizzato per progettare ed organizzare gli asset. Nel 2020 la situazione è cambiata: Figma (25%) ha scalzato Sketch (21%), mentre Storybook (17%) si posiziona terzo. Tuttavia, le aziende di dimensione maggiore adottano Sketch con maggior frequenza.

Tra gli strumenti disponibili per la progettazione di interfacce digitali (kit UI) Figma è il software più usato (23%), seguito da Sketch (19%) e Illustrator al terzo posto (11%). In particolare Figma è preferito da aziende con meno di 500 dipendenti mentre Sketch è frequente nelle multinazionali con oltre 10.000 persone.

Il passaggio di consegna degli asset e della documentazione dal design alla programmazione è sempre un momento cruciale di ogni progetto. Anche in questo frangente Figma resta in testa (26%) seguito da InVision (18%) e Zeplin (13%). In questo caso InVision è la scelta più frequente tra le aziende grandi.

Grafico delle percentuali dei software più diffusi

Una panoramica dello stack tecnologico adottato dalla maggior parte delle aziende che si occupano di design del software.
Il supporto e la manutenzione ai Design System

Ogni Design System evolve e le aziende aggiornano periodicamente le proprie risorse per fare fronte a nuove necessità progettuali. Tra le attività più diffuse per mantenere aggiornato un Design System ci sono revisioni ricorrenti del design (16%), formazione per i nuovi dipendenti coinvolti nei processi legati al design (14%) e l’impegno per smussare i problemi tecnici in conflitto con il sistema adottato (13%).

Grafico delle percentuali del supporto

Alcune delle attività più diffuse per gestire la manutenzione dei Design System aziendali.
Trend di crescita dei Design System

Il 25% delle aziende prese in esame ha adottato un Design System solamente negli ultimi 2 anni e pare che le realtà regionali (fino a 5000 dipendenti) siano le più prolifiche nella progettazione di queste nuove risorse rispetto alle multinazionali.

Al contempo sono in aumento le aziende più piccole (50-100 dipendenti) che stanno adottando un Design System per migliorare la qualità generale dei loro prodotti e servizi.

Grafico delle percentuali dei trend di crescita

Molti Design System sono di recente adozione e il trend segnala una crescita delle aziende che si affacciano su questo mondo.
Il Design System di Dreamonkey

Leggendo i dati ci fa piacere constatare che Dreamonkey è allineata con i trend internazionali del settore. Per le nostre app mobile e web app abbiamo adottato Material Design di Google, adattandolo alle esigenze dei nostri clienti. Il nostro stack comprende Sketch e Zeplin con i quali gestiamo un ampio UI kit in-house, affiancato da una libreria di icone.

Se stai cercando qualcuno che ti possa aiutare a migliorare il tuo vecchio Design System o se vuoi aggiornarti adottandone uno nuovo Dreamonkey fa al caso tuo. Contattaci.