Folosind modul în care oamenii procesează informațiile vizuale în designul web

Proiectarea site-urilor web și a interfețelor cu utilizatorul a devenit mult mai ușoară în ultimii ani. Există atât de multe instrumente pe care le puteți utiliza, ceea ce face inutil să începeți de la zero atunci când dezvoltați UI-uri (consultați compilația nouă a UI). Dar nu sunt aici pentru a argumenta despre moartea designului web.

În schimb, ceea ce voi face este să încerc să explic conceptele bazate pe psihologie în spatele multitudinii de instrumente de design vizual (de la cele mai elementare kituri CSS la cele mai avansate teme premium). Nu o să le folosiți, ci să le înțelegeți. Sunt convins că acest lucru va facilita și modificarea celor existente cu succes.

Să analizăm modul în care funcționează mintea și corpul uman atunci când vine vorba de prelucrarea informațiilor vizuale și modul în care aceste cunoștințe sunt interpretate în proiectarea pentru web.

Principiile organizării perceptuale

Potrivit psihologiei Gestalt, întregul este diferit de suma părților sale. Cei care urmăresc această școală de gândire susțin că există câteva principii despre modul în care grupurile mintale umane obiectează. Acestea nu sunt pur și simplu teorii, vă minte, ci realități concrete despre organizarea grupurilor vizuale.

Mai jos veți găsi câteva legi și cele mai populare și bine cunoscute utilizări ale acestor principii. S-ar putea chiar să găsiți câteva idei noi pentru designul următor.

Legea asemănării

Primul principiu afirmă acest lucru obiectele mici care sunt similare sunt percepute ca un grup, mai degrabă decât mai multe instanțe ale aceluiași obiect mic. Similaritatea se poate baza pe formă, culoare, umbrire sau altă calitate. Acest principiu este baza model de design precum și numeroase modele de logo-uri geometrice și minimaliste.

De exemplu, această imagine prezintă un logo circular în loc de triunghiuri separate. Forma triunghiulară din partea de jos a vulturului ne face să credem că forma este, de asemenea, o parte a imaginii.

Probabil ați folosit, de asemenea, această lege fără să știți când creați câteva, cutii cu conținut similar cu dimensiuni similare pentru site-ul dvs. Dacă doriți să arătați că anumite elemente de conținut au aceeași importanță sau că au aceleași informații similare, creați o formă specifică doar pentru acest scop. În acest fel, utilizatorul dvs. va asocia imediat acea formă specială cu o anumită zonă de informații.

Legea Proximității

Conform acestei legi obiecte care sunt mai aproape unul la altul sunt considerate a fi din același grup. Aceleași pătrate, atunci când sunt redate unul lângă celălalt în proximitate apropiată, creează un sentiment de grupare.

Acest principiu a fost utilizat într-o mare măsură pe web în ultimul timp, mai ales când lucrați cu el bucle de conținut, de exemplu. pe bloguri și webshop-uri.

Puteți grupa imediat titlul, imaginea recomandată, metadatele și fragmentul împreună, chiar fără granițe sau fundaluri. S-ar putea să eliminați liniile și culorile inutile din designul dvs. pentru a deveni mai minimalist, dar totuși pe deplin comprehensibil.

Pentru comoditatea dvs., voi cita și Wikipedia care afirmă:

Legea formei bune

De asemenea, cunoscut sub numele de Legea lui Pragnanz sau Good Gestalt, această lege afirmă că avem tendința de a grupa obiecte împreună dacă ele formează un model simplu, regulat și ordonat. Mintea noastră încearcă să separe formele complexe și dificile perceptual în multe grupuri de forme pur și simplu de înțeles; acest lucru a condus la importanța concisității.

Acesta este, de asemenea, unul dintre motivele posibile ale succesului grid-based design și acest lucru sa făcut pe bază de tabele și pe bază de cadre (din fericire lucrurile din epoca întunecată a designului) structuri web atât de populare.

Dacă păstrați acest principiu în minte, probabil că nu veți ajunge să creați un site plin de forme complexe de blocuri de conținut care să fie conectate în minte prin celelalte legi de mai sus. Totuși, poți grupați obiectele împreună într-un mod interesant, de exemplu. într-o formă de diamant sau zmeură, deoarece acestea sunt încă percepute ca forme ordonate și concise.

Teoria culorii, percepția și utilizarea

Vizionarea culorii și percepția culorii este în mare măsură subiectivă bazat pe modul în care reacționează creierul spectatorilor la undele luminoase reflectate de obiecte sau forme colorate. Regula este că oamenii diferiți, chiar și fără deficiențe vizuale, văd același obiect în culori diferite (ați putea aminti rochia).

Proprietăți de culoare

Totuși, există trei proprietăți obiective ale culorii; nuanţă, valoare și intensitate.

Nuanţă este numele culorii așa cum este etichetat pe o roată de culoare sau într-un curcubeu. Există șase (sau doisprezece, în funcție de cine vorbești) nuanțe de bază: roșu, portocaliu, galben, verde, albastru și violet.

Galben, albastru și roșu sunt primar, portocaliu, verde și violet secundar nuanțe; de asemenea, există terţiar nuanțe care sunt amestecurile directe ale două nuanțe primare și secundare (de exemplu, verde galben sau violet roșu).

Valoare este luminozitatea sau întunericul culorii, denumită în continuare valoare ridicata pentru culorile luminoase sau valoare mica pentru culorile întunecate.

Intensitate se referă la strălucirea sau dimineața de culoare; aceasta înseamnă că o culoare cu aceeași nuanță și aceeași valoare poate fi în continuare diminuată sau strălucită prin schimbarea intensității și prin crearea unor ieșiri color diferite.

Cea mai înaltă intensitate a fiecărei culori este nuanța pe roata de culori (vezi mai jos), în timp ce culoarea cea mai mică este gri.

Contrastează culorile

Referindu-se la legile de similitudine menționate mai sus, mintea perceptorilor creează grupuri de obiecte mici pe care le văd pe baza unor proprietăți similare și diferite - adesea culori.

Când alegeți paleta dvs. de culori pentru site-ul dvs. web, mai ales dacă mergeți pentru o abordare minimalistă sau dacă proiectați o zonă de conținut greu de text, de ex. bloguri sau anunțuri, ar trebui să fie conștienți de contraste diferite de culoare care vă pot ajuta să găsiți valorile corecte de culoare pentru obținerea unui rezultat optim.

Există 7 contraste colorate conform lui Johannes Itten, deși voi menționa doar 3.

1. Contrast de nuanță

Galben, roșu și albastru la intensitate maximă sunt contraste directe și vii. Culorile secundare fac diferența mai puțin accentuată, dar totuși funcționează, la fel ca nuanțele terțiare, deși nu produc niciodată rezultate minunate ca pentru culorile primare.

2. Contrast complementar

Două culori sunt în contrast complementar dacă, atunci când sunt amestecate împreună, ele creează un gri neutru. Acestea sunt, de asemenea, numite ciudate perechi. Dacă sunt adiacente, ele sporesc intensitatea și intensitatea, în timp ce se amestecă împreună se anulează reciproc. Fiecare culoare are un singur complementar; pe roata de culori, perechile sunt diagonale opuse una față de cealaltă.

3. Contrast întunecat la lumină

Dacă doriți să experimentați un site web cu o singură culoare, folosind diferite valori de aceeași nuanță ar putea produce rezultate minunate. Deseori folosite în designul web minimalist, puteți obține rezultate excelente pe baza contrastului luminos-întunecat, dacă doriți să oferiți utilizatorilor opțiuni de culoare temă. Acest contrast este folosit și pentru designul în tonuri de gri.

Dacă doriți să urmăriți celelalte 4 contrasturi color, le puteți găsi aici.

Crearea paletelor și verificarea contrastelor

Cunoscând teoria este minunată, interpretarea ideilor tale este altceva. Nu trebuie să vă faceți griji, însă, web-ul oferă un mare sprijin pentru nevoile dvs. de colorare-jonglerie. Există o multitudine de instrumente care vă ajută să creați modele personalizate de culoare pe baza unor reguli de contrast color, de ex. Paletton sau Adobe Kuler.

Pentru scopuri web, poate doriți să verificați contrastele pe care ați ales să le utilizați la webAIM, la site-ul Jonathan Snook sau să descărcați o instanță a analizorului de contrast de culoare de către The Paciello Group aici.

Concluzie

Când începeți să lucrați cu o nouă temă sau începeți să modificați cele existente, încercați să vă gândiți la principiile percepției pentru a vă organiza conținutul și nu uitați să luați în considerare regulile de culoare atunci când dați designului forma finală și nuanța.

Nota editorului: Acest post de oaspete este scris pentru Hongkiat.com de către Marton Fekete. Marton este un dezvoltator de site-uri maghiari care a fost conectat recent la WordPress. El este un entuziast de redesign și scriitor de conținut liber, care îi place să joace RPG-uri în timpul său liber.