Cum se folosește spațiul negativ pentru a crea site-uri web uimitoare

Site-urile și aplicațiile au tot felul de elemente vizuale care trebuie să coexiste - butoane, coloane, pictograme, imagini, linii, suport media și tipografie. Toate aceste elemente au nevoie de o pânză (pagina web goală) și acea pânză are nevoie de spațiu gol, adică spațiu negativ sau alb. Ochiul privitorului nu poate procesa ceea ce vede fără el.

Abonați-vă la canalul nostru Youtube

Ce este spațiul negativ?

Spațiul pozitiv este partea lucrării care este umplută cu subiectul sau alte puncte focale. Spațiul negativ ocupă restul. Poate fi alb sau alb, contrastând prin culoare sau design, o imagine de fundal subtilă - oricare ar fi aceasta, se va simți goală în loc să fie plină sau aglomerată. Cu toate acestea, doar pentru că spațiul negativ este gol, asta nu înseamnă că este lipsit de importanță - atrage atenția asupra spațiului pozitiv și uneori chiar devine spațiul pozitiv în sine când este privit diferit.

Exemple de spațiu negativ

Spațiul negativ - și omologul său, spațiul pozitiv - se află în tot felul de artă și design, inclusiv web design. Să ne uităm la sigla FedEx. Vedeți litere purpurii și portocalii, nu? Există o săgeată acolo, totuși, în spațiul alb:

Acea săgeată FedEx ascunsă folosește spațiul negativ într-un mod similar cu desenul și pictura - conturul este creat la fel ca spațiul pozitiv este creat. Într-un exemplu ca acesta, spațiul negativ nu este creat pur și simplu pentru că nu este spațiul pozitiv.

Păunul NBC face același lucru:

În timp ce punctul spațiului negativ este de obicei de a pune accentul pe spațiul pozitiv, uneori devine punctul central în design-uri inteligente. Iată un alt exemplu - uitați-vă la modul în care dinții lupului formează un copac:

Există un termen pentru aceasta: inversarea figură-temelie. Practic înseamnă că culorile din prim-plan și fundal schimbă locuri pentru a schimba perspectiva și interpretările. Dacă vă interesează acest lucru, verificați lucrarea lui MC Escher, în special amprentele sale de transformare.

Spațiul negativ joacă același rol și în fotografie. Uită-te la acest portret pe care l-am făcut fiului vărului meu, Julian. Fundalul negru pune accentul pe el:

Puteți găsi spațiu negativ în natură, ca în spațiul dintre petalele de flori și în designul funcțional, ca în spațiul prin mânerul unei cani de cafea.

Îl folosim și pe site-ul nostru web. Pagina noastră de pornire conține o grămadă de informații, dar nu este copleșitoare din cauza modului în care le-am distanțat. Și, deși fundalul are indicii de culoare și unele forme de adăugat la design, nu distrează în niciun fel - dă totuși aspectul de a fi plăcut gol, fără a fi plictisitor ( și este de marcă).

Tipuri de spațiu negativ

Există câteva tipuri de spațiu negativ. Micro și macro se referă la dimensiunea spațiului negativ dintr-o compoziție. Activ și pasiv se referă la ceea ce acele zone fac pentru utilizator.

Spațiu micro vs. macro negativ

Spațiul micro negativ se referă la spațiile mici dintre elemente - spațiul dintre liniile de text sau zona dintre legături dintr-un meniu de navigare. Acest lucru influențează cât de lizibil este conținutul pentru cititor. Dacă nu există suficient spațiu între linii sau dacă textul iese în afara marginilor, utilizatorul va avea dificultăți în citirea și înțelegerea acestuia.

Spațiul macro negativ este mai mare; este spațiul din jurul aspectului și spațiile dintre elementele mari de design. Un exemplu este zona dintre blocurile de conținut. Părțile goale ale containerului sunt cele care conțin întregul design.

Site-urile web cu cantități mici de spațiu macro negativ tind să fie extrem de informative. Site-urile web cu cantități mari de spațiu macro negativ sunt adesea minimaliste sau prezintă lux. Primul exemplu este de spațiu macro negativ mic, iar al doilea este de spațiu macro negativ mare:

Spațiu negativ activ vs. pasiv

Spațiul negativ activ se adaugă la structura paginii, îmbunătățește fluxul de conținut și îndrumă utilizatorul unde doriți să meargă. Spațiul negativ pasiv îmbunătățește aspectul site-ului web, dar nu mișcă utilizatorul printr-un flux specific. Când spațiul este descentrat și asimetric, este de obicei activ. Când este echilibrat și simetric, este de obicei pasiv - evocă mai puțină mișcare, ceea ce nu obligă utilizatorul să o privească într-un anumit fel. Iată un exemplu de spațiu negativ activ:

Iată un exemplu de spațiu negativ pasiv:

Spațiu negativ și compoziție

Spațiul negativ este important pentru compoziție din mai multe motive:

