Psihologia designului: modelarea imaginii dvs. online

Publicat: 2023-02-15

Am acoperit în detaliu importanța culorii în cele două versiuni anterioare ale seriei noastre „Psihologia designului”. Alegerea culorii, totuși, este doar o parte a luptei împotriva designului prost.

Indiferent dacă creați un model de fundal pentru un nou design web sau vă gândiți la ambalajul unui nou produs, în cele din urmă va trebui să puneți creionul pe hârtie și să începeți să schițați. Indiferent ce formă începeți să vă formați, va avea un efect puternic asupra spectatorilor dvs.

Citiți mai departe pentru a afla mai multe despre asocierile comune pe care clienții dvs. le vor face între formele pe care le alegeți și ceea ce spun ei despre marca dvs. generală. În plus, vezi câteva exemple din lumea reală a modului în care aceste forme au fost folosite în design-uri de toate tipurile!

  • Linii
  • Cercuri și ovale
  • Triunghiuri
  • Cadrilatere
  • Poligoane
  • Forme abstracte

Linii drepte și curbe

Când vine vorba de lucru pe linie, va trebui cu adevărat să tragi linia dintre unghiular și curbat. Liniile pot fi forma de bază care dă naștere tuturor lucrărilor de artă, dar logo-urile și design-urile web care se bazează foarte mult pe liniile sunt orice altceva decât simple.

De obicei, oamenii au o preferință pentru liniile curbe față de liniile drepte. Acest lucru poate fi atribuit neurofiziologiei sistemului vizual. Chiar și bebelușii ai căror ochi nu sunt complet formați își vor concentra atenția mai mult asupra formelor curbate decât asupra liniilor ascuțite, unghiulare.

Captură de ecran de pe site-ul web Affinity, cu sigla lor triunghiulară rotunjită
Marginile rotunjite ale logo-ului Affinity atenuează efectul general asupra utilizatorilor

Cu toate acestea, curbele nu vor crește neapărat timpul în care un utilizator își va concentra atenția asupra designului dvs. De fapt, este mai probabil ca unghiurile ascuțite să atragă atenția rapidă a utilizatorilor tăi. Acolo unde curbele conotă moliciune și complexitate, liniile și unghiurile ascuțite conotă seriozitate și simplitate.

Studiile au arătat că obiectele unghiulare pot declanșa un sentiment de amenințare. S-a demonstrat că claritatea formelor crește activitatea în amigdala, care este zona creierului care procesează frica. Din acest motiv, unghiurile ascuțite solicită adesea atenția publicului și atrag privirea mai repede decât omologii lor curbați.

Puteți folosi aceste modele naturale de răspuns uman pentru a crea modele care să facă publicul să simtă ceva. Pentru mărci distractive, uşoare, liniile curbe vă pot ajuta să spargeţi blocurile de text de pe site-uri şi să creaţi un sentiment de capriciu. Cu toate acestea, pentru personajele de marcă mai serioase, unghiurile ascuțite și liniile drepte vor ajuta să aducă acasă un sentiment de gravitație.

Captură de ecran de pe site-ul The Inlay, cu un fundal alb și trei linii perpendiculare
Studioul de creație The Inlay folosește linii subțiri și drepte pentru a-și sparge site-ul minimalist și pentru a vă menține ochii în mișcare

Studioul creativ The Inlay folosește linii drepte și un design minimalist pentru a-ți atrage privirea în timp ce parcurgeți paginile, dar evită utilizarea excesivă a unghiurilor ascuțite care pot declanșa răspunsuri negative.

Compania de consultanță tehnologică Affinity, totuși, folosește mult limbaj orientat spre relații pe site-ul lor. Logo-ul săgeată rotunjit și formele curbe de-a lungul întregului design se simt mult mai accesibile decât imaginile tradiționale și mai rigide utilizate în spațiul tehnologic.

Cercuri și ovale

Dacă numiți pe cineva pătrat, probabil că insinuați că este plictisitor. Opusul, atunci, ar însemna că cercurile înseamnă distracție, tinerețe și o mentalitate lipsită de griji. Este logic ca, deoarece s-a demonstrat că atenția bebelușilor ține mai mult timp pentru liniile curbe, ei tind să prefere jucăriile circulare.

Deschiderea și uniunea vin în minte când spectatorii tăi privesc un cerc. Formele rotunde pot, de asemenea, conota sentimente de comunitate sau protecție, cum ar fi să fii în siguranță în propria ta bula sau chiar o îmbrățișare drăguță. Alte caracteristici ale cercurilor pot include prietenia, căldura, feminitatea și renașterea (gândiți-vă: cercul vieții).

