Come utilizzare lo spazio negativo per creare siti Web straordinari

I siti Web e le app hanno tutti i tipi di elementi visivi che devono coesistere: pulsanti, colonne, icone, immagini, linee, media e tipografia. Tutti questi elementi hanno bisogno di una tela (la pagina web vuota) e quella tela ha bisogno di uno spazio vuoto, cioè uno spazio negativo o bianco. L'occhio dello spettatore non può elaborare ciò che vede senza di esso.

Iscriviti al nostro canale Youtube

Cos'è lo spazio negativo?

Lo spazio positivo è la parte del lavoro che è riempita con il soggetto o altri punti focali. Lo spazio negativo occupa il resto. Può essere vuoto o bianco, in contrasto di colore o design, una sottile immagine di sfondo: qualunque cosa sia, sembrerà vuota invece che piena o disordinata. Tuttavia, solo perché lo spazio negativo è vuoto, ciò non significa che non sia importante: attira l'attenzione sullo spazio positivo e talvolta diventa anche lo spazio positivo stesso se guardato in modo diverso.

Esempi di spazio negativo

Lo spazio negativo – e la sua controparte, lo spazio positivo – è in tutti i tipi di arte e design, incluso il web design. Diamo un'occhiata al logo FedEx. Vedi lettere viola e arancioni, vero? C'è una freccia lì dentro, però, nello spazio bianco:

Quella freccia FedEx nascosta utilizza lo spazio negativo in modo simile al disegno e alla pittura: il contorno viene creato proprio come viene creato lo spazio positivo. In un esempio come questo, lo spazio negativo non viene creato semplicemente perché è dove lo spazio positivo non è .

Il pavone della NBC fa la stessa cosa:

Mentre lo scopo dello spazio negativo è di solito mettere l'accento sullo spazio positivo, a volte diventa l'obiettivo in progetti intelligenti. Ecco un altro esempio: guarda come i denti del lupo formano un albero:

C'è un termine per questo: inversione figura-sfondo. Fondamentalmente significa che i colori di primo piano e di sfondo si scambiano di posto per cambiare prospettiva e interpretazioni. Se ti piace, dai un'occhiata al lavoro di MC Escher, in particolare le sue stampe di trasformazione.

Lo spazio negativo gioca lo stesso ruolo nella fotografia. Guarda questo ritratto che ho fatto al figlio di mio cugino, Julian. Lo sfondo nero mette tutta l'attenzione su di lui:

Puoi trovare uno spazio negativo nella natura, come nello spazio tra i petali dei fiori, e nel design funzionale, come nello spazio attraverso il manico di una tazza da caffè.

Lo usiamo anche sul nostro sito web. La nostra homepage ha un sacco di informazioni, ma non è travolgente a causa del modo in cui le abbiamo distanziate. E anche se lo sfondo ha accenni di colore e alcune forme da aggiungere al design, non distrae in alcun modo: dà comunque l'impressione di essere piacevolmente vuoto senza essere noioso ( ed è on-brand).

Tipi di spazio negativo

Ci sono alcuni tipi di spazio negativo. Micro e macro si riferiscono alla dimensione dello spazio negativo in una composizione. Attivo e passivo si riferiscono a ciò che queste aree fanno per l'utente.

Micro e macro spazio negativo

Il micro spazio negativo si riferisce ai piccoli spazi tra gli elementi: la spaziatura tra le righe di testo o l'area tra i collegamenti in un menu di navigazione. Ciò influisce sulla leggibilità del contenuto per il lettore. Se non c'è abbastanza spazio tra le righe o se il testo esce dai margini, l'utente avrà difficoltà a leggerlo e capirlo.

Lo spazio macro negativo è più grande; è lo spazio intorno al layout e gli spazi tra i grandi elementi di design. Un esempio è l'area tra i blocchi di contenuto. Sono le parti vuote del contenitore che contengono l'intero disegno.

I siti Web con piccole quantità di spazio macro negativo tendono ad essere altamente informativi. I siti web con grandi quantità di spazio macro negativo sono spesso minimalisti o mettono in mostra il lusso. Il primo esempio è di piccolo spazio macro negativo e il secondo è di grande spazio macro negativo:

Spazio negativo attivo vs. passivo

Lo spazio negativo attivo si aggiunge alla struttura della pagina, migliora il flusso dei contenuti e guida l'utente dove vuoi che vada. Lo spazio negativo passivo migliora l'aspetto del sito Web ma non sposta l'utente attraverso un flusso specifico. Quando lo spazio è decentrato e asimmetrico, di solito è attivo. Quando è bilanciato e simmetrico, di solito è passivo: evoca meno movimento, il che non costringe l'utente a guardarlo in un certo modo. Ecco un esempio di spazio negativo attivo:

Ed ecco un esempio di spazio negativo passivo:

Spazio negativo e composizione

Lo spazio negativo è importante per la composizione per diversi motivi:

