5 linii directoare cheie pentru web design vizual

Imagine oferită de Christos Tsoumplekas, https://www.flickr.com/photos/tsoumplekas/

Imagine oferită de Christos Tsoumplekas, https://www.flickr.com/photos/tsoumplekas/

Ceea ce vedeți nu este întotdeauna ceea ce obțineți. Ochiul uman este un lucru complicat și, desigur, trebuie să fie, deoarece viziunea este simțul nostru dominant. Dar o mulțime de comportamente ale ochiului uman pot fi ciudate, curioase sau de-a dreptul ciudate.

Ce înseamnă acest lucru pentru un mediu vizual precum designul web? Mult. De aceea am scris și am lansat-o pe a noastră Web UI Design pentru ochiul uman serie. Cărțile electronice gratuite acoperă faptele mai puțin cunoscute despre modul în care oamenii percep stimularea vizuală - și ce înseamnă pentru designul web.



Prima carte de 85 de pagini, Culori, spațiu, contrast , examinează fundamentele vederii dintr-o nouă perspectivă. Mai jos, ne vom scufunda în câteva lecții de bază ale cărții electronice care se aplică designului web zilnic.

01. Modul în care grupați elemente sugerează funcția lor

Vizitatorii dvs. utilizează o mulțime de site-uri diferite pe zi, iar acestea sunt o mulțime de sisteme diferite și instrucțiuni de utilizare pentru a ține evidența. Utilizatorii noi o au și mai greu, abordând site-uri fără cunoștințe prealabile despre modul în care funcționează.

Deci, cu cât utilizatorul dvs. trebuie să gândească mai puțin, cu atât mai bine. Pentru a găsi „comenzi rapide” pentru învățare, principiile Gestalt recomandă să acordați atenție modului în care vă grupați elementele.

Principiile Gestalt sunt rezultatele unor studii psiho-științifice intensive asupra vederii umane din prima jumătate a secolului XX. Cercetarea lor s-a dovedit indispensabilă pentru designul web modern, iar această carte acoperă cele mai semnificative.

În ceea ce privește gruparea, aceste principii arată că gruparea elementelor apropiate sugerează că au aceeași funcție. Cel mai clar exemplu în acest sens vine de la Facebook:

Sursa: Facebook

Sursa: Facebook

În acest exemplu tipic de Facebook, observați cum funcțiile pentru „Apreciază”, „Comentează” și „Distribuiți” sunt grupate toate împreună. Dacă cineva nu ar fi folosit Facebook niciodată, ar ști intuitiv că aceste elemente sunt legate și, după ce au aflat cum funcționează unul, ar ști cum funcționează toate.

Mai mult, observați cum întregul post alb este închis de pe fundalul gri? Această incintă arată că tot conținutul din interior este legat. Asta înseamnă că nu există confuzie cu privire la postarea cu care funcționează opțiunea „Apreciază” din incintă.

02. Spațiul alb afectează atenția

Arta designului web implică influențarea locului în care arată utilizatorul și, pentru aceasta, unul dintre cele mai bune instrumente este de fapt nimic. Spațiul alb, cunoscut și sub numele de spațiu negativ, este pur și simplu absența altor elemente - nu trebuie să fie literalmente alb. Puterea sa constă în capacitatea sa de a atrage sau respinge atenția, în funcție de modul în care îl folosiți.

Un ghid de bază pentru utilizarea spațiului alb este acesta: cu cât este mai mult spațiu alb în jurul unui element, cu atât va atrage mai mult atenția. Mai puțin spațiu înseamnă mai puțină atenție. Această regulă este unul dintre elementele fundamentale ale mișcărilor de design minimaliste și plane de pe web astăzi - prezentând mai puține elemente pe ecran înseamnă că cele care rămân sunt mai puternice.

Spațiul alb este, de asemenea, utilizat împreună cu primul nostru punct despre grupare. Pentru a crea astfel de grupuri, trebuie să existe doar cantitatea potrivită de spațiu alb atât între grupuri, cât și elementele dintr-un grup.

Imagine oferită de www.quentinmorisseau.com

Imagine oferită de www.quentinmorisseau.com

Site-ul portofoliului pentru Quentin Morisseau folosește bine spațiul alb. Atenția utilizatorului se concentrează mai ales pe o singură opțiune de meniu odată, deoarece doar una domină ecranul.

El include inteligent destule opțiuni, astfel încât utilizatorul să știe că poate derula - dar nu prea mult pentru a diminua prima.

03. Culorile ciocnitoare fac ca elementele să iasă în evidență

Goliciunea nu este singura modalitate de a influența fluxul vizual al utilizatorului. Culorile, în special cele complementare, vor ieși, de asemenea, în evidență pe orice pagină dată.

Fiecare culoare are un complement natural care o contrastează. Complementul unei culori este cel direct opus acestuia pe o roată de culoare ca cea de mai jos. De exemplu, complementul roșu este verde, complementul albastru este portocaliu și așa mai departe.

Imagine oferită de Ray Trygstad, modificată de en.wikipedia.org/wiki/User:Stib.

Imagine oferită de Ray Trygstad, modificată de en.wikipedia.org/wiki/User:Stib.

Ceea ce înseamnă acest lucru în designul web este că culorile complementare pot contribui la atragerea unei atenții sporite, făcându-le perfecte pentru îndemnuri, promoții sau orice alt element pe care doriți să îl vadă utilizatorii dvs.

Acest lucru este văzut destul de frecvent în butoanele de îndemn - dacă fundalul dvs. este în mod dominant violet, un buton galben ar fi sigur că va fi văzut.

04. Coerența ajută la învățare

Coerența vizuală nu este doar ceva care să îi facă pe perfecționiști fericiți - servește de fapt unui scop de utilizare foarte practic.