Captură de ecran de pe site-ul web Ring cu patru dintre produsele lor pentru sonerie
Butonul luminos în formă de inel de pe produs în sine este un alt indiciu vizual pentru utilizatorii Ring

Din perspectiva denumirii, soneria Ring a intrat în simțurile utilizatorilor lor. Din punct de vedere auditiv, vă puteți imagina că soneria „sune” în timp ce vizual, „soneria” imaginată este legată atât de logo-ul lor, cât și de modul în care este proiectat hardware-ul fizic.

Captură de ecran de pe pagina principală a meniului Netflix pentru emisiunea The Circle. Spatele a două figuri feminine se uită la un ecran de concurenți
Cercurile se găsesc în imagini de profil, forme de butoane și chiar în designul arhitectural al clădirii în care locuiesc concurenții.

The Circle, un reality show de competiție Netflix, este un alt loc în care brandingul circular are cel mai mult sens. Premisa este că un grup de oameni care ar putea să spună sau nu adevărul despre identitatea lor încearcă să câștige popularitate printre semenii lor doar printr-o platformă de socializare numită The Circle. Obiectivul? Rămâneți în cadrul comunității – rămâneți în The Circle.

Triunghiuri

Accelerația, mișcarea și echilibrul, triunghiurile ilustrează cu ușurință activitatea. Sunt forme energice, puternice, care pot evoca o serie de emoții, de la entuziasm la prudență.

Triunghiurile au impact, iar modul în care sunt direcționate este crucial, deoarece direcția le va schimba sensul în mintea consumatorului. De exemplu, un triunghi îndreptat în sus poate arăta putere, dar atunci când este întors chiar și ușor oblic, poate arăta instabilitate. Dar mai multe triunghiuri în toate direcțiile diferite pot demonstra distracție sau emoție, cum ar fi confetti!

Captură de ecran a imaginii de previzualizare pentru hit-ul lui Rick Astley „Never Gonna Give You Up” cu o pictogramă de redare triunghiulară în mijloc
Această imagine de previzualizare a unui videoclip YouTube folosește o pictogramă triunghiulară „redare”.

Butonul de redare al serviciului de streaming video sau muzical preferat este mai mult decât probabil doar un triunghi îndreptat spre dreapta. Seamănă cu o săgeată care indică mișcarea înainte, spre deosebire de cele două linii drepte care ar indica o pauză (o „ruptură” literală între două linii drepte).

Captură de ecran a paginii de pornire HGTV cu sigla lor
„Home & Garden Television” prezintă casa cu un triunghi simplu deasupra siglei

HGTV folosește designul triunghiular și într-un mod inteligent. Triunghiul isoscel se află în partea de sus a semnului lor verbal, o modalitate clară, dar simplă de a ilustra acoperișul unei case. „V” de la celălalt capăt al logo-ului face o mare contrabalansare, deoarece arată în jos.

Cadrilatere

Cadrilaterele includ orice formă cu patru laturi. Pătratele și dreptunghiurile sunt cele mai comune exemple, dar aici sunt incluse și trapezele, diamantele și încă câteva. Pătratele și dreptunghiurile sunt adesea simboluri ale stabilității și stabilității, conformității sau simplității. Unghiurile lor drepte sugerează vizual raționalitate, ordine și structură.

Pătratele și dreptunghiurile sunt adesea folosite de mărcile care doresc să pară drept pragmatice sau pragmatice. De la National Geographic la LinkedIn la Domino, pătratele și dreptunghiurile sunt comune, în special pentru logo-uri, într-o gamă largă de industrii.

Alte tipuri de patrulatere vor transmite, de asemenea, acele sentimente de regularitate, dar cu o întorsătură vizuală mai avangardă, contemporană. Diamantele pot fi folosite pentru a transmite produse de lux sau de ultimă generație datorită asocierii noastre inconștiente dintre formă și piatră prețioasă. Cadrilatere precum zmeele și romburi sunt excelente pentru a sugera un nivel de stabilitate fără a recurge la modele suprautilizate.

Captură de ecran a modelului paralelogram pe site-ul de design al lui Mokthar Saghafi
Captură de ecran de pe site-ul de design al lui Mokthar Saghafi

