In breve
- La gerarchia visiva è l’ordine in cui le persone notano e leggono le parti di un design.
- La gerarchia si controlla con cinque strumenti: dimensione, peso, colore e contrasto, posizione e spazio.
- La maggior parte dei design non ha bisogno di più di tre livelli: una cosa vista per prima, poche cose viste dopo e i dettagli per ultimi.
- L’elemento con il maggior contrasto rispetto a ciò che lo circonda di solito si vede per primo, qualunque sia la sua dimensione, quindi i colori d’accento vanno spesi su una cosa sola.
- La prova dello sguardo socchiuso, sfocare la vista finché restano solo le forme, mostra a colpo d’occhio quale elemento guida davvero.
In questa pagina
La gerarchia visiva è l’ordine in cui le persone notano e leggono le parti di un design. La controlli con cinque strumenti: dimensione, peso, colore e contrasto, posizione e spazio. Una gerarchia chiara ha una cosa che si vede per prima, poche cose che si vedono dopo e dettagli che si trovano solo quando qualcuno li cerca. Senza di essa, tutto compete e le persone non leggono niente.
I cinque strumenti della gerarchia visiva
Ogni strumento funziona allo stesso modo: rende un elemento diverso da quelli vicini. Più grande è la differenza, prima l’elemento viene visto. Usare più strumenti sullo stesso elemento lo rafforza; usarli su elementi diversi li mette in competizione.
| Strumento | Come crea enfasi | Esempio |
|---|---|---|
| Dimensione | Ciò che è più grande si vede prima | Un titolo grande il doppio del testo intorno |
| Peso | I tratti più spessi risaltano | Una data in grassetto in una riga di testo normale |
| Colore e contrasto | Vince il colore più diverso | Un solo accento oro su un design scuro e quieto |
| Posizione | L’alto e l’inizio della direzione di lettura vengono prima | Il titolo in alto a sinistra |
| Spazio | Gli elementi isolati attirano lo sguardo | Una sola riga con ampi margini intorno |
Decidi l’ordine prima di progettare
I problemi di gerarchia sono di solito problemi di decisione. Se non hai deciso cosa conta di più, il design non può mostrarlo. Prima di aprire uno strumento di design, metti in ordine i contenuti.
- 1
Elenca tutto
Ogni porzione di testo e ogni immagine che il design deve contenere.
- 2
Scegli la cosa principale
Se le persone ricordassero un solo elemento, quale dovrebbe essere? Quello è il livello uno.
- 3
Raggruppa le informazioni di supporto
Le due, tre o quattro cose che servono subito dopo, come una data, un luogo o una breve spiegazione. Quello è il livello due.
- 4
Tutto il resto è dettaglio
Nomi utente, note in piccolo, loghi. Quello è il livello tre, piccolo e quieto.
- 5
Taglia ciò che non trova posto
Se qualcosa non trova un livello, probabilmente va nella didascalia o nella slide successiva.
Tre livelli: prima il nome dell’evento, poi la data sopra e i dettagli sotto, ognuno un gradino netto più piccolo.
Dimensione e peso
La dimensione è lo strumento più forte, e il più facile da sbagliare per timidezza. Se un titolo è solo leggermente più grande del testo sotto, i due sembrano un errore più che una gerarchia. Rendi evidenti i salti tra i livelli; una scala tipografica, come descritto in le basi di tipografia, li mantiene coerenti.
Gerarchia piatta
- Titolo appena più grande del testo
- Tutto in grassetto, quindi niente lo è
- Quattro dimensioni diverse quasi uguali
- Due titoli dello stesso peso
Gerarchia chiara
- Titolo grande circa il doppio del testo, almeno
- Grassetto riservato alle poche parole che devono guidare
- Tre dimensioni con salti netti tra loro
- Un titolo, una riga di supporto
Colore e contrasto
L’occhio va prima a ciò che è più diverso da quello che lo circonda. Una piccola macchia di colore acceso su un design scuro e quieto batte un elemento più grande in un tono smorzato. Questo fa del colore d’accento un budget: spendilo sulla cosa che deve guidare, o sull’azione che vuoi far compiere, e da nessun’altra parte.
Abbassare il contrasto è il modo per mandare indietro le cose senza rimpicciolirle: un colore più morbido per didascalie ed etichette le mantiene leggibili ma dietro il titolo. Tieni anche il testo più quieto sopra i minimi indicati in il contrasto dei colori. La regola 60-30-10 è un altro modo di pensare a quanto usare di ciascun colore.
Posizione e direzione di lettura
Nelle lingue che si leggono da sinistra a destra, le persone tendono a partire dall’alto a sinistra e a muoversi verso destra e verso il basso, quindi gli elementi posizionati lì si vedono presto. Nelle lingue da destra a sinistra, l’angolo di partenza si inverte. I layout centrati e simmetrici partono dal centro e si allargano verso l’esterno, cosa adatta a design brevi con un solo messaggio, come poster, citazioni e annunci.
La posizione può anche giocarti contro. Nei formati social, i controlli della piattaforma coprono parti dell’immagine, e sulle miniature c’è un badge nell’angolo. Tieni il primo elemento lontano da quelle zone; il design delle miniature YouTube mostra come.
Spazio
Lo spazio fa due lavori. Intorno a un singolo elemento, lo isola, e l’isolamento si legge come importanza: una riga con margini generosi può superare un blocco di testo molto più grande. Tra gli elementi, li raggruppa: le cose vicine si leggono come parte di un insieme. Metti data e luogo vicini tra loro e più lontani dal titolo, e le persone li leggeranno come un’unica unità di dettaglio.
Guidano le parole: il titolo porta la notizia e il dettaglio la sostiene.
Guida un numero: lo stesso contenuto, riordinato perché la cifra si veda per prima.
Lo stesso contenuto può reggere gerarchie diverse. Quale scegliere dipende da cosa vuoi che le persone ricordino: l’idea o il numero.
Come verificare la gerarchia visiva
- La prova dello sguardo socchiuso. Socchiudi gli occhi o sfoca il design. La forma che risalta ancora è il tuo vero livello uno. Se non è quella che hai scelto, correggi.
- La prova dei due secondi. Mostra il design a qualcuno per due secondi, poi chiedigli cosa diceva. Dovrebbe ripetere il tuo livello uno.
- La prova della miniatura. Riducilo alla dimensione con cui apparirà su un telefono. I livelli due e tre possono sparire, e va bene; il livello uno no.
- La prova in scala di grigi. Togli il colore. Se la gerarchia crolla, si basava sulla tinta invece che sul contrasto di luminosità.
La gerarchia diventa più difficile quando lo sfondo è movimentato o colorato, perché il contrasto cambia sotto le parole; il testo su un gradiente spiega come mantenere leggibile il livello uno ovunque si trovi. Per gli annunci, dove la gerarchia conta di più, vedi come progettare un post di annuncio.
Le domande più frequenti
Che cos’è la gerarchia visiva?
La gerarchia visiva è l’ordine in cui le persone notano e leggono le parti di un design, controllato con dimensione, peso, colore e contrasto, posizione e spazio.
Quanti livelli di gerarchia dovrebbe avere un design?
Di solito tre: un elemento visto per primo, pochi elementi di supporto dopo e i dettagli per ultimi.
Che cos’è la prova dello sguardo socchiuso?
Socchiudi gli occhi o sfoca il design finché restano solo le forme. Ciò che risalta ancora è ciò che le persone noteranno per primo.
La dimensione è l’unico modo per creare gerarchia?
No. Peso, contrasto, colore, posizione e spazio creano tutti enfasi, e un piccolo elemento in un colore d’accento acceso può superare un elemento più grande e smorzato.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo
