Contenuto
Questo articolo è apparso per la prima volta nel numero 229 di .net magazine, la rivista più venduta al mondo per web designer e sviluppatori.
Una delle cose più importanti su cui puoi concentrarti quando si tratta di impaginare una pagina in HTML / CSS è il ritmo verticale, lo schema visivo in cui si formano i blocchi di testo o le linee di testo mentre si scansiona la pagina.
Altre cose possono influire su questo ritmo come titoli, voci di elenco, immagini e così via. Avere un buon ritmo verticale è fondamentale perché aiuta la leggibilità e la capacità di scansione delle tue pagine.
Ci sono alcuni ottimi tutorial (vedi qui e qui, per esempio) sul web dove puoi trovare informazioni su come ottenere tecnicamente il giusto ritmo verticale usando gli em per l'altezza della tua linea e imparando su cosa mantenere il tuo tipo `` in fase '' si intende.
Gerarchia
Le cose di base a cui prestare molta attenzione sono l'altezza della linea tra gli elementi e la gerarchia visiva complessiva sulla pagina. L'impostazione delle proporzioni corrette dell'altezza della linea può essere un esercizio di progettazione coinvolgente, ma è importante padroneggiarlo. Anche la gerarchia è importante, in quanto le immagini e gli elementi di testo dovrebbero essere in armonia tra loro visivamente: le cose più importanti sono generalmente più grandi e vengono prima sulla pagina.
I designer di stampa si sono occupati dell'idea del ritmo verticale per molti anni ed è solo nel recente passato che i web designer hanno dovuto davvero entrare in queste cose. Con la sempre crescente necessità di costruire siti Web utilizzando layout a griglia e prestare attenzione alle implementazioni reattive per adattarsi a più larghezze dello schermo, è più importante ora che mai dal punto di vista del design visivo, probabilmente più di uno solo tecnico.
Cinque esempi da verificare
1. Gli elementi dello stile tipografico Questo libro di Robert Bringhurst è lo standard per lo studio della tipografia. Leggilo, consumalo, versalo nel tuo cervello come puoi.
2. Frank Chimero Oltre ad essere assolutamente sorprendente in generale, la recente riprogettazione del sito web personale del designer Frank Chimero mostra un superbo ritmo verticale. Usa un effetto di parallasse per aiutare a guidare il ritmo a casa mentre scorri la pagina verso il basso.
3. Dan Cederholm Per un buon esempio di ottimo ritmo verticale tipografico, dai un'occhiata al blog di Dan Cederholm. L'altezza della riga della copia e dei titoli è in proporzione perfetta.
4. Focus Lab La società di web design e branding Focus Lab utilizza abilmente la gerarchia per aiutare a comunicare ciò che è più importante per il visitatore.
5. Typofonderie Il sito web di Typography Studio Typofonderie ha un ottimo ritmo verticale con le sue immagini e il suo testo. La spaziatura tra gli elementi è proporzionale in tutto il sito web e la gerarchia tra l'immagine principale e le immagini / sezioni secondarie è perfetta.
Scopri 10 fantastici esempi di design sperimentale su Creative Bloq.
