Archivi tag: style-guide

Guida di stile per il web: il design grafico

Pubblicato il da

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.

Web Style Guide 2nd Edition

Pubblicato il da

In questa nuova versione del manuale si parla dell’uso dei Css per separare la struttura dal contenuto e sono incluse alcune tecniche per migliorare l’accessibilità web. E il sito della guida contiene, gratuitamente, tutti i contenuti

  1. La vostra è tra le prime guide di stile per il web. Che cosa è cambiato in questi anni? Cosa troveremo nella nuova edizione? [Risposta 1]
  2. A chi si rivolge il manuale? [Risposta 2]
  3. Nuovo libro, nuovo sito. Cosa troveremo in webstyleguide.com e quali sono le differenze tra i contenuti del libro e quelli del sito? [Risposta 3]
  4. La prefazione è di Lou Rosenfeld, che sta scrivendo la seconda edizione dell’eccellente “Information Architecture For The World Wide Web“. Parlate anche di Ia nel vostro manuale? [Risposta 4]
  5. Quali sono le differenze tra una guida di stile e un libro che parla di design o di usabilità web? Avete trovato altri libri particolarmente utili al vostro lavoro? [Risposta 5]
  6. L’accessibilità web è oggi un argomento di grande interesse… [Risposta 6]

La vostra è tra le prime guide di stile per il web. Che cosa è cambiato in questi anni? Cosa troveremo nella nuova edizione?

È cambiato l’atteggiamento di chi lavora nel web: cerchiamo continuamente di capire che cosa sia e come usarlo efficacemente. Il precedente manuale era basato sui principi fondamentali del design e per questo motivo è rimasto attuale anche durante questo processo di ricerca. Anzi, sono convinta che continuerà ad essere utile. Abbiamo sostanzialmente rivisto qualche aspetto così da riflettere le metodologie odierne. Il web è infatti in continua evoluzione, così abbiamo aggiornato gli esempi per rispecchiare le tendenze e lo stile di oggi.

I Css hanno favorito la separazione tra la struttura dei contenuti e la presentazione. In questa seconda edizione entriamo nel dettaglio dell’uso dei Css per il controllo del layout e dei caratteri. Sfortunatamente, deve ancora passare del tempo prima che i Css siano interpretati uniformemente da tutti i browser e le piattaforme, così il nostro approccio è ancora conservativo riguardo a cosa sia possibile fare con i Css.

Un’altra cosa cambiata in questi anni è che le persone ora si rendono conto di quanto sia impegnativo costruire e gestire un sito web, così esaminiamo i procedimenti relativi alla sua progettazione e manutenzione.

Stiamo approfondendo le possibilità offerte dal web, spostando la nostra attenzione dall’aspetto grafico all’utilità dei contenuti. Soffermandoci solo sull’aspetto grafico del web abbiamo limitato il suo potenziale come strumento utile, soprattutto nell’area dell’accessibilità web. Questa seconda edizione della Web Style Guide contiene perciò più informazioni su come progettare e realizzare pagine che siano accessibili a tutti.

Top

A chi si rivolge il manuale?

Il manuale si rivolge a designer web principianti ed esperti, ma può essere utilizzato anche da chi si interessa di web design a livello strategico.

Top

Nuovo libro, nuovo sito. Cosa troveremo in webstyleguide.com e quali sono le differenze tra i contenuti del libro e quelli del sito?

Con questa seconda edizione vogliamo sperimentare qualcosa di nuovo nel web. La Web Style Guide è nata come sito dell’università dello Yale [nuova finestra]. Il co-autore, Patrick Lynch, la scrisse nel 1994 e mi chiese aiuto per una revisione nel 1997. Ci siamo successivamente resi conto che tutti stampavano il sito e rilegavano i fogli, così abbiamo pensato di trarne un libro e di migliorarlo. Abbiamo così riscritto il sito in forma di libro: la prima edizione è stata pubblicata nel 1999. Siamo così passati dal sito al libro.

Questa volta andiamo nella direzione opposta e pubblichiamo l’intero testo e le immagini del libro sul sito, all’indirizzo www.webstyleguide.com [nuova finestra]. Passiamo cioè dal libro al sito. In questo modo possiamo rendere disponibili gli indirizzi dei siti di esempio, le correzioni e le modifiche. Chi non compra il libro può inoltre sempre stampare le pagine.

Quindi:

  • Prima edizione: sito web “impachettato” come libro
  • Seconda edizione: libro pubblicato sul web

Devo dire che si sta rivelando un’impresa impegnativa e il sito non è ancora del tutto completo (dal momento che entrambi lavoriamo ad altro durante il giorno), ma siamo comunque molto soddisfatti: siamo convinti di fare qualcosa di utile. Stiamo anche lavorando alacremente per far si che il sito sia accessibile a chi trova più facile usare il web rispetto ad un libro stampato.

Top

La prefazione è di Lou Rosenfeld, che sta scrivendo la seconda edizione dell’eccellente “Information Architecture For The World Wide Web“. Parlate anche di Ia nel vostro manuale?

Siamo grandi fan di Information Architecture for the World Wide Web, e ci sono molti concetti che abbiamo imparato e applicato nel nostro lavoro grazie a questo testo. L’Ia è la struttura fondamentale del design di un sito. Puoi parlare di stile finché diventi blu in viso, ma senza una solida struttura, lo stile non va da nessuna parte. Ci sono quindi parecchi riferimenti alla Ia nella Web Style Guide, che troverete nei capitoli relativi alla progettazione dell’interfaccia e del sito.

Top

Quali sono le differenze tra una guida di stile e un libro che parla di design o di usabilità web? Avete trovato altri libri particolarmente utili al vostro lavoro?

Devo dire che il titolo del libro confonde un po’ anche me. La Web Style Guide racchiude considerazioni sullo stile che si applica a diverse sfaccettature del web design, inclusi il graphic design e l’usabilità web. Contiene anche considerazioni sulla progettazione tipografica e multimediale e sullo stile dei contenuti. Una guida di stile mette a fuoco tutti gli aspetti del web design senza la pretesa di approfondirli: è “un’occhiata” alle caratteristiche stilistiche di queste discipline.

Ho trovato Information Architecture for the World Wide Web molto utile. Tra gli altri ricordo The Design of Everyday Things di Donald Norman, The Elements of Style di Strunk e White e On Writing Well di Zinsser. La mia bibbia per la tipografia è The Elements of Typographic Style di Bringhurst. Per un libro base sul web design mi sentirei di suggerire Web Design in a Nutshell di Niederst.

Top

L’accessibilità web è oggi un argomento di grande interesse…

Sono un difensore del design accessibile, insegno tecniche di design accessibile, scrivo di design accessibile e sono un membro del Web Accessibility Initiative’s Education e del Outreach Working Group. Ho aggiunto una sezione riguardante l’accessibilità web in diversi capitoli della Web Style Guide. Potrei continuare ancora, ma vi basti sapere che sono profondamente convinta che l’attenzione alle tematiche di accessibilità web guiderà lo sviluppo web nella giusta direzione: da qualcosa che riguarda solo l’aspetto grafico e qualcosa di realmente utile.

Top