Layout content out

Le griglie non esistono nel vuoto, ma in relazione al contenuto. Non si comincia mai con una griglia, si comincia con un’idea che viene poi tradotta in una forma, in una struttura.

L’articolo prosegue sotto

L’articolo prosegue sotto

Linda van Deursen

Le griglie vanno bene per dividere una tela predefinita e per guidare il posizionamento del contenuto sulla pagina, ma quando si progetta per la natura fluida del web, si ha bisogno di qualcosa di più… responsive. Entrano quindi in gioco le proporzioni, che sono state usate nei lavori di architetti, scultori e book designer come aiuto per impostare il tono delle loro composizioni e per trasportare il loro materiale dallo stadio di schizzo a quello di prodotto finale. Possiamo applicare un processo simile sul web concentrandoci sul tono e sulla forma del nostro content first, per poi lavorare verso l’esterno per progettare dei grid system fluidi e basati sulle proporzioni che invitano all’armonia tra contenuto, layout e schermo.

Le colonne sono noiose. Costruiamo con le relazioni.#section1

Le scelte di layout possono determinare il tono dei nostri design. Come piaceva insegnare alla graphic designer Anne Burdick, “la struttura della pagina può essere vista come l’impersonificazione di una particolare prospettiva filosofica”¹. Preferiamo dare ordine al nostro contenuto, usare un approccio umanistico oppure percorriamo la strada del caos? Qualunque sia il tono, lo si può introdurre con successo nel nostro layout attraverso l’uso di una proporzione: rispettivamente con una proporzione lineare (1:1), con la sezione aurea (1:1,618) o con proporzioni causali (nessun rapporto).

Il rapporto che scegliamo sarà il DNA da cui si formeranno tutte le nostre decisioni riguardanti il layout. Questo singolo numero metterà in connessione tutti gli elementi del nostro design e, modificandolo, saremo in grado di influenzare notevolmente il tono dei nostri design. I rapporti con proporzioni più basse, o con differenze più piccole tra i numeri, creeranno differenze più sottili nei layout e funzioneranno bene per contenuti più tranquilli e con più sfumature come i blog personali o i testi lunghi. Le proporzioni maggiori daranno energia ad una composizione, con notevoli differenze di dimensioni, perfette per contenuti più dinamici.

Una fila di immagini di dimensioni identiche è ordinaria e solida.

Un array basato sulla sezione aurea dà un’idea di struttura e dinamismo.

Un array caotico è interessante e leggermente inquietante.

Rapporti razionali#section2

Si può creare una proporzione partendo da due numeri qualsiasi, che ci danno una palette di infinite possibilità, ma per limitare le cose sarebbe meglio cominciare da un territorio conosciuto. I rapporti razionali sono sufficientemente amichevoli, perché la matematica che ci sta dietro non fa troppa paura:

La Regola dei terzi è un esempio molto noto del potere dei rapporti razionali nei layout. Contenuti molto strutturati, come file di immagini o video, o testo con un tono neutro o formale, sono rappresentati al meglio con proporzioni razionali. Queste proporzioni funzionano bene per progettare design simmetrici, ma possono essere usati anche per layout asimmetrici.

Rapporti irrazionali#section3

Nel The Book of Rectangles, Spatial Law and Gestures of The Orthogons Described (1956), il designer e architetto Ceco Wolfgang von Wersin compilò un elenco di proporzioni dinamiche usate da artisti, architetti e calligrafi di tutta la storia per aiutarsi nelle loro composizioni. Secondo Wersin, si riteneva che “nulla è meglio di queste proporzioni”. Decisamente un buon punto da cui partire.

Le 12 “orthagons” di Wersin con le proporzioni (PDF)

La proporzione irrazionale più famosa nel design, ovviamente, è la sezione aurea (la “Auron” secondo Wersin), che è derivata dai pattern che si trovano in natura e dalla forma umana. Le proporzioni irrazionali ci danno incrementi più piccoli nelle proporzioni e le loro peculiari relazioni funzionano meglio nei layout asimmetrici.

Cos’altro?#section4

Di per sé, una proporzione non è sufficiente per creare una composizione coinvolgente. Fortunatamente, non abbiamo solo la pura geometria come guida in questo caso. Ho sempre apprezzato moltissimo il concetto di Bringhurst di scegliere i caratteri tipografici basandosi su chi li ha disegnati e dove. Forse si potrebbe applicare una metodologia simile ai layout, in cui decidiamo che rapporti usare in base alle influenze secondarie come le scelte tipografiche o addirittura la musica.

Lavorare all’interno di una scala#section5

Le composizioni di successo usano la varietà per creare gerarchia e movimento. Usando la proporzione che abbiamo scelto, possiamo estrapolare una serie di dimensioni simili a note in una scala musicale e poi creare i nostri layout usando queste “note” – o larghezze – per quella scala. Possiamo poi ripetere e saltare in giro per la scala per creare un tipo di melodia visuale.

