Share
Spațiul este un parametru fundamental în designul web, dar și unul dintre cele mai subevaluate. Dacă înțelegem controlul spațiului alb, putem controla un element subtil, dar definitoriu al unei pagini web și îl putem folosi.
Pe scurt, spațiul alb este distanța dintre diferite elemente, indiferent dacă se află între secțiunile reale ale paginii sau chiar în jos până la spațiul dintre litere. În majoritatea cazurilor, folosim un spațiu alb (denumit și spațiu negativ) pentru a expedia conținutul pentru a facilita și, în cele din urmă, a scana mai repede o pagină fără a fi nevoie să introduceți anumite elemente de separare.
Astăzi, vom aborda modul în care puteți folosi spațiul negativ în desenele dvs. și puteți afla cum vă ajută să vă dați designului un aspect curat și neclintit.
După cum tocmai am explicat, spațiul alb (sau spațiul negativ) este distanța dintre diferite elemente care nu conține nimic. În scopuri comparative, numim spațiul care este umplut pozitiv. Spațiul negativ ajută de fapt la formarea și definirea spațiului pozitiv. Acest lucru poate fi demonstrat prin uitarea iluziei optice de mai jos.
Ce vezi? Vaza sau cele două fețe? Dacă vedeți chipurile, acest lucru se datorează faptului că, în acest design special, spațiul alb acționează ca spațiu negativ, în timp ce negrul este pozitiv. Putem inversa rolurile și să obținem o viziune complet diferită, deoarece ambele lucrează împreună pentru a modela imaginea.
Ceea ce se încearcă acest exemplu este că spațiul dvs. negativ este destul de important, deoarece poate ajuta la definirea conținutului care se află în spațiul pozitiv. Nu vă gândiți la spațiul alb ca bitul rămas pentru care nu ați creat conținut, ci mai degrabă un jucător structural major în aspectul site-ului dvs..
Există și două nivele de spațiu alb. Acestea sunt spațiul macro și micro-alb, care se referă la spațiul dintre elementele de bază și respectiv spațiul dintre elementele mai mici.
Google, după cum puteți vedea, este un avocat mare al spațiului alb în desenele lor. Motorul de căutare este considerat a avea un design curat, deoarece accentul se pune pe scopul principal al paginii, fără o dăruire masivă în alte domenii (spre deosebire de altele).
Eu admir munca de proiectare pe care echipa Envato a facut-o cu acest site. Există o utilizare frumoasă și echilibrată a spațiului alb între titluri, linii de credit și paragrafe.
Spațiul negativ nu trebuie să fie un singur bloc de culoare. În fotografie, orice zonă care nu se concentrează ar putea fi clasificată drept spațiu negativ. În acest exemplu, lipsa de focalizare în fundal atrage ochii spre cana care este. (Și, de asemenea, Starbucks nu și-a schimbat sigla?)
Când se proiectează, accentul se pune în mod normal pe spațiul pozitiv. Este aproape subconștient că spațiul negativ urmează și de fapt ajută la formarea și modelarea modului în care spațiul pozitiv este prezentat și apoi citit. Această proprietate poate fi apoi modificată pentru a adapta experiența pentru o mai bună citire a timpului și interacțiunea cu spațiul pozitiv.
Să spunem că ești într-un magazin. Nu ar fi o experiență confortabilă sau plăcută dacă ați avea probleme în a vă deplasa, datorită coridoarelor supraaglomerate, alături de asistentul de vânzări, care vă determină constant ofertele speciale. Este prea mult să te uiți și nu ai nici timpul, nici răbdarea să găsești ceea ce ai încercat inițial. Nu-i frumos.
Aceasta este una dintre caracteristicile cheie ale magazinelor Apple care funcționează atât de bine. Ele sunt foarte minimaliste și o cantitate mare de podea este acordată produselor în sine. Cu toate acestea, ar trebui să vă aventurați într-un alt magazin de PC-uri, sunteți consumat de coloane nesfârșite de mașini care arată și funcționează diferit. Din experiența mea, experiența de cumpărături minimalistă este mult mai plăcută.
Acum, ce are de-a face cu designul web? Mulți de fapt. Noi nu venim on-line pentru sarcina de a vâna un anumit șir de text sub o mulțime de conținut inutil de care nu-ți pasă. Spațiul negativ ajută la amândouă aceste probleme, lăsând desenele descurcate în același timp, atrăgând atenția asupra punctului focal al paginii.
S-ar putea să întrebați, de ce să mă deranjez să vă asigur că spațiul meu negativ este corect?
Textul de pe web este diferit de textul de pe orice altă platformă și ne adaptăm toate modelele, astfel încât utilizatorul final are cea mai ușoară experiență în citirea conținutului nostru. Spre deosebire de un ziar, poate fi frustrant pe web să încerce să descifreze unde este de fapt conținutul care vă interesează. Design-urile aglomerate care sunt prea grele pentru a aborda nu oferă o experiență curată și ușoară de citire deoarece suntem obligați să analizăm mai întâi pagina web, să distingem elementele una de cealaltă. Spațiul alb hackerează un tampon între elemente, deci este mai ușor pentru noi să găsim conținutul care ne interesează.
De asemenea, ne putem îndrepta spre un articol recent al tipografiei, unde am analizat opt factori importanți care contribuie la tipografia web bună. Prin spargerea elementelor spațiale (cum ar fi spațierea conducătorului și a literelor), putem crește lizibilitatea. Lucrul la acest nivel înseamnă că lucrăm cu spațiu micro-alb.
Într-un cuvânt (altul decât cel menționat mai sus), spațiul alb sparge totul, dă elementelor propriul spațiu pentru a fi ei înșiși, a fi recunoscut și a fi ușor de citit și interacționat cu.
Spațiul negativ este utilizat în multe domenii creative, în special în fotografie. În fotografie, spațiul negativ este orice spațiu care nu este folosit pentru a ține un subiect, care nu este prea departe de rolul său în designul web. Dacă aruncăm o privire la designul web al Apple, ei, firește, folosesc atât spațiul macro, cât și cel mic, pentru a elimina elementele și pentru a le oferi un loc propriu pe pagina web.
Designul de la Apple utilizează atât spațiu macro, cât și spațiu alb, definit de cele două culori diferite care au fost suprapuse pe imaginea de mai jos. Acest lucru are ca rezultat un design curat, elegant, care este distantat gratios. S-ar putea să nu știți asta, dar atenția dvs. asupra conținutului va fi influențată de lipsa conținutului în zonele albe. Spanul nostru de atenție este dovedit a fi mai scurt atunci când pe web, astfel încât design-urile aglomerate, grele de imprimare nu au fost o tendință care a trecut peste domeniile de design virtual.
Desigur, spațiul nu trebuie să fie alb. Orice tip de spațiu gol care nu se află în concurență cu conținutul de focalizare poate fi clasificat drept "spațiu alb", așa cum sugerează exemplul de mai jos.
În designul de imprimare, ați putea observa că clientul dvs. dorește ca ultima piesă a proprietății sale imobiliare să-și promoveze produsul. Cu toate acestea, este o poveste diferită atunci când proiectați pentru terenuri virtuale. Spațiul alb poate adăuga un sentiment de sofisticare și lux într-o pagină Web generică, creând senzația că produsul este mai important decât proprietatea în care trăiește. Poate face un produs să arate luxos folosind principiul "mai puțin este mai mult". Când vă uitați la site-ul Apple - un brand pe care îl considerăm ca fiind cel mai bun punct de vedere al computerelor - este foarte puțin necesar, deoarece produsele vorbesc de la sine, deși alături de niște tag-uri minimaliste. Acesta este un fenomen care este, de asemenea, popular cu site-uri premium de sănătate și de bunăstare, în care este necesar un conținut redus pentru a comunica ideea generală a produsului sau serviciului publicat.
Adesea, brandurile mai ieftine par să înghită cât mai multe informații într-un spațiu posibil; diferite piețe, utilizatori finali diferiți. Site-urile HP și Apple, de exemplu, evidențiază acest punct. Apple sunt incredibil de increzatori si lasa produsele lor vorbesc de la sine. Dacă doriți produsul, aruncați o privire în jur, dacă nu vă deplasați. Pe de altă parte, site-ul HP utilizează vânzări mai încrucișate și mai încrucișate, promovând oferte și împingând prețurile ieftine în mintea utilizatorului, precum și încercând să prezentați un sortiment de produse alternative pe care ați putea fi interesați.
Până acum, ar trebui să recunoașteți ce spațiu negativ este și cum să-l identificați în design. Dacă sunteți nou în acest domeniu, este posibil să deveniți confuzi când cineva vă sugerează că îmbunătățiți spațiul alb. Nu aș fi complet surprins dacă ați răspuns cu ceva de genul "este doar stânga în spațiu". Ei bine, spațiul tău negativ poate fi îmbunătățit foarte mult prin ameliorarea a câteva probleme comune pentru a-și face viața mult mai eficientă.
Distanțele inconsistente pot fi una dintre cele mai mari probleme, dar una care poate fi ușor modificată. Totul pare doar mai echilibrat și, în ansamblu, mai bine vădit atunci când padding-ul în jurul unui element este egal. Dacă aruncăm o privire la exemplul de mai jos, designul (cel al site-ului nostru sursă, ActiveTuts +), cel real din partea dreaptă pare mult mai bine, deoarece umplutura dintre elemente este mult mai consistentă.
Marginile nu ar trebui, de asemenea, să facă un design să se simtă deconectat. Marginile care sunt prea mari ar putea rupe relația dintre elemente, scăzând sentimentul de unitate în proiectare. Marjele mari vor pierde, de asemenea, proprietatea imobiliară, reducând potențial eficacitatea muncii dvs..
Așa cum am explicat mai devreme, spațierea micro-nivel este spațiul negativ care există între cele mai mici elemente de pe pagină, cum ar fi literele dintr-un paragraf.
Distanțele liniare pot îmbunătăți drastic lizibilitatea unui text de text, fiind un întrerupător critic în studiul dvs. de caz al unei tipografii bine adaptate. Linia de spațiere sau de conducere este spațiul micro-alb între liniile de text. În general, cu cât conducerea este mai mare, cu atât va avea o experiență mai bună pe care utilizatorul o va avea în timpul citirii, deși prea multe pot sparge unitatea și pot face proiectul deconectat.
Am folosit imaginea de mai jos în mai multe articole de aici, la Tuts +, și vreau să-l subliniez din nou. Exemplul din dreapta are mai multe vederi și, atunci când este folosit într-o selecție mai largă de text, ar trebui să fie mai ușor de citit.
De asemenea, distanța dintre litere poate contribui la un spațiu negativ bine utilizat. Literele înguste nu sunt atât de distractiv de citit, dar nici unul dintre ele nu s-ar putea gresi pentru cuvinte individuale. Din nou, este vorba despre găsirea echilibrului perfect.
Când proiectați și personalizați designul dvs. de web, faceți acest lucru cu o minte proaspătă care nu este contaminată cu ceea ce ați făcut-o ultima oară. Fiecare proiect este diferit și, din moment ce nu există linii predefinite sau matematică consistentă, trebuie să folosiți ochiul recent rafinat pentru a analiza fiecare produs separat.
Spațiu negativ, așa cum am menționat de mai multe ori în acest articol, ambele proiectare unclutters și ajută mucegai și să se concentreze pe conținutul de pe pagină. Revenind la analogia cumpărăturilor, nimeni nu vrea să lucreze pentru a-și atinge rezultatul dorit. În schimb, ei doresc ca acesta să fie servit pe o placă ușor de identificat, care nu este deranjată de feluri de mâncare inutile pe care nu le-au cerut și nici nu doresc.
Pentru a recapitula, putem îmbunătăți și utilizarea spațiului negativ prin analizarea și rafinarea marjelor, păstrându-le consecvente în majoritatea cazurilor și acordând atenție tipografiei și spațiilor micro-nivel. În mod ideal, ar trebui să luați, de asemenea, fiecare proiect în mod diferit, pentru a recunoaște aspectul dulce în design.
În afară de avantajele practice ale unei pagini web curate și neclintite, spațiul negativ poate crea un sentiment de sofisticare și eleganță, permițând conținutului să "vorbească de la sine" fără mari intruziuni care apar ieftin.
Vă mulțumim pentru scufundări într-o călătorie interesantă într-o zonă care nu este. Sper că ați învățat ceva (cu siguranță,) despre importanța spațiului negativ în design și, poate, gândiți-vă de două ori înainte de a încerca să împingeți în pagina dvs. un milion de obiecte inutile sau inutile. Înainte de a vă părăsi, un sfat final: încercați cel de-al cincilea test (vizualizați o pagină web timp de cinci secunde și notați ce vă amintiți) doar pentru a vă asigura că designul dvs. este neclar și că utilizați bine spațiul său alb.
Accentsconagua