C'è un sacco di contenuto là fuori. Ne stai leggendo un po' proprio ora. Ciao!

Per lo scopo del pubblico, è importante che il contenuto sia organizzato. I libri hanno capitoli, i film hanno scene e i podcast hanno episodi.

Quella stessa organizzazione deve essere applicata anche al layout della pagina, sia digitalmente che su carta. Questo può essere fatto applicando una gerarchia agli elementi del design. Aderire alla gerarchia visiva è solo un modo elegante per dire che l'informazione viene organizzata dalla più importante alla meno importante.

Lo spettatore definisce ciò che è più importante per lui; il designer gli dà solo qualche suggerimento.

Qualunque pezzo di informazione lo spettatore veda per primo è determinato come il più importante e quindi si trova in cima alla gerarchia. Gli elementi che catturano l'attenzione dello spettatore successivamente sono quelli che si classificano più in basso nella gerarchia visiva.

Comprendere la gerarchia visiva

La gerarchia visiva gioca un ruolo importante nel design dell'interfaccia utente. Pensa a come appare una buona pagina di destinazione: il logo dell'azienda in alto, il menu in alto o a sinistra, elementi di poca importanza verso il basso. Questi elementi sono posizionati con uno scopo.

I seguenti principi dovrebbero essere visti come le regole d'oro della gerarchia visiva. Queste linee guida aiutano i designer grafici a produrre risultati che attirano l'attenzione nei punti giusti, il tutto essendo piacevoli da guardare.

Utilizzare un software di desktop publishing può aiutare i designer grafici a disporre tutti i loro materiali ordinatamente su una pagina con l'aiuto di guide, modelli e strumenti aggiuntivi per aiutare a perfezionare i layout.

Anche i non designer possono trarne vantaggio; la gerarchia visiva entra in gioco quando si progettano presentazioni per riunioni in modo che i partecipanti possano facilmente comprendere i punti che stai cercando di far passare (senza sentire una parola di quello che stai dicendo).

Dimensione e scala

È più probabile che tu senta qualcosa quanto più è forte. Non c'è volume uditivo nella gerarchia visiva, ma la dimensione e la scala degli elementi hanno un effetto simile.

Uno di quei Monty è chiaramente più importante dell'altro.

Più grande è un elemento, più è probabile che lo vediamo, spostandolo verso l'alto della gerarchia.

Gli elementi che non sono così importanti possono essere resi più piccoli per ridurre la visibilità e l'enfasi. Questo sposta questi elementi verso il basso della gerarchia visiva.

Questo non significa necessariamente che gli elementi più importanti debbano essere enormi. Usa la dimensione con moderazione e mantienila di buon gusto; elementi troppo grandi possono sopraffare il resto del design, mentre elementi troppo piccoli possono perdersi nella traduzione.

Colore e contrasto

Un altro modo per far risaltare gli elementi importanti agli occhi dello spettatore è con il colore e il contrasto. In un mondo (o sito web) pieno di bianco e nero, un po' di colore fa una grande differenza.

Vesti le tue informazioni o elementi più importanti con un colore brillante per farli risaltare contro una tonalità più pallida. Pensa all'effetto che ha l'evidenziazione in un libro di testo; se singole parole o frasi sono in un colore più brillante, attireranno l'attenzione del lettore prima che qualsiasi altra parola abbia una possibilità. Se c'è già uno sfondo colorato nel tuo design, puoi farlo usando schemi di colore contrastanti.

Un alto contrasto metterà in evidenza qualsiasi punto importante che vuoi trasmettere.

I colori contrastanti hanno un altro effetto nella gerarchia visiva: alterano la distanza percepita degli elementi. I colori caldi risalteranno su sfondi scuri, facendoli apparire più vicini rispetto ai colori freddi su uno sfondo scuro. Al contrario, i colori freddi risalteranno su uno sfondo chiaro, facendoli apparire più vicini rispetto ai colori caldi su uno sfondo chiaro.

Ancora una volta, usa colore e contrasto con moderazione – l'uso eccessivo può confondere gli spettatori perché, improvvisamente, tutto sembrerà importante e sarà impossibile sapere dove guardare. Ricorda, la gerarchia visiva dovrebbe servire come guida.

Font

Non stiamo parlando di mettere insieme Times New Roman e Curlz e farli competere per importanza. Un carattere tipografico come Times New Roman è composto da font; pesi, dimensioni e stili variabili di Times New Roman. Ad esempio, Times New Roman Italic in 16 pt è un font diverso da Times New Roman Bold in 36 pt.

