La gerarchia visiva è un metodo di organizzazione degli elementi di design in ordine di importanza. In altre parole, è un insieme di principi che influenzano l’ordine in cui notiamo ciò che vediamo.
In questa guida, elenchiamo 12 principi di gerarchia visiva che ogni designer principiante deve conoscere.
Abbiamo molto da coprire quindi cominciamo.
- Tabella dei contenuti
- Che cos’è la gerarchia visiva?
- 1 La dimensione influisce sulla visibilità
- 2 La prospettiva crea un’illusione di profondità
- 3 Colore e contrasto attirano l’attenzione
- 4 Font organizzano il design
- 5 Lo spazio fornisce enfasi e movimento
- Regola dello spazio
- Modelli di scansione della pagina
- F-Patterns
- Il modello Z
- 6 La vicinanza suggerisce relazioni
- 7 Lo spazio negativo enfatizza
- 8 L’allineamento dirige gli occhi
- 9 I gruppi dispari creano il focus
- 10 La ripetizione unisce una composizione
- 11 Le linee suggeriscono il movimento
- 12 Le griglie organizzano un design
- Disegni alternativi della griglia
- Rottura della griglia
- Visual Hierarchy Infographic
Tabella dei contenuti
Che cos’è la gerarchia visiva?
Principio #1: Le dimensioni influenzano la visibilità
Principio #2: La prospettiva crea un’illusione di profondità
Principio #3: Il colore e il contrasto attirano l’attenzione
Principio #4: I caratteri organizzano il design
Principio #5: Lo spazio fornisce enfasi e movimento
Principio #6: La vicinanza suggerisce relazioni
Principio #7: Lo spazio negativo enfatizza
Principio #8: L’allineamento dirige gli occhi
Principio #9: I gruppi dispari creano concentrazione
Principio #10: La ripetizione unisce una composizione
Principio #11: Le linee suggeriscono il movimento
Principio #12: Le griglie organizzano un design
Gerarchia visiva Infografica
Che cos’è la gerarchia visiva?
La gerarchia visiva è un principio di design che si riferisce a come gli elementi sono disposti in un design. La gerarchia visiva aiuta i designer e gli sviluppatori a disporre ogni elemento in modo logico che aiuta il visual ad essere digerito correttamente.
In un design, questo significa che l’intestazione sarà in cima nel carattere più grande, con ogni elemento successivo dimensionato in base all’importanza. Questo aiuta l’utente a capire meglio il flusso in modo da sapere dove guardare per primo.
La ragione per cui la gerarchia visiva è un principio così importante da capire è perché è compito del designer creare la gerarchia in modo tale che lo spettatore non debba nemmeno pensare a dove guardare per primo. Il suo occhio è automaticamente attratto da ogni elemento nell’ordine esatto in cui è destinato ad essere visto.
Abbiamo anche creato una versione video di questo post del blog per aiutarti a capire meglio la gerarchia visiva. Puoi guardarlo qui sotto.
1 La dimensione influisce sulla visibilità
Più grande è meglio, giusto? Mentre il classico adagio è ancora in discussione, la dimensione è probabilmente il modo più efficace per enfatizzare gli elementi visivi. In poche parole, gli elementi più grandi attirano l’attenzione più di quelli più piccoli.
È la ragione precisa per cui i titoli dei giornali appaiono in caratteri più grandi, e le storie più importanti hanno spesso titoli ancora più grandi degli articoli sul resto della pagina. In qualsiasi design, gli elementi più grandi – che siano parole o immagini – non solo saranno più evidenti, ma porteranno anche il messaggio più forte.
Nota nell’esempio precedente come la parola più grande sia anche la più impressionante ed emotiva. I lettori sono molto più propensi a rispondere rapidamente alla parola “cracking” rispetto alla seconda parola più grande, la base “performance”. Il design non sarebbe altrettanto efficace se le parole fossero della stessa dimensione o se un’altra parola sulla pagina, come “atto” o “tempo” fosse ancora più grande.
Un altro principio importante legato a questo concetto è la scala, che è la dimensione di un oggetto in relazione ad un altro. Un singolo oggetto, non importa quanto grande o piccolo, non ha scala finché non viene paragonato ad un altro. Ci permette di creare equilibrio in un design e di concentrarci sugli elementi dominanti. Maggiore è la scala, maggiore è l’enfasi.
2 La prospettiva crea un’illusione di profondità
Utilizzando la prospettiva, i designer possono creare un’illusione di profondità che va da pochi centimetri a diverse miglia. Poiché vediamo simili illusioni nel mondo reale, generalmente percepiamo gli oggetti più grandi come più vicini di oggetti simili più piccoli e, quindi, di solito comandano l’attenzione prima di qualsiasi altro oggetto su una pagina.
Per esempio, un’illustrazione di una strada sarà di solito più larga nel suo punto più basso e gradualmente diventerà più stretta quanto più in alto si estende sulla tela. Allo stesso modo, un oggetto più vicino allo spettatore apparirà sempre più grande dello stesso oggetto più lontano.
La prospettiva corretta utilizzerà sia la scala che le proporzioni per comunicare accuratamente la distanza appropriata. Un disegno di un tratto di strada di cinque miglia si allontanerà molto più nettamente di un tratto di mezzo miglio disegnato sulla stessa tela.
3 Colore e contrasto attirano l’attenzione
Spotify’s Found Them First
Considera il design sopra. Notate come attira molto di più l’attenzione quando i toni naturali sono stati evidenziati da colori al neon? La combinazione di colori è nota come duotone, una tendenza sempre più popolare nel web-design. L’effetto, che stratifica una coppia di colori contrastanti su una foto, si presta a disegni sorprendenti che figurativamente saltano fuori dalla pagina o dallo schermo.
Colori drammaticamente contrastanti possono anche enfatizzare elementi specifici rispetto a uno spettro su una scala più delicata. Posizionare un oggetto rosso su uno sfondo verde o nero attirerà più attenzione dello stesso oggetto rosso su uno sfondo arancione o viola.
Le combinazioni di colori usate in un design, e come si relazionano tra loro, sono note come schema di colori. La scelta di una combinazione di colori da parte di un designer può creare unità, armonia, ritmo ed equilibrio all’interno di una creazione, ma può anche creare contrasto ed enfasi.
Un design che usa troppi colori contrastanti apparirà spesso disorganizzato e incoerente. Lo stesso si può dire a volte dei design che usano uno schema di colori che non aderisce alla teoria del colore. Ma scegliere la migliore tavolozza implica molto di più che scegliere a caso una combinazione monocromatica, complementare o tetraedrica.
Colori simili possono essere usati per raggruppare elementi correlati in un design, e la scelta del colore può anche suggerire peso e distanza. I colori più caldi, come il rosso e il giallo, avanzano in primo piano in un disegno con uno sfondo scuro, mentre i colori freddi come il blu o il verde di solito si ritirano sullo sfondo. Il contrario avviene con un disegno su uno sfondo chiaro: I colori freddi come il blu e il verde appaiono più vicini dei colori caldi. È solo il modo in cui l’occhio umano lo percepisce.
Le combinazioni di colori efficaci si basano non solo sulla posizione di ogni tinta sulla ruota dei colori, ma anche sul suo calore e contrasto con i colori circostanti. Guarda il tutorial di Visme su come scegliere schemi di colori d’impatto.
4 Font organizzano il design
Pensa a uno schema, un curriculum tradizionale o un indice. Generalmente, ognuno è composto da diverse dimensioni di carattere, con i titoli principali in una dimensione di punto maggiore rispetto alle sottosezioni e ai dettagli più piccoli. Usare una varietà di dimensioni non solo enfatizza ciò che è più importante, ma organizza anche il design generale del documento.
Le gerarchie di caratteri possono essere create con testo di varie dimensioni, pesi e spaziature – o una combinazione di ogni elemento. Anche se un singolo carattere è usato in tutto il progetto, variare la sua dimensione e il suo peso non solo attira l’attenzione sugli elementi più importanti, ma crea una composizione generale che è facile da leggere e capire.
Immaginate un curriculum che usa caratteri più grandi e più audaci per le referenze che per il nome del candidato. Non solo potrebbe apparire sciatto, ma probabilmente causerebbe una buona dose di confusione per coloro che scansionano velocemente una montagna di domande.
Similmente, un design che presenta una serie di caratteri che sono tutti della stessa dimensione, font e peso non attirerà efficacemente l’attenzione su molto di qualcosa – una sfida che deve essere affrontata rapidamente con un pubblico che spende frazioni di secondo per valutare la qualità del vostro design.
E’ per questa ragione che la maggior parte dei programmi di web-design offrono non solo una selezione manuale degli attributi dei caratteri, ma una gerarchia preimpostata che consiste in caratteri per titoli, sottotitoli e titoli graduati, oltre al testo di base. Sembra più organizzato e facile da leggere quando tutte le parole hanno la stessa dimensione, o quando vengono applicati i principi della gerarchia?
5 Lo spazio fornisce enfasi e movimento
Regola dello spazio
Uno dei principi più basilari della composizione visiva riguarda ciò che si lascia fuori dal proprio design. Secondo la Regola dello spazio, un design esteticamente piacevole richiede la sua giusta quota di spazio negativo senza disordine, spesso chiamato “spazio bianco”, indipendentemente dal colore di sfondo effettivo del design.
Quando si organizzano gli elementi di una composizione, i designer possono usare lo spazio intorno al contenuto per attirare l’attenzione su elementi particolari – si pensi a un singolo elemento su una pagina bianca – o per inviare un messaggio visivo completamente separato, come la “freccia” nascosta nel famoso logo FedEx.
La spaziatura strategica può anche attirare gli occhi degli spettatori attraverso la pagina in una sequenza mirata, contribuendo ai modelli di scansione della pagina.
Modelli di scansione della pagina
I lettori tendono a scansionare le pagine in base a modelli particolari, osservabili attraverso i loro movimenti degli occhi. Quando i designer vogliono che il pubblico noti gli elementi in un ordine particolare, spesso si basano sui modelli più comuni.
I madrelingua inglesi, per esempio, leggono da sinistra a destra. Pertanto, di solito presentano uno schema di scansione simile quando si trovano di fronte a una pagina di testo. L’arabo, invece, è scritto da destra a sinistra. Chi è abituato a leggere quella lingua è più propenso a scansionare le pagine in questa direzione “opposta”. I designer dovrebbero tenere a mente queste differenze quando creano contenuti per un pubblico globale.
F-Patterns
Il modello di movimento degli occhi più comune nei lettori inglesi è il modello F. Perché? Perché è proprio così che leggiamo un libro, una lettera o una pagina web. Scansioniamo la pagina da sinistra a destra lungo la parte superiore e di nuovo per ogni riga di testo fino a raggiungere il fondo della pagina.
A causa di questa tendenza naturale, i designer utilizzano più spesso il modello F quando compongono siti web e altre illustrazioni che si basano molto sul testo. Perché leggere in qualche altra direzione è semplicemente scomodo quando non è quello a cui siamo abituati.
Il modello Z
I disegni che si basano maggiormente sulle immagini sono spesso composti in un modello Z. Poiché il cervello elabora le immagini più velocemente del testo, i lettori possono scansionare la pagina velocemente guardando in alto da sinistra a destra, poi giù per la pagina in modo diagonale prima di completare la scansione attraversando di nuovo da sinistra a destra (o da destra a sinistra se il pubblico legge tipicamente in quella direzione).
I designer possono enfatizzare certi elementi di una composizione mettendoli lungo questo comune schema a “Z” del movimento degli occhi. Pensate a un titolo, un’immagine e un sottotitolo.
6 La vicinanza suggerisce relazioni
La vicinanza, o dove gli elementi appaiono in relazione l’uno all’altro, è uno degli elementi di base della composizione. In parole povere, mettere vicini elementi correlati suggerisce ai lettori che sono, di fatto, correlati.
Pensate a uno schermo bianco con un gruppo di cinque punti su un lato e un singolo punto sull’altro lato. La nostra prima supposizione sarà sempre che i cinque sono, in effetti, un gruppo.
Posizionare elementi vicini può inviare anche altri messaggi. Per esempio, mettere gli elementi in certe posizioni su una mappa può fornire al pubblico una comprensione della distanza, sia vicina che lontana. Naturalmente, questo dipende anche dalle dimensioni e dalla scala della mappa. Un pollice non è sempre un miglio.
Posizionando gli elementi in particolare prossimità l’uno dell’altro, si possono creare immagini e messaggi aggiuntivi. Pensa a quanto spesso vedi tre cerchi e una linea posizionati in modo da suggerire la forma di una faccia felice o triste? L’immagine suggerita guadagna spesso più attenzione dei suoi singoli elementi. Vedi una faccia felice o vedi tre cerchi e una linea?
7 Lo spazio negativo enfatizza
Le composizioni prive di ampi spazi negativi possono risultare in un design confuso e caotico. In altre parole, meno è meglio. I designer esperti possono anche utilizzare lo spazio vuoto per suggerire un ulteriore messaggio visivo. Basta pensare alla “freccia” implicita nel centro del famoso logo FedEx, o al design della Coca-Cola, qui sopra.
8 L’allineamento dirige gli occhi
Molti disegni visivi sono centrati o giustificati, il che significa che sono distanziati su una pagina in modo da condividere entrambi i margini sinistro e destro. Se le parole fossero sparse a caso su una pagina in ogni direzione, creerebbero uno scenario piuttosto confuso.
Nei design F-pattern, gli oggetti sono generalmente allineati a sinistra, mentre gli Z-pattern spesso utilizzano una combinazione di allineamenti a sinistra, al centro e a destra, come nella pubblicità qui sopra.
I disegni visivi semplici si allineano più frequentemente al centro della cornice, un formato che fornisce equilibrio e armonia, ed è anche esteticamente piacevole.
La maggior parte dei lettori occidentali sono abituati a leggere da sinistra a destra di una pagina. Di conseguenza, i design con testo sono spesso allineati al margine sinistro nello stesso modo.
Gli allineamenti a destra sono spesso impiegati per fornire equilibrio a un design complessivo che può essere visivamente più pesante sul lato sinistro. Allo stesso modo, gli allineamenti a sinistra possono offrire lo stesso effetto nello scenario inverso.
9 I gruppi dispari creano il focus
La regola delle probabilità permette ai designer di enfatizzare particolari immagini mettendole al centro di un gruppo. Mettendo un numero uguale di oggetti vicini su entrambi i lati del punto focale principale – creando così un gruppo dispari – il risultato punta chiaramente all’elemento visivo più importante, situato al centro.
Per esempio, un gruppo di uno o tre elementi è più impressionante di una singola coppia. Allo stesso modo, i gruppi composti da un numero dispari di oggetti sono quasi sempre considerati più interessanti ed esteticamente piacevoli dei gruppi pari. Perché? Le persone si sentono più a loro agio con l’equilibrio.
10 La ripetizione unisce una composizione
Pensate alla maggior parte dei testi pubblicati. I disegni delle pagine sono organizzati in modo tale che il testo del corpo è tutto un font, i titoli dei capitoli sono un altro e le note a piè di pagina sono un terzo font diverso, il tutto coerente in tutta la pubblicazione. Questa ripetizione di stile crea un lavoro coesivo, riconosciuto come un tutto.
Per un design unificato, ripetere qualche elemento – che sia il carattere, il colore, la forma o la dimensione – attraverso l’intera composizione. Gli stili coerenti aiutano a definire chiaramente la gerarchia visiva di qualsiasi design.
Prendi, per esempio, l’infografica nell’introduzione con i nostri 12 principi di gerarchia visiva. Ripetere gli stessi font e stili in tutto il documento unifica chiaramente la lista e dice ai lettori che ogni voce è parte di un tutto.
La ripetizione può anche dare un nuovo significato agli elementi. Quante volte vi capita di vedere il testo sottolineato in blu spiccare su una pagina? Abbastanza da riconoscere immediatamente il carattere come un collegamento ipertestuale, giusto? Ripetere questo stile in un design dice al tuo pubblico dove cliccare per maggiori informazioni. Quali altri stili popolari possono dare al tuo design un significato aggiuntivo?
11 Le linee suggeriscono il movimento
Il movimento è uno dei modi più efficaci per attirare l’attenzione degli spettatori, specialmente quando è implicito in un design fermo. Le linee sono ovviamente efficienti nell’indicare gli elementi di enfasi – basta pensare a una freccia – ma non devono apparire fisicamente sulla pagina per fare il trucco.
Le linee guida possono essere implicite attraverso l’uso di elementi ripetuti – pensate a una fila di punti – la vicinanza di oggetti o forme, così come la relazione tra spazio positivo e negativo. Per esempio, inclinando un oggetto verso l’alto o verso il basso, si possono creare linee che suggeriscono il volo o la discesa.
12 Le griglie organizzano un design
I design più efficaci sono composti attraverso qualche tipo di griglia. La griglia più tipica è la classica composizione modulare di linee verticali e orizzontali incrociate.
Artisti, fotografi e graphic designer hanno impiegato a lungo la regola dei terzi per migliorare l’equilibrio generale delle loro composizioni. La regola consiste nel dividere mentalmente una composizione in una griglia composta da due linee orizzontali e due verticali, o da nove sezioni separate.
Elementi visivi importanti sono collocati lungo le linee, sottolineando i quattro punti in cui le linee si incontrano. Le composizioni decentrate sono generalmente considerate più gradevoli dal punto di vista estetico rispetto ai disegni in cui il punto focale principale è posto al centro della cornice. La regola incoraggia l’uso dello spazio negativo, la vicinanza intelligente degli elementi e l’allineamento efficace.
Non solo è la più comune, ma la griglia modulare è generalmente il design più leggibile. Eppure, a volte il modo migliore per creare enfasi è quello di rompere le regole.
Disegni alternativi della griglia
Invece della classica griglia verticale-orizzontale, i designer potrebbero scegliere una composizione in diagonale per assicurarsi che la loro creazione si distingua su una pagina e attiri l’attenzione generale degli spettatori.
Rottura della griglia
Alcuni designer sceglieranno di rompere completamente la griglia, mettendo a caso gli elementi visivi su una pagina per distinguersi meglio dal testo circostante bloccato nella griglia. Il testo circostante può essere nello stesso design o su una pagina circostante.
Non fatevi ingannare dal concetto di casualità. Sparpagliare a caso gli elementi su uno sfondo senza una specifica ragione o strategia non si trasformerà miracolosamente in un capolavoro di Jackson Pollock. Quando si rompe la griglia, ogni scelta deve ancora essere calcolata e con uno scopo.
I principi di gerarchia visiva sono alcune delle strategie più efficaci per enfatizzare gli elementi di un design e chiarire un messaggio visivo. Ma come in molte cose della vita, si può avere troppo di una cosa buona.
I designer devono scegliere saggiamente quali principi impiegare, o rischiano di diluire qualsiasi enfasi e di rompere la gerarchia visiva. Se tutto risalta, allora niente risalta.
Non sei sicuro che la tua gerarchia sia efficace? Allora testatela. Fissa semplicemente lo spazio davanti alla tua pagina o al tuo schermo, lasciando che il design attuale svanisca nello sfondo fino a diventare una macchia di forme e colori. Cosa risalta?
Oppure, per evitare di diventare strabici, potete usare il test della sfocatura facendo uno screenshot del vostro design, aprendolo in Photoshop e applicando il filtro Gaussian Blur.
Se l’attrazione principale è ancora l’elemento o gli elementi che avete pianificato di enfatizzare, la vostra gerarchia visiva è efficace.
Visual Hierarchy Infographic
Get an at-a-glance understanding of what visual hierarchy means and how it can be implemented by scrolling through this infographic below.
Embed on your site:
<script src=”//my.visme.co/visme.js”></script><div class=”visme_d” data-url=”ep88eydm-12-visual-hierarchy-principles-every-non-designer-needs-to-know” data-w=”800″ data-h=”6404″></div><p style=”font-family: Arial; font-size: 10px; color: #333333″ >Created using <a href=”http://www.visme.co/make-infographics” target=”_blank” style=”color: #30a0ea”><strong>Visme</strong></a>. An easy-to-use Infographic Maker.</p>