Sviluppo

Impariamo, insegnamo, condividiamo

Impara le ultime tendenze del digitale

Eventi, conferenze e incontri speciali

Blog

Design System, Style Guide o UI KIT?

design-system-style-guide-ui-kit

Il panorama digitale evolve continuamente e a una velocità esponenziale, soprattutto negli ultimi anni. Oggi sul web sono presenti milioni di applicazioni e siti, ognuno dei quali spesso è composto da più pagine.

All’interno di questo contesto sempre più dinamico nasce la necessità di rendere più fluido e veloce il processo di design, motivo per cui i team di designer creano design system facilmente adattabili, assicurando coerenza tra gli elementi progettati.

A volte però possono insorgere dubbi su quali siano i confini tra diversi concetti che, in alcuni casi, vengono usati intercambiabilmente come ad esempio design system, style guide e UI kit.
Ma quali sono le differenze tra i framework appena citati?

Lo scopo di questo articolo è quello di dare al lettore una visione più chiara e approfondita su questi framework sempre più diffusi e discussi, anche fuori dal dominio della disciplina del design.

  1. Design System
  2. Style Guide
  3. UI Kit

Design System. Breve Definizione

Il termine ‘design‘ proveniente dalla lingua inglese e viene tradotto con la parola italiana ‘progettare‘. Delinea quella disciplina che si occupa di trovare soluzioni funzionali per problemi specifici non limitandosi solo a un aspetto estetico ma coinvolgendo anche funzionalità e usabilità. Il design, da un punto di vista semiotico, può essere anche visto come ‘traduzione‘, in quanto il designer svolge un ruolo di mediatore tra il fenomeno analizzato e gli utenti.

Rifacendoci a queste definizioni, il design system può essere inteso, o tradotto, come un ‘sistema di progettazione‘ cioè un insieme di elementi o componenti riutilizzabili definiti da un insieme di standard che assicurano coerenza su larga scala e che serve come guida omnicomprensiva per la creazione di esperienze digitali.

Come specificato da Nielsen Norman Group, nel Design System non solo viene definito l’aspetto estetico dei componenti ma per ognuno sono incluse diverse caratteristiche:

  1. Un nome specifico e unico per ogni componente per evitare fraintendimenti;
  2. Una descrizione utile a definire cosa sia quell’elemento e come deve essere usato;
  3. Gli attributi cioè variabili che possono essere usate per rendere i componenti personalizzabili;
  4. Tutti gli stati che un componente può avere come ad esempio “focus” o “disabilitato”.


Style Guide

La style guide è una guida che definisce i principi visivi e di progettazione per un progetto, un prodotto o un’interfacia. La più comune è riferita alla brand identity e contiene codici colori, marchi, loghi, tipografia e come usare e accostare tra loro questi elementi. Le style guide più strutturate, oltre ai componenti appena citati, contengono anche indicazioni sui contenuti (come ad esempio il tone of voice) e sulla progettazione interattiva.

Quindi quale è la differenza con il design system?
Sebbene la style guide possa (ed è buona norma) essere inclusa nella documentazione del design system, essa definisce le regole visive che i componenti progettati dovranno seguire. Vediamo un esempio: se le linee guida del brand prevedono che il colore primary sia giallo e che quando usato come sfondo va accostato a testi neri, questo si rifletterà nei componenti che andranno ad essere sviluppati nel design system (come ad esempio i bottoni).

Questo non significa che ogni elemento sarà con sfondo giallo e testi neri: bisognerà sempre tenere conto delle regole di accessibilità, di leggibilità e delle buone pratiche di UX/UI design, ma avere delle linee guida chiare assicura un linguaggio coerente tra i diversi elementi e la brand identity.



UI Kit. Anatomia e Funzioni

A differenza dei primi due concetti, con UI Kit, diminutivo di User Interface Kit, si entra in una dimensione forse più pratica e concreta. Lo UI Kit è un insieme di componenti UI pre-progettati e riutilizzabili come ad esempio: font, colori, bottoni, input…

Uno UI Kit può anche incorporare componenti specializzati, adattati a settori o tipologie di prodotto specifici. Va anche detto che la dimensione dello UI Kit spesso dipende dalle dimensioni del progetto, infatti se ne trovano alcuni piuttosto limitati (in termini puramente quantitativi) e altri molto più robusti.

Un vantaggio dello UI Kit è senza dubbio la velocità, infatti l’uso di componenti pre-progettati permette un notevole risparmio economico e di tempo, assicurando al contempo consistenza nel linguaggio visivo.

A questo punto viene spontaneo chiedersi quale sia la differenza con il design system, sono infatti concetti che all’apparenza possono sembrare simili, quindi risulta doveroso marcare la differenza tra i due. In breve lo UI Kit fornisce elementi per una progettazione rapida ed efficiente, mentre il design system dà un complesso di regole e principi che permettono di mantenere la coerenza e la scalabilità di un progetto o di un prodotto nel tempo.



Per Riassumere. Design System vs Style Guide vs UI KIT

Questa tabella fornisce un confronto chiaro e conciso tra Design System, Style Guide e UI Kit, ed aiuta a comprendere meglio quale strumento sia più adatto a seconda delle esigenze specifiche di un progetto o prodotto.

StrumentoBreve DefinizioneProContro
Design SystemUn insieme di elementi o componenti riutilizzabili definiti da standard che assicurano coerenza su larga scala e servono come guida per la creazione di esperienze digitali.– Assicura coerenza e uniformità su larga scala.
– Migliora l’efficienza e la velocità di sviluppo.
– Facilita la collaborazione.
– Richiede tempo e risorse per essere sviluppato e mantenuto.
– Eccessivo per progetti piccoli o semplici.
Style GuideUna guida che definisce i principi visivi e di progettazione, inclusi codici colori, tipografia, loghi e come questi elementi devono essere utilizzati e accostati.– Fornisce chiare linee guida visive.
– Assicura coerenza del brand.
– Utile per il marketing e la comunicazione.
– Meno comprensiva rispetto a un design system.
– Può essere limitata in termini di funzionalità e usabilità.
UI KitUn insieme di componenti UI pre-progettati e riutilizzabili come font, colori, bottoni, input, ecc.– Progettazione rapida ed efficiente.
– Risparmio di tempo e costi.
– Consistenza nel linguaggio visivo.
– Non copre tutte le esigenze di un prodotto complesso.
– Meno flessibile rispetto a un design system completo.
– Può limitare la creatività.