Designerul web australian Mokthar Saghafi folosește o formă de paralelogram pentru modelul geometric al site-ului său. Figurile cu patru fețe sunt bine stivuite, sugerând stabilitatea conotată de obicei cu forme cu patru fețe. Totuși, dacă le setați ușor deplasate ca romb în loc de dreptunghi adevărat, adaugă un alt strat de interes vizual.

Semnalizare stradală în formă de bloc, împodobită cu sigla Lego
Fotografie de Faiz Zaki

În timp ce Lego nu par cu picioarele pe pământ sau conform, cu siguranță sunt stabile – cum altfel ai construi cu ele? Logo-ul lor pătrat este, de asemenea, un apel vizual la produsul lor. Arată foarte remarcabil de asemănător cu o cărămidă Lego pătrată cu patru știfturi.

Pentagoane, hexagoane și octagoane

În matematică și design, acest colectiv de forme este cunoscut sub numele de „poligoane”. Poligon este un termen umbrelă folosit pentru a descrie orice formă geometrică 2D, dar este de obicei rezervat celor cu 5 sau mai multe laturi.

În natură, aceste forme se găsesc peste tot, de la faguri la modele de scoici până la cristale și formațiuni de stâncă. În design web, totuși, acestea sunt utilizate mai rar. Acest lucru poate fi un lucru bun pentru clienții dvs., deoarece vă va ajuta să vă deosebiți de tendințele de design mai comune!

Complexe și futuriste, poligoanele sunt adesea folosite pentru a crea o aură modernă, contemporană, care este încă bine structurată. Cu toate acestea, anumite poligoane sunt utilizate în mod obișnuit în industriile de nișă. De exemplu, companiile de producție și reparații de mașini și mașini folosesc adesea hexagoane și octogoane în design, deoarece seamănă cu capul unui șurub.

Captură de ecran de pe pagina de pornire Built By Buffalo în care proiectele lor prezentate sunt afișate într-un model de tip fagure
Folosirea acestui model pentru a-și prezenta munca permite Built By Buffalo să arate o mulțime de proiecte în foarte puține imobiliare web

Aspectul hexagonal folosit de agenția de web design din Marea Britanie Built By Buffalo este o modalitate excelentă de a arăta o mulțime de exemple din munca lor în avans, fără ca aceasta să le copleșească pagina de pornire. Este apoi folosit pe tot site-ul web pentru a prezenta fotografii ale echipei, pentru a arăta fotografii distractive de la birou și pentru a prezenta informații importante.

Captură de ecran de pe pagina Despre site-ul Pentagon Tours. Trei linii diagonale decupează o fotografie de tur ca element grafic
Liniile puternice ale logo-ului Pentagon Tours sunt imitate cu tratamente grafice la imaginile de pe site

Pentagonul este una dintre cele mai recunoscute clădiri din lume și este numit pe bune pentru structura sa cu cinci laturi. Un prim exemplu de utilizare a poligoanelor pentru proiectarea arhitecturală, clădirea în sine transmite stoicism și stabilitate

Forme abstracte

Există alte câteva forme geometrice și abstracte care sunt utilizate în mod obișnuit în proiectele web și de produse, promoții și eforturile de branding. Să facem o privire de ansamblu rapidă asupra unora dintre aceste forme populare și semnificațiile lor.

Blobs

Blob-urile sunt adesea forme care sunt caracterizate ca distractive sau prostii. Celebrul „efect bouba/kiki” a dovedit că indivizii din diferite culturi și sisteme de scriere vor atribui cuvântul absurd „bouba” formelor blob, în ​​timp ce „kiki” este asociat cu forme abstracte înțepătoare.  

Când alegeți să utilizați forme abstracte ascuțite cu margini înțepătoare, veți atrage rapid atenția spectatorului. Cu forme mai rotunde, totuși, îi vei face să se simtă mai confortabil și mai jucăuș.

Captură de ecran din meniul de navigare al lui Buzzworthy cu o formă bulboasă care prezintă o fotografie alături de cuvintele „lucru. studio. echipă. contact. casă de distracție”.
O formă animată „bouba” apare când deschideți meniul de navigare Buzzworthy u

Studioul de design personalizat WordPress din Brooklyn, Buzzworthy, folosește o mulțime de forme de blob și animații de tranziție bulboase pentru a-și prezenta stilul distractiv și funky.

Cruci

Folosite adesea pentru a prezenta spiritualitatea și vindecarea, conexiunea sau echilibrul, crucile apar tot timpul în designul web. Este cel mai comun mod vizual de a conota o întâlnire sau o legătură între două lucruri. O altă utilizare comună a unei cruci în design este ca semn „plus”, indicând că puteți adăuga ceva la un coș sau puteți extinde pentru mai multe informații.

