Forțele invizibile spațiu și formă

În articolul precedent, am aflat despre modul în care dimensiunea și dimensiunile pot fi folosite pentru a face planurile dvs. armonioase și clare. În acest articol final despre forțele invizibile în design, vom afla despre modul în care utilizarea subtilă a distanței - adesea numită "spațiu alb" sau "spațiu negativ" - poate fi utilizată pentru a face design-urile să comunice eficient.

Raportul dvs. "Date / Cerneală"

Cu cât utilizați mai mult spațiu alb, cu atât mai mare este raportul "date / cerneală". Acesta este un concept introdus de guru-ul de design al informației Edward Tufte. Este o funcție a cantității de informații transmise de fiecare picătură de cerneală - sau, în cazul designului mobil și web - de fiecare pixel.

Graficul din stânga are un raport de date / cerneală mult mai mare decât graficul din dreapta. Este necesar ca graficul să fie completat cu "cerneală"? Nu, comunică foarte bine cu puncte și linii.

Dacă ați făcut-o cu un pas mai departe și ați scos liniile, lăsând doar punctele?

Acum, comunicarea sa desprins. Da, puteți vedea toate punctele de date, dar acum ați pierdut "povestea" despre modul în care datele s-au schimbat în timp. În plus, a devenit dificil să se facă distincția de la un grafic simplu de grafic scatter, în care "timpul" nu este una dintre variabile, iar datele nu merg în mod liniar.

Elementele mai apropiate sunt considerate a fi legate

În primul articol din această serie, am aflat despre modul în care alinierea elementelor implică relații între aceste elemente. Ce este de asemenea important, este cât de aproape sunt acele elemente între ele.

Aceasta este doar o rețea simplă de pătrate, ca plăcile de pe podea.

Dar dacă creați spațierea orizontală mai mare între rândurile verticale de pătrate, acum aveți o serie de coloane.

Deci, atunci când există schimbări drastice în datele din graficul de mai sus, mintea ar putea dori să conecteze punctele în secvență greșită, doar pentru că un punct este mai aproape de altul.

Folosirea spațiilor albe pentru planuri curate

Aceste principii se extind dincolo de graficele liniare. Sunt prezenți în tot ceea ce proiectați. Mai ales când proiectați pentru ecrane mici, nu doriți ca pixelii să meargă la deșeuri - doriți să proiectați cu un raport ridicat de date / cerneală.

Designerii tind să utilizeze grile pentru a ajuta la organizarea informațiilor într-un aspect. Grilele ajută la alinierea elementelor - cum ar fi liniile de text - care apoi creează regiuni de informații care sunt legate între ele.

Iată un layout de bază, proiectat pe o rețea. Partea din stânga este navigația dvs., iar zona mai mare deține conținutul principal.

Acest aspect este bine, dar observați că spațiul alb dintre spațiul de navigare și spațiul alb dintre coloanele de text din zona de conținut principal este același.

Ar fi indicat să se lărgească ușor jgheabul dintre navigație și zona de conținut principal.

Acum există o delimitare mai clară între navigație și conținutul principal și tot ce trebuia să facem era să adăugăm un spațiu alb.

Folosirea spațiului alb pentru tipografie curată

În articolul precedent, am aflat despre modul în care dimensionarea este unul dintre numeroșii factori care pot fi utilizați pentru a crea ierarhia tipografică. Spațiul alb poate ajuta și la organizarea tipografiei.

De exemplu, uitați-vă la acest antet, meta date și copie de corp.

Ei au relații de dimensiuni armonioase unul cu celălalt, datorită faptului că dimensiunile lor sunt alese dintr-o scară variată, dar arată destul de neglijent!

Problema este că spațiile negative dintre aceste elemente nu au fost luate în considerare.

Linia de date meta este deja foarte bine diferențiată de antet: este o dimensiune diferită, este în toate capacele și este chiar bine distanțată puțin.

Un truc extraordinar este de a folosi înălțimea tipului de date meta pentru a determina cât spațiu ar trebui să existe între acesta și antet. Asa:

În general, veți folosi ochelarii pentru a înțelege această distanțare. Nu există nici o modalitate matematică de a vă spune exact cât de mult spațiu ar fi acolo. Este o funcție a înălțimii liniei, cantitatea de margine sau de umplutură pe care o utilizați și caracteristicile fontului respectiv.

Acum, ce despre copia acelui corp?

Este logic ca metadatele să fie într-adevăr aproape de antet, dar antetul nu trebuie să fie atât de aproape de copia corpului. De fapt, antetul și metadatele pot fi unitatea proprie.

Puteți folosi distanța din partea superioară a antetului în partea de jos a metadatelor ca ghid și plasați jumătate din această distanță între metadate și copia de corp.

Concluzie

Gândindu-vă la modul în care vă modelați aspectul și comunicați cu spațiul alb, desenele dvs. vor arăta mai clare și mai clare și, în timp ce vor fi mai ușor de utilizat,.

Asta face lucrurile până acum - dacă nu ați făcut-o deja, asigurați-vă că ați verificat primul și al doilea articol din serie!