Style guide: cosa sono e a cosa servono | Antreem
Vai al blog

Style guide: cosa sono e a cosa servono

di lettura
Redazione Antreem
thumbnail

Cerchi lo stile giusto per il design del tuo sito, del tuo prodotto o, in generale, per il tuo prodotto? A volte è solo questione di coerenza. Una volta individuati i tratti distintivi che caratterizzano graficamente la tua idea è bene che essi siano sempre presenti e ben riconoscibili. Per questo fra gli strumenti dei designer esistono le style guide. Letteralmente “Guida di stile” è un prontuario che aiuta a rimanere coerenti a se stessi dalla A alla Z.

“Prendiamo un flusso di design tipico: devo aggiungere una pagina al sito; inizio a disegnarla su sketch/photoshop/illustrator, magari copio il mock up di una pagina già fatta e modifico quella. Devo inserire una lista.. com’è che avevo fatto le liste nelle altre pagine? e inizia la ricerca…”

Questo è uno dei molti casi in cui farebbe comodo avere sotto mano una buona style guide.

Come si presenta una style guide? È un documento che riporta tutto il sistema di design e che funge da guida prima per la creazione di nuovi mock up grafici e poi per la loro implementazione. Può essere composto da più sezioni ed essere più o meno esaustivo a seconda delle esigenze del team.

L’importante è che sia sempre:

  • Aggiornato
  • Condiviso
  • Utilizzato

La style guide è soprattutto uno strumento di comunicazione e collaborazione. Risulta infatti inutile se non è condivisa, riconosciuta e utilizzata da tutto il team. Può avere diversi formati: le prime style guide di brand erano veri e propri manuali cartacei, poi sono state sostituite da documenti pdf, magari custoditi in cartelle condivise (ahimè mai aperte). Ora si stanno diffondendo style guide live, online e spesso pubbliche, che possono contenere anche una libreria di componenti. Queste ultime sono vantaggiose soprattutto per la facilità di accesso da parte di tutto il team, che avrà meno scuse per dimenticarsene.

Ma perché fare una style guide?

Le style guide offrono una serie di vantaggi:

  •     Mantengono la coerenza del design in ogni parte del prodotto.
  •     Definiscono delle regole riconosciute da tutti. Una volta stabilite insieme e formalizzate in uno strumento facile da usare, sarà quasi automatico seguirle
  • Pur richiedendo un notevole sforzo iniziale, permettono di risparmiare tempo in fase di realizzazione del prodotto, perché forniscono tutti i componenti già pronti e le regole per assemblarli
  • Possono sostituire altri tipi di documenti di design
  • Sono un buon punto di partenza per spiegare il progetto a nuovi membri del team, o per fare passaggio di consegna
  • Sostituiscono il passaggio di informazioni orale, che, per quanto più immediato, può essere pericoloso, se si affida solo alla memoria del designer.

Come si crea una style guide

Naturalmente, è diverso creare una style guide per un nuovo prodotto o per uno che esiste già.

Nel primo caso la style guide sarà creata man mano che viene sviluppato il nuovo design; parliamo invece del secondo caso.

Innanzitutto è necessario avere una chiara idea della situazione attuale. Per questo è utile fare un inventario dei componenti, registrando ogni caso in cui si presentano in maniera differente. Prendere nota di codici colore, stili di testo, elementi (come bottoni, icone, input text, checkbox, ecc.), layout. È probabile che in questa fase si riscontrino delle incongruenze negli elementi che sono stati creati organicamente col passare del tempo. Una volta raccolti tutti i componenti è il momento di eliminare quelli ridondanti e stilare una lista definitiva. Per avere un documento esaustivo è consigliabile unire almeno due tipologie di style guide: design language e pattern library.

La redazione del documento può essere fatta con lo strumento che si preferisce, l’importante è non pensare che la prima versione sia quella definitiva. Possono essere necessarie più revisioni per ottenere un risultato davvero utilizzabile.

Con i primi usi ci si accorgerà che nella pratica alcuni particolari non possono funzionare come erano stati progettati, quando succede, occorre accettare i consigli del team e apportare le modifiche necessarie.

Alla fine si arriverà a un documento definitivo e si potrà iniziare a utilizzarlo in maniera regolare.

Ecco i link di alcune style guide, da cui trarre ispirazione:

Redazione Antreem
Scritto da
Realizziamo progetti digitali complessi e multicanale. Ci occupiamo di tutta la progettazione e realizzazione, dalla definizione del bisogno, al design, fino alla implementazione e alla messa in produzione. Svolgiamo consulenza di progetto, di processo e organizzativa per la Digital Transformation.