Spațiul alb este mai mult decât spațiul gol dintre elementele unui site web. În realitate, este un instrument puternic care poate fi utilizat în mod inteligent pentru a oferi utilizatorului răgaz, pentru a-și concentra atenția și pentru a-și face călătoria mai ușoară.
Afla cum.
Există multe abordări diferite ale designului web - de la minimalism la designul plat, designul materialelor și utilizarea creativă a contrastului. Un alt instrument incredibil de important în designul web este spațiul alb.
Spațiul alb încurajează minimalismul și echilibrul. De asemenea, poate îmbunătăți experiența utilizatorului, de exemplu, creând pauze de paragraf și spații pentru o mai bună lizibilitate.
Cu toate acestea, utilizarea spațiului alb ar trebui făcută în mod responsabil și corect. Utilizați prea puțin și puteți afecta foarte mult lizibilitatea și gradul de utilizare a unui site web. Folosiți prea mult și riscați să trimiteți un mesaj greșit.
În acest articol, vom discuta despre ce este spațiul alb, diferitele sale tipuri, de ce ar trebui să îl utilizați și, mai important, vă vom arăta exemple de implementare bună a spațiului alb.
Ce este spațiul alb?
Spațiu alb, sau spațiu negativ, este un termen de proiectare pe care îl folosim pentru a ne referi la golul din jurul sau în interiorul elementelor de proiectare.
Dacă vă uitați la pagina de pornire a site-ului web New Yorker, veți vedea exemple de acest lucru peste tot:
Spațiile mari care înconjoară sigla The New Yorker:
Spațiile echidistante care separă fiecare dintre legăturile de navigare:
Ștampilele create în jurul fiecărui bloc de conținut al paginii de pornire:
Chiar și alegerea direcției și urmărirea tipografiei arată utilitatea spațiului alb în proiectarea site-ului web.
Aruncați o privire la site-ul web 2008 și veți vedea cum spațiul alb face o mare diferență:
Există spațiu alb prezent, deși nu este la fel de elegant sau strategic ca ceea ce vedem astăzi pe site.
De unde vine spațiul alb?
Termenul „spațiu alb” este oarecum înșelător. Deși unele exemple de spațiu alb sunt într-adevăr albe (cum ar fi exemplul The New Yorker de mai sus), acest lucru nu este de obicei cazul.
Pentru a înțelege de ce spațiul alb și-a primit numele, trebuie să ne uităm de unde a venit.
Deși nu există nimeni numit în crearea spațiului alb, îl putem atribui următoarelor părți:
Primul este artiștii și caligrafii chinezi din secolul al XX-lea. Spațiile goale de pe hârtia albă de orez la care au lucrat nu au fost tratate ca spații irosite. Au găsit sens în gol și au crezut că a contribuit la înțelegerea generală a întregii imagini.
Ei l-au numit „proiectarea albului”.
Carol Douglas explică valoarea spațiului alb în arta chineză:
„În arta chineză, se așteaptă ca spațiul gol să transmită informații prin însăși lipsa sa de imagini. Dimensiunile și contururile formelor goale creează ritm și unitate. Formele solide dau sens golului și invers.
Spațiul alb a devenit ulterior un element de bază pentru designul imprimării datorită modernismului, care s-a concentrat pe minimalism, grile structurate și spațiu negativ.
Deci, este, de asemenea, probabil să-l numim spațiu alb din cauza hârtiei albe pe care au scris-o moderniștii sau a pânzelor albe pe care au pictat-o.
Diferitele tipuri de spațiu alb pe care trebuie să le cunoașteți
De obicei, împărțim spațiul alb în două categorii diferite:
Micro vs spațiu alb. macro
Spațiul alb micro și macro nu definesc doar spațiul alb în funcție de dimensiune.
Spații micro-albe consultați spațiile mai mici și tampoanele construite în jurul conținutului. De exemplu, un micro spațiu alb poate fi găsit între:
- Scrisori
- cuvinte
- Paragrafele
- Legături de navigare
- Imagini sau conținut într-o grilă
- Câmpuri formular
Scopul spațiului micro alb este de a îmbunătăți lizibilitatea conținutului dvs.
În ceea ce privește spațiul alb Macro, se referă la zone mai mari lipsite de conținut. De exemplu, spațiul alb macro poate fi găsit:
- În marginea unui site web
- În jurul logo-ului din antet
- Între secțiunile unei pagini
- În imaginile eroului
- În separarea conținutului principal și a barei laterale
- În imagini, în imagini
- În jurul butoanelor CTA
Scopul spațiului alb macro este de a îmbunătăți aspectul site-ului web și de a ușura înțelegerea și navigarea.
Spațiu alb pasiv și spațiu alb activ
Spațiile albe pot fi, de asemenea, împărțite în categorii pasive și active.
Spații albe pasive se referă la golurile care apar în mod natural în proiectare sau tipografie. Puteți controla dimensiunea acestor spații din punct de vedere estetic, dar acestea vor fi acolo cu sau fără ca dvs. să le așezați acolo.
Spațiu alb activ se referă la zonele goale adăugate intenționat la o pagină pentru ușurința mișcării. Scopul este de a ghida ochii vizitatorului în josul paginii sau printr-un proces până când ajung la concluzia inevitabilă și se convertesc.
De ce ar trebui să utilizați spațiul alb pe site-uri web
Iată câteva dintre principalele motive pentru care spațiul alb ar trebui să fie încorporat în fiecare site web pe care îl proiectați:
Este un clasic
Tendințe diferite în designul web care pot arăta bine sau pot fi relevante pentru o perioadă scurtă de timp, spațiul alb este un clasic de durată. Uită-te doar la cât timp a existat și cum a evoluat de la caligrafia chineză la lucrările moderniste - și acum la web.
Dacă doriți să faceți proiectele dvs. web sustenabile, spațiul alb ar trebui să fie unul dintre ele.
Aceasta duce la interfețe mai atractive
Intrarea pe un site web este cam ca intrarea în casa cuiva. Nu aveți nevoie decât de câteva secunde pentru a vă simți cât de confortabil vă veți simți.
Cu cantitatea potrivită de spațiu alb, puteți crea contrastul perfect între conținut și spațiu.
Dar depinde de dvs. să decideți care este raportul potrivit. Pentru un brand precum Google, acest spațiu alb funcționează:
Cu toate acestea, pentru o altă marcă, o interfață de utilizator prea simplificată ar putea face site-ul web prea gol și marca să fie lipsită de valoare. Dar dacă găsiți echilibrul corect, alegerea spațiului alb vă poate ajuta cu siguranță să faceți un site web atrăgător pentru utilizatorii săi vizați.
Face site-urile web mai ușor de utilizat
Dacă studiați principiile designului web, veți observa că poziționarea și spațiul sunt puternic prezentate în ele.
Când aplicați aceste principii de proiectare site-urilor web, folosiți psihologia utilizatorului pentru a crea interfețe și călătorii ușor de înțeles și de urmat.
Luați acest exemplu din legea lui Fitts:
Spațiile din jurul conținutului, link-urilor și butonului CTA nu îmbunătățesc doar aspectul acestor pagini. De asemenea, pot îmbunătăți încrederea utilizatorilor și precizia clicurilor.
Îmbunătățește concentrarea
Atunci când arunci prea mult conținut vizitatorilor, aceștia pot deveni copleșiți și se pot concentra cu greu asupra unui singur lucru.
Este un fenomen care se explică prin Legea lui Hick :
Cu cât sunt mai mulți stimuli prezenți la un moment dat, cu atât mai mult va dura oamenii să reacționeze la ei. Și, în cazul unui site web, ar putea fi suficient pentru a-i împiedica să ia o decizie.
Creând spațiu în jurul fiecărei zone a paginii dvs. web, le veți permite vizitatorilor să ia un moment să respire și să se gândească la ceea ce privesc. Acest lucru încetinește procesul decizional ... dar într-un mod bun.
Este util pentruorganizație
Când aveți o mulțime de conținut de inclus pe un site web, este destul de ușor să aflați cum să îl împărțiți în diferite secțiuni și pagini. Cu toate acestea, doar plasarea conținutului în containere diferite nu merge suficient de departe.
Când adăugați spațiu în jurul conținutului sau al containerului acestuia, trimiteți un semnal despre importanța acelui conținut și despre modul în care acesta se raportează la ceea ce îl înconjoară.
Le Grupul Nielsen Norman explică cum funcționează:
În acest grafic, nu vedeți 20 de puncte. Vedeți o secțiune mai mare de puncte în stânga și o secțiune mai mică în dreapta. Spațiile echidistante dintre punctele grupate și cele mai mari dintre grupuri ne permit să le vedem ca unități înrudite spre deosebire de punctele individuale.
Îmbunătățește lizibilitatea conținutului dvs.
Dacă este o scurtă bucată de text într-un imaginea eroului, o postare lungă pe blog sau o pagină de produs foarte descriptivă, doriți ca vizitatorii să citească conținutul acolo.
Dimensionarea fontului vă va ajuta să atrageți atenția asupra cuvintelor dvs., dar spațiul dintre litere, cuvinte și paragrafe asigură citirea cu ușurință.
Nielsen Norman Group consideră că spațierea tipografică este unul dintre cei trei factori care fac un design frumos:
Acest grafic arată diferitele moduri în care lizibilitatea este îmbunătățită ca rezultat.
11 exemple inspiratoare de spațiu alb în designul web
Deoarece există atât de multe modalități de a folosi spațiul alb pentru a îmbunătăți un site web, voi prezenta 11 exemple care folosesc bine diferite tipuri de spațiu alb.
Sigla Grădina Zoologică din Pittsburgh și PPG Aquarium
Dacă ar trebui să aruncați o privire rapidă la sigla Grădina Zoologică din Pittsburgh, probabil veți vedea copacul alb și păsările care zboară mai întâi. Cu toate acestea, la o inspecție mai atentă, veți vedea o imagine ascunsă în spațiul negativ: o gorilă cu fața către un leu.
Această utilizare creativă a spațiului alb face ca acest logo și marca sa să fie destul de memorabile. În plus, surpriza ascunsă este o modalitate excelentă de a face o primă impresie puternică asupra vizitatorilor.
Galeria de imagini a eroului în jurul anului 1886
Imaginea erou de pe un site web trebuie să fie capabilă să capteze în mod eficient atenția vizitatorilor. Există mai multe modalități de a face acest lucru. Puteți proiecta imaginea eroului folosind în principal culori și forme, pentru a lăsa imprimarea să strălucească. Sau poți face așa mai departe Circa 1886 și permiteți imaginilor dvs. să ocupe un loc central.
Observați cum această galerie folosește farfurii albe, lenjerii albe, sticlărie transparentă și tacâmuri strălucitoare pentru a încadra subiectul principal al fiecărei fotografii. Acest spațiu alb literal păstrează accentul pe mâncare, nu pe distragerea atenției restaurantului sau a meselor din jurul acestuia.
Fotografii Florian Schulz Productions
Acesta este site-ul curatorial pentru fotografii și realizatorii de filme din Florian și Emil Schulz. Așa cum v-ați putea aștepta, site-ul web este plin de fotografii de natură atrăgătoare.
Este o dovadă că spațiul alb nu este doar ceva care îmbunătățește designul unui site web. Utilizând fotografii care utilizează bine spațiul alb, veți putea direcționa mai eficient ochii vizitatorilor către subiecți.
În exemplul de mai sus, vedem cum masa întunecată a zgârieturilor servește ca spațiu alb și permite ca zgârieturile care se mișcă în apele verzi să fie centrul principal.
Linkuri de navigare de depășire
S-ar putea să nu credeți că puteți încadra 13 link-uri de navigare ordonat la rând, dar site-ul web alStoc excedentar demonstrează că te înșeli. Aici vedem cum spațiul potrivit între linkuri poate face un meniu de această dimensiune ușor de navigat.
În plus, nu forțează comerciantul cu amănuntul să-și ascundă categoriile sub un meniu de mega categorii sau sub o pictogramă de meniu hamburger (pe care mulți o fac în aceste zile).
Spațierea liniei Udemy
Aruncați o privire la modul în care sunt împărțite modulele și lecțiile udemy. Combinația de blocuri ușor colorate, titluri îndrăznețe și spațierea abundentă în jurul fiecărui rând îi permite unui cursant să navigheze rapid pe curs.
Când există peste 150 de cursuri disponibile pe un site web, utilizatorii trebuie să poată evalua rapid dacă un curs este potrivit pentru ei. Și o mare parte a libertății - dar nu prea mult - va ajuta în acest sens.
Interfață de utilizator organizată de Meetup
Meetup este un site web care ajută localnicii să găsească grupuri de persoane cu interese similare și să planifice evenimente în jurul lor. În orașele mari, un astfel de site web ar putea deveni copleșitor pentru utilizatorii care aparent au prea multe grupuri și evenimente din care să aleagă.
Datorită interfeței de utilizator bine organizată și spațiului alb care o descompune, utilizatorii pot filtra rapid opțiunile din partea de sus a site-ului web și bara laterală din dreapta. Apoi își pot îndrepta atenția asupra rezultatelor zilnice reduse din centru.
Marginile Maison De La Luz
Casa Luz este un hotel tip boutique de lux din New Orleans. Site-ul său web frumos ilustrat nu este singurul lucru care îi va surprinde pe oaspeți.
Pe pagina Despre, vizitatorii vor vedea mai întâi o ilustrare a interiorului hotelului. Pe măsură ce derulează în jos, imită modul în care privirea lor ar putea să se miște în sus și în jos în timp ce admiră hotelul în persoană. Chiar și fără animație, acest aspect arată foarte atractiv datorită marginilor înguste ale graficului din textul de mai jos.
Accentul produselor Apple
Apple a existat suficient de mult timp încât nu are nevoie să spună un cuvânt despre produsele sale. Acesta este motivul pentru care majoritatea site-ului său web permite produselor să vorbească.
Chiar și atunci când sunt prezente copii și CTA, acestea ocupă o cantitate mică de spațiu în comparație cu produsele și cantitățile mari de spațiu alb care atrag atenția vizitatorilor asupra lor.
CTA-uri ale Acalmie
Butonul de îndemn joacă un rol important în călătoria utilizatorului. Îi obligă să ia o pauză, să ia în considerare ceea ce au învățat până acum și să decidă dacă sunt gata să facă următorul pas.
Pentru a-i face pe oameni să observe CTA, veți avea nevoie de mai mult decât o destinație de plasare bună sau o aplicație de culoare pentru a o face să iasă în evidență. Spațiul alb abundent din jurul unui CTA vă permite să lăsați totul deoparte în timp ce vizitatorul face alegerea.
Blocuri de preț volante
Dacă aveți multe detalii de partajat simultan, puteți utiliza dimensiunea pentru a stabili ierarhia și spațiul pentru a grupa detaliile relevante. Acest lucru va face procesul de luare a deciziilor mai ușor pentru vizitatorii dvs., deoarece nu vor avea doar un perete de text de luat în considerare.
În timp ce ne uităm aici este un exemplu de blocuri de preț Volant, acest tip de spațiu aerisit este util pentru orice tip de produs sau design de blocuri de conținut.
Aspectul formularului Salesforce
Oricare ar fi tipul de formulare pe care le folosește site-ul dvs., doriți să fie ușor de completat. În forma de probă gratuită a Salesforce, vedem cum distanțarea corectă poate face o formă mai primitoare.
Spațiul alb din jurul fiecărui câmp îi ajută pe utilizatori să se concentreze pe un câmp la un moment dat. Există un alt motiv pentru care această distanță suficientă este utilă. Când cineva începe să completeze câmpurile, fiecare etichetă se deplasează deasupra. Și dacă apare o eroare, mesajul corespunzător apare mai jos.
Folosiți cu îndemânare spațiul alb pentru a crea site-uri web mai bune
Spațiul alb se poate referi la golul unui site web, dar există o mulțime de semnificații și scopuri care trăiesc în golul respectiv.
Prin preluarea controlului spațierii pe un site web, puteți crea o experiență mai bună pentru toți cei care intră pe acesta.
Deși v-am arătat câteva modalități de a face acest lucru, aplicarea acestuia la desenele dvs. este o altă poveste.
Dar nu iti face griji. cel constructor de pagini Elementor facilitează adăugarea de spații albe la desenele dvs.
Obțineți Elementor Pro acum!
Concluzie
Aici ! Gata pentru acest articol dedicat spațiului alb în designul web. Dacă aveți nelămuriri cu privire la modul de a ajunge acolo fanunțați-ne în comentarii.
Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...