Quando un elemento usa uno spazio asimmetrico, si distingue dagli altri elementi circostanti. Apparirà più vivace, che è particolarmente utile se stai progettando aree di una pagina in cui un link / pulsante richiede più attenzione di altri.
Oggi daremo un'occhiata più da vicino all'asimmetria espressa attraverso il contrasto, la spaziatura e il layout. Stiamo pensando al contrasto osservabile e a come lo spazio attira l'attenzione.
L'asimmetria non riguarda sempre le relazioni esterne con margini, riempimento o grondaie.
L'asimmetria può riguardare anche le relazioni interne come le miniature delle immagini o l'allineamento del testo. Ad esempio, una galleria di immagini può mostrare 5 miniature in cui il pollice centrale è leggermente più grande delle altre, utilizzato principalmente per catturare l'attenzione. L'asimmetria è ottima per attirare l'attenzione su una particolare area della pagina o un particolare elemento nella pagina.
E, come abbiamo descritto nell'e-book Web UI Design per l'occhio umano, a volte l'asimmetria è utile solo per il gusto dell'asimmetria.
Diamo un'occhiata più da vicino all'asimmetria espressa attraverso il contrasto, la spaziatura e il layout.
Contrasto osservabile
Rimuovendo le distrazioni, costringi gli utenti a concentrarsi solo su ciò che è immediatamente visibile.
È quindi possibile applicare effetti di progettazione a queste aree come gradienti di sfondo o persino animazioni jQuery. Questi effetti possono essere usati su uno o due elementi per farli risaltare dagli altri.
Uno dei nostri esempi preferiti di questo effetto risiede nella homepage di Sketch di Bohemian Coding. La homepage mescola i colori scuri e chiari per fondere il contrasto in un unico layout unificato.
Nella sezione dell'intestazione, noterai che ci sono due pulsanti: uno per una prova gratuita e l'altro per l'acquisto del software. Entrambi i pulsanti sono colorati in blu e occupano lo stesso spazio. Tuttavia, il pulsante di prova gratuito utilizza un? Vuoto? sfondo che viene comunemente chiamato pulsante fantasma. Strutturato in cima all'intestazione scura, il pulsante di prova gratuito sembra sfocata sullo sfondo.
Poiché il pulsante di acquisto utilizza uno sfondo blu chiaro e un testo bianco, si staglia forte e forte sullo sfondo scuro. Quando esegui rapidamente la scansione degli occhi sull'intestazione, è abbastanza ovvio che il pulsante di acquisto attiri l'attenzione quasi immediatamente. Ciò è causato dalle scelte di colore ma anche dallo spazio bianco aggiunto tra gli elementi.
Lo spazio bianco verticale e orizzontale viene utilizzato in modo che i pulsanti appaiano separati dal testo dell'intestazione. Poiché un pulsante è più luminoso dell'altro, si distingue naturalmente poiché c'è molto spazio e non molto altro nel modo di attirare l'attenzione.
È possibile visualizzare uno stile di pulsante simile nell'area del piè di pagina:
In questo caso, gli utenti hanno solo la possibilità di inviare la loro e-mail o nascondere le informazioni.
Poiché Sketch ti chiede di inviare la tua e-mail il più rapidamente possibile dopo averlo inserito, la spaziatura è molto più stretta tra il campo di inserimento e il pulsante Invia. Questo segue la legge di Fitts poiché quando riduci la distanza (e la dimensione rimane fissa), acceleri il tempo necessario per spostarti tra gli elementi.
Infine, nota che la dimensione asimmetrica del modulo di input rispetto al pulsante Invia attira anche gli occhi su quella parte della pagina, che è esattamente ciò che vuole Sketch.
Usa lo spazio bianco a tuo vantaggio per disegnare occhi vagabondi su determinati elementi della pagina. Per sperimentare e scoprire ciò che funziona meglio, provare diversi metodi di test A / B per diversi valori di spaziatura.
Ecco alcune note generali che possono essere raccolte dal sito Web di Sketch:
- Il contrasto non si riferisce sempre al colore. Può anche riferirsi a elementi contrastanti di spazio, dimensioni e posizione rispetto ad altri elementi sulla pagina.
- Lo spazio vuoto può essere ovvio o poco appariscente a seconda del contesto.
- Gli elementi circostanti svolgono un ruolo importante nella visibilità naturale di altri elementi.
- La simmetria crea memoria e armonia, mentre l'asimmetria attira l'attenzione. Equilibra entrambi di conseguenza.
Lo spazio guida l'attenzione
Puoi trovare un esempio leggermente diverso sulla homepage di Procreate, uno strumento di disegno e pittura digitale per iPad. Sfogliando la pagina, noterai che l'intero layout è scuro e presenta elementi di pagina di dimensioni molto più grandi.
Il design dimostra come è possibile attirare l'attenzione su elementi singolari su una pagina molto grande. Schermate, quadri dimostrativi e funzionalità riprendono le proprie sezioni.
Lo spazio bianco separa il testo e il contenuto visivo. Il design è particolarmente degno di nota nel suo uso dei colori del testo per distinguere tra intestazioni (contrasto più elevato) e testo di pagina generale (contrasto inferiore).
Suddividendo una pagina in sezioni, si crea una gerarchia di contenuto naturale. Divisione di queste sezioni con stili unici (sfondi a schermo intero, tipografia sovradimensionata, schermate dell'app) le divisioni diventano ancora più evidenti.
Tieni presente che non tutti i siti web possono trarre vantaggio da ampie divisioni di contenuti, ma questa sembra essere una tendenza molto popolare tra i designer. Sembra fantastico se eseguito correttamente.
Il layout alternato
In superficie, il contenuto alternato può sembrare fastidioso perché costringi lo sguardo del lettore a saltare. Ma dal momento che il contenuto è distanziato così bene, è molto più facile leggere un modello Z di quanto si possa immaginare.
Il modello costringe anche i visitatori a rimanere in punta perché il design non è un'informazione di alimentazione del cucchiaio. Naturalmente, questo schema è possibile solo perché lo spazio bianco di buon gusto scolpisce il percorso per la scansione.
Guardando la pagina di Wunderlist, possiamo vedere questo modello asimmetrico emergere nello spazio bianco. La spaziatura asimmetrica viene eseguita con cura in modo che sembri interessante senza essere irritante.
Possiamo imparare molto dai modelli di progettazione dimostrati dall'uso di spaziatura di Wunderlist:
- L'asimmetria ha il suo scopo quando si cerca di attirare l'attenzione su certe aree della pagina.
- L'asimmetria in uno schema ripetitivo diventa simmetria.
- Anche i pattern di spazio tra testo o grafica appariranno come uno schema più grande.
- Lo spazio bianco dovrebbe rendere i contenuti di navigazione più facili e più prevedibili.
Ulteriori letture
Puoi apprendere più tecniche di progettazione attuabili nell'ebook gratuito Web Design Trends 2016. La guida di 185 pagine illustra le 10 migliori pratiche in modo molto dettagliato. Troverai 165 esempi analizzati dalle migliori aziende di oggi.