Hierarhia vizuală este o metodă de organizare a elementelor de design în ordinea importanței. Cu alte cuvinte, este un set de principii care influențează ordinea în care observăm ceea ce vedem.
În acest ghid, enumerăm 12 principii de ierarhie vizuală pe care orice designer începător trebuie să le cunoască.
Am multe de acoperit, așa că haideți să începem.
- Tabloul de materii
- Ce este ierarhia vizuală?
- 1 Dimensiunea are impact asupra vizibilității
- 2 Perspectiva creează o iluzie de profunzime
- 3 Culoarea și contrastul atrag atenția
- 4 Fonturi organizează designul
- 5 Spațiul oferă accent și mișcare
- Regula spațiului
- Tipare de scanare a paginii
- F-Patterns
- Planurile Z
- 6 Proximitatea sugerează relații
- 7 Spațiul negativ accentuează
- 8 Alinierea direcționează ochii
- 9 Grupurile cu numere impare creează focalizare
- 10 Repetiția unifică o compoziție
- 11 Linii sugerează mișcare
- 12 Grilele organizează un design
- Designuri alternative de grilă
- Ruperea grilei
- Visual Hierarchy Infographic
Tabloul de materii
Ce este ierarhia vizuală?
Principiul #1: Dimensiunea are impact asupra vizibilității
Principiul #2: Perspectiva creează o iluzie de profunzime
Principiul #3: Culoarea și contrastul atrag atenția
Principiul #4: Fonturile organizează designul
Principiul #5: Spațiul oferă accent și mișcare
Principiul #6: Proximitatea sugerează relații
Principiul #7: Spațiul negativ accentuează
Principiul #8: Alinierea direcționează privirea
Principiul #9: Grupurile cu numere impare creează concentrare
Principiul #10: Repetiția unifică o compoziție
Principiul #11: Liniile sugerează mișcare
Principiul #12: Grilele organizează un design
Infograficul ierarhiei vizuale
Ce este ierarhia vizuală?
Hierarhia vizuală este un principiu de design care se referă la modul în care sunt aranjate elementele într-un design. Ierarhia vizuală ajută designerii și dezvoltatorii să dispună fiecare element într-o manieră logică, care ajută vizualul să fie digerat corespunzător.
Într-un design, acest lucru înseamnă că antetul va fi în partea de sus, cu cel mai mare font, fiecare element ulterior fiind dimensionat în funcție de importanță. Acest lucru ajută utilizatorul să înțeleagă mai bine fluxul, astfel încât să știe unde să se uite mai întâi.
Motivul pentru care ierarhia vizuală este un principiu atât de important de înțeles este că este în sarcina designerului să creeze ierarhia în așa fel încât privitorul nici măcar nu trebuie să se gândească unde să se uite mai întâi. Ochiul său este atras în mod automat către fiecare element în ordinea exactă în care ar trebui să îl vadă.
Am creat, de asemenea, o versiune video a acestui articol de blog pentru a vă ajuta să înțelegeți mai bine ierarhia vizuală. O puteți viziona mai jos.
1 Dimensiunea are impact asupra vizibilității
Mai mare este mai bine, nu-i așa? Deși adagiul clasic este încă supus dezbaterii, dimensiunea este, fără îndoială, cel mai eficient mod de a sublinia elementele vizuale. Pur și simplu, elementele mai mari atrag mai mult atenția decât cele mai mici.
Este exact motivul pentru care titlurile din ziare apar cu fonturi mai mari, iar poveștile importante au adesea titluri chiar mai mari decât articolele din restul paginii. În orice design, elementele mai mari – fie că sunt cuvinte sau imagini – nu numai că vor fi cele mai vizibile, dar vor transmite și cel mai puternic mesaj.
Observați în exemplul de mai sus cum cel mai mare cuvânt este și cel mai izbitor și emoționant. Este mult mai probabil ca cititorii să reacționeze rapid la cuvântul „cracare” decât la cel de-al doilea cuvânt ca mărime, cuvântul de bază „performanță”. Designul nu ar fi nici pe departe la fel de eficient dacă cuvintele ar avea aceeași dimensiune sau dacă un alt cuvânt de pe pagină, cum ar fi „act” sau „timp”, ar fi și mai mare.
Un alt principiu important legat de acest concept este scara, care reprezintă dimensiunea unui obiect în raport cu altul. Un singur obiect, indiferent cât de mare sau de mic, nu are scară până când nu este comparat cu un altul. Aceasta ne permite să creăm un echilibru într-un design și să ne concentrăm pe elementele dominante. Cu cât este mai mare scara, cu atât este mai mare accentul.
2 Perspectiva creează o iluzie de profunzime
Prin utilizarea perspectivei, designerii pot crea o iluzie de profunzime care variază de la câțiva centimetri la câțiva kilometri. Deoarece vedem iluzii similare în lumea reală, în general, percepem obiectele mai mari ca fiind mai apropiate decât obiectele similare mai mici și, prin urmare, acestea captează de obicei atenția înaintea oricărui alt obiect de pe o pagină.
De exemplu, o ilustrație a unui drum va fi de obicei mai largă în punctul cel mai de jos și se va îngusta treptat pe măsură ce se întinde mai sus pe pânză. De asemenea, un obiect cel mai apropiat de privitor va părea întotdeauna mai mare decât același obiect mai îndepărtat.
Perspectiva adecvată va folosi atât scara, cât și proporția pentru a comunica cu acuratețe distanța corespunzătoare. Un desen al unei porțiuni de drum de opt kilometri se va retrage mult mai brusc decât o porțiune de o jumătate de kilometru desenată pe o pânză de aceeași dimensiune.
3 Culoarea și contrastul atrag atenția
La fel cum elementele mai mari sunt percepute ca fiind mai importante decât cele mai mici, culorile vii atrag de obicei o atenție mai mare decât nuanțele mai terne. De exemplu, dacă o singură propoziție dintr-un bloc de text este evidențiată cu o culoare strălucitoare, aceasta captează imediat atenția cititorilor.
Spotify’s Found Them First
Considerați designul de mai sus. Observați cum captează mult mai mult atenția atunci când tonurile naturale au fost evidențiate în culori neon? Schema de culori este cunoscută sub numele de duotone, o tendință de web-design din ce în ce mai populară. Efectul, care suprapune o pereche de culori contrastante peste o fotografie, se pretează la designuri izbitoare, care, la figurat, ies din pagină sau de pe ecran.
Culoarele contrastante în mod dramatic pot, de asemenea, să sublinieze elemente specifice decât un spectru pe o scară mai blândă. Plasarea unui obiect roșu pe un fundal verde sau negru va atrage mai multă atenție decât același obiect roșu pe un fundal portocaliu sau violet.
Combinațiile de culori utilizate într-un design și modul în care acestea se raportează unele la altele sunt cunoscute sub numele de schema sa de culori. Alegerea schemei de culori de către un designer poate crea unitate, armonie, ritm și echilibru în cadrul unei creații, dar poate crea, de asemenea, contrast și accent.
Un design care folosește prea multe culori contrastante va părea adesea neorganizat și incoerent. Același lucru se poate spune uneori despre modelele care folosesc o schemă de culori care nu respectă teoria culorilor. Dar alegerea celei mai bune palete implică mult mai mult decât alegerea la întâmplare a unei combinații monocromatice, complementare sau tetradice.
Corele similare pot fi folosite pentru a grupa elemente conexe într-un design, iar alegerea culorilor poate sugera chiar greutate și distanță. Culorile calde, cum ar fi roșul și galbenul, avansează în prim-planul unui design cu un fundal întunecat, în timp ce culorile reci, cum ar fi albastrul sau verdele, se retrag de obicei în fundal. Opusul se întâmplă cu un desen pe un fundal deschis: Culorile reci, precum albastrul și verdele, apar mai aproape decât culorile calde. Este doar modul în care ochiul uman percepe acest lucru.
Grafic de profunzime a culorilor
Prin urmare, alegerea culorilor poate afecta cu adevărat capacitatea privitorilor de a identifica o figură din fundal în cadrul unui design. Amestecarea culorilor calde și reci poate crea profunzime, la fel ca perspectiva.
Combinațiile de culori eficiente se bazează nu numai pe poziția fiecărei nuanțe pe roata de culori, ci și pe căldura și contrastul acesteia cu culorile din jur. Consultați tutorialul Visme despre cum să alegeți combinații de culori de impact.
4 Fonturi organizează designul
Gândiți-vă la o schiță, la un CV tradițional sau la un cuprins. În general, fiecare este alcătuit din mai multe mărimi de caractere, cu titlurile majore într-o mărime de punct mai mare decât subsecțiunile și detaliile mai mici. Folosirea unei varietăți de mărimi de caractere nu numai că evidențiază ceea ce este cel mai important, dar organizează și designul general al documentului.
Hierarhiile tipografice pot fi create cu text de diferite mărimi, gramaje și spațieri – sau o combinație a fiecărui element. Chiar dacă un singur font este folosit pe tot parcursul unui design, varierea mărimii și a greutății acestuia nu numai că atrage atenția asupra elementelor mai importante, dar creează o compoziție generală care este ușor de citit și de înțeles.
Imaginați-vă un CV care folosește caractere mai mari și mai îndrăznețe pentru referințe decât pentru numele candidatului. Nu numai că ar putea părea neglijent, dar ar provoca probabil o bună parte din confuzie pentru cei care scanează rapid un munte de candidaturi.
La fel, un design care prezintă o serie de caractere care au toate aceeași mărime, font și greutate nu va atrage în mod eficient atenția asupra a mare lucru – o provocare care trebuie depășită rapid, având în vedere că atât de multe audiențe își petrec fracțiuni de secundă pentru a evalua calitatea designului dumneavoastră.
Din acest motiv, majoritatea programelor de web-design oferă nu numai o selecție manuală a atributelor caracterelor tipografice, ci și o ierarhie prestabilită care constă în fonturi pentru titlu, subtitlu și titluri gradate, pe lângă textul de bază al copiei.
Uitați-vă la designul de mai sus? Pare mai organizat și mai ușor de citit atunci când toate cuvintele au aceeași dimensiune sau atunci când sunt aplicate principiile ierarhiei?
5 Spațiul oferă accent și mișcare
Regula spațiului
Unul dintre cele mai de bază principii ale compoziției vizuale se referă la ceea ce lăsați în afara designului dumneavoastră. Conform regulii spațiului, un design plăcut din punct de vedere estetic are nevoie de o parte echitabilă de spațiu negativ fără dezordine, adesea denumit „spațiu alb”, indiferent de culoarea de fundal reală a designului.
Când aranjează elementele unei compoziții, designerii pot folosi spațiul din jurul conținutului pentru a atrage atenția asupra anumitor elemente – gândiți-vă la un singur element pe o pagină albă – sau pentru a trimite un mesaj vizual complet separat, cum ar fi „săgeata” ascunsă care se găsește în celebrul logo FedEx.
Spațierea strategică poate chiar să atragă ochii privitorilor de-a lungul paginii într-o secvență țintită, contribuind la tiparele de scanare a paginii.
Tipare de scanare a paginii
Cititorii tind să scaneze paginile pe baza unor tipare particulare, observabile prin mișcările ochilor lor. Atunci când designerii doresc ca publicul să observe elementele într-o anumită ordine, ei se bazează adesea pe cele mai comune tipare.
De exemplu, vorbitorii nativi de limba engleză citesc de la stânga la dreapta. Prin urmare, ei prezintă de obicei un tipar de scanare similar atunci când se confruntă cu o pagină de text. Limba arabă, pe de altă parte, este scrisă de la dreapta la stânga. Cei obișnuiți să citească această limbă sunt mai predispuși să scaneze paginile în această direcție „opusă”. Designerii ar trebui să țină cont de aceste diferențe atunci când creează conținut pentru audiențe globale.
F-Patterns
Patronul de mișcare a ochilor cel mai frecvent întâlnit la cititorii de limbă engleză este modelul F. De ce? Pentru că acesta este exact modul în care citim o carte, o scrisoare sau o pagină web. Scanăm pagina de la stânga la dreapta de-a lungul părții de sus și din nou pentru fiecare rând de text până când ajungem în partea de jos a paginii.
Din cauza acestei tendințe naturale, designerii utilizează cel mai adesea modelul F atunci când compun site-uri web și alte ilustrații care se bazează foarte mult pe text. Pentru că cititul într-o altă direcție este pur și simplu inconfortabil atunci când nu este ceea ce suntem obișnuiți.
Planurile Z
Desenele care se bazează mai mult pe imagini sunt adesea compuse după un model Z. Deoarece creierul procesează imaginile mai rapid decât textul, cititorii pot scana rapid pagina aruncând o privire peste partea de sus, de la stânga la dreapta, apoi în josul paginii în diagonală, înainte de a finaliza scanarea traversând din nou de la stânga la dreapta (sau de la dreapta la stânga, dacă publicul citește de obicei în această direcție).
Designerii pot sublinia anumite elemente ale unei compoziții plasându-le de-a lungul acestui model comun de mișcare a ochilor „Z”. Gândiți-vă la un titlu, o imagine și un subtitlu.
6 Proximitatea sugerează relații
Proximitatea, sau locul în care elementele apar în raport unul cu celălalt, este unul dintre cele mai de bază elemente de compoziție. Pur și simplu, plasarea unor elemente conexe aproape una de cealaltă sugerează cititorilor că acestea sunt, de fapt, legate.
Gândiți-vă la un ecran alb cu un grup de cinci puncte pe o parte și un singur punct pe cealaltă parte. Prima noastră presupunere va fi întotdeauna că cele cinci sunt, într-adevăr, un grup.
Plasarea elementelor aproape una de alta poate transmite și alte mesaje. De exemplu, plasarea elementelor în anumite locații pe o hartă poate oferi publicului o înțelegere a distanței, fie că este vorba de aproape sau de departe. Desigur, acest lucru depinde și de dimensiunea și scara hărții. Un centimetru nu înseamnă întotdeauna o milă.
Prin plasarea elementelor într-o anumită proximitate unele față de altele, pot fi create imagini și mesaje adăugate. Gândiți-vă cât de des vedeți trei cercuri și o linie poziționate în așa fel încât să sugereze forma unei fețe fericite sau triste? Imaginea sugerată capătă atunci adesea mai multă atenție decât elementele sale individuale. Vedeți o față fericită sau vedeți trei cercuri și o linie?
7 Spațiul negativ accentuează
La fel cum gruparea elementelor unul lângă altul sugerează relația lor, includerea spațiului alb în jurul elementelor le singularizează ca grupuri separate de informații. Spațiul negativ, gol, nu numai că face ca informațiile să fie mai ușor de digerat de către cititori prin gruparea lor în compartimente, dar creează și focalizare, deoarece ajută ochii să se concentreze asupra elementelor individuale.
Compozițiile lipsite de spațiu negativ amplu pot avea ca rezultat un design dezordonat, confuz și haotic. Cu alte cuvinte, mai puțin înseamnă mai mult. Designerii pricepuți pot utiliza chiar spațiul gol pentru a sugera un mesaj vizual suplimentar. Gândiți-vă doar la „săgeata” implicită în centrul celebrului logo FedEx sau la designul Coca-Cola, de mai sus.
8 Alinierea direcționează ochii
Alinierea face parte din structura prin care sunt plasate elementele într-un design. Acesta dictează ca componentele vizuale, fie că este vorba de text sau de imagini, să nu fie poziționate în mod arbitrar de-a lungul unei compoziții. De exemplu, o pagină tipică de text este aliniată la stânga, astfel încât obiectele să împartă o marjă stângă.
Multe concepte vizuale sunt centrate sau justificate, ceea ce înseamnă că sunt spațiate de-a lungul unei pagini astfel încât să împartă atât marjele din stânga, cât și din dreapta. Dacă cuvintele ar fi împrăștiate la întâmplare pe o pagină în toate direcțiile, ar crea un scenariu destul de confuz.
În desenele cu model F, obiectele sunt în general aliniate la stânga, în timp ce modelele cu model Z folosesc adesea o combinație de alinieri la stânga, centru și dreapta, cum ar fi în reclama de mai sus.
Desenele vizuale simple se aliniază cel mai frecvent în centrul cadrului, un format care oferă echilibru și armonie și este, de asemenea, plăcut din punct de vedere estetic.
Majoritatea cititorilor occidentali sunt obișnuiți să citească de la dimensiunea din stânga la cea din dreapta a unei pagini. Prin urmare, desenele care prezintă text sunt adesea aliniate la marja stângă în același mod.
Alinierea la dreapta este adesea folosită pentru a asigura echilibrul unui desen general care poate fi mai greu din punct de vedere vizual pe partea stângă. De asemenea, alinierile la stânga pot oferi același efect în scenariul invers.
9 Grupurile cu numere impare creează focalizare
Regula șanselor permite designerilor să evidențieze anumite imagini plasându-le în centrul unui grup. Prin plasarea unui număr egal de obiecte vecine de o parte și de alta a punctului focal principal – creând astfel un grup cu numere impare – rezultatul indică în mod clar cel mai important element vizual, situat în centru.
De exemplu, un grup de unul sau trei elemente este mai izbitor decât o singură pereche. De asemenea, grupurile formate dintr-un număr impar de obiecte sunt aproape întotdeauna considerate mai interesante și mai plăcute din punct de vedere estetic decât grupurile cu număr par. De ce? Oamenii se simt mai confortabil cu echilibrul.
10 Repetiția unifică o compoziție
La fel cum contrastul subliniază și atrage atenția asupra elementelor de design, repetiția creează unitate, ceea ce stimulează înțelegerea și recunoașterea.
Gândiți-vă la majoritatea textelor publicate. Designul paginilor este organizat în așa fel încât corpul textului are un singur font, titlurile capitolelor au un alt font, iar notele de subsol au un al treilea font diferit – toate acestea fiind consecvente pe parcursul întregii publicații. Această repetare a stilului creează o lucrare coerentă, recunoscută ca un întreg.
Pentru un design unificat, repetați un element – fie că este vorba de font, culoare, formă sau mărime – pe parcursul întregii compoziții. Stilurile consecvente ajută la definirea clară a ierarhiei vizuale a oricărui design.
Considerați, de exemplu, infograficul din introducere care prezintă cele 12 principii ale noastre de ierarhie vizuală. Repetarea acelorași fonturi și stiluri pe tot parcursul documentului unifică în mod clar lista și le spune cititorilor că fiecare intrare face parte dintr-un întreg.
Repetiția poate, de asemenea, să dea elementelor un nou înțeles. Cât de des vedeți un text subliniat în albastru să iasă în evidență pe o pagină? Suficient încât să recunoașteți instantaneu fontul ca fiind un hyperlink, nu-i așa? Repetarea acestui stil într-un design spune publicului dvs. unde să facă clic pentru mai multe informații. Ce alte stiluri populare pot da designului dvs. un sens suplimentar?
11 Linii sugerează mișcare
Mișcarea este una dintre cele mai eficiente modalități de a atrage atenția spectatorilor, mai ales atunci când este implicită în cadrul unui design nemișcat. Liniile sunt, în mod evident, eficiente pentru a indica elementele de accentuare – gândiți-vă la o săgeată – dar nu trebuie să apară fizic în pagină pentru a face acest lucru.
Liniile de conducere pot fi implicate prin utilizarea de elemente repetate – gândiți-vă la un rând de puncte – proximitatea obiectelor sau a formelor, precum și prin relația dintre spațiul pozitiv și cel negativ. De exemplu, prin înclinarea unui obiect în sus sau în jos, pot fi create linii care sugerează zborul sau coborârea.
12 Grilele organizează un design
Cele mai eficiente designuri sunt compuse printr-un anumit tip de grilă. Cea mai tipică grilă este compoziția modulară clasică de încrucișare a liniilor verticale și orizontale.
Artiștii, fotografii și designerii grafici au folosit de mult timp regula treimilor pentru a îmbunătăți echilibrul general al compozițiilor lor. Regula presupune împărțirea mentală a unei compoziții într-o grilă compusă din două linii orizontale și două verticale – sau nouă secțiuni separate.
Elementele vizuale importante sunt plasate de-a lungul liniilor, subliniind cele patru puncte în care liniile se întâlnesc. Compozițiile descentrate sunt, în general, considerate mai plăcute din punct de vedere estetic în comparație cu modelele în care punctul focal principal este plasat în centrul cadrului. Regula încurajează utilizarea spațiului negativ, apropierea inteligentă a elementelor și alinierea eficientă.
Nu numai că este cea mai comună, dar grila modulară este, în general, cel mai lizibil design. Cu toate acestea, uneori, cel mai bun mod de a crea accent este de a încălca regulile.
Designuri alternative de grilă
În loc de grila clasică verticală-orizontală, designerii ar putea alege o compoziție orientată pe diagonală pentru a se asigura că creația lor se distinge pe o pagină și atrage atenția generală a privitorilor.
Ruperea grilei
Câțiva designeri vor alege să rupă grila în întregime, plasând la întâmplare elementele vizuale pe o pagină pentru a se distinge cel mai bine de textul din jur blocat în grilă. Acel text înconjurător poate fi în același design sau pe o pagină învecinată.
Nu vă lăsați păcăliți de conceptul de aleatoriu. Împrăștierea aleatorie a elementelor pe un fundal în funcție de niciun motiv sau strategie specifică nu se va transforma în mod miraculos într-o capodoperă Jackson Pollock. Atunci când se sparge grila, fiecare alegere trebuie să fie totuși calculată și cu un scop.
Principiile de ierarhie vizuală sunt unele dintre cele mai eficiente strategii pentru a sublinia elementele unui design și a clarifica un mesaj vizual. Dar, la fel ca în mare parte din viață, poți avea prea mult dintr-un lucru bun.
Designerii trebuie să aleagă cu înțelepciune ce principii să folosească, altfel riscă să dilueze orice accent și să desființeze ierarhia vizuală. Dacă totul iese în evidență, atunci nimic nu iese în evidență.
Nu sunteți sigur dacă ierarhia dvs. este eficientă? Atunci testați-o. Pur și simplu uitați-vă fix la spațiul din fața paginii sau a ecranului, permițând ca designul propriu-zis să se estompeze în fundal până când devine o ceață de forme și culori. Ce iese în evidență?
Sau, pentru a vă salva de la a rămâne cu ochii încrucișați, puteți utiliza testul de estompare făcând o captură de ecran a designului dvs., deschizând-o în Photoshop și aplicând filtrul Gaussian Blur.
Dacă atracția principală este în continuare elementul (elementele) pe care ați planificat să le evidențiați, ierarhia dvs. vizuală este eficientă.
Visual Hierarchy Infographic
Get an at-a-glance understanding of what visual hierarchy means and how it can be implemented by scrolling through this infographic below.
Embed on your site:
<script src=”//my.visme.co/visme.js”></script><div class=”visme_d” data-url=”ep88eydm-12-visual-hierarchy-principles-every-non-designer-needs-to-know” data-w=”800″ data-h=”6404″></div><p style=”font-family: Arial; font-size: 10px; color: #333333″ >Created using <a href=”http://www.visme.co/make-infographics” target=”_blank” style=”color: #30a0ea”><strong>Visme</strong></a>. An easy-to-use Infographic Maker.</p>