Clienții ajung pe website-ul la care ai lucrat, dar îl părăsesc imediat sau finalizează foarte rar o comandă? Ar trebui să arunci o privire chiar acum peste website, poate nu e vorba despre erori interne, ci despre aspect și navigare dificilă. Dacă ai tot căutat o listă concisă de principii de compoziție vizuală în web design pentru site-ul tău, pentru a ști ce mai este de îmbunătățit, noi te ajutăm cu tot ce trebuie să bifezi pentru a te asigura că ai mai mult decât un site funcțional.

Am explicat pe larg ce este web design-ul și câteva dintre regulile sale de bază, dar și cât de important e să acordăm multă atenție compoziției vizuale. Fie că este a unei pagini sau a unui simplu banner, ea întregește experiența utilizatorului. Nu contează doar ce comunicăm, ci cum comunicăm. Iar, uneori, acest aspect este cel care face diferența majoră.

Ce este compoziția vizuală?

Compoziția vizuală este ansamblul care reunește toate elementele de design, facilitând experiența utilizatorilor pe website: cadrul, culorile și contractul, tipografia, ierarhia vizuală – toate oferă un ritm vizual utilizatorului și îi comunică mai multă informație decât am crede despre noi și afacerea noastră online.

Sfatul nostru principal? Găsește o personalitate online, dar keep it simple.

De ce sunt importante aceste principii pentru compoziția vizuală în web design?

Trendurile nu sunt singurele care se schimbă, odată cu trecerea anilor. În domeniu web design-ul, posibilitățile au devenit infinite, însă principiile de bază pentru compoziția vizuală au rămas cele clasice, cu posibilitatea adaptării. Adaptare? Da! Paginile statice primeau aceeași interfață pentru orice device în trecut. Astăzi, totul trebuie optimizat pentru mobil, tabletă sau desktop – adică pentru zeci de rezoluții diferite!

94% dintre utilizatori își formează prima impresie bazată doar pe design-ul site-ului. Consecvența unui stil, a unor fonturi și culori vor construi imaginea ta în online, iar compoziția vizuală va ghida utilizatorul, oferindu-i o o experiență online favorabilă de pe orice dispozitiv folosește.

Ce principii cheie bifăm pentru compoziția vizuală perfectă?

Ierarhia vizuală

Ierarhia vizuală ajută la ordonarea elementelor în funcție de importanța lor pentru utilizatori. De exemplu, experimentând cu dimensiunile elementelor din compoziția noastră, vom crea iluzia de apropiere sau depărtare. La fel acționează și grosimea fontului, culoarea, accentuarea cromatică  – creând împreună echilibru.

Organizarea elementelor (text, imagine, fundal) pe care vrem să le expunem este esențială. Întâi de toate, trebuie diferențiat ce este important și ce este secundar. Astfel, tot ce este absolut relevant va fi scris mare, în culori și fonturi puternice, restul elementelor adiționale rămânând în plan secund.

Toate acestea, pentru a crea o ierarhie vizuală și a ghida privirea utilizatorului spre ce e important. Mai multe despre teoria ierarhiei grafice atunci când îți construiești un site găsești și în articolele noastre trecute sau pe Adobe.

Grid System sau organizarea după principiile de aliniere

Grid System utilizat în web design va organiza mai bine toate elementele pe care vrei să le expui, prin alinierea pe coloane. Este util și estetic, fiindcă vei obține, în felul acesta, armonie și responsiveness.

Recomandările noastre pentru website-uri, în funcție de dispozitiv, sunt:

• Desktop: 6 coloane
• Tabletă: 3 coloane
• Mobil: 1 coloană

Pe măsură ce lățimea device-ului se îngustează, trebuie scăzut numărul de coloane, de la 6 la 3 sau chiar una pentru mobil. Luăm exemplul celor de la Facebook, care permit 3 coloane (Date personale, Feed/ Timeline, Chat/ Secțiunea About) pentru varianta desktop, însă doar 1 (Feed-ul/ Timeline-ul), pentru aplicația mobilă.

Acesta este unul dintre cele mai importante principii de compoziție vizuală în web design. Nu trebuie ignorat!

Ritmul vizual 

Poate ai auzit de tiparele vizuale F sau Z. Dacă nu, află că acestea sunt cele mai populare. Alinierea elementelor în pagină în Z sau F ghidează privirea utilizatorului și influențează decizia, stabilind ordinea acțiunilor pe care utilizatorul le poate face pe pagina web.

Avem următorul exemplu creat de Adobe, care ilustrează exact cum urmăresc utilizatorii conținutul:

Culoarea și contrastul 

Acestea sunt primele principii de compoziție vizuală în web design la care ne gândim, nu? Există o psihologie a culorilor de care e bine să ții cont atunci când îți construiești identitatea în online, dar și o serie de culori nerecomandate. Acum însă este vorba de cum utilizăm culoarea pentru a atrage atenția asupra elementelor importante. 

O practică bună este să folosim puține culori în design, iar contrastul cromatic să-l realizăm pentru ceea ce vrem evidențiem, mai precis.

Contrastul este cel care oferă greutate vizuală. Cum, mai exact? Prin combinația de culoare a fundalului și a elementelor pe care le suprapunem. Galbenul, de exemplu, este o culoare intensă, însă pe un fundal foarte deschis, contrastul se pierde și, implicit, și efectul dorit de noi – acela de a atrage atenția.

Observăm alăturat, în GIF-

ul creat de Adobe, cum se schimbă dinamica cromatică în funcție de fundalul ales.

Tipografia

Fontul creează un impact mai mare decât ne-am imagina. Folosind mărimile potrivite, vom accentua mesajul relevant pe care vrem să-l transmitem. Orice text adiacent trebuie trecut într-un font mai mic, pentru a-l ajuta pe utilizator să distingă dintre ce este esențial și ce este secundar. Acesta este un exemplu găsit pe pagina noastră.

Sfaturi:

• Folosește 1-3 familii de fonturi (Font Pair și Type Wolf te vor ajuta să găsești combinații bune)
• Menține cel mult 60 de caractere (cu spații, inclusiv) pe linia de text – utilizatorul va parcurge mai repede textul 

Evită:

• Blocurile de text – sparge-le in paragrafe
• All caps – folosește-l pentru cel mult pentru un rând
• Spațiile înguste între rânduri
• Folosirea textului ca imagine

Descoperă și alte principii de compoziție vizuală în web design

Câte sugestii ai bifat din această listă?

Cel mai bine este să ții cont de aceste reguli încă de la crearea site-ului. Dacă poți pune în aplicare aceste principii de compoziție vizuală în web design sau poți veni cu o listă de sugestii suplimentară, atunci locul tău ar putea fi printre noi. Suntem la un click distanță, chiar AICI.