Forțele invizibile aliniere, direcție și focalizare

Designul este plin de "forțe invizibile", toate ajutând la o comunicare curată și clară. Atât de mult ar putea fi tentat să observați pentru a obține doar fontul potrivit sau pentru a alege doar combinația potrivită de culori, designul dvs. va eșua în mod neplăcut dacă nu vă acordați atenție acestor forțe invizibile.

Aceasta este prima dintr-o serie de trei părți despre aceste forțe, deci începeți cu alinierea, direcția și focalizarea.

Introducerea elementelor "Elemente"

Pentru a gândi cu adevărat prin forțele invizibile de design, trebuie să vă opriți să gândiți la designul dvs. ca fonturi, culori, imagini și text și să începeți să vă gândiți la toate aceste lucruri ca la "elemente".

Fiecare dintre rubricile dvs. este un "element", fiecare paragraf al textului corpului este un "element" mare și fiecare imagine este un "element".

În cadrul fiecăruia dintre aceste elemente este un alt element - s-ar putea numi și ele "subelemente". Logo-ul dvs. ar putea avea un element "simbol" și un element "text". Și fiecare literă din partea textului ar putea fi considerată drept element propriu.

Toată această discuție de elemente mă face să mă gândesc la clasa de chimie (pe care nu am luat-o niciodată), dar asta este de fapt potrivită. Când aranjezi elementele corect, primești ceva exploziv care sărind din pagină. Când le aranjezi întâmplător, ai un băiat.

Aliniere

Designul este o provocare pentru că trebuie să faceți un spațiu bidimensional plictisitor și să îl faceți interesant, comunicând în mod clar. Mai ales astăzi, cu ecrane minuscule mobile și portabile, este important să faceți acest lucru cât mai eficient posibil. Fiecare pixel mic trebuie să-și facă treaba.

De aceea, alinierea este atât de importantă. Prin alinierea elementelor unul cu altul, puteți spune foarte mult.

De exemplu, aceste pătrate sunt toate aliniate.

Și dacă schimbăm modul în care sunt aliniate, schimbă complet compoziția.

Și dacă vom rupe această aliniere, ar părea haotică.

Dacă în loc de pătrate folosim icoane de social media, puteți vedea direct modul în care alinierea devine utilă. Ce se întâmplă dacă aceste icoane de social media:

În schimb, arăta astfel:

Direcţie

Când aliniați elemente, creați un sens al direcției cu o linie imaginară. Designerii cu adevărat fantezi numesc această linie imaginară o "axă". Gândiți-vă ca o axă pe o roată: toată greutatea roții se rotește în jurul acelei axe. Trebuie să fie echilibrat. În mod similar, o axă ajută la controlul echilibrului unei compoziții.

Vedeți toate aceste elemente care sunt aliniate? Le-ai putea numi o axă pe această compoziție.

Dacă aliniați alte elemente în apropierea acelei axe, ea încă mai domină și controlează compoziția.

Bunicul tău avea dreptate: trebuie să ai grijă de axele tale. De exemplu, evitați amestecarea textului aliniat în centru cu o compoziție "asimetrică".

Cu toate acestea, vă aranjați textul: centrat, estompat la stânga sau în dreapta (evitați să justificați tipul pe web), creați o axă de-a lungul acelei alinieri.

Când centralizați textul, creați o axă și toată greutatea textului se rotește în jurul acelei axe. Restul compoziției dorește să fie centrat în jurul acelei axe.

Deci, dacă aruncați un text stânga alături de textul centrat, compoziția începe să devină confuză. Acum aveți două axe care se luptă între ele și nu este un gând înfricoșător?

Excepția la acest lucru este atunci când un element aliniat în centru se întinde pe lățimea compoziției, iar elementele drepte din stânga sau din spate se află în acea compoziție. Apoi axele nu se luptă între ele.

Observați că ambele coloane de conținut sunt setate la stânga.

Acesta este un model pe care îl vedeți frecvent în designul mobil. În această captură de ecran a aplicației Yelp, barele de meniu de sus și de jos au o orientare centrat, în timp ce restul ecranului este setat în partea stângă.

Sau, puteți crea o axă din jgheab, făcând o coloană să se rotească la dreapta, iar cealaltă coloană se lasă la stânga.

concentra

Până acum, m-am concentrat pe axe verticale. Puteți avea și axe orizontale (sau diagonale, dar care vor fi rare în designul web și mobil).

Când două axe puternice se încrucișează, veți crea, în general, o zonă focală. Ochiul urmează în mod natural orice axă puternică, astfel încât, dacă se intersectează două axe, ochiul va petrece mult timp în acel loc.

Într-un anumit moment într-un design web sau mobil, este posibil ca ceva pe care doriți ca utilizatorul să se concentreze asupra dvs., astfel încât să puteți utiliza axe intersectate pentru a atrage atenția asupra acelui loc, cum ar fi în această pagină de destinație:

Textul din stânga creează o axă, iar alinierea butonului "cumpărați acum" cu imaginea creează o altă axă. În cazul în care se intersectează, a creat o zonă focală.

Concluzie

Folosind alinierea pentru a construi axe, a controla direcția și a stabili zone focale, puteți să vă îndepliniți mai bine obiectivele de proiectare: fie că îmbunătățiți lizibilitatea, fie conduceți o conversie.

Stingeți-vă pentru următorul articol, unde voi vorbi despre modul în care puteți ajusta dimensionarea elementelor dvs. pentru a face modele armonioase, frumoase și clare.