Le linee guida: un concetto di design esaustivo per il vostro sito web

La riconoscibilità abbinata a una presentazione uniforme costituisce l’ABC della progettazione di un sito web. La maggior parte delle volte non costituisce un problema, sempre che si stia lavorando da soli a un progetto. Al contrario per quanto riguarda la pianificazione di lavori online più grandi, come possono essere la creazione e l’elaborazione di un sito web di un’azienda, spesso sono più team a lavorare alla struttura e alla cura del progetto online. La soluzione in questi ambienti di lavoro viene offerta dalle linee guida, altrimenti conosciute in inglese come styleguide. Ma cosa si nasconde concretamente dietro a questa espressione? Come si creano delle linee guida appropriate in maniera semplice e veloce? E infine quali argomenti dovrebbe trattare?

Cosa sono le linee guida?

Nell’ambito dell’online marketing le linee guida costituiscono il vademecum per la strutturazione uniforme di progetti online. Di questi fanno parte, oltre al proprio sito web, anche gli account sui social network e le app. Una styleguide è quindi strettamente connessa al Corporate Design e alla Corporate Identity di un’azienda o di un brand: essa si occupa infatti di rendere immediatamente riconoscibile anche in rete l’identità visiva dell’impresa. Il manuale di stile è necessario per presentare il brand su tutti i canali di comunicazione come un’unica unità: che si tratti di social media, e-mail, il proprio sito web o altre pubblicazioni. Al suo interno sono infatti contenute le linee guida destinate a tutti i collaboratori: quindi come dev’essere rappresentata graficamente e testualmente l’impresa in modo che i (potenziali) clienti possano immediatamente riconoscerla.

In sintesi le linee guida per siti web comprendono molto più di un semplice logo: oltre ai font e ai colori da utilizzare, il manuale stabilisce anche le immagini e la disposizione degli elementi, e contiene anche indicazioni riguardo alla tonalità dei testi. Se si segue la guida, il sito web trasmetterà un’immagine uniforme nonostante le singole sezioni siano state realizzate da diversi web designer.

Perché le linee guida sono così importanti?

Prima o poi i responsabili di un’azienda si trovano davanti alla questione di come rappresentare al meglio la propria impresa attraverso un sito web e come far sì che i visitatori della pagina sappiano subito associarlo alla realtà del brand. Le risposte a queste domande finiscono poi per confluire all’interno delle linee guida, che sintetizzano il contenuto elaborato e costituiscono le fondamenta per la progettazione del sito web. Un manuale di stile è essenziale poiché solamente grazie ad esso è possibile strutturare il progetto online in maniera uniforme e adeguata al target.

In questo modo il proprio brand è immediatamente riconoscibile su Internet. Idealmente un sito web concepito bene riesce a far sì che i visitatori si identifichino più facilmente con la marca o con l’azienda, nella migliore delle ipotesi tanto da consigliarla ad altre persone. Oltre a ciò un sito web strutturato uniformemente è in grado di trasmettere professionalità e serietà. I clienti o gli utenti si sentono coinvolti e rimangono più a lungo sulla pagina.

Generare le linee guida ideali

Per mettere insieme una buona styleguide è innanzitutto indispensabile inquadrare il target del sito web. Un esempio: una compagnia assicurativa non si rivolgerebbe mai ai propri clienti dando loro del “tu”. In questo settore, infatti, sia usa la forma di cortesia “Lei”, più formale e seria; questa formula viene utilizzata a partire dalla comunicazione a tu per tu con il cliente fino ad arrivare al contenuto del sito web. Dunque se di solito in questo ambito è diffusa la forma di cortesia, allora questa convenzione va ricordata in primis all’interno delle linee guida e naturalmente va adottata anche sul sito web. Se però si sta pianificando un portale indirizzato a persone giovani, il “Lei” risulta invece fuori luogo tanto da intimidire il target principale: il visitatore non si sentirebbe infatti coinvolto e finirebbe per cercarsi un altro portale.

Analizzare il target e stabilire una filosofia aziendale

