Share
Lo spazio è un parametro fondamentale nel web design, ma anche uno dei più sottovalutati. Se prendiamo il controllo dello spazio bianco, possiamo controllare un elemento sottile, ma definitivo di una pagina web e farne buon uso.
In breve, lo spazio bianco è la spaziatura tra i diversi elementi, sia tra le sezioni effettive della pagina, sia direttamente nello spazio tra le lettere. Nella maggior parte dei casi, utilizziamo lo spazio bianco (noto anche come spazio negativo) per distanziare i contenuti per una scansione più semplice e, in definitiva, più veloce di una pagina senza la necessità di inserire elementi di separazione specifici.
Oggi illustreremo come utilizzare lo spazio negativo nei progetti e capire come esattamente contribuisce a dare al tuo design un aspetto pulito e ordinato.
Come ho appena spiegato, lo spazio bianco (o spazio negativo) è la spaziatura tra diversi elementi che non contiene nulla. Per scopi di confronto, chiamiamo lo spazio che è pieno positivo. Lo spazio negativo in realtà aiuta a plasmare e definire cos'è lo spazio positivo. Questo può essere dimostrato guardando l'illusione ottica qui sotto.
Cosa vedi? Il vaso o le due facce? Se vedi i volti, è perché, in questo particolare progetto, lo spazio bianco agisce come spazio negativo, mentre il nero è il positivo. Possiamo invertire i ruoli e ottenere una visione completamente diversa perché entrambi stanno lavorando insieme per modellare l'immagine.
Ciò che questo esempio sta cercando di ottenere è che il tuo spazio negativo è piuttosto importante in quanto può aiutare a definire il contenuto che risiede nello spazio positivo. Non pensare allo spazio bianco come a un avanzo per cui non hai creato contenuti, ma piuttosto a un giocatore strutturale importante nel layout del tuo sito.
Esistono anche due livelli di spazio bianco. Questi sono macro e micro spazio bianco, relativi allo spazio tra gli elementi centrali e lo spazio tra gli elementi più piccoli, rispettivamente.
Google, come puoi vedere, è un grande sostenitore dello spazio bianco nei loro progetti. Si ritiene che il motore di ricerca abbia un design pulito poiché l'attenzione si concentra sull'obiettivo principale della pagina, senza una grande dedica ad altre aree (a differenza di altre).
Ammiro il lavoro di progettazione che il team di Envato ha fatto con questo stesso sito. C'è un uso piacevole e bilanciato dello spazio bianco tra titoli, linee di credito e paragrafi.
Lo spazio negativo in realtà non deve essere un singolo blocco di colore. Nella fotografia, qualsiasi area che non è a fuoco potrebbe essere classificata come spazio negativo. In questo esempio, la mancanza di messa a fuoco sullo sfondo attira gli occhi sulla tazza che è. (E anche, Starbucks non ha cambiato il loro logo?)
Quando uno progetta, il suo focus è normalmente sullo spazio positivo. È quasi subconscio che lo spazio negativo segua e in effetti aiuti a modellare e modellare come lo spazio positivo sia disposto e quindi letto. Questa proprietà può quindi essere ottimizzata per personalizzare l'esperienza per un tempo migliore di lettura e interazione con lo spazio positivo.
Diciamo che sei in un negozio. Non sarebbe stata un'esperienza piacevole o piacevole se avessi avuto difficoltà a spostarti a causa dei corridoi sovraffollati, insieme al commesso che ti ha costantemente sollecitato con le loro offerte speciali. C'è solo troppo da guardare e non hai né il tempo né la pazienza per trovare quello che cercavi in origine. Non è carino.
Questa è una delle caratteristiche chiave del perché gli store Apple funzionano così bene. Sono molto minimalisti e una grande quantità di officina viene data ai prodotti stessi. Tuttavia, se ti avventuri in un altro negozio per PC, sei investito da corridoi infiniti di macchine che sembrano e funzionano in modo diverso. Nella mia esperienza, l'esperienza di acquisto minimalista è molto più piacevole.
Ora, che cosa ha a che fare con il web design? Molto in realtà. Non veniamo online per il compito di cercare una specifica stringa di testo sotto una ricchezza di contenuti inutili di cui non ti importa. Lo spazio negativo aiuta con entrambi questi problemi lasciando i disegni sgombri allo stesso tempo attirando l'attenzione sul punto focale della pagina.
Potresti chiedere, perché dovrei preoccuparmi di assicurarmi che il mio spazio negativo sia giusto?
Il testo sul Web è diverso dal testo su qualsiasi altra piattaforma e tutti noi adattiamo i nostri progetti in modo tale che l'utente finale abbia la più semplice esperienza nella lettura dei nostri contenuti. A differenza di un giornale, può essere frustrante sul Web cercare di decifrare il contenuto a cui sei realmente interessato. I progetti ingombranti che sono troppo pesanti da affrontare non forniscono un'esperienza di lettura semplice e pulita, poiché siamo costretti a esaminare prima la pagina Web, per distinguere gli elementi l'uno dall'altro. Lo spazio bianco crea un buffer tra gli elementi, quindi è più facile per noi trovare il contenuto che ci interessa.
Possiamo anche indirizzarci verso un mio recente articolo sulla tipografia, in cui ho esaminato otto fattori importanti che contribuiscono a una buona tipografia web. Sfruttando gli elementi spaziali (come l'interlinea e la spaziatura delle lettere), possiamo aumentare la leggibilità. Lavorare a questo livello significa che stiamo lavorando con micro-white-space.
In poche parole (diverso da quello menzionato prima, però), lo spazio bianco distanzia tutto, dà agli elementi il proprio spazio per essere se stessi, per essere riconosciuto e per essere facilmente letto e interagito con.
Lo spazio negativo è utilizzato in molti campi creativi, in particolare la fotografia. Nella fotografia, lo spazio negativo è uno spazio che non è usato per contenere un soggetto, che non è troppo lontano dal suo ruolo nel web design. Se diamo un'occhiata al web design di Apple, loro, naturalmente, usano sia lo spazio macro che micro bianco per riempire gli elementi e dare loro il loro posto nella pagina web.
Il design di Apple utilizza sia lo spazio bianco macro e micro, definito dai due diversi colori sovrapposti sull'immagine sottostante. Ciò si traduce in un design pulito ed elegante che è distanziato graziosamente. Potresti non saperlo, ma la tua attenzione al contenuto sarà stata influenzata dalla mancanza di contenuti nelle aree bianche. La nostra capacità di attenzione si è dimostrata più breve quando ci si trovava sul web, quindi i disegni ingombranti e pesanti della stampa non erano una tendenza che passava ai domini del design virtuale.
Certo, lo spazio non deve essere effettivamente bianco. Qualsiasi tipo di spazio vuoto che non sia in competizione con il contenuto di messa a fuoco può essere classificato come "spazio bianco", come suggerisce il disegno sottostante.
Nella progettazione della stampa, potresti notare che il tuo cliente desidera che ogni ultimo pezzo del suo immobile venga usato per promuovere il suo prodotto. Tuttavia, è una storia diversa quando si progetta per terre virtuali. Lo spazio bianco può aggiungere una sensazione di raffinatezza e lusso in una pagina web generica creando la sensazione che il prodotto sia più importante della proprietà in cui vive. Può rendere un prodotto lussuoso usando il principio "less is more". Quando si guarda al sito Web di Apple, un marchio che consideriamo nella fascia più alta del computing, non è necessario molto, in quanto i prodotti parlano da soli, anche se a fianco di alcuni slogan minimalisti. Questo è un fenomeno che è anche popolare con i migliori siti di salute e benessere in cui sono necessari pochi contenuti per comunicare l'idea generale del prodotto o del servizio pubblicizzato.
Spesso, i marchi più economici sembrano stipare quante più informazioni possibile in uno spazio; diversi mercati, diversi utenti finali. I siti HP e Apple, ad esempio, evidenziano questo punto. Apple è notoriamente sicura di sé e lascia che i suoi prodotti parlino da soli. Se vuoi il prodotto, dare un'occhiata in giro, se non andare avanti. D'altra parte, il sito HP impiega up-selling e cross-selling più impegnativi, promuovendo offerte e spingendo prezzi economici nella mente dell'utente e cercando di mostrare un assortimento di prodotti alternativi a cui potresti essere interessato.
A questo punto, dovresti riconoscere che cos'è lo spazio negativo e come identificarlo nel tuo progetto. Se sei nuovo in questo campo, potresti diventare confuso quando qualcuno ti suggerisce di migliorare lo spazio bianco. Non sarei completamente sorpreso se tu rispondessi con qualcosa sulla falsariga di "questo è solo lo spazio sinistro". Beh, in effetti, il tuo spazio negativo può essere notevolmente migliorato modificando alcuni problemi comuni per rendere la sua esistenza molto più efficace.
La spaziatura incoerente può essere uno dei maggiori problemi, ma può essere facilmente modificato. Tutto sembra solo più equilibrato e, nel complesso, più bello quando il tuo rivestimento attorno a un elemento è uguale. Se diamo un'occhiata all'esempio qui sotto, al design (quello del nostro sito gemello, ActiveTuts +), quello reale sulla destra sembra molto meglio perché il padding tra gli elementi è molto più coerente.
I margini non dovrebbero anche rendere il design scollegato. Margini troppo grandi potrebbero rompere la relazione tra gli elementi, riducendo il sentimento di unità nel design. Gli ampi margini sprecheranno anche il tuo patrimonio immobiliare, riducendo potenzialmente l'efficacia del tuo lavoro.
Come spiegato in precedenza, la spaziatura a livello micro è lo spazio negativo esistente tra gli elementi più piccoli della pagina, come le lettere in un paragrafo.
La spaziatura delle linee può migliorare drasticamente la leggibilità di un corpo di testo, essendo un rompicapo critico nel tuo caso di studio di una tipografia ben adattata. L'interlinea, o interlinea, è il micro-spazio bianco tra le righe di testo. Generalmente, più grande è il vantaggio, migliore sarà l'esperienza dell'utente durante la lettura, anche se troppo può rompere l'unità e rendere il design scollegato.
Ho usato l'immagine qui sotto in diversi articoli qui su Tuts +, e voglio indicarlo di nuovo. L'esempio a destra ha un ruolo più importante e, se utilizzato in una più ampia selezione di testo, dovrebbe renderlo più facile da leggere.
Allo stesso modo, la spaziatura delle lettere può contribuire allo spazio negativo ben utilizzato. Le lettere anguste non sono così divertenti da leggere, ma nemmeno quelle che potresti scambiare per le singole parole. Di nuovo, si tratta solo di trovare l'equilibrio perfetto.
Quando progetti e personalizzi il tuo web design, fallo con una mente nuova che non viene contaminata da ciò che hai fatto bene l'ultima volta. Ogni progetto è diverso e, poiché non ci sono linee guida predefinite o calcoli matematici coerenti, è necessario utilizzare l'occhio appena perfezionato per analizzare separatamente ogni prodotto.
Lo spazio negativo, come ho menzionato più volte in questo articolo, disegna entrambi i design e aiuta a modellare e focalizzare l'attenzione sul contenuto della pagina. Tornando all'analogia dello shopping, nessuno vuole lavorare per raggiungere il risultato desiderato. Invece, vogliono che sia servito su un piatto facilmente identificabile che non sia disturbato da contorni inutili che non hanno chiesto, né vogliono.
Per ricapitolare, possiamo anche migliorare l'utilizzo dello spazio negativo analizzando e perfezionando i margini mantenendoli coerenti nella maggior parte delle circostanze e prestando attenzione alla tipografia e alla spaziatura di livello micro. Idealmente, dovresti anche prendere ogni progetto in modo diverso per riconoscere il punto debole del design.
A parte i vantaggi pratici di una pagina web pulita e ordinata, lo spazio negativo può creare un senso di raffinatezza ed eleganza, consentendo al contenuto di "parlare da solo" senza grosse intrusioni che sembrano poco costose.
Grazie per immergerti in un viaggio interessante in un'area che non lo è. Spero che tu abbia imparato qualcosa (certamente ho) sull'importanza dello spazio negativo nel design, e forse ci penserai due volte prima di provare a spingere nella tua pagina un milione di oggetti privi di senso o inutili. Prima di lasciarti, un ultimo consiglio: prova il test di cinque secondi (guarda una pagina web per cinque secondi e annota ciò che ricordi) solo per confermare che il tuo design è ordinato e usa bene il suo spazio bianco.
Accentsconagua