Guida di stile per il web: il design grafico

Realizzare progetti web di una certa complessità – della durata di almeno un mese, e che siano seguiti da una fase di manutenzione dei contenuti più o menu lunga – richiede molto organizzazione, ma anche qualche standard.

Solitamente quando mi trovo coinvolto in questo tipo di progetti consiglio di stendere una serie di linee guida da seguire nello sviluppo del processo. Questa serie di linee guida le ho sempre chiamate guide di stile, anche se solitamente questo termine viene impiegato soprattutto per indicare le linee guida relative ai contenuti.

Sono principalmente due le fasi di un progetto web in cui è applicabile il concetto di guida di stile:

  • nella costruzione del layout della pagina e dei diversi elementi
  • nella organizzazione e stesura dei contenuti

Esploriamo qui il primo punto, lasciando il secondo a un successivo intervento.

Una guida di stile per la grafica di un sito dovrebbe essere un documento che si pone due obiettivi: servire come riferimento durante il processo di costruzione del layout delle pagine del sito, ma dovrebbe anche essere consegnato al cliente che si occupa di caricare in contenuti insieme alla guida di stile per i contenuti.

In questo modo chi si trova a dover realizzare nuove pagine nel corso della manutenzione del sito può, se gli è concessa questa possibilità, verificare se le nuove immagini, icone, foto, spalle, box che si appresta a costruire sono in linea con lo “spirito” del sito.

Ecco cosa dovrebbe contenere, sottoforma di testo e immagini, una guida di stile per il design grafico:

  • una rappresentazione dei diversi tipi di template del sito, motivando quando andrebbe usato uno e quando l’altro. Qui varebbe la pena sottolineare eventuali particolarità da prendere in considerazione quando la grafica verrà portata in Html e completata da codice lato server. Questo è utile perché chi si trova a lavorare con in template potrebbe sottovalutare l’impatto di lievi “personalizzazioni” alla grafica
  • l’elenco di tutte le icone usate nella grafica, con la spiegazione del loro utilizzo
  • qualche linea guida per la produzione di nuove immagini e loghi per i contenuti (dimensioni, posizione, in che formato salvarle, ecc.)
  • indicazioni sulla tipografica
  • indicazioni sui tipi di font e stile ai caratteri ammessi (sottolineato, colorato, ecc.)
  • suggerimenti sui diversi tipi di intestazione e link ammessi nel sito, con spiegazione, dovessero essere più d’uno, del loro impiego

Andrebbe quindi presentato un documento che contenga la grafica da usarsi all’interno del sito, arricchito però da qualche linea guida che permetta di capire da come partire da questa grafica per realizzare il codice.

Questo documento aiuta a non ritrovarsi nella frequente situazione per cui, dopo pochi mesi dalla messa online del sito, il designer grafico che l’ha creato vorrebbe non riconoscerne la paternità per colpa dei contenuti non in linea con quanto da lui progettato.

8 pensieri su “Guida di stile per il web: il design grafico

  1. Antonio, ci stai proponendo un passo indietro? La storia delle linee guida per l’utente l’abbiamo già sentita parlando di accessibilità e criticando gli editor HTML che consentono all’utente di “fare danni” per cui occorre istruire il gestore dei contenuti a mantenere il sito secondo certi canoni per poi scaricare su di lui qualsiasi errore.

    Io dico che il sito deve essere progettato sapendo chi andrà a gestirlo e con quali mezzi, con quali tempi, ecc… Non possiamo progettare un auto pensando che poi alla guida si mettano solo degli Schumacher…

    Secondo me quindi non è l’utente che va istruito a gestire un sito opera d’arte, è il designer che deve imparare a creare un sito funzionale per l’utente.

  2. Può venir utile in questo senso, come è ben noto e ampiamente documentato, separare presentazione e contenuti: della presentazione se ne occupa a monte il “designer” tramite l’utilizzo dei css (o fogli di stile, dice niente la parola?) mentre a valle il “gestore” del sito ne aggiornerà i contenuti tramite l’editing “semantico” dei contenuti stessi (h1, h2, p, ul, em, strong, .class, ecc) attraverso sistemi di CMS eventualmente anche wysiwyg opportunamente realizzati e personalizzati sulle capacità del cliente, limitati ove necessario nelle funzionalità grafiche e di layout.

  3. mi pare che Antonio stia parlando di guide per il designer, non per l’utente.

    ad ogni modo, il mio parere è che tutte le documentazioni siano utili, se vengono utilizzate e condivise tra tutti.

    nel caso particolare, distinguerei tra le linee che fornisce il committente (come deve essere realizzato il sito, gli standard che dovrà seguire, accessibilità, usabilità, ecc) e quelle che fornisce il designer per la “manutenzione” del sito.

    a mio parere sono più importanti le prime. ma se ne può discutere ;-)

  4. @Gianluca: una guida di stile per la grafica, come dico nell’intervento, ha il compito di aiutare prima di tutto chi sta progettando il sito, cioè il designer. Lo aiuta a darsi uno standard e a documentarlo, cosa che si fa davvero troppe poche volte, e i risultati purtroppo si vedono.
    Ma se voglio fare bene il mio lavoro, questa guida dovrebbe anche essere consegnata al cliente, cioè a chi poi si troverà a usare il sito tutto il giorno. Tu consegneresti una casa senza la mappa degli impianti? Forse sì, ma puoi definirti professionista?
    Starà poi al cliente, trattandosi di linee guida, decidere se impiegarle o no, ma non produrle a priori non è a parer mio il giusto approccio da professionista.
    Riguardo poi al sito rivolto agli Schumacher, penso che chi si prende cura di gestire un sito, cioè di caricarci contenuti a aggiungere sezioni, dovrebbe essere competente in questo ambito, cosa che non succede spesso. I risultati sono allora la copia di comunicati stampa a di immagini 1600*1024 dentro i template, contro ogni logica. Forse Schumacher è un po’ troppo, ma chi gestisci siti con una certa visibilità dovrebbe almeno prendere la patente. Sarebbe già un buon passo
    @Cristiano: è dal 2000 che parlo di semantica e fogli stile in questo sito, fatti un giro nell’archivio per approfondire. Quello che tu dici risolve solo un problema di basso livello, rimane da decidere come dare significato alle varie parti, e come darlo in modo consistente in tutto il sito. Parli di CMS e di personalizzazione, allora dovresti sapere che non riuscirai mai a personalizzare in modo spinto un CMS e accontentare tutti gli utenti, a meno di siti davvero semplici. Un CMS offre molte scappatoie a chi vuol caricare male i contenuti, sta a una guida di stile aiutare nel fare un po’ d’ordine. Non a caso le guide di stile esistono da decenni prima della rete.
    @Alberto: sono importanti entrambe. Mi soffermavo qui sulle seconde, ma intendo ritornare anche sui requisiti in un prossimo intervento. Grazie

  5. OK Antonio, non avevo messo bene a fuoco cosa intendevi per “linea guida”. Grazie per la precisazione e anche per l’idea che “chi gestisce siti con una certa visibilità dovrebbe almeno prendere la patente”… mi sembra uno spunto di riflessione da approfondire. Io ci sto ragionando sopra.

  6. Pingback: Guida di stile per il web: i contenuti -- Fucinaweb - Idee per forgiare siti

  7. Pingback: Guida di stile per il web: un caso pratico -- Fucinaweb - Idee per forgiare siti

I commenti sono chiusi.