Dacă aveți o înțelegere de bază a HTML și CSS și doriți să creați interfețe de utilizator în browser, nu căutați mai departe! În acest articol, vă veți spori abilitățile de proiectare a interfeței de utilizare, învățând despre următoarele șapte elemente fundamentale:

  • spatiu alb
  • aliniere
  • contrast
  • scară
  • tipografie
  • culoare
  • ierarhie vizuală

Acest articol se bazează pe un curs Scrimba gratuit creat de genialul Gary Simon, cunoscut și sub numele de DesignCourse. Cursul oferă un set de tutoriale interactive pe care le puteți lua în ritmul propriu și chiar reface pentru a vă încorpora cu adevărat învățarea.

Deci, dacă acest articol vă lasă să doriți mai mult, asigurați-vă că verificați cursul. Acum, să sărim în el!

Spatiu alb

Primul design fundamental pe care îl vom analiza este Spatiu alb, cunoscut și sub numele de spațiu negativ. După cum sugerează și numele, este spațiul dintre elementele de pe pagină.
(…)
Elementele care sunt strânse pe o pagină fără spațiu alb nu numai că par neatractive, dar sunt, de asemenea, dificil de navigat și dificil de citit.

Putem regla spațiul alb în diferite moduri, inclusiv umplutura, marginea și înălțimea liniei. Consultați imaginea de mai jos și înainte pentru a vedea ce diferență poate face spațiul alb eficient.

Înainte și după ajustarea spațiului alb

Aliniere

Următorul este Aliniere. Acesta este procesul de asigurare a faptului că fiecare element este poziționat corect în raport cu alte elemente, de exemplu prin asigurarea alinierii coloanelor în josul paginii.
(…)
După cum puteți vedea din imaginile următoare, prima pagină cu elemente în numeroase coloane diferite (aliniere slabă) este mult mai puțin atractivă și mai ușor de citit decât a doua, care are o aliniere puternică

Pagina cu aliniere slabă

Pagina cu aliniere puternică

Contrast

Este important să luați în considerare, de asemenea Contrast atunci când construiți o pagină sau o aplicație. Contrastul este diferența dintre culorile care apar una lângă cealaltă pe pagină.
(…)
După cum puteți vedea din acest exemplu, paginile cu contrast slab sunt greu de citit, iar elementele nu ies în evidență.

Pagina cu contrast slab

Pagini cu contrast bun, precum cea de mai jos, nu numai că arată mult mai bine, dar sunt mai ușor de utilizat și mai accesibile.

Exemplu de bun contrast

Pentru a vă ajuta să obțineți contrastul corect, WCAG (Ghidul de accesibilitate pentru conținutul web) sugerează un raport de contrast minim (AA) de cel puțin 4,5: 1 sau 3: 1 pentru textul mare sau un raport de contrast îmbunătățit (AAA) de 7 : 1 sau 4,5: 1 pentru textul mare. Există o serie de pluginuri sau site-uri web pentru a verifica acest lucru.

Scară

Scară este, de asemenea, o parte esențială a interfeței de utilizare, deci luați în considerare dimensiunea fiecărui element cu atenție. De exemplu, elementele ar trebui să fie suficient de mari în raport cu pagina (deci nu există goluri mari). De asemenea, elementele cu o importanță mai mare, cum ar fi titlurile, ar trebui să fie mai mari decât cele cu o semnificație mai mică.
(…)
Aruncați o privire la imaginile de mai jos și înainte și observați cât de bine arată pagina atunci când este scalată corect.

Pagina cu scară redusă
Exemplu de scară bună

(…)

Tipografie

Tipografie are, de asemenea, un impact mare asupra interfeței de utilizare. Există mai multe moduri de a regla acest lucru, inclusiv alegerea fontului, dimensiunea fontului, alinierea, spațierea literelor, înălțimea liniei, stilurile fontului, culoarea și contrastul.
(…)
Ca regulă generală, nu utilizați mai mult de 2 familii de fonturi pe o singură pagină și asigurați-vă că diferitele aspecte funcționează împreună pentru a stabili ordinea importanței. Acest lucru este cunoscut sub numele de ierarhie vizuală, pe care îl vom aborda mai detaliat mai jos.
(…)
Dacă urmați aceste sfaturi, pagina dvs. va arăta la fel de bine ca aceasta:

Exemplu de tipografie bună

Și nu confuz și ilizibil, așa:

Pagina cu tipografie slabă

Culoare

Designul fundamental al UI, care modelează mai întâi experiența unui utilizator, este culoare. Psihologia culorii înseamnă că fiecare culoare obține un sens pentru anumite persoane – de exemplu, roșul poate însemna pericol, în timp ce albul poate evoca curățenia și seninătatea.

Aveți grijă la culoare, totuși. Semnificațiile variază în funcție de culturi, așa că faceți întotdeauna cercetarea și luați în considerare publicul țintă atunci când selectați culorile.
(…)
De asemenea, este important să rețineți că prea multe culori pot crea o interfață de utilizare proastă, iar culorile pe care alegeți să le utilizați ar trebui să se completeze reciproc. De regulă, nu puteți greși dacă utilizați variații mai deschise sau mai întunecate ale aceleiași nuanțe una lângă alta. Uită-te la cât de ușor este comparat cu ochi a doua imagine de mai jos cu prima!

Pagina cu alegeri slabe de culoare
Bună utilizare a culorii

(…)

Ierarhia vizuală

Ultimul element din lista noastră de elemente fundamentale de proiectare este Ierarhia vizuală. Unele elemente ale unei UI sunt mai importante decât altele. Ierarhia vizuală ne permite să stabilim această importanță.

Acest lucru se poate face cu poziția, contrastul, culoarea, scala, stilul sau o combinație a celor de mai sus, așa cum se arată în a doua imagine de mai jos, care are o ierarhie vizuală mult mai bună decât prima.

Pagina cu ierarhie vizuală slabă
Folosirea tipografiei și a culorii pentru a stabili ierarhia vizuală

Învelire

În acest articol am acoperit cele șapte fundamente principale de proiectare: spațiul alb, culoarea, contrastul, scala, alinierea, tipografia și ierarhia vizuală. Toate sunt la fel de importante pentru interfața de utilizare – dacă lipsește unul dintre aceste elemente, întreaga experiență a utilizatorului va avea de suferit. Deci, asigurați-vă că le luați în considerare pe toate atunci când creați design-urile de interfață.

Cursul UI Design Fundamentals

Dacă doriți mai multe detalii despre aceste subiecte, vă rugăm să consultați curs gratuit UI Design Fundamentals la Scrimba. În el, veți afla despre elementele fundamentale într-un detaliu mult mai mare.

Mult noroc și codificare fericită 🙂