Cum am îmbunătățit un UI design: 3 probleme pe care le poți identifica în Figma

În astfel de situații, este foarte tentant să mai adaugi ceva. Un efect, o culoare, o animație sau un element decorativ. Dar, înainte de asta, merită să analizezi puțin mai atent ceea ce ai deja.

Pentru că, de multe ori, diferența dintre un design care „arată bine” și unul care pare cu adevărat bine construit stă în câteva decizii aparent mici.

Pentru exemplul de mai jos avem două variante ale aceluiași website: o primă versiune și varianta finală. Hai să vedem trei probleme pe care le putem identifica într-un UI și, mai important, cum le putem rezolva.

01. Contrastul nu susține întotdeauna conținutul

Unul dintre primele lucruri pe care merită să le verifici într-un design este dacă elementele importante sunt suficient de ușor de observat.

Nu vorbim doar despre text negru pe alb sau despre cât de diferite sunt două culori. Contrastul are și un rol în ierarhia vizuală: ne ajută să înțelegem ce trebuie să observăm prima dată și ce poate rămâne în plan secund.

În prima variantă a acestui proiect, de exemplu, există zone în care textul este plasat peste imagini sau suprafețe care au valori foarte apropiate. Titlul poate fi interesant din punct de vedere vizual, dar nu are suficientă separare față de fundal.

Prima variantă și versiunea finală a hero section-ului, cu principalele probleme de contrast și lizibilitate evidențiate.

Dacă te uiți doar la combinația de culori, este posibil să nu pară neapărat greșită. Dar dacă te întrebi „Cât de ușor pot citi informația fără să depun efort?”, problema devine mai evidentă.

În varianta finală, contrastul este controlat mai atent. Elementele importante se detașează mai clar, iar imaginile și suprafețele din spatele lor nu mai concurează la fel de mult cu informația.

Și aici este o diferență importantă: contrastul nu înseamnă să faci totul mai puternic.

Dacă mărești contrastul tuturor elementelor, ajungi exact la problema opusă. Un design bun are nevoie și de diferențe între elementele principale și cele secundare, astfel încât privirea să știe unde să se oprească mai întâi.

02. Alinierea și ritmul paginii

Există un tip de problemă pe care probabil ai întâlnit-o și tu: pagina pare puțin „off”, dar nu poți spune imediat de ce.

De multe ori, răspunsul se află în aliniere și spacing.

În prima variantă, diferite secțiuni folosesc poziționări și margini care nu urmează întotdeauna aceeași logică. Unele titluri încep dintr-un punct, imaginile din altul, iar distanțele dintre anumite elemente variază destul de mult.

Grid-ul face mai ușor de observat axele și spațierile care nu sunt consecvente în prima variantă.

Aici Figma devine foarte util.

Când adaugi grid-ul și guides, lucrurile care înainte păreau doar „puțin ciudate” devin mult mai ușor de observat. Poți vedea imediat dacă elementele importante respectă aceleași margini și dacă spațiul dintre ele are o logică.

În varianta finală, secțiunile sunt construite în jurul unor axe și margini mai consecvente. Titlurile, imaginile și blocurile de conținut încep să aibă relații mai clare între ele.

Utilizatorul nu va ști că ai aliniat două elemente la aceeași margine sau că ai folosit aceeași distanță între anumite componente.

Dar va simți că pagina este mai ordonată.

Asta este, până la urmă, ceea ce face un spacing bun: nu atrage atenția asupra lui, ci face experiența să pară naturală.

Și nu trebuie ca absolut fiecare element să fie aliniat perfect cu toate celelalte. Important este să existe o logică vizuală pe care ochiul o poate urmări.

03. Consistența dintre secțiuni

Fiecare secțiune trebuie să vorbească aceeași limbă vizuală.

Poate cea mai subtilă problemă apare atunci când fiecare secțiune este frumoasă în felul ei, dar pagina întreagă nu mai pare construită ca un singur website.

În prima variantă a proiectului există mai multe secțiuni cu personalități vizuale puternice: produse, imagini mari, materiale, titluri și compoziții diferite.

Dacă le privești separat, multe dintre ele funcționează foarte bine. Dar când le pui una sub alta, apare întrebarea:

Par toate parte din aceeași experiență?

Comparație între două versiuni ale aceleiași pagini: de la secțiuni vizual izolate la un sistem mai coerent.

Aici nu vrem să facem toate secțiunile să arate la fel. De fapt, asta ar putea să elimine tocmai personalitatea proiectului.

În schimb, avem nevoie de câteva reguli care să se repete.

În varianta finală, anumite lucruri rămân constante: felul în care sunt construite cardurile, spațierea, proporțiile imaginilor, tratamentul butoanelor și modul în care sunt organizate informațiile.

Asta este diferența dintre varietate și inconsistență.

Un website poate avea secțiuni foarte diferite între ele și să rămână în același timp coerent. Nu trebuie să repeți aceeași compoziție de fiecare dată. Trebuie doar să existe suficiente elemente comune încât utilizatorul să simtă că se află în continuare în același loc.

Poți schimba compoziția.
Poți schimba imaginile.
Poți schimba proporțiile.

Dar dacă anumite reguli rămân constante, identitatea vizuală rămâne intactă.

Înainte să mai adaugi ceva, uită-te la ce ai deja

Privind prima și ultima variantă una lângă alta, diferența poate părea destul de mare. Dar nu vine dintr-o singură modificare spectaculoasă. Vine dintr-o serie de decizii mai mici: un contrast mai bine controlat, o aliniere mai consecventă și o relație mai clară între secțiuni.

Și cred că asta este una dintre cele mai utile lecții atunci când lucrezi în Figma. Când simți că un design „încă nu este acolo”, primul instinct poate fi să mai adaugi ceva.

Un efect.
O culoare.
O animație.
Un element decorativ.

Dar înainte de toate acestea, oprește-te și încearcă să identifici problema.

Privește pagina ca pe un întreg. Verifică contrastul. Uită-te la aliniere. Compară secțiunile între ele.

Pentru că, de multe ori, soluția nu este să construiești mai mult.

Este să faci ceea ce ai deja să funcționeze mai bine.