Spatiul alb

Ce este spatiul alb?

Spatiul alb este spatiul dintre diferite elemente de pe o pagina – zona cuprinsa intre text, imagini, link-uri, spatiul dintre liniile unui paragraf, etc. Acesta separa vizual elementele de design.

spatiu-alb

Spatiul alb permite mai usor “scanarea” unei pagini. Este curat, arata profesional, iar atunci cand este folosit in mod corect ofera site-ului un look fresh si permite transmiterea mai usoara a mesajului catre utilizator.

Din pacate, spatiul alb este unul din elementele cele mai subestimate elemente dintr-un design. Doar pentru ca nu este lucios sau face blink nu inseamna ca nu este important sau esential pentru un site.

Pentru a intelege mai bine ce vreau sa va explic, haideti sa aruncam o privire la cateva site-uri care folosesc in mod eficient spatiul alb.

Motorul de cautare Google

Google este cel mai vizitat site din lume. Pe pagina lor de start au doar cateva elemente: logo, un formular de cautare si o selectie rapida a limbii. La miscarea mouse-ului apar si alte elemente, dar asta este o alta discutie.

google-ro

GrooveShark

Spatiul alb nu inseamna literalmente ca este “alb”. De exemplu grooveshark.com. Cu formular de cautare albastru, pe fundal albastru, reuseste sa focalizeze atentia pe acest formular. De asemenea meniul pe fundal alb este usor de observat.

Grooveshark

Apple.com

Nu puteam sa trec cu vederea peste Apple, care inspira pe multi designeri. Pe pagina de start isi promoveaza, de obicei, un singur produs. In exemplu de jos sunt folosite nuante neutre: negru, gri si alb. Focalizarea pe produs este obiectivul principal in acest caz.

Apple

Cum se utilizeaza spatiul alb eficient

Utilizand spatiul alb in mod eficient poate fi dificil. Iata cateva sfaturi inainte de a incepe sa-l folosesti:

Spatierea dintre linii

Line spacing sau spatierea dintre liniile intr-un paragraf face diferenta cand vine vorba de lizibilitate si usurinta de citire pe o pagina web:

Spatierea dintre linii folosita corect

In cazul in care liniile sunt prea apropriate sau inexistente textul devine foarte greu de citit:

Spatierea dintre linii folosita gresit

In cazul in care liniile sunt raspandinte prea departe unul de altul cuvintele incep sa “pluteasca” si nu se mai realizeaza conectarea de la una la alta:

spatiere-linii-gresit2

Margini

Marginile sunt spatiile in jurul unui anumit element intr-un design. Marginile folosite in CSS sunt o modalitate foarte buna de a controla acest spatiu in avantajul tau. Atunci cand lucrezi cu margini, retine cateva lucruri:

1. Consecventa. Pastreaza o coerenta in intreg aspectul, astfel vei obtine un design mai organizat si va arata mai profesionist.

2. Nu prea mult. Nu face marginile prea mari. Separarea prea mare poate crea o senzatie de deconectare dintre elemente, asa cum am explicat mai sus la spatierea dintre liniile unui paragraf.

3. Nu prea putin. Adu-ti aminte ca discutam despre spatiul alb, deci asigura-te ca acesta exista. Arata urat daca lipesti textul langa imagine, meniu, logo sau oricare alt element. Lasa-le utilizatorilor spatiu sa respire.

Design minimalist nu inseamna spatiu alb

Una dintre greselile frecvente este sa punem semnul egalitatii intre spatiu alb si minimalistic. Este gresit. Un site poate fi incarcat cu mult continut, dar sa fie usor de parcurs cu o utilizare corecta a spatiului alb.

De exemplu Smashing Magazine. Este un site cu continut bogat, dar au reusit sa faca site-ul usor de “scanat” si citit. Ei realizeaza acest lucru printr-o selectie atenta de culori, marimi de text si bineinteles spatiu alb.

Smashing Magazine

In incheiere, tine minte: White space is good space.

Ti-a placut articolul? Ai completari? Scrie un comentariu mai jos 🙂

4 replies

Trackbacks & Pingbacks

Comments are closed.