Sfruttare questi pesi, dimensioni e stili è ciò che può spostare le informazioni più in alto (o più in basso) nella gerarchia visiva. Questi possono essere usati singolarmente o insieme per rendere alcune parole più appariscenti e potenti di altre.

Un singolo carattere tipografico può essere utilizzato in tutto un design, ma una varietà di font all'interno di quel carattere tipografico ha ancora il potere di disporre gli elementi testuali in base alla loro importanza.

Più grande e più audace significa più importante, mentre il testo più piccolo e più sottile diventa secondario. Non confondere questa regola: potrebbe far sembrare un documento un po' strano se non applicata correttamente.

Gerarchia tipografica

Non devi indovinare dove posizionare quei font. Pensa a come appare un layout di giornale o rivista: titolo, sottotitolo, testo. Questo è l'approccio più basilare e può essere applicato a una moltitudine di design, inclusi biglietti da visita, brochure e articoli.

Utilizzare questi diversi livelli è un altro modo per indicare cosa è importante per il lettore senza doverlo mettere in luci al neon.

Spazio negativo

Se vuoi attirare l'attenzione su un pezzo specifico di contenuto, prova a dargli un po' di spazio per respirare. Lo spazio negativo lasciato intorno a un modulo, un pulsante o un pezzo di testo importante lo fa sembrare l'uomo strano fuori. In senso positivo.

Potresti pensare che aggiungere più elementi alla tua pagina la renderà migliore, ma è vero il contrario; la tua pagina diventa ingombra e piena di informazioni difficili da separare per importanza.

Lo spazio bianco non è uno spreco. Invece, dà agli spettatori e ai lettori un po' di tempo per respirare prima di passare al prossimo elemento e può aiutare a trasformare elementi importanti in punti focali invece di sembrare solo un altro ingranaggio nella macchina.

Modelli di lettura

In tutte le culture, gli esseri umani leggono dall'alto verso il basso. Questo è il modo più prevedibile in cui i nostri occhi leggono, ma cosa succede se abbiamo solo il tempo di scansionare? Ci sono due modelli che l'occhio umano può seguire quando assorbe rapidamente le informazioni, che si tratti di un'illustrazione, un sito web o un articolo stampato.

Modello a F

Il modello a F si applica tipicamente a come leggiamo pagine ricche di testo, come quella su cui ti trovi ora. Un lettore scansionerà la pagina nella forma di una "F" (o "E"): prima, attraverso la parte superiore della pagina per leggere i titoli, poi lungo il lato sinistro della pagina per cercare numeri o punti elenco, e infine attraverso la pagina per cercare termini sottolineati o in grassetto.

Modello a Z

I design con più immagini e meno blocchi di testo sono tipicamente messi insieme in un modello a Z.

In questo modello, un lettore scansionerà la parte superiore della pagina da sinistra a destra. Qui si trovano le informazioni più importanti sui siti web.

Gli occhi del lettore si spostano poi verso il basso e diagonalmente verso l'angolo opposto e scansionano la parte inferiore della pagina nello stesso modo in cui hanno scansionato la parte superiore, formando così la forma di una "Z".

Un gran numero di pagine web sono progettate in questo modo; i web designer sono piuttosto intelligenti. Le informazioni più importanti sono quasi sempre su quella barra superiore: un logo, uno strumento di ricerca, schede di navigazione. La barra inferiore, che è collegata dalla linea diagonale della "Z", include altre informazioni importanti come un chatbot, informazioni di contatto o link ad altre pagine del sito.

Quanto diresti che è importante l'informazione sotto questo titolo?

È un Intestazione 5, la più piccola sulla pagina. Stiamo concludendo l'articolo qui, quindi stiamo per riassumere tutto ciò che hai già letto, il che significa che, sebbene importante, hai già letto queste informazioni. L'informazione più importante era il titolo; è quello che ti ha detto cosa stavi per leggere. Poiché questo è ricco di testo, probabilmente hai scansionato quei link di salto, poi sei andato attraverso la pagina per controllare eventuali link extra che ti abbiamo dato. Prego.

La gerarchia visiva è efficace, potente e non qualcosa da trascurare quando si progetta, specialmente se hai informazioni importanti da condividere. Nessun principio è più importante di un altro, poiché tutti coinvolgono modi in cui puoi far risaltare davvero le informazioni che devi far emergere dalla pagina.