Importanța consistenței vizuale este aceea că stabilește un model care vă instruiește vizitatorii cu privire la modul de utilizare a site-ului. O utilizare consecventă a acelorași atribute - culori, tipografie, locație etc. - îmbunătățește cât de repede utilizatorii dvs. preiau modul în care funcționează sistemul dvs.

Luați, de exemplu, modul în care gestionați legăturile interne și externe. La fel ca majoritatea site-urilor, s-ar putea să puneți linkuri în albastru și subliniat, dar cum faceți diferența între linkurile din site și cele din afara site-ului? S-ar putea să schimbați o culoare diferită, cum ar fi Reddit de mai jos: linkurile externe sunt albastre, în timp ce linkurile interne sunt gri (ambele sunt subliniate când sunt trecute peste mouse pentru a arăta că pot fi făcute clic).

Sursa: Reddit

Sursa: Reddit

Nu contează atât de mult cum vă separați elementele, atâta timp cât rămâneți cu orice metodă alegeți. Tot textul albastru de pe Reddit este un link extern, fără excepție.

Când mențineți acest tip de coerență la nivel de site, începeți să vă „învățați” rapid și subconștient utilizatorul cum să folosească un site. După câteva minute pe Reddit, utilizatorii vor ști că textul gri între paranteze de lângă titlu, „(imgur.com)” din exemplu, le va trimite la o altă pagină Reddit, chiar dacă contextul este în mod clar un link către alt site. Puterea consistenței vizuale este mai puternică decât chiar logica - odată stabilit un model, este greu de rupt.

Comparați un site vizual consistent cu unul care nu este. Dacă uneori Reddit ar folosi text roșu pentru linkuri externe, utilizatorul nu ar ști ce să creadă. Ar trebui să reînvețe sistemul pentru a continua să folosească site-ul - ceea ce înseamnă că probabil ar spune că uită și vor pleca.

cum să copiați un font în Photoshop

05. Fiecare culoare are efecte psihologice unice

Culorile sunt o poartă directă către starea de spirit a oamenilor, iar în designul web poate fi o metodă rapidă și eficientă pentru a expune o anumită atmosferă sau temă. Proprietățile specifice fiecărei culori sunt ceea ce artiștii știu de secole, iar știința lor despre teoria culorii nu este mai puțin utilă în designul web.

Imagine oferită de Tristan Bowersox, https://www.flickr.com/photos/9516941@N08/

Imagine oferită de Tristan Bowersox, https://www.flickr.com/photos/9516941@N08/

În general, nu există o culoare care să fie mai bună decât altele (deși albastrul este destul de popular pentru site-urile din mai multe industrii, având în vedere caracterul prietenos și fiabilitatea acestuia). Culorile pot fi folosite pentru a îmbunătăți și a încuraja starea de spirit potrivită în orice scop servește site-ul dvs. - dar mai întâi trebuie să știți ce culori fac ce.

Mai jos vom oferi o imagine de ansamblu foarte simplă asupra caracteristicilor pe care culorile primare, atunci când sunt utilizate în mod dominant, le vor acorda site-ului dvs.:

  • Roșu - puternic, pasionat, alarmant
  • Portocaliu - jucăuș, prietenos, ieftin
  • Galben - fericit, alert, cald
  • Verde - natural, prosper, echilibrat
  • Albastru deschis - senin, primitor, răcoritor
  • Albastru închis - de încredere, profesional, sigur
  • Violet - luxos, romantic, misterios
  • Negru - sofisticat, nervos, apăsător
  • Alb - curat, virtuos, simplu
  • Gri - neutru, formal, sumbru

Acestea sunt doar o simplă suprasolicitare. Pentru o analiză mai minuțioasă a efectelor psihologice ale culorilor, plus exemple reale de site-uri care le folosesc bine, consultați Piesa excelentă a lui Cameron Chapman .

Concluzie

Întrebând „Cum doriți să fie site-ul dvs.?” nu este departe de „Cum vrei să arate site-ul tău?” Percepțiile utilizatorilor dvs. sunt realitatea, iar aspectele vizuale le modelează percepția. Proiectarea unui site web fără a cunoaște știința din spatele site-ului uman este ca și cum ai construi o masă fără să știi nimic despre lemn. Vizualele sunt materialele cu care lucrează designerii web.

Descărcați această carte gratuită astăzi

Descărcați această carte gratuită astăzi

Web UI Design pentru ochiul uman seria își propune să împărtășească cunoștințele pe care fiecare designer ar trebui să le cunoască despre vedere și despre cum se raportează la designul UI. În Culori, spațiu și volum de contrast , discutam:

  • principiile esențiale Gestalt - modul în care funcționează și cum să le aplicăm la designul web
  • elementele de design spațial pentru interfețe web
  • cum să spațiem elemente pe o pagină într-un mod pentru a optimiza interacțiunea cu utilizatorul
  • ce este „chunking” și cum funcționează inerent cu memoria umană
  • diferitele tipuri de contrast și când trebuie aplicate fiecare
  • cele mai importante zone pentru consistența vizuală
  • impacturile psihologice ale fiecărei culori
  • cele mai comune scheme de culori pentru web și cum să le aplicați

Dacă subiectul pare interesant, nu ezitați să îl verificați Biblioteca gratuită a UXPin .

Cuvinte : Jerry Cao

Jerry Cao este un strateg de conținut la UXPin - aplicația wireframing și prototipare. Pentru a afla mai multe despre cum să creați interfețe digerabile vizual, descărcați cartea electronică gratuită Design UI web pentru ochiul uman: culori, spațiu, contrast .

Ca aceasta? Citiți acestea!