Durante la creazione delle linee guida vanno tenute in considerazione la filosofia aziendale e la identità societaria, o anche Corporate Identity, così come il target. Per individuare questi concetti è necessario effettuare ampie rilevazioni e analisi di dati: vanno infatti definiti età, genere, livello di istruzione, status sociale e interessi del target. Solamente chi conosce al meglio i propri clienti, lettori o follower può realizzare un sito web e un contenuto adatti al target. Allo stesso modo le linee guida devono essere in grado di descrivere la filosofia aziendale, gli obiettivi e il registro linguistico: cosa rappresenta l’azienda e quali parole possono e devono essere utilizzate principalmente sul sito per trasmettere ai clienti o ai lettori i propri ideali?

Definire il registro, la colorazione e il font

L’immagine aziendale e i dati riguardo al target dovrebbero entrare a far parte dei prerequisiti per costruire il sito. Per aumentare il valore di riconoscimento la maggior parte dei siti web attingono ad esempio ai colori presenti nel logo aziendale. Ma anche il target condiziona la colorazione: infatti i siti web che si orientano a un pubblico giovanile utilizzano colori più sgargianti rispetto a un target non più giovane, che al contrario preferisce un design più sobrio e con colori neutri. Spesso si può risvegliare l’interesse di un target giovanile con dei font inusuali, mentre invece uno stile classico, simbolo di serietà, attirerà un target più maturo. Ma più importante di riflessioni come questa dovrebbe essere comunque sempre la leggibilità: un font originale difficile da leggere scaccerà anche i lettori più giovani dal sito.

Le linee guida dovrebbero quindi contenere indicazioni riguardo ai colori, al registro, alle icone e così via che vanno assolutamente evitati. Ad esempio esistono alcune parole tabù che possono risvegliare nel lettore delle associazioni dalle quali l’azienda vorrebbe prendere le distanze. Lo stesso vale anche per le scelte cromatiche e grafiche: quali combinazioni di colori sono sgraditi e quali contenuti visivi sarebbe bene evitare? Anche simili linee guida relative a contenuti indesiderati fanno parte di un valido manuale di stile.

Le linee guida definiscono fino al minimo dettaglio

Più sono precise le indicazioni, meno correzioni ed elaborazioni dispendiose a livello di tempo e di denaro saranno necessarie in un secondo momento. Conviene dunque che il manuale di stile racchiuda le linee guida andando il più possibile nel dettaglio: i colori vanno definiti in maniera chiara con i codici Hex, valori RGB e una rappresentazione visiva. Servendosi di una breve descrizione è possibile spiegare velocemente l’effetto che le scelte cromatiche stabilite hanno sull’osservatore. Inoltre deve sempre essere evidente quali colori sono stati previsti per quali elementi. Di conseguenza vanno stabiliti il posizionamento e la colorazione di icone, pulsanti, banner e loghi.

Un testo può però non bastare a fornire chiarezza con la sua spiegazione a parole: una panoramica grafica invece risulta più trasparente e riassuntiva. Con un’immagine infatti si possono indicare la lunghezza delle colonne e l’altezza delle righe, così il designer riceve direttamente una visione completa dell’aspetto della pagina finita. In più risulta sensata anche l’aggiunta delle dimensioni relative alle immagini, alle icone e ai loghi.

Altrettanto importante è stabilire la corretta applicazione e la dimensione dei font scelti: quando e come vanno utilizzati determinati font? Possibilmente le linee guida contengono anche esempi diretti di utilizzo che evidenziano quale font è stato scelto per l’intestazione principale, quale per le secondarie e quale nel testo. Per concludere non possono certo mancare le indicazioni relative alla distanza tra le righe, al rientro e agli spazi tra i singoli elementi della pagina.

I modelli di linee guida da prendere come esempio

Ma dunque quale aspetto hanno le linee guida per un sito web? Alcuni esempi celebri sono disponibili online gratuitamente, come ad esempio quelle di Mozilla e quelle di design per i siti web di Regioni e Comuni italiani. Siccome i manuali di stile sono essi stessi dei siti web ci si può fare un’idea delle linee guida stabilite passando da un capitolo all’altro.

Le linee guida per i siti web della Pubblica Amministrazione italiana contengono gli elementi progettuali e tecnici per la costruzione di un sito istituzionale, con l’obiettivo che il risultato sia il più chiaro e semplice da usare possibile. L’identità grafica è coerente e l’architettura dell’informazione semplificata. Inoltre si è optato per standardizzare gli elementi principali che compongono un sito web. Le linee guida vanno a toccare tutti gli aspetti fondamentali dell’aspetto di un sito web e contengono quattro capitoli principali con i relativi sottocapitoli: Service design, Content design, User research, User interface. La filosofia alla base è la semplicità. Sono già diversi i portali online che hanno rinnovato il proprio aspetto adattandolo alle linee guida ministeriali.