Per creare la nostra scala, dobbiamo prima selezionale un’unità di base. Suggerirei di usare il font-size di base che avete scelto per la tipografia per mettere ancora di più in connessione le proporzioni del vostro layout al vostro contenuto. Usiamo 1em, così i calcoli saranno semplici. Poi moltiplichiamo la nostra unità di base per il numero a destra della nostra proporzione per generare la dimensione successiva sulla scala e ripetiamo questo processo fino a quando avremo sufficienti varianti di dimensione per creare il nostro layout. Otto dovrebbero andare bene.

Otto “note” generate dalla sezione aurea.

Decidendo le dimensioni basandole su una scala, possiamo scegliere le relazioni che si adattano meglio al tono dei nostri design. I grandi intervalli lungo la scala possono assumere un tono forte, mentre intervalli piccoli possono avere più sfumature rispetto ai tradizionali layout a colonna. Non importa la dimensione del cambiamento, il risultato è geometricamente connesso mediante la nostra proporzione.

Una disposizione di immagini su una griglia regolare di sei colonne.

Una disposizione di immagini su una griglia “aurea” a sei colonne.

Alleggerire il carico cognitivo#section6

Quando si lavora con i rapporti e le scale, le vostre decisioni riguardanti il layout diventeranno più strettamente definite. Per esempio, se dovessimo disporre il contenuto di un blog con il solito pattern immagine più testo (io lo chiamo “blurb”), servono tre o più colonne in un layout con un numero di colonne regolari per creare una distinzione tra gli elementi a qualunque dimensione.

Un “blurb” su una griglia a tre colonne regolari.

In questo caso, in una griglia basata sulle proporzioni, sarebbero necessarie due colonne. Dal momento che si suppone che i blog siano un’espressione più personale, penso che sarebbe appropriata in questo contesto la sezione aurea, con le sue proporzioni umaniste.

Un “blurb” in una griglia basata sulla proporzione aurea.

La larghezza di ogni testo è 2,618 volte più grande della sua immagine corrispondente, oppure due passi in su nella nostra scala.

Ridurre le colonne ci aiuta in due modi, dandoci:

• più chiarezza nel layout: la gerarchia e l’allineamento sono rafforzati dal minor numero di opzioni:
• minori decisioni quando si progetta: i vincoli liberano la nostra mente, che può così concentrarsi su problemi più importanti come il contenuto e l’usabilità.

La nostra griglia per il “blurb”, più semplice perché basata sulla proporzione, codifica una relazione tra due elementi basati sulla forma del contenuto. Usando questa relazione come punto di partenza, possiamo ora dare più sostanza a un grid system fluido e basato sul contenuto.

La nostra griglia per il blurb.

Griglie all’interno di griglie#section7

Adesso possiamo progettare griglie più semplici, che possono essere realizzate su altre griglie e tra loro, condividendo una proporzione comune per mantenere l’armonia tra i loro vari contesti. Definisco “content grid” (griglie di contenuto) le griglie come quella usata per l’esempio del “blurb”. Le content grid definiscono le relazioni all’interno di una parte di contenuto riutilizzabile e funzionano bene per gli articoli, i moduli sidebar e altri elementi riutilizzabili di un sistema di design.

Per suddividere lo spazio della viewport che abbiamo a disposizione, possiamo usare una “layout grid” globale che si comporta in maniera molto simile alle griglie che abbiamo usato per anni sul web.

Emerge un sistema#section8

Portando avanti il nostro esempio del blog, useremo la nostra scala per definire un’altra griglia per il contenuto per i nostri post. In un blog post tipico si ha una grande immagine, il corpo del testo, i link ai social media, le immagini inline e del contenuto a supporto richiamato all’interno dei margini. Provando varie disposizioni partendo dalla nostra scala, possiamo arrivare ad una griglia che soddisfi i bisogni del nostro contenuto.

Una griglia di quattro colonne per l’articolo, utilizzando 1 e 2 presi dalla nostra scala. La prima colonna, la più sottile, ospiterà il modulo dei social, mentre tutte le quattro colonne ci daranno la possibilità di allineare gli elementi dei nostri post in maniera appropriata.

Per convertire queste larghezze in percentuali CSS fluide, abbiamo solo bisogno di raggiungere il numero delle larghezze corrispondenti della nostra scala e di convertire ciascuna colonna usando la famosa formula di Ethan Marcotte:

target ÷ context = result

… all’interno della quale “target” è una larghezza di colonna e “context” è la somma di tutte le colonne usate nella griglia. (O, se state sperimentando con flex-box per il layout, potete semplicemente usare gli esatti numeri della proporzione della vostra scala).

Possiamo creare una semplice “layout grid” con tre sezioni per sistemare le sezioni maggiori del nostro contenuto: un’area per il brand e per la navigazione, un’area per il contenuto principale e una terza area per i link a contenuti correlati e presentati nel testo. L’area principale del contenuto deve essere più grande per ospitare il contenuto del post e l’area di navigazione deve essere molto più piccola. Troveremo le larghezze delle colonne a partire dalla scala che ci sembra più adatta per il nostro layout, che ci dà sufficiente spazio per ogni sezione.

Una layout grid simmetrica a tre colonne, utilizzando 1 e 3 della nostra scala.

Infine, sistemiamo le nostre content grid (la griglia per l’articolo e la griglia per il blurb di cui sopra) nella nostra layout grid, creando così un layout che è sia fluido sia completamente guidato dal nostro contenuto (Guarda la demo del blog.)

Il nuovo layout del blog, basato sulla sezione aurea e costruito “content-out”.

Per un confronto, ho creato questo stesso layout sulla griglia a 12 colonne di Twitter Bootstrap (Guarda la demo del blog). Sebbene siano piuttosto simili, il layout basato sulle proporzioni funziona meglio a qualunque dimensione.

Soddisfare i vincoli#section9

Adattare il nostro layout a varie viewport diventa ora molto più semplice poiché abbiamo molte meno variabili da considerare. Per questo processo, possiamo creare un prototipo fluido nel browser, poi esaminare i punti in cui il layout comincia a vacillare quando si ridimensiona la finestra.

Identificare i soliti sospetti#section10

Al ridimensionarsi dell viewport, le relazioni che abbiamo stabilito cominceranno ad essere forzate e si incrineranno, specialmente nelle dimensioni tra le dimensioni di device che di solito costituisco i “target”, come “tablet” e “desktop”. Dopo aver esplorato il modo in cui i layout fluidi cadono a pezzi su molti siti con parecchio traffico, ho isolato delle problematiche frequenti che segnalano la necessità di un cambiamento nella griglia:

I 7#section11

Nei “Sette” si ha un’immagine ridotta al restringersi della sua larghezza e il testo adiacente viene strizzato in una misura lunga e non leggibile. La forma risultante assomiglia a un “7” e crea una notevole zona di “white space” sotto all’immagine. Distrae in special modo quando viene ripetuto attraverso il layout.

Esempi di pattern a “7” e lo spazio negativo che si viene a creare.

Drift (distese non ordinate)#section12

I drift sono così lontani dal contenuto a cui si riferiscono che non hanno più alcuna relazione con niente. Possono finire accoppiati ad altri pezzi disparati di contenuto vagabondi, o semplicemente andare alla deriva in solitaria. Nel layout, i drift distruggono la gerarchia e causano dei preoccupanti fiumi di spazio negativo in cui ci si insinua.

Le immagini sono alla deriva rispetto al contenuto, formano una propria colonna mentre gli headline e i meta-contenuti relativi ad esse perdono ogni rilevanza visuale tra loro.

Pinch#section13

Si hanno dei pinch quando gli elementi si avvicinano troppo ad altri pezzi di contenuto. Le relazioni vengono distrutte quando la persona che guarda il layout fa associazioni sbagliate: le immagini vengono associate al titolo sbagliato, i link finiscono in una lista creata da loro. In casi estremi, il contenuto collide, compromettendo tutta la leggibilità.

I pinch creano degli hotspot visuali che distraggono l’occhio e confondono le relazioni quando la prossimità surclassa il posizionamento.

Trovare dei vincoli fondamentali#section14

Dopo aver sistemato i layout per la fluidità, alcuni elementi avranno bisogno di un’attenzione speciale. I paragrafi dovrebbero mantenere una misura leggibile, le pubblicità dovrebbero mantenere dimensione e posizione relativa e le immagini non dovrebbero allargarsi oltre la dimensione massima consentita dalla loro risoluzione. Impostare una larghezza specifica è una semplice fix, ma non è totalmente in linea con la fluidità. Al contrario, possiamo impostare nel nostro CSS una min-width e/o una max-width per mantenere l’integrità di questo contenuto.

Un metodo più appropriato#section15

L’uso della griglia come sistema per ordinare è l’espressione di una certa attitudine mentale in quanto mostra che il designer concepisce il suo lavoro in termini costruttivi ed orientati al futuro.

Josef Muller-Brockmann

Un approccio modulare alle griglie, basato sulle proporzioni, ci permette di navigare un medium di cui non solo non possiamo conoscere la dimensione del contenitore ma nemmeno il tipo di contenuto che scorrerà in quel contenitore. Possiamo creare dei sistemi di layout a partire dal nostro contenuto e basandoci sulle proporzioni, far sì che le composizioni siano armoniche nonostante la natura disparata delle parti che le compongono. Da qui in poi, un’approfondita conoscenza del modo in cui falliscono i design fluidi può mostrarci quando adattare questi sistemi e quando aggiungere dei vincoli.

Nel 2009 e poi ancora nel 2010, Ethan Marcotte ci diede gli strumenti per rispondere. Nel 2011, Mark Boulton ci diede una filosofia guida. Intrecciando queste idee profondamente potenti con un metodo flessibile, possiamo muoverci verso layout più sofisticati creati su misura per i bisogni del nostro contenuto, con dei pattern peculiari e perfettamente adatti alla natura nel web in continuo cambiamento.

Note#section16

• 1. Burdick, Anne, Stephen Farrell. “An interview with Stephen Farrell” Emigre 37 (1996). Stampa.

Illustrazioni: {carlok}