Quando parliamo di design, dobbiamo considerare il testo dal punto di vista di un designer. Il testo deve essere leggibile e leggibile mentre si adatta perfettamente allo stile del sito web. Ma deve anche riguardare una gerarchia di contenuti.
Costruire gerarchie è la "grande immagine"? della composizione di un sito Web. Ma quando passi alla tipografia, devi anche creare gerarchie relative a un testo specifico nella pagina. In questo articolo, spiegheremo la creazione di relazioni con le intestazioni e come utilizzare lo spazio bianco per rendere visivamente i paragrafi lunghi visivamente digeribili.
Intestazioni e spaziatura
I contenuti Web si concentrano in genere attorno a un paio di elementi di testo diversi. I titoli vanno da H1-H6, ma la maggior parte dei siti web usa solo H1-H4 al massimo. Indipendentemente dal numero di stili di intestazione utilizzati, è il tuo lavoro di designer che li realizza in modo che la gerarchia sia chiaramente stabilita.
Lo spazio tra il testo è importante perché aiuta a definire il contenuto della pagina stessa. Quando gli utenti trovano una nuova intestazione, si aspettano di riconoscere se il contenuto sta passando a un soggetto nuovo di zecca o se si trova all'interno di un soggetto esistente. La giusta combinazione di dimensioni, colore e stile del testo della direzione aiuta a creare le giuste aspettative per gli utenti.
Lo spazio negativo tra il testo mostra il modo in cui il contenuto della pagina è correlato. Le intestazioni con molto spazio sono viste come più dominanti, mentre le intestazioni più vicine ai paragrafi sono viste come correlate tramite il contesto. I margini inferiori dopo i paragrafi mostrano la relazione tra le righe di testo e la loro posizione nella gerarchia. Tutto si riferisce alla creazione di una gerarchia di contenuti per distinguere visivamente il testo sulla pagina.
Relazioni di direzione
Ogni intestazione dovrebbe riflettere il proprio stile unico, che integra anche altri stili di testo nella pagina. La creazione di intestazioni brillanti diventa più facile con la pratica, ma i valori dello spazio bianco dovrebbero generalmente comportarsi allo stesso modo indipendentemente dagli stili di titolo.
Square utilizza un layout di home page di avvio tradizionale con un sacco di immagini e blocchi di testo. Le intestazioni sono un segmento particolarmente interessante del design perché variano da sovradimensionati a infinitesimamente piccoli. Eppure le dimensioni non contano tanto quanto la relazione con l'altro testo sulla pagina.
Si noti nello screenshot sopra come le intestazioni di grandi dimensioni utilizzano spaziatura extra sopra e sotto il testo. Queste intestazioni di sezione trasmettono visivamente il senso di essere "da soli"? ma anche naturalmente raggruppare insieme in più grandi blocchi di sottotitoli e paragrafi.
Ogni blocco interno utilizza il testo del sottotitolo che è molto più piccolo. Queste intestazioni interne hanno all'incirca le stesse dimensioni del testo di paragrafo, ma si distinguono con testo in grassetto e un colore più scuro. Visivamente, è chiaro che queste linee di testo in grassetto sono ancora intestazioni (solo in basso sul totem visivo).
La quantità di spazio tra intestazioni e paragrafi definisce anche quali paragrafi appartengono a quali intestazioni. Allo stesso modo, dovresti inserire molto spazio tra intestazioni più piccole e intestazioni più grandi. Ancora una volta, lo spazio negativo definisce la gerarchia sia nel visual design che nella tipografia.
Come spiegato nella Guida gratuita alle migliori pratiche di progettazione dell'interfaccia utente Web, ricorda questi punti quando realizzi intestazioni di pagina:
- Una gerarchia visiva dovrebbe essere evidente attraverso l'uso di spazio, dimensioni, colore e / o stile di testo. Questo dovrebbe essere visibile anche stando a 3-5 piedi di distanza dal monitor. Puoi anche utilizzare il test sfocatura Gaussiano di 5 secondi per controllare la gerarchia.
- Mantieni ogni sottotitolo vicino al suo primo paragrafo figlio.
- Posiziona intestazioni concise in prossimità per trasmettere idee più rapidamente e chiaramente.
Lunghi paragrafi
Sul tema dello spazio bianco contestuale, si pone la questione di come progettare attorno al paragrafo comune. Sicuri, affidabili e trovati praticamente ovunque, il paragrafo è la spina dorsale della strategia dei contenuti di ogni sito web.
Ma il modo in cui il contenuto viene scritto varia in base a come viene disegnato il contenuto. Ad esempio, una rivista di notizie online utilizzerà stili di paragrafo diversi rispetto a un blog di giardinaggio più piccolo. La quantità di contenuto, la lunghezza del contenuto e il livello di dettaglio entrano in gioco quando si disegnano i paragrafi.
Prova a progettare con un testo sufficientemente grande in modo che sia chiaramente leggibile a 3 piedi dallo schermo. La dimensione del testo è molto simile allo spazio bianco, in quanto di solito è meglio progettare più grande che più piccola. Tuttavia, esercitare moderazione e moderazione.
Se la dimensione del testo è troppo grande, occuperà più spazio sullo schermo e richiederà più scorrimento. Ma se è troppo piccolo potrebbe essere illeggibile, o i visitatori incontreranno difficoltà con il ritmo verticale mentre spostano gli occhi da linea a linea.
Due cose importanti da tenere a mente sono i margini del paragrafo e l'altezza della linea (lo spazio tra ogni linea). La dimensione del testo nei paragrafi detta entrambi questi valori perché lo spazio bianco dipende dalla dimensione.
Medium è una piattaforma di blogging online che fa il design del paragrafo giusto. Il testo è nitido, leggibile e distanziato perfettamente. Come mostra la loro progettazione del paragrafo, i valori di altezza della linea devono essere sufficientemente grandi per connettersi alla linea successiva senza sentirsi eccessivi.
Come consigliato nell'ebook di Web Design Trends 2016, ecco alcune buone regole da seguire:
- Evitare di aumentare l'altezza della riga rispetto a una riga di testo tipica.
- L'unità di font em è perfetta per creare taglie uniformi su tutti i browser.
- L'altezza della linea dovrebbe essere spesso un po 'più grande della dimensione del carattere.
- Prova una dimensione del font di 1em combinata con un'altezza della linea di 1.5em-1.75em.
La spaziatura tra i paragrafi può essere complicata, ma è un argomento importante, specialmente per i siti Web di testo. Il margine inferiore del paragrafo dovrebbe essere molto più grande di una riga di testo tipica. I margini del paragrafo inferiore dovrebbero essere abbastanza grandi da poter determinare visivamente quando un paragrafo è terminato.
Una volta individuata la dimensione del testo di un sito Web, diventa molto più facile giocare con i valori di altezza della linea e calcolare i margini per la spaziatura.L'obiettivo qui è chiarezza e struttura. Ogni nuovo paragrafo dovrebbe essere ovvio senza alcun dubbio. La chiave è lo spazio proporzionale tra ogni blocco di testo.
Come accennato in precedenza, è generalmente più sicuro avere? Troppo? spazio bianco piuttosto che non abbastanza. Evita semplicemente di usare quantità colossali di spazio o finirai con una densità di contenuti molto bassa. Mantenere abbastanza contenuti sulla pagina per essere interessante, ma non così tanto da essere travolgente.
Per ulteriori informazioni sulla progettazione di contenuti nelle interfacce Web, consulta questo articolo su come progettare il paragrafo perfetto.
Porta via
Lo spazio negativo nella tipografia influisce direttamente sulla composizione generale e sugli elementi della pagina più piccoli allo stesso tempo. Quando si progetta la tipografia, il contesto è il re.
I paragrafi trovati nella pagina potrebbero richiedere margini maggiori rispetto ai paragrafi trovati nella barra laterale. I collegamenti nell'intestazione potrebbero apparire più agevoli con il riempimento aggiuntivo, ma i collegamenti nel piè di pagina potrebbero apparire più ordinati con una leggera spaziatura. Non ci sono regole solide, solo le migliori pratiche da tenere a mente.
Ricorda inoltre che la tipografia segue insieme alla propria gerarchia proprio come la struttura della pagina. Un sacco di pratica sarà il modo ottimale per migliorare i tuoi occhi per riconoscere rapidamente i valori spaziali che si adattano meglio a qualsiasi progetto web.
Quando si tratta di progettare con lo spazio, ricordare che lo spazio come qualità estetica occupa un posto di rilievo nello spazio come strumento di progettazione. Lo spazio crea relazioni, definisce gerarchie e enfatizza il contenuto: tienilo sempre presente quando pensi a come ridurre il rumore visivo.
Puoi imparare più tecniche di progettazione praticabili nell'ebook gratuito di Web Design Trends 2016 di UXPin. La guida di 185 pagine illustra le 10 migliori pratiche in modo molto dettagliato. Troverai 165 esempi analizzati dalle migliori aziende di oggi.
Design grafico minimalista
La progettazione grafica minimalista è una filosofia di creazione di qualcosa in cui ogni elemento ha uno scopo. È semplice, pulito e bello. È altamente utilizzabile. La nostra funzione esplora diversi approcci e tecniche per la progettazione grafica minimalista (con molti esempi stimolanti!)