La style guide per fare buon web.

Carmela è un sistema di moduli per creare in maniera razionale il design e il codice di un sito.


Dalle pagine ai sistemi di moduli

L’idea di pagina per come l’abbiamo presa in prestito dal mondo della carta e del libro ci ha accompagnato nel web dal primo giorno e ci ha aiutato a capirlo.

Facevamo un sito di quattro ‘pagine’ come una brochure, ne facevamo uno trecento come un libro.

Se ti fermi sei fixed

Da allora ne è passata di cache sotto i server, il web si è evoluto e sta evolvendo tuttora, è il suo bello. Di conseguenza è auspicabile che evolva anche il modo in cui lo facciamo, il web. O pensavi di essere già arrivato?

Smartwatch, smartphone, tablet, phablet, netbook, notebook, desktop, smart tv, console di gioco, forno a microonde, sono i dispositivi con cui navighiamo oggi. Immagina domani.

Facciamocene una ragione, anzi, raccogliamo la sfida.

Bordi? Quali bordi?

Nell’epoca del web fluido e multi schermo, il concetto di pagina, con i suoi bordi, le sue dimensioni, è ormai diventato obsoleto. Gli abbiamo voluto bene (e sempre gliene vorremo), ma oggi la strada più razionale è quella di progettare sistemi modulari, espandibili e coerenti per creare pagine che verranno visualizzate su schermi di cui non possiamo prevedere le dimensioni.

Pagina fissa

La pagina fissa

Pagina fluida

La pagina fluida

Deponi i pennelli, riprendi i Lego

Il vero lavoro di design si sposta così dal dipingere una pagina come se fosse un quadro, al progettare i pezzi che la compongono (colori, tipografia, layout, architettura) per poi divertirsi a costruire. Le pagine che ne risulteranno, in pratica, saranno alcune delle possibili combinazioni di questi moduli.

Ti ricordi i Lego?

Cos’è una style guide

Una style guide è la scatola dei mattoncini che compongono un sito internet. Rappresenta il linguaggio visivo (palette di colori, tipografia, form, bottoni, header ecc) e il corrispettivo codice (semantica, naming convention, variabili, media queries ecc) di tutti i moduli.

Chi è Carmela

Carmela è la style guide progettata da Emanuele Centola Emmaboshi studio e messa in codice da Andrea De Carolis Modo con la collaborazione di Matteo Trapella.

Si tratta di una base modulare e leggera da personalizzare per fare buon web. Il suo aspetto visivo è volutamente neutro, perché ogni applicazione di Carmela richiederà una propria identità grafica. Volevi proprio tutto pronto?

Atomic design

L’atomic design è una metodologia, ideata da Brad Frost, tramite la quale usiamo la metafora degli atomi per identificare i mattoncini e le loro aggregazioni.

Gli atomi si aggregano e creano le molecole, le quali unendosi formano gli organismi che infine generano i template di pagina. Unendo i contenuti (testi, immagini) ai template nascono le pagine del nostro sito.

Per corroborare il concetto ti ho fatto un disegnino.

Atomi

Atomi

Molecole

Molecole

Organismi

Organismi

Template

Template

Pagine

Pagine

D'accordo, ma perchè?

Grazie per la domanda. Usando una style guide avremo un grande controllo sugli aspetti chiave del fare (buon) web:

  • la pulizia del codice;
  • la coerenza della grafica;
  • la facilità della manutenzione.

Le regole di un web a prova di futuro suggeriscono che ogni singolo pezzo di una interfaccia debba avere un comportamento adatto ad ogni circostanza. Proprio questi elementi, con i loro comportamenti, sono i pezzi con cui abbiamo costruito Carmela.

Carmela in azione

Naturalmente avendo poche settimane di vita Carmela ha ancora poche applicazioni, ma nel cantiere di Emmaboshi studio abbiamo già diversi siti che usciranno presto basati su di lei, così potrai vedere cosa può fare. Uno però è già uscito ed è questo:

Usala (o falla usare), è open!

Carmela è una living style guide e, in quanto living, ha bisogno di essere usata, trasformata, migliorata. Richiede una conoscenza di sviluppo web, per cui, se non sei uno sviluppatore, puoi comunque consigliare al tuo sviluppatore di usarla. Scaricarla (o falla scaricare) da GitHub e facci sapere come va!

Scaricala da GitHub

Migliorala, è open!

Se correggi dei bug, se pensi potrebbe essere utile questa o quella feature, committa la tua versione su GitHub!

Facciamo crescere Carmela (è appena nata!).

Su, non fare il timido

Se ti piace Carmela scrivimelo a [email protected], sai quanto fa piacere ricevere delle belle parole. Se invece non ti è piaciuta scrivi a [email protected].

Ringraziamenti

Non saremmo qui oggi senza il lavoro dei pionieri del web come Jeremy Keith che ci illuminò con un suo talk nel 2011.

Emanuele Centola, Jeremy Keith, Andrea De Carolis a Cesena nel 2011

In questa foto io (Emanuele Centola), Jeremy Keith e Andrea De Carolis a Cesena il 29 settembre 2011, dopo il talk One web. Foto di Jeremy Keith.

Insieme a lui grazie anche a Brad Frost, Daniel Mall, Ethan Marcotte, Frank Chimero e mille altri ai quali va la nostra infinita gratitudine.

Keep on pushing!

Risorse

Per approfondire l’argomento style guide e il buon web puoi leggere: