Questa è la traduzione dell'articolo Writing an Interface Style Guide di Jina Bolton pubblicato originariamente su A List Apart il 3 Giugno 2008. La traduzione viene qui presentata con il consenso dell'editore e dell'autore.
Date un'occhiata a qualunque galleria di siti realizzati con i CSS e verificherete che belle interfacce vengono progetatte e sviluppate in quantità davvero straordinarie. Io guardo spesso questi siti in cerca di ispirazione. Oltre che un design accattivante e un codice spesso ben scritto, questi siti hanno un'altra cosa in comune: sono freschi e nuovi.
Purtroppo, accade anche spesso che le belle interfacce non rimangano belle. La disintegrazione progressiva del design di un'interfaccia può essere frustrante, specialmente per chi l'ha concepita e sviluppata; può essere frustrante perché non si è più in grado di accedere al sito per correggere e mettere a posto i problemi che sopravvengono.
Se avete qualche volta progetatto una splendida interfaccia per poi scoprire dopo cinque mesi che è diventata brutta e disordinata perché col tempo sono apparsi colori sgradevoli e font poco eleganti, allora potete capire quanto può essere irritante la disintegrazione di un'interfaccia. Allo stesso modo, se avete sviluppato un sito aderente ai web standard, pulito e accessibile, capite quanto sia frustrante ritrovarvelo dopo un po' di tempo pieno zeppo di codice non valido, inaccessibile e usato per la sola presentazione.
Una buona documentazione può aiutare a evitare questi problemi. Fornisce una guida sul come mantenere e aggiornare l'interfaccia, mantenendola al tempo stesso bella e funzionale.
Gli standard del design e del brand
Fissare standard e linee guida in fatto di design rende possibile una sorta di supervisione continua sul brand. Comunemente documentati nelle cosiddette "guide di stile", questi standard informano i clienti e gli editori dei contenuti sulle linee guida da seguire per la tipografia, per la gestione degli spazi bianchi, per il colore, etc. Una guida di stile per il design fornisce una reference in cui gli sviluppatori possono descrivere il modo in cui l'interfaccia dovrebbe apparire e aiuta i designer ad essere consistenti nel momento in cui l'interfaccia viene modificata.
Alcune di queste guide sono semplici e dirette, includono solo note sulla tipografia e sul colore; altre sono informative e per certi versi complicate, scendono nei dettagli nel descrivere minuziosamente tutti gli aspetti relativi alle linee guida del brand. Come l'interfaccia stessa, una buona guida di stile dovrebbe essere diretta, intuitiva e informativa. Dovrebbe fornire un'informazione dettagliata, ma al tempo stesso essere chiara e coincisa. Quelli che seguono sono importanti elementi e dettagli rilevanti da includere.
Layout e composizione
Definite tutte le variazioni del layout che sono usate nell'interfaccia, spiegate quando e come sono usate. Mostrate wireframe e bozze grafiche per illustrare queste variazioni (per esempio le diverse configurazioni delle colonne e dove sono usate).
Tipografia
Spiegate le linee guida per un uso accettabile della tipografia. Usate illustrazioni per mostrare esempi del testo principale, per gli stili dei titoli e per la loro gerarchia, etc. Può anche essere una buona idea definire degli standard tipografici per la grafica adotatta nell'advertising, così come elencare i font alternativi che è possibile usare.
Palette dei colori
Fornite una palette dei colori per illustrare i colori standard che devono essere usati nell'interfaccia. Dovrebbero essere inclusi i codici dei colori esatti (in formato esadecimale o RGB). È opportuno anche far vedere dove questi colori sono utilizzati. Potete per esempio includere uno screenshot che mostri i colori usati per i link.
Immagini
Definite le dimensioni standard delle immagini che possono essere usate nell'interfaccia. Dovrebbero essere inclusi tutti gli elementi grafici tipo banner (prima di tutto quelli usati per la pubblicità), ma anche le immagini da inserire nei contenuti. Mostrate come dovrebbero essere presentate e allineate, dove dovrebbe apparire la didascalia (se viene usata). Potete anche includere nella guida che tipo di immagini possono essere usate (illustrazioni, fotografie, ma anche lo stile). Infine, se usate icone, impostate uno standard anche per esse: come devono apparire, dove usarle, che stili devono avere, etc.
Linee guida per il brand
Oltre alla tipografia e al colore, le linee guida relative al brand possono includere altri elementi standard per il design. Questi standard potrebbero definire la quantità di spazio intorno al logo, come il logo dovrebbe apparire in base allo sfondo su cui viene inserito, come il nome della società dovrebbe sempre comparire nel testo.
Alcune guide di stile includono informazioni supplementari che vanno oltre il semplice look and feel (per esempio, si possono definire impostazioni standard per il copyright, l'advertising e altri elementi che influenzano l'interfaccia e la user experience). Quando si definiscono questi standard per il design, potete includere anche il codice HTML e CSS necessario alla loro presentazione. In ogni caso, potrebbe essere meglio creare una sezione separata o un documento ad hoc per descrivere queste impostazioni standard relative al front-end.
Standard per lo sviluppo del front-end
Se c'è più di uno sviluppatore che lavora sull'interfaccia, è molto importante che ciascuno sia cosciente degli standard relativi allo sviluppo. È probabile che ogni sviluppatore abbia un suo metodo particolare per fare le cose. Fare in modo che tutti lavorino in sintonia e sincronia sull'(X)HTML, sui CSS, sui Javascript e su altri aspetti dello sviluppo del front-end può aiutare a impedire che si verifichino situazioni di confusione nel corso dello sviluppo del progetto. Mentre una guide di stile per il design definisce gli standard rispetto al brand e all'identità visuale, una guida di stile per lo sviluppo è importante per mentenere efficiente la fase di sviluppo. Può essere un documento separato o inclusa all'interno della guida di stile per il design.
(X)HTML, CSS e Javascript
Definite in che modo (X)HTML, CSS e Javascript dovrebbero essere usati nello sviluppo dell'interfaccia. Chiarite bne a quali standard gli sviluppatori dovrebbero adeguarsi, quale DOCTYPE usare, le convenzioni per definire nomi di classi e id. Includete il codice usato per creare il layout, i form, i widget, etc. Evidenziate gli standard adottati nella formattazione e nei commenti del codice, se esiste un framework, spiegate come va settato. Gli standard relativi a (X)HTML, CSS e Javascript possono essere discussi insieme, perché sono fattori complementari, ma può anche essere utile dedicare una sezione specifica a ciascun linguaggio.
Accessibilità e usabilità
Identificate le linee guida in tema di accessibilità che andrebbero seguite, includete tutte le cose fondamentali per l'usabilità, documentate tutti gli standard usati per la localizzazione e l'internazionalizzazione.
File e directory
Definite come è stata impostata la struttura delle directory per i file (per le immagini, per i CSS, per i Javascript, etc...), e dove questi file dovrebbero essere salvati. Spiegate le convenzioni di denominazione e come sono usate.
Test di qualità
Fate tutto ciò che è necessario per assicurare la massima qualità: validazione, controllo dei link, test di accessibilità, lettura approfondita dei testi, etc. Includete una tabella che mostri il supporto sui vari browser e dispositivi.
Quando si discute di standard nella vostra guida di stile, dovrebbe sempre essere chiaro che gli standard evidenziati non sono solo standard adottati nel settore, ma riconosciuti come tali nell'organizzazione, per cui tutti gli sviluppatori dovrebbero seguirli. Avere consistenza nello sviluppo va di pari passo con la consistenza a livello di design, dovrebbe servire a rendere il lavoro più efficiente e a migliorare la menutenzione.
Aggiornate sempre le guide di stile
Le guide di stile per l'interfaccia sono molto utili per definire le migliori pratiche da adottare nel design e nello sviluppo. Comunque, l'imperativo è quello di tenere sempre aggiornate queste informazioni. Un glossario, un indice, una reference, etc, sono tra gli strumenti supplementari che è possibile aggiungere per rendere più utile possibile la guida di stile.
La guida dovrà essere facilmente accessibile per designer e sviluppatori. Mentre è un'ottima cosa avere a portata di mano una versione stampata, ancora più semplice da gestire è una versione online.
Infine, fornite informazioni su come uno può richiedere aiuto e supporto nel caso in cui la guida non fornisca la risposta. Elencate le informazioni di contatto per i membri del team che gestiscono la documentazione.
Con una buona documentazione per i clienti e gli editor, avrete una buona chance di vedere la vostra interfaccia rimanere bella. I designer e gli sviluppatori che ci lavoreranno in futuro avranno la possibilità di ottimizzare al massimo il loro tempo, facilitandosi la vita e risparmiando magari tempo e denaro.