• Trebuie să vedeți spațiul dintr-o compoziție pentru a-l menține bine proporționat.
• De asemenea, vă permite să vă jucați cu relațiile dintre diferite obiecte într-un design.
• În designul web, acesta poate juca un rol la fel de important, menținând oamenii pe pagina dvs.
• Cantitatea de spațiu din jurul unui element determină cât de multă focalizare este pusă pe element - mai mult spațiu înseamnă mai multă focalizare.

Alegerea echilibrului corect al spațiului negativ și pozitiv

Cât spațiu negativ și pozitiv folosiți va depinde de aspectul pe care îl urmăriți și de ceea ce doriți să evocați în privitor.

• Dacă doriți un design plăcut din punct de vedere estetic, probabil că veți folosi părți egale spațiu negativ și pozitiv.
• Pentru un design care arată în mod intenționat strict și minimalist, veți opta pentru spațiu mai negativ.
• Pentru a părea puternic și în fața ta, poți opta pentru spațiu mai pozitiv.

Designerii trebuie să se joace cu spațierea până când ajung la echilibrul potrivit pentru marca și scopurile intenționate ale site-ului web.

Decluttering site-uri web grele text cu spațiu negativ

Când trebuie să strângi o tonă de informații pe o singură pagină, să găsești unde să plasezi spațiul negativ devine dificil - mai ales dacă aceste informații sunt grele în text, ceea ce poate arăta aglomerat. HostingDude este un exemplu excelent de spațiu prea pozitiv:

New York Times, pe de altă parte, și-a dat seama cum să-și împacheteze pagina de pornire cu știrile lor, fără să-ți înnebunească ochii și totul se datorează spațierii (și alegerilor de culoare). Deși nu există mult spațiu pentru spațiul macro, ei au profitat de spațiul micro:

Chiar dacă elementele de pe HostingDude sunt mai apropiate, elementele de pe site-ul New York Times arată mai unificat datorită spațiului suplimentar dintre ele. Ochiul are un timp mai ușor de a înțelege pagina, ceea ce îi conferă un design mai complet și mai coeziv. Când ochiul are ocazia să se odihnească, este mai capabil să preia ceea ce vede. Spațiul negativ consideră că mai puțin este mai mult.

Separarea textului cu spațiu negativ

Ați văzut cum designerii pot crea o pagină de pornire estetică, plină de text, dar ce rămâne cu blocurile mai lungi de text? Amestecarea paragrafelor scurte cu cele lungi, îndrăznețele titlurilor, crearea listelor și adăugarea de materiale media într-un articol contribuie la construirea unui spațiu negativ în jurul cuvintelor, făcându-l mai atrăgător pentru cititor. Aspectul contează, chiar și cu copie, iar marii designeri iau în considerare acest lucru.

Explicarea punctului de spațiu negativ clienților

Proiectanții de site-uri web se pot ciocni cu clienții despre spațiul negativ. Clienții văd și mai mult spațiu pentru a strânge informații importante, care fac bani. Ei simt că spațiul gol este spațiu irosit. Designerii, pe de altă parte, văd pauza vizuală de care are nevoie ochiul pentru a absorbi de fapt informațiile care există deja. Știu că tot spațiul de pe un site web este important, chiar și spațiul care nu conține conținut.

Aici sunt utile instrumentele de machetare și prototipare. Arătați clientului două versiuni ale site-ului său web, una cu un spațiu negativ plăcut și una supraîncărcată cu spațiu pozitiv. Puneți-i să se uite la site-uri web unul lângă altul și cereți-i să se joace cu ei. Presupun că este ușor să navigheze pe site-ul web bine conceput și să se simtă pierdut pe cel slab conceput.

Încheierea

Site-urile web au o grămadă de elemente diferite și, dacă doriți ca aceste elemente să trăiască în armonie și să atragă privitorul, aveți nevoie de spațiu alb în jurul lor. Cantitatea de spațiu alb pe care o utilizați și modul în care funcționează depind de (a) brandingul dvs. și (b) de acțiunile pe care doriți să le întreprindă utilizatorul. Puteți deveni creativ și cu spațiul alb, cum ar fi inversând culorile sau desenând cu spațiu negativ pentru a-l defini într-un mod interesant sau atrăgător.

Indiferent de abordarea pe care o veți lua, spațiul alb ar trebui să se simtă echilibrat - totuși, asta nu înseamnă neapărat simetric. În schimb, înseamnă că elementele există pe o pagină fără a concura între ele și, în timp ce atrageți tipul de atenție pe care doriți să le aibă. Pentru spectator, echilibrul înseamnă a putea privi un site web fără a fi confuz sau copleșit.

Experimentați cu spațiul alb de pe site-ul dvs. web. Adăugați câteva, scoateți câteva. Reduceți macro și creșteți micro, sau invers. Testați cum mai mult sau mai puțin spațiu alb în jurul anumitor elemente încurajează utilizatorul să acționeze. Frumusețea spațiului alb este că este o tehnică artistică, ceea ce înseamnă că nu există reguli grele și rapide.

Proiectați un site de turism? Probabil că veți folosi o mulțime de spațiu macro. Consultați rezumatul nostru de teme pentru copii Divi pentru site-uri web de călătorie.

Imagine prezentată prin StockVector / Shutterstock.com