Quando si pensa allo spazio bianco nel web design, esempi come Apple o Google sono probabilmente i primi che vengono in mente. Mentre queste aziende fanno un ottimo lavoro nell'utilizzare lo spazio bianco nei loro progetti, ci sono molti altri modi per sfruttare al meglio lo spazio? anche se non è sempre bianco.!
Lo spazio bianco è una parte importante del piano di progettazione. Qui, esamineremo l'importanza dello spazio come strumento di progettazione e cinque esempi di siti web che fanno un grande uso dello spazio bianco (che non è affatto bianco).
Spazio bianco 101
Lo spazio bianco si riferisce a qualsiasi parte del design che non viene toccata dagli elementi di design. Ciò include lo spazio tra la grafica o le immagini, tra le righe di testo e margini e grondaie. Lo spazio aperto all'interno di elementi di design, come il? Nascosto? la freccia all'interno del logo FedEx è chiamata spazio negativo, sebbene sia diventato piuttosto comune scambiare la terminologia.
Lo spazio bianco è importante perché gioca un ruolo importante nel contribuire alla leggibilità e all'organizzazione di un progetto.
- Rende il testo più semplice agli utenti per la scansione.
- Aiuta a creare un raggruppamento naturale di elementi simili.
- Dà priorità agli elementi del design, come le chiamate all'azione, la ricerca o la navigazione.
- Crea una sensazione di armonia e raffinatezza.
- Stabilisce l'equilibrio e la gerarchia visiva.
- Aiuta a rendere più digeribili i blocchi di testo più pesanti (e più facilmente leggibili)
- Guida gli utenti attraverso il design in modo logico.
Lo spazio non deve essere? Bianco?
C'è questo mito sullo spazio bianco che ha bisogno di essere smascherato: lo spazio bianco non deve essere bianco.
Lo spazio bianco può essere un colore a tinta unita, uno sfondo sfocato o anche un po 'di movimento. Il fattore comune è che lo spazio è proprio questo? spazio. Non contiene un altro contenuto o elemento di design. Se l'utente ha guardato oltre o lontano da esso, nessuna informazione andrebbe persa.
La soglia è che tutto lo spazio bianco in realtà poteva sii bianco, ma il designer ha scelto di creare l'immagine in un altro modo, pur utilizzando i principi dello spazio.
Lo spazio bianco può apparire in qualsiasi parte del design e dovrebbe fungere da strumento per migliorare l'usabilità dalla parte superiore della pagina verso il basso e attraverso le pagine secondarie. Un buon modello di progettazione utilizzerà lo spazio bianco in modo coerente per aiutare a rendere la grafica più facile da digerire agli utenti.
Esempio 1: U + Design
U + Design inverte letteralmente il concetto di spazio bianco con molta apertura su una tela nera per elementi di testo. Le immagini vivono in uno spazio più leggero, che crea un effetto yin e yang, e mentre nessuno spazio è tecnicamente bianco, è tutto lo spazio bianco.
Lo spazio è usato ugualmente bene al di sotto della pergamena con abbondanza di spazio per gli elementi e un modello quasi in movimento di elementi di spazio e design che incoraggia lo scorrimento.
Se stai cercando una lezione su come creare un testo leggibile, dai un'occhiata a questo design. Mentre vengono utilizzati più stili di testo e colori, tutto è leggibile e il posizionamento e le dimensioni del testo forniscono un buon quadro gerarchico.
Esempio 2: Emark
Emark usa ritagli e motivi geometrici per creare uno spazio bianco e aggiungere interesse visivo a immagini e testo. Lo spazio è un mix di bianco e colore con forme e linee che contribuiscono a fornire un flusso visivo.
Il design utilizza anche blocchi di colore su uno sfondo bianco che includono molto spazio bianco. La brillante combinazione di colori e spazio crea contenitori di testo distintivi che raddoppiano gli inviti all'azione altamente cliccabili. A causa dello spazio bianco colorato, gli utenti sanno che ognuno di questi blocchi è progettato per fare clic.
L'intero design utilizza uno spazio bianco ingrandito attorno agli elementi di testo con abbondanza di spaziatura e interlinea per migliorare la leggibilità. (Questo è uno di quei trend che probabilmente vedremo ancora di più quando i concetti di spaziatura del testo mobile cominceranno a ricoprire anche altri progetti di siti web basati su desktop).
Esempio 3: Joke de Winter
Joke de Winter utilizza una foto in bianco e nero sfocata come modello per lo spazio bianco sullo sfondo del suo sito web. L'aspetto è un design moderno e stratificato che ha una sensazione distinta e un flusso facile.
Sotto lo scrolling è usato ancora più spazio bianco attorno agli elementi di testo con margini sovradimensionati per mettere l'accento su specifici elementi di testo. Lo spazio bianco nel disegno si alterna tra bianco e grigio e, come nell'esempio precedente, include più spaziatura di quanto spesso vediamo tra le linee f di testo.
In tutto il design, tutti i margini hanno uno stile asimmetrico con molto spazio. Il bilancio fuori bilancio? è armonioso e visivamente interessante.
Esempio 4: gli astronauti ricercati
L'azione frenetica di Astronauts Wanted potrebbe non essere ciò che viene in mente per la prima volta quando si pensa allo spazio bianco. Ma il logo, il testo e gli elementi in cima al video funzionano proprio in questo modo. Le importanti informazioni sopra lo scroll sono facili da leggere e vedere nonostante l'azione in background. È centrato con un sacco di spazio su entrambi i lati e tutto intorno. (E il logo realizzato con lo spazio negativo aiuta a richiamare l'attenzione sull'effetto generale).
Lo stesso concetto viene utilizzato sotto lo scroll con i blocchi di testo sopra le immagini fisse. Lo spazio è ben progettato e l'unico elemento di colore bianco nel design è il testo stesso.
Esempio 5: Le Farfalle
Le Farfalle usa un semplice taglio nell'immagine dell'eroe come uno degli esempi precedenti, ma l'uso più impressionante dello spazio appare mentre scorri con ampi spazi alternati per immagini bilanciate con spazi bianchi sovradimensionati contenenti testo.
Questo stile rende più semplice per gli utenti passare dall'immagine al testo e viceversa e quindi scorrere la pagina attraverso tutto il contenuto. Quello che potrebbe essere un design pesante diventa leggero e facile da leggere.
Inoltre, il design utilizza ampi margini e imbottiture in modo che ogni elemento abbia davvero spazio per stare in piedi da solo.Questo uso dello spazio crea un'estetica sofisticata che si abbina all'atmosfera del ristorante.
Conclusione
Il takeaway di oggi: lo spazio bianco non deve essere bianco. Non lasciarti cadere in quella trappola. Hai alcuni esempi di modi per utilizzare lo spazio con colori e immagini e video come luogo per far ripartire la tua creatività.
Ora è il tuo turno di mostrare alcuni esempi di spazio bianco. Condividi alcuni progetti che hai creato nella galleria di Design Shack o condividi siti web che ami con me su Twitter. (Non si sa mai? Potrebbero finire in un post futuro!)