Le guide di stile servono davvero? Mantenerle aggiornate automaticamente è la vera sfida per il prossimo futuro.
Sono ormai passati i tempi in cui bastava un semplice set di elementi grafici ed un manuale di stile per definire l’identità di un brand. Le possibilità a disposizione sono sempre di più e sono aumentati i canali utilizzabili: mobile, tablet, desktop, app…
In uno scenario di questo tipo è indispensabile parlare di linee guida e style guide, sapere quando utilizzarle, e capire come si sta muovendo il mondo dello sviluppo per rimanere al passo con i tempi.
Che differenza c’è tra linee guida e style guide?
Un’ottima spiegazione la trovate in questo post di Stefano Bussolon: Una guida alle linee guida.
Spesso i termini guideline e style guide sono usati in maniera intercambiabile. Questo è giustificato anche dal fatto che alcuni framework sono, contemporaneamente, delle linee guida e delle guide di stile.
[…]
Una possibile distinzione può basarsi sui livelli di Garrett: le guide di stile si riferiscono principalmente al quinto piano, la superficie, ovvero il visual design; le Human interface guideline si riferiscono principalmente al quarto piano di Garrett, lo scheletro: information design, interface design, navigation design; guide di stile e hig sono tipologie di linee guida.
Parliamo quindi di style guide: pensarci per tempo e ragionare sulla direzione che potrebbe prendere un progetto può fare un’enorme differenza, soprattutto nel medio-lungo periodo.
Le guide di stile:
- Sono indispensabili quando si lavora in team, per fare in modo che tutti abbiano ben presente l’obiettivo;
- Permettono di conservare coerenza in un sistema complesso, anche quando entrano in gioco dispositivi diversi;
- Spingono a pensare al progetto come un sistema, non ad un insieme di singole pagine;
- Devono essere mantenute
Proprio quest’ultimo punto è cruciale: una style guide obsoleta non serve a nessuno. Doverla mantenere aggiornata manualmente è un lavoro spesso noioso e di non immediato ritorno: come è possibile risolvere il problema alla radice?
Living Style Guide
La risposta si chiama Living Style Guide: è stato uno degli argomenti dell’ultimo From The Front, e prevedo che sarà un tema sempre più attuale nel prossimo futuro. Le guide di stile facili da mantenere sono una questione da seguire con attenzione, perché ormai una documentazione statica è obsoleta: nasce già vecchia.
Per questo motivo la direzione da seguire è quella di una guida dinamica, basata su componenti atomici, che vengono presi e utilizzati direttamente all’interno di un sistema senza duplicare il codice da mantenere. Ogni aggiornamento della guida si riflette immediatamente in produzione, senza ulteriori interventi.
Nel 2014 Sönke Rohde, UX Engineer di Salesforce, aveva scritto un articolo su Medium parlando proprio di Living Design System, e più recentemente anche su Smashing Magazine è stato pubblicato un approfondimento sulle guide di stile dinamiche.
Da notare come una Living Style Guide renda sempre più importante l’interazione tra design e sviluppo. È l’intero team a dover dialogare per trovare una soluzione al problema della mantenibilità nel lungo periodo. Non è un problema esclusivamente di design, anzi. Ecco perché è sempre più importante avere designer che sappiano dialogare con degli sviluppatori e viceversa.
C’è ancora molto lavoro da fare: non esistono ancora tool pronti all’uso per risolvere ogni esigenza, ed è qui che nel prossimo futuro mi aspetto vengano fatti importanti passi avanti. I progetti medio-grandi è probabile che avranno sempre bisogno di soluzioni su misura, ma già adesso esistono una serie di strumenti che permettono di creare guide di stile dinamiche senza partire da zero.
Quali sono?
Ecco i più importanti.
Strumenti utili per una Living Style Guide
Frontify
Frontify è uno dei progetti più promettenti, sicuramente da seguire. Permette di creare una style guide online e di condividerla con un team. Ha anche delle API la possibilità di comunicare con Slack, GitHub e tramite Zapier verso tutti i servizi supportati.
Il piano gratuito permette di dare accesso ad ogni guida a 3 utenti, con 100MB di storage totali.
https://frontify.com/styleguide
KSS
Knyle Style Sheet ha un diverso approccio al problema: permette la creazione in automatico di una guida di stile in HTML partendo da file CSS scritti con una sintassi specifica. È un passo importante nella direzione delle living style guide.
Rizzo
Rizzo è il repository GitHub della soluzione utilizzata da Lonely Planet per la creazione della propria style guide. Dubito che il progetto possa essere riutilizzato in un altro contesto senza nessuna modifica, ma è ottimo che sia pubblico: sicuramente un buon punto di partenza per capire come affrontare il problema.
https://github.com/lonelyplanet/rizzo
Pattern Lab
Pattern Lab mette a disposizione una serie di strumenti per la creazione di design atomici: singoli componenti riutilizzabili in diversi contesti, con la stessa base di codice.
Fabricator
Anche Fabricator consente di organizzare la struttura del proprio design system secondo i principi dell’atomic design. È ovviamente possibile generare automaticamente una style guide una volta definiti i componenti, in modo che sia facile mantenerla e condividerla col resto del team.
Source JS
Source JS è un’altra soluzione per collegare il proprio codice strutturato in componenti ad una style guide. Anche qui è necessario usare una sintassi specifica per identificare i componenti e poterli riportare automaticamente nella guida di stile dinamica.
Guide da prendere come esempio
Se siete in cerca di buoni esempi da seguire per la vostra guida di stile, partite da styleguides.io e salvatelo tra i bookmark. Ci sono più di un centinaio di esempi pratici, tra cui alcuni dei seguenti:
Mailchimp
Definita dal team UX di Mailchimp come una pattern library, è un’insieme di elementi atomici predefiniti. In questo modo è stata definita una base comune di codice ed elementi UI, per velocizzare il lavoro ed evitare le incomprensioni.
http://ux.mailchimp.com/patterns
Lonely Planet
La style guide di Lonely Planet è uno dei migliori esempi di guida mantenibile nel tempo, perché non è statica. È una vera living style guide basata su componenti dinamici che possono essere utilizzati senza duplicazione di codice. Quando vengono modificati, la guida di stile si aggiorna di conseguenza, così come ogni istanza degli stessi sul sito web.
http://rizzo.lonelyplanet.com/
Mozilla
Sandstone è la guida di stile di Mozilla, usata come riferimento per tutti i siti del gruppo, compreso quello di Firefox. Interessante notare come oltre agli elementi di UI siano presenti delle sezioni dedicate ai contenuti. In particolare le pagine copy tone e copy rules offrono delle indicazioni per chi si occupa di comunicazione.
https://www.mozilla.org/en-US/styleguide/websites/sandstone/
Buffer
Buffer usa una style guide abbastanza semplice, dove sono presenti gli elementi più comuni dell’interfaccia, la griglia e la struttura di base per creare nuove pagine. Anche in questo caso l’obiettivo è mettere a disposizione una serie di componenti da poter combinare in pagine complesse. Da notare come nonostante l’affermazione di SASS stiano ancora utilizzando LESS come pre–processore CSS.
https://buffer.com/style-guide
Gov.uk
Uno dei migliori redesign degli ultimi anni non poteva essere privo di una style guide. La guida di gov.uk è un ottimo esempio da seguire per i propri progetti.
http://govuk-elements.herokuapp.com/
U.S. Design Standards
Anche il governo americano ha una guida in versione alfa per rendere coerente l’esperienza tra tutti i siti governativi. È suddivisa tra componenti dell’interfaccia (bottoni, form, menu di navigazione…) ed elementi grafici, questi ultimi soprattutto per definire soluzioni coerenti e soprattutto accessibili.
https://playbook.cio.gov/designstandards/
E l’Italia?
Da non sottovalutare la nascita di design.italia.it, il set di linee guida di design per i siti della Pubblica Amministrazione italiana. Seguendo lo stesso approccio di alcuni dei progetti elencati sopra, tutto il codice è pubblico e disponibile su GitHub: chiunque può contribuire allo sviluppo, e se volete dare una mano al progetto vi invito a farlo. Ho provveduto personalmente a correggere un paio di imprecisioni che avevo notato: una volta installato il progetto in locale è facile suggerire delle modifiche.
Come avrete intuito esiste un mondo in veloce espansione sull’argomento: ci sono sempre più strumenti per automatizzare processi che fino a poco tempo fa venivano eseguiti manualmente, e sono la soluzione perfetta per mantenere una style guide e renderla veramente utile.
Nel vostro prossimo progetto pensateci fin dall’inizio: potrebbe salvarvi del prezioso tempo, rendendo più facile il lavoro del team di sviluppo.
[Immagine: Molecules connected by Shutterstock]
