# Gerarchia visiva: far leggere le persone nell’ordine giusto [Canonical HTML page](https://gradiently.design/it/guide/visual-hierarchy) Ogni design viene letto in un certo ordine. Se non lo scegli tu, lo sceglie l’elemento più rumoroso. Ecco come decidere cosa viene prima, seconda e terza, e farlo accadere. ## The short version - 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. 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 | I cinque strumenti. La maggior parte dei design efficaci ne usa due o tre sullo stesso elemento principale. ## 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. Un post verticale per un evento con Serata di lancio come titolo grande, la data sopra e tre brevi righe di dettaglio sotto 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](https://gradiently.design/it/guide/typography-basics), 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. - Sfondo: #0f1222 - Testo principale: #f5f3ee - Testo secondario: #a7a9be - Accento, usato una volta: #ffb454 Una palette con la gerarchia già incorporata. Il testo principale ha il contrasto più alto con lo sfondo (circa 16,8:1), quello secondario sensibilmente meno (circa 8:1, ancora molto leggibile), e l’accento è riservato a un solo elemento. 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](https://gradiently.design/it/guide/color-contrast-accessibility). La [regola 60-30-10](https://gradiently.design/it/guide/60-30-10-rule) è 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](https://gradiently.design/it/guide/youtube-thumbnail-design) 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. Un post verticale con un titolo che annuncia dodici laboratori e una riga di supporto Guidano le parole: il titolo porta la notizia e il dettaglio la sostiene. Un post verticale con un grande numero 12 e le parole laboratori questo autunno 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](https://gradiently.design/it/guide/text-on-gradient) 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](https://gradiently.design/it/guide/announcement-post-design). ## FAQ ### 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.