{"id":451,"date":"2014-05-05T09:22:02","date_gmt":"2014-05-05T07:22:02","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/layout-content-out\/"},"modified":"2014-05-05T09:22:02","modified_gmt":"2014-05-05T07:22:02","slug":"layout-content-out","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/layout-content-out\/","title":{"rendered":"Layout content out"},"content":{"rendered":"
\n

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.<\/p><\/blockquote>\n

Linda van Deursen<\/p>\n

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\u00f9\u2026 responsive<\/em>. 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<\/a>, 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.<\/p>\n<\/div>\n

\n

Le colonne sono noiose. Costruiamo con le relazioni.<\/h2>\n

Le scelte di layout possono determinare il tono dei nostri design. Come piaceva insegnare alla graphic designer Anne Burdick, “la struttura della pagina pu\u00f2 essere vista come l’impersonificazione di una particolare prospettiva filosofica\u201d1<\/sup>. Preferiamo dare ordine al nostro contenuto, usare un approccio umanistico oppure percorriamo la strada del caos? Qualunque sia il tono, lo si pu\u00f2 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).<\/p>\n

Il rapporto che scegliamo sar\u00e0 il DNA da cui si formeranno tutte le nostre decisioni riguardanti il layout. Questo singolo numero metter\u00e0 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\u00f9 basse, o con differenze pi\u00f9 piccole tra i numeri, creeranno differenze pi\u00f9 sottili nei layout e funzioneranno bene per contenuti pi\u00f9 tranquilli e con pi\u00f9 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\u00f9 dinamici.<\/p>\n

<\/p>\n

Una fila di immagini di dimensioni identiche \u00e8 ordinaria e solida.<\/p>\n<\/div>\n

<\/p>\n

Un array basato sulla sezione aurea d\u00e0 un’idea di struttura e dinamismo.<\/p>\n<\/div>\n

<\/p>\n

Un array caotico \u00e8 interessante e leggermente inquietante.<\/p>\n<\/div>\n

Rapporti razionali<\/h3>\n

Si pu\u00f2 creare una proporzione partendo da due numeri qualsiasi, che ci danno una palette di infinite possibilit\u00e0, ma per limitare le cose sarebbe meglio cominciare da un territorio conosciuto. I rapporti razionali sono sufficientemente amichevoli, perch\u00e9 la matematica che ci sta dietro non fa troppa paura:<\/p>\n\n\n\n\n\n\n
Lineare<\/td>\n1:1<\/td>\n<\/tr>\n
Met\u00e0<\/td>\n1:2<\/td>\n<\/tr>\n
Terzi<\/td>\n1:3<\/td>\n<\/tr>\n
Quarti<\/td>\n1:4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

La Regola dei terzi<\/a> \u00e8 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.<\/p>\n

Rapporti irrazionali<\/h3>\n

Nel The Book of Rectangles, Spatial Law and Gestures of The Orthogons Described<\/cite> (1956), il designer e architetto Ceco Wolfgang von Wersin compil\u00f2 un elenco di proporzioni dinamiche<\/a> usate da artisti, architetti e calligrafi di tutta la storia per aiutarsi nelle loro composizioni. Secondo Wersin, si riteneva che “nulla \u00e8 meglio di queste proporzioni”. Decisamente un buon punto da cui partire.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Quadratica (o Quadrata\/Regolare)<\/td>\n1:1<\/td>\n<\/tr>\n
Hemidiagon<\/td>\n1:1.118<\/td>\n<\/tr>\n
Trion<\/td>\n1:1.154<\/td>\n<\/tr>\n
Quadriagon<\/td>\n1:1.207<\/td>\n<\/tr>\n
Biauron<\/td>\n1:1.236<\/td>\n<\/tr>\n
Penton<\/td>\n1:1.272<\/td>\n<\/tr>\n
Diagon<\/td>\n1:1.414<\/td>\n<\/tr>\n
Bipenton<\/td>\n1:1.458<\/td>\n<\/tr>\n
Hemiolion<\/td>\n1:1.5<\/td>\n<\/tr>\n
Auron (la sezione aurea)<\/td>\n1:1.618<\/td>\n<\/tr>\n
Hecton (o Sixton)<\/td>\n1:1.732<\/td>\n<\/tr>\n
Doppelquadrat (Halves)<\/td>\n1:2<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Le 12 \u201corthagons\u201d di Wersin con le proporzioni (PDF<\/a>)<\/p>\n

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

Cos’altro?<\/h3>\n

Di per s\u00e9, una proporzione non \u00e8 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<\/a> 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<\/a> o addirittura la musica<\/a>.<\/p>\n<\/div>\n

\n

Lavorare all’interno di una scala<\/h2>\n

Le composizioni di successo usano la variet\u00e0 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.<\/p>\n

Per creare la nostra scala, dobbiamo prima selezionale un’unit\u00e0 di base. Suggerirei di usare il font-size di base che avete scelto per la tipografia per mettere ancora di pi\u00f9 in connessione le proporzioni del vostro layout al vostro contenuto. Usiamo 1em, cos\u00ec i calcoli saranno semplici. Poi moltiplichiamo la nostra unit\u00e0 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.<\/p>\n

<\/p>\n

Otto “note” generate dalla sezione aurea.<\/p>\n<\/div>\n

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\u00f9 sfumature rispetto ai tradizionali layout a colonna. Non importa la dimensione del cambiamento, il risultato \u00e8 geometricamente connesso mediante la nostra proporzione.<\/p>\n

<\/p>\n

Una disposizione di immagini su una griglia regolare di sei colonne.<\/p>\n<\/div>\n

<\/p>\n

Una disposizione di immagini su una griglia “aurea” a sei colonne.<\/p>\n<\/div>\n

Alleggerire il carico cognitivo<\/h3>\n

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

<\/p>\n

Un “blurb” su una griglia a tre colonne regolari.<\/p>\n<\/div>\n

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\u00f9 personale, penso che sarebbe appropriata in questo contesto la sezione aurea, con le sue proporzioni umaniste.<\/p>\n

<\/p>\n

Un “blurb” in una griglia basata sulla proporzione aurea.<\/p>\n<\/div>\n

La larghezza di ogni testo \u00e8 2,618 volte pi\u00f9 grande della sua immagine corrispondente, oppure due passi in su nella nostra scala.<\/p>\n

Ridurre le colonne ci aiuta in due modi, dandoci:<\/p>\n