• Hai bisogno di vedere lo spazio in una composizione per mantenerlo ben proporzionato.
• Ti permette anche di giocare con le relazioni tra i diversi oggetti in un design.
• Nel web design, può svolgere un ruolo importante per mantenere le persone sulla tua pagina.
• La quantità di spazio attorno a un elemento determina la concentrazione sull'elemento: più spazio significa più attenzione.

Scegliere il giusto equilibrio tra spazio negativo e positivo

Quanto spazio negativo e positivo utilizzerai dipenderà dal look che stai cercando e da cosa vuoi evocare nello spettatore.

• Se vuoi un design esteticamente gradevole, probabilmente utilizzerai parti uguali di spazio negativo e positivo.
• Per un design che sembra volutamente rigido e minimalista, sceglierai uno spazio più negativo.
• Per sembrare opprimente e in faccia, puoi optare per uno spazio più positivo.

I designer devono giocare con gli spazi finché non raggiungono il giusto equilibrio per il marchio e gli scopi previsti del sito web.

Decluttering di siti Web pesanti con testo con spazio negativo

Quando devi spremere una tonnellata di informazioni su una pagina, capire dove posizionare lo spazio negativo diventa complicato, specialmente se tali informazioni sono pesanti per il testo, che possono sembrare rapidamente disordinate. HostingDude è un ottimo esempio di troppo spazio positivo:

Il New York Times, d'altra parte, ha capito come imballare la loro homepage con le loro notizie senza far impazzire gli occhi, ed è tutto grazie alla spaziatura (e alle scelte di colore). Sebbene non ci sia molto spazio per il macro spazio, hanno sfruttato il micro spazio:

Anche se gli elementi su HostingDude sono più vicini, gli elementi sul sito Web del New York Times sembrano più unificati grazie allo spazio extra tra di loro. L'occhio riesce più facilmente a dare un senso alla pagina, il che le conferisce un design più completo e coeso. Quando l'occhio ha l'opportunità di riposare, è più in grado di cogliere ciò che sta vedendo. Lo spazio negativo crede che meno è di più.

Spezzare il testo con uno spazio negativo

Hai visto come i designer possono creare una homepage esteticamente gradevole e ricca di testo, ma per quanto riguarda i blocchi di testo più lunghi? Mescolare paragrafi brevi con quelli lunghi, titoli in grassetto, creare elenchi e aggiungere contenuti multimediali in un articolo aiutano a creare uno spazio negativo attorno alle parole, rendendolo più invitante per il lettore. L'aspetto conta, anche con la copia, e i grandi designer lo tengono in considerazione.

Spiegare il punto di spazio negativo ai clienti

I progettisti di siti web possono scontrarsi con i clienti sullo spazio negativo. I clienti vedono ancora più spazio per spremere informazioni importanti e redditizie. Sentono che lo spazio vuoto è spazio sprecato. I designer, d'altra parte, vedono l'interruzione visiva di cui l'occhio ha bisogno per assorbire effettivamente le informazioni che già esistono. Sanno che tutto lo spazio su un sito web è importante, anche lo spazio privo di contenuto.

È qui che gli strumenti di mockup e prototipazione tornano utili. Mostra al cliente due versioni del suo sito web, una con una piacevole quantità di spazio negativo e una sovraccarica di spazio positivo. Invitali a guardare i siti web fianco a fianco e chiedi loro di giocare con loro. La mia ipotesi è che si divertiranno a navigare in un sito Web ben progettato e si sentiranno persi in quello mal progettato.

Avvolgendo

I siti web hanno un sacco di elementi diversi e se vuoi che quegli elementi vivano in armonia e attirino lo spettatore, hai bisogno di uno spazio bianco intorno a loro. La quantità di spazio bianco che utilizzi e il suo funzionamento dipendono (a) dal tuo marchio e (b) dalle azioni che vuoi che l'utente intraprenda. Puoi anche essere creativo con lo spazio bianco, ad esempio invertendo i colori o disegnando con lo spazio negativo per definirlo in un modo interessante o strabiliante.

Qualunque sia l'approccio che prendi, lo spazio bianco dovrebbe sembrare equilibrato, ma ciò non significa necessariamente simmetrico. Invece, significa che gli elementi esistono su una pagina senza competere tra loro e attirando il tipo di attenzione che vuoi che abbiano. Per lo spettatore, equilibrio significa poter guardare un sito web senza confondersi o sopraffarsi.

Sperimenta con lo spazio bianco sul tuo sito web. Aggiungine un po', togline un po'. Riduci macro e aumenta micro, o viceversa. Verifica in che modo uno spazio più o meno vuoto attorno a determinati elementi incoraggia l'utente ad agire. La bellezza dello spazio bianco è che è una tecnica artistica, il che significa che non ci sono regole ferree.

Progettare un sito web di viaggi? Probabilmente utilizzerai molto spazio macro. Dai un'occhiata alla nostra carrellata di Divi Child Themes per i siti web di viaggio.

Immagine in primo piano tramite StockVector / Shutterstock.com