Anche le linee guida digitali di Mozilla sono analogamente ampie. Il logo viene infatti illustrato molto bene e il suo utilizzo viene spiegato con chiarezza. Difatti si nota immediatamente come il logo attuale si differenzia dalle versioni precedenti (ma si può utilizzare solamente quello attuale). Meno severe sono invece le direttive relative alla colorazione del logo “Mozilla”: è infatti permesso che a seconda del design attiguo lo si rappresenti con qualsiasi colore pieno, mentre non sono ammessi i gradienti.

L’ultimo esempio di linee guida evidenzia come per un manuale di stile che sia utile non vi è la necessità di tante righe di testo: per la maggior parte delle guideline bastano infatti brevi descrizioni e chiare illustrazioni. Il fattore più importante di tutti è la struttura logica: ad esempio su Mozilla la navigazione funziona tramite una struttura di menu posizionata sul lato sinistro, mentre per quanto riguarda la styleguide del Ministero ci si muove attraverso una struttura ad albero molto lineare e trasparente.

Naturalmente non tutte le aziende hanno la possibilità di realizzare delle linee guida per il proprio sito web. Di solito basta già un manuale ben strutturato, magari in formato PDF, da sottoporre ai web designer prima che si mettano al lavoro.

I punti fondamentali che vanno inseriti nelle linee guida

La seguente tabella riassume gli aspetti fondamentali che devono essere spiegati all’interno delle linee guida.

Settori delle linee guida Domande centrali
Principi basilari per la progettazione Cosa rappresenta l’azienda? Quali sono gli obiettivi del sito web? Quali principi per la progettazione sottolineano la filosofia aziendale?
Target Chi deve raggiungere il sito web? Come si compone il target? Quali sono le loro preferenze, desideri, interessi?
Tonalità e registro Come ci si deve rivolgere ai clienti/lettori/visitatori? Quali sono le parole tabù e quali vanno invece usate?
Logo Quale aspetto ha il logo? Quando, dove e come va utilizzato?
Struttura del sito web Come va strutturato il sito web? Quanto devono essere ampie le colonne e quanto alte le righe? Come vanno disposti gli elementi? Come dev’essere strutturato il menu?
Colori Quali colori sottolineano l’intenzione del sito web e riescono a suscitare interesse nel target? Come vanno applicati i valori RGB e i codici Hex?
Font Quali font vanno utilizzati per quali testi ed elementi? Quale dimensione e colore deve avere il font?
Icone Quali icone devono essere utilizzate? Dove vanno posizionate e cosa significano?
Contenuto Quale contenuto deve essere inserito all’interno del sito web finito? Quale aspetto deve avere da un punto di vista grafico, testuale e multimediale?

Rispettare e aggiornare le linee guida

Una volta realizzate, le linee guida vanno tenute in considerazione anche nel momento in cui il sito web viene aggiornato e rielaborato. Solo così si garantisce a lungo termine l’aspetto di uniformità in tutti i canali di comunicazione. L’uniformità è infatti essenziale per il branding, ma ciò non significa che le linee guida di un’azienda debbano rimanere invariate negli anni. Piuttosto andrebbero invece regolarmente sottoposte a verifiche: sono i design ancora attuali e i font ancora adeguati al momento? Sarà magari il caso di effettuare un upgrade del logo?

L’esempio di Mozilla dimostra non solo che il logo può vivere un’evoluzione, anzi, è persino auspicabile che lo faccia. Del resto anche il gusto del target può subire delle variazioni nel tempo e non essere più lo stesso. Per un progetto online è quindi sì importante rimanere fedeli alle direttive definite all’interno delle linee guida, ma senza essere eccessivi e comunque sempre cercando di stare al passo coi tempi.


Abbiamo una proposta per te:
Web hosting a partire da 1 €/mese!

Dominio gratis
Certificato SSL Wildcard incluso
Assistenza clienti 24/7
A partire da 1 €/mese IVA escl. per un anno,
poi 8 €/ mese IVA escl.