În logo-uri, crucile sunt de obicei rezervate organizațiilor religioase datorită legăturilor lor religioase puternice, dar și alte utilizări mai agnostice ale formei au avut succes.

Captură de ecran de pe site-ul Crucii Roșii Americane, care prezintă emblematica lor „cruce roșie”.
Captură de ecran de pe site-ul Crucii Roșii Americane

Crucea Roșie Americană este una dintre cele mai notabile organizații care utilizează imaginile încrucișate. Munca lor se află la intersecția dintre indivizi care au nevoie de ajutor și indivizi care pot ajuta în timpul sau după un dezastru. Logo-ul Crucii Roșii le plasează la intersecția celor două lucruri, în timp ce face aluzie vizuală la vindecare și sănătate.

Spirale

Spiralele conotă mișcare și progresie. Spiralele și buclele rotunjite ilustrează adesea perfecțiunea, frumusețea și evoluția. Dacă spirala dvs. este mai ascuțită, ca o mișcare în zig-zag, este mai probabil să transmită un pivot, o schimbare sau o nouă direcție pe care o ia un produs, o companie sau un serviciu.

Direcția spiralei tale va avea, de asemenea, mult de-a face cu modul în care este percepută, mai ales dacă intenționezi să o animați. Ultimul lucru pe care îl doriți este să încercați să transmiteți dezvoltare, creștere sau creativitate și să ajungeți să vă trimiteți utilizatorii într-o spirală descendentă literală. La fel ca în majoritatea lucrurilor, transmiteți mișcare pozitivă făcându-vă spiralele să se miște în sus și la dreapta atunci când este posibil.

Captură de ecran de pe pagina principală a Rallyului, cu o spirală galbenă pe fundal alb
Pe măsură ce derulați, spirala se va mișca mai repede și își va schimba culoarea. Dacă te oprești pentru a citi, spirala se animă încet în sus

Rally, un studio de produse digitale din Salt Lake City, UT, folosește o spirală simplă pe un fundal alb pentru întregul site. Culorile în schimbare și mișcarea dinamică a spiralei mențin spectatorii interesați vizual și creează o experiență de utilizator coerentă.

Forme organice

Formele organice includ frunze, ramuri, rădăcini, valuri, stele, nori și multe altele. Acolo unde formele geometrice pot fi folosite împreună pentru a crea imagini (de exemplu: un pătrat cu un triunghi în partea de sus devine o casă simplă), formele organice de obicei de sine stătătoare ca o imagine în sine.

Aceste forme vor fi de obicei neregulate sau asimetrice (dar nu întotdeauna) și vor avea o asociere cu lumea naturală într-un fel. Ideea de „nor” este o utilizare perfectă a imaginilor organice.

Captură de ecran de pe pagina de pornire SoundCloud. Logo-ul lor din colțul din stânga este în formă de nor, jumătatea din stânga este compusă din mai multe linii verticale subțiri, așa cum ați vedea într-un fișier audio
Sigla SoundCloud folosește imagini naturale pentru a face tehnologia mai distractivă și mai accesibilă vizual

Ideea de stocare „în nor” leagă ceva foarte amețitor și tehnic – o „locație” intangibilă care deține informații – și o leagă de lumea naturală, făcând-o mai accesibilă pentru novicii în tehnologie. SoundCloud, de exemplu, este un site de partajare a muzicii pe care utilizatorii pot încărca fișiere audio și le pot partaja unei comunități în creștere de iubitori de muzică de pe tot globul.

Mintea din spatele designului

Ca întotdeauna, acestea nu sunt reguli stricte și rapide. Utilizați mai multe forme, greutăți ale liniilor și aliniamente în designul dvs. pentru a crea interes vizual. Utilizarea mai multor elemente împreună vă va permite să spuneți o poveste pe care cititorii dvs. o pot vedea cu ochii și o pot simți în intestine.

Centrul de resurse WP Engine este sursa dumneavoastră de informații despre toate aspectele legate de design, iar seria noastră Psychology of Design se referă la utilizarea elementelor fundamentale ale designului pentru a atrage clienții cu un brand bine planificat.

Citiți părțile unu și două pentru o scufundare profundă în semnificațiile culorii și cum să le folosiți în povestirea vizuală. Apoi, fii atent la partea a patra, care va analiza importanța fontului, a plasării conținutului și a alegerii cuvintelor.

Partea 1
Partea 2