L'uso dei punti di riferimento rende il layout della pagina facile
Un design potrebbe avere un impatto. Potrebbe avere stile. Ma avere questi non è abbastanza.
Per funzionare bene, un progetto deve avere elementi che giocano i reciproci punti di forza. Fortunatamente, ogni pezzo di contenuto ha linee guida intrinseche.
Il layout o la disposizione dei contenuti su una pagina Web è fondamentale per il successo di un design. Tra le altre cose, il layout dà la priorità al contenuto per guidare le persone da un elemento all'altro.
Se fatto bene, le persone saranno così interessate al contenuto che non noteranno nient'altro.
Continua a leggere per ulteriori dettagli e suggerimenti per la creazione di layout che funzionano nei tuoi progetti.
Con l'esempio sotto, la maggior parte delle persone noterà prima la foto o il titolo, poi il testo e infine i collegamenti.
Potrebbero non notare che il titolo, il testo e il volto del modello sono impostati rispettivamente un terzo e due terzi nella pagina (rispettando la regola dei terzi), o che il titolo e i collegamenti sono scritti con colori campionati dalle labbra del modello, o che il la curva della sua spalla porta l'occhio verso gli inviti all'azione.
Testo, foto e titolo costituiscono una composizione. Se uno cade fuori posto, l'intero pezzo fallisce.
Accordo basato sul rispetto reciproco
Dove mettiamo le cose? Lascia che ci dica. Le stranezze di grafica, foto e frammenti di testo diventano evidenti quando si incontrano su una pagina. Alcuni lavorano insieme meglio di altri, e alcuni funzionano solo se posti in un certo modo. Ad esempio, il nostro layout funziona tecnicamente in due modi:
La Figura 1 mostra il layout utilizzato nel nostro esempio sopra. I blocchi grigi rappresentano il titolo, la foto e il testo.
La Figura 2 mostra come gli stessi principi si applicherebbero alla sua inversione: un grande elemento bilanciato da due elementi più piccoli. Questa foto in particolare sembra migliore a destra, però.
Il nostro modello sta guardando a sinistra. Nella figura 1, sta guardando il testo. Nella figura 2, sta guardando lontano dal testo. Potrebbe aver funzionato se guardava la telecamera, ma poiché sta guardando altrove, perde un po 'di impatto. Non molto, ma abbastanza per importare.
Il modello mostra alternativamente interesse per il testo e, quando invertito, lo ignora. La disposizione degli elementi stabilisce un atteggiamento positivo o negativo.
Allineamento basato su punti di riferimento
A volte la cosa che fa funzionare gli elementi in un certo modo fornisce anche indizi su spazio e allineamento. Abbiamo notato come gli occhi della modella puntino a sinistra, ma la foto e il testo contengono altri segnali visivi.
Le linee implicite tra i punti di riferimento nella tipografia e l'immagine abbondano in questa composizione:
- L'occhio e le labbra della modella e il bordo del suo naso incontrano il bordo della colonna di testo di destra.
- La colonna di testo a sinistra incontra il bordo sinistro del titolo. Raggiunge quasi il bordo dei capelli della modella, ma non riesce a rimanere coerente con la colonna di destra.
- Il volto del modello (in particolare occhi e bocca) definisce lo spazio verticale del titolo.
- Il fondo della foto segna il terzo inferiore della composizione (nella regola dei terzi).
- Gli occhi della modella sono un terzo dalla parte superiore della composizione.
- Il centro del volto della modella e il bordo destro del titolo si incontrano in punti di un terzo e due terzi della larghezza della composizione.
Alcuni punti di riferimento hanno più potere di altri. Designer e fotografi potrebbero discutere, ad esempio, se gli occhi della modella sono più influenti della sua silhouette. Ma un layout basato su qualsiasi punto di riferimento è migliore di un layout che li ignora.
Utilizzo delle funzionalità per creare armonia
I non designer che si cimentano con i layout a volte organizzano elementi in base a come si adattano alla pagina. Lo spazio dovrebbe essere rispettato, ma non sempre porta al miglior design.
La Figura 5 allinea gli elementi allo spazio della pagina e basa tutto sui bordi della tela.
La Figura 6 , tuttavia, basa il suo layout sui punti focali della foto. Il risultato è un aspetto più snello.
La Figura 5 è inefficiente perché gli spettatori rimbalzano tra i punti focali: fino al titolo, fino alla faccia, fino al testo. La linea più semplice è diritta. Quindi, la figura 6 guida lo sguardo dello spettatore facilmente da sinistra a destra, da un elemento a quello successivo. Il punto cruciale del secondo layout è una banda stretta che corre lungo l'allineamento titolo-faccia-testo.
In queste immagini, i lettori sono attratti dal volto della modella, dal titolo e dal testo, solitamente in quell'ordine. Ecco tre aree diverse da guardare. Allineandoli dà l'attenzione al layout.
La risposta giusta
Tutti e tre i layout sottostanti utilizzano lo stesso titolo, foto e elementi di testo:
Il primo layout ha il maggior "respiro". Il secondo rispetta il testo. Il terzo layout utilizza uno spazio negativo per raggiungere l'equilibrio. Tutti e tre usano i punti di riferimento, ma in modi diversi. È uno dei migliori?
Cercare una risposta ci può rendere ciechi all'ovvio: che le soluzioni multiple possono essere ugualmente valide quando gli elementi lavorano insieme. I punti di riferimento visivi sono opportunità, non regole. Dai un'occhiata al primo design.
Più gli elementi sono conformi alle linee implicite, più un elemento non conforme risulterà evidente. Qui, il progettista spezza la parola "Punti di riferimento" dall'allineamento verticale dell'altro testo, enfatizzando così la parola chiave.
Non c'è dubbio su ciò che la pagina sta promuovendo. Il successo non è misurato dal modo in cui gli elementi sono conformi ai principi del design, ma dal modo in cui la pagina comunica il suo messaggio.
Scritto esclusivamente per il Webdesigner Depot di Ben Gremillion. Ben è un scrittore e designer freelance chi risolve i problemi di comunicazione con un design migliore.
Come segui i punti di riferimento sui tuoi progetti? Cosa funziona meglio per te e cosa no?