Un cadru de bază de proiectare vizuală

Designul vizual ca un set de competențe a trecut prin multe etape. Pentru cei nou pentru industrie, artefactul a atras mulți dintre noi în rol. Pentru designeri experimentați, este expresia fizică a muncii atentă a produsului. Deși importanța sa este controversată, aspectele nu se exclud reciproc. Designul vizual este complex. Ar trebui să fie înțeles pentru lățimea, complexitatea și flexibilitatea sa.

Ai nevoie de un ochi bun pentru design vizual.

Designul vizual este inclus cu conceptul de gust - capacitatea de a „ști” ce este bun sau nu. Este o trăsătură care urmărește majoritatea designerilor la petrecerile familiei atunci când este de așteptat să decoreze camera de zi cuiva sau să fotografieze fotografia de familie.

Gustul este de obicei considerat ca o dispoziție - un talent. Drept rezultat, abilitățile vizuale bune depășesc această linie, fiind rezultatul „a avea un ochi bun” sau a unor ani de practică.

Dezbaterea dacă talentul este real sau nu este o conversație mai mare. Cu toate acestea, ceea ce este adevărat este faptul că anumite părți ale setului de instrumente de proiectare vizuală pot fi obiective. Acest cadru își propune să clasifice aceste aspecte în trei dimensiuni, astfel încât să ne putem îmbunătăți cotletele vizuale și să creăm un limbaj pentru a vorbi mai bine despre el.

Deci, cum putem redefini designul vizual?

Un design bun transmite exact ceea ce a proiectat proiectantul. Pentru a aborda un design vizual mai bun, să ne uităm la modul în care criticăm activitatea vizuală. Nu ne întrebăm „arată bine?”. Vom compara interpretarea unei utilizări a unei interfețe cu cea prevăzută. Ne întrebăm cum se raportează lucrarea la cele mai importante rezultate pentru produs și utilizatorii săi. Spunem că interfețele arată aglomerate sau necunoscute.

Putem rezuma că designul vizual face următoarele:

  1. Comunică și organizează informații importante și complexe.
  2. Încurajează comportamentele prevăzute și devalorizează altele.
  3. Menține lizibilitatea și familiaritatea.

Prin urmare, putem asocia aceste obiective la trei întrebări pe care ni le putem pune atunci când evaluăm munca vizuală.

  1. Este util? Designul oferă valoare sau utilitate utilizatorului?
  2. Este clar? Proiectarea încurajează un comportament prevăzut? Urmează o narațiune care are sens.
  3. Este plăcut? Munca vizuală se simte nativă pentru produsul în care lucrează? Elementele sunt cunoscute? Se simte lustruit?

1. Este util?

Produsele folosesc reprezentări vizuale pentru a transmite informații sau funcții. Cârligul unui mâner al ușii oferă un remorcher sau o tracțiune. Creste pe stocarea bateriei unei telecomenzi oferă o tracțiune.

Interfețele digitale au și avantaje. De fapt, am început cu avantaje fizice similare, folosind umbre aspre și luciu pe butoane și iconografie care arătau similar cu obiectele fizice. De-a lungul timpului, tevile au dispărut și butoanele au devenit plate. Ei au evoluat într-o nouă familie de avantaje care diferă în aparență, dar prezentau o utilitate similară.

Proiectarea hărților utilitare funcționează în formular. Mai întâi ne uităm la euristicile care îmbunătățesc cât de repede ne amintim ce va face ceva doar privindu-l.

În acest exemplu, aici sunt avantaje comune în interfețele de utilizator digitale. Textul transmite informații consumabile. Butoanele transmit acțiunile întreprinse de utilizatori. Navigarea transmite modul în care utilizatorii se pot deplasa printr-o aplicație. În sfârșit, puteți avea și avantaje pentru expresii vizuale complexe. Un actor este o reprezentare a unei persoane, care este comună în produsele pe care le folosim zilnic.

În timp ce avantajele îmbunătățesc modul în care extrageți așteptările, acestea vă duc doar la partway. La nivel granular, există detalii care vă articulează mai bine interfața.

  • Dacă un buton îndeplinește o anumită funcție, trebuie să alegeți un limbaj care să descrie mai bine acțiunea.
  • Dacă o etichetă de text are o stare unică (adică un mesaj necitit), puteți utiliza culoarea sau greutatea pentru a o diferenția.
În acest exemplu, Adăugați în coș și Cumpărați acum permite utilizatorilor să progreseze printr-o conductă de achiziție. Cu toate acestea, limba implică două rezultate diferite. Adaugă în coș permite utilizatorilor să ia decizii mai târziu și să achiziționeze mai multe articole în același timp, precum într-un magazin de îmbrăcăminte. Cumpărați acum permite utilizatorilor să finalizeze o achiziție ca atunci când cumpărați un bilet de avion.

2. Este clar?

Bara de instrumente Microsoft Word 2010

În urmă cu 10 ani, instrumente precum Microsoft Word și Adobe Photoshop ofereau avantaje bune în produsele lor. Aveau butoane, etichete și iconografie evidente. Ei s-au acomodat cu diferite cazuri de utilizare, cu diferite caracteristici. Cu toate acestea, unele caracteristici au fost greu utilizate, dar altele au fost folosite tot timpul.

Modelele vizuale sunt acum reduse și opinate. Acestea permit oamenilor probleme și obiectivele de afaceri să împuternicească acțiuni și informații specifice. Acestea realizează o hartă a componentelor către modele mentale intuitive, încurajând totodată modelele mentale care sunt benefice pentru produs.

La baza sa, claritatea țesă disponibilitățile într-o narațiune. Narațiunile vă permit să înțelegeți mai clar fluxul unei interfețe și intenția produsului. Unele dintre cele mai frecvente sunt trase din psihologia Gestalt.

  1. Prominenta: Folosiți tratamente vizuale mai puternice pentru ca componentele să se simtă mai importante și tratamente mai ușoare pentru cei care sunt mai puțini.
  2. Proximitate: Puneți conținutul legat mai strâns.
  3. Asemănare: păstrați asemănări între componentele care au un comportament similar.
  4. Închidere: Încercați componente care sunt legate.
  5. Continuitate: Plasați conținutul liniar (de exemplu, într-un flux) pentru a arăta asemănarea între mai multe componente.
Acesta este un exemplu de preponderență. Este nevoie de componenta de bază a unui buton, dar apoi folosește un umplutură de fundal greu în comparație cu un contur luminos. Amândouă, atrage atenția asupra a ceea ce ar face probabil un utilizator și a ceea ce produsul dorește ca utilizatorul să facă - finalizează o tranzacție.

3. Este plăcut?

Componente utile care sunt grupate într-un mod clar transmit funcție și o opinie despre ceea ce ar trebui să facă un utilizator. Creierul nostru procesează informațiile în fiecare instanță. El preia exemple similare din interfețele anterioare și căutăm modele și cele care le rup - fiecare determinând procesarea energiei creierului nostru în plus. Prea multe dintre aceste momente se manifestă ca frustrare sau confuzie. Vedem și aceste probleme în viața reală - atunci când există un mic pete pe fața noastră sau când un păr este în afara locului. Într-o interfață, în timp ce nu putem identifica în mod explicit diferența dintre un font de 24 și 25 de caractere, îl putem sesiza. Nu putem discerne exact, dar creierul nostru știe că se simte ceva.

Pentru a proiecta experiențe vizuale plăcute, trebuie să stabilim reguli reductive și semnificative cu privire la ceea ce este diferit și la ceea ce este similar pentru a crea tipare simple, recunoscute și coerente.

Cum putem arăta diferența?

În psihologie, diferența doar notabilă (JND) este cantitatea de modificare pentru ca o diferență să fie observată. Există o valoare JND pentru a observa o greutate mai mare sau pentru a observa când o culoare este o nuanță diferită. Cu toate că putem crea modificări de trepte pentru dimensiuni și culoare care sunt ușor vizibile distincte, totuși dorim să subliniem distincția fără a exagera.

Diferențiatorii vizuali trebuie să fie modici și importanți. Avem nevoie într-adevăr de o altă tipografie pentru a indica un conținut mai puțin important? Probabil ca nu. Avem nevoie să utilizăm atât o imagine de profil circulară, cât și una pătrată pe întregul produs? Probabil ca nu. Cu prea mulți diferențiatori vizuali, indicii vizuali sunt mai greu de observat și de a atribui sens.

Acesta este un exemplu de aranjare reductivă a tratamentelor textului și a culorilor. Fiecare etapă trebuie să fie distinctă și unică și să îi atribuie un anumit sens.

Cum putem arăta similitudine?

Când scrieți pe hârtie liberă, puteți scrie cu ușurință pe următoarea linie, fără să vă uitați. Liniile folosesc o distanțare consistentă pentru a reduce efortul de a găsi linia următoare, creând ritm vizual. Produsele digitale fac același lucru. Acestea creează o așteptare repetând elemente vizuale și organizații, cum ar fi plasarea unei fotografii de profil în partea stângă sus a tipurilor de conținut.

Asemănarea, în general, poate fi atribuită designerilor care folosesc tratamente similare în forme simple, cum ar fi două dimensiuni de antet diferite pentru secțiuni și subsecțiuni. Ele pot crea aceleași comportamente așteptate pentru forme complexe precum oamenii și companiile.

Chiar și la nivel granular, poate fi la fel de simplu ca să folosești întotdeauna roșu când există o eroare sau să folosești un tratament consecvent pentru scrierile de instrumente și textul educațional. Poate fi, de asemenea, folosind reguli de distanțare consistente între elemente.

Mai sus este un exemplu de tratament vizual care folosește o treaptă de 4pt pentru a crea margini și căptușire între elemente. Te împiedică să fii arbitrar, dar oferă, de asemenea, produsului tău spațiu alb.

Punând laolaltă

Niciun principiu nu poate trăi fără celelalte. Deși nu este cuprinzător, abordează probleme majore în ceea ce privește designul vizual la un nivel novice. Se combate impulsul de a umple spațiul negativ cu informații inutile sau de a crea noi paradigme vizuale „pentru că arată”. Acesta avertizează împotriva supraîncărcării deciziei, dând mai multor acțiuni aceeași pondere. De asemenea, încurajează gândirea și coerența atunci când se aplică hexadecimale, dimensiunea fontului și distanțarea.

Cadrul în trei pași vă obligă să parcurgeți fiecare principiu și să vă scufundați adânc. Vă permite să identificați ce parte a designului vizual la care sunteți cel mai slab și le permite altora să critice în mod mai clar lucrarea dvs. Cu toții încercăm să îmbunătățim, dar avem nevoie de același vocabular pentru a o face. Deci, data viitoare când evaluați lucrul vizual, puneți întrebări:

Este util? Este clar? Este plăcut?

___

Cadrele nu prescriu ceea ce este corect, ci creează, în schimb, un vocabular care să alinieze concepte pe care le folosim cu toții, dar nu le etichetăm. Cu toții avem o părere despre ceea ce înseamnă pentru munca vizuală să fie utilă, clară sau plăcută. Prin urmare, dacă nu sunteți de acord, vă rugăm să despachetați definițiile, să începeți o discuție și să ne aliniem. Cu cât putem găsi mai repede elementele comune, cu atât este mai ușor să desfacem adevărurile și cu atât mai mulți oameni ne putem antrena pentru a construi experiențe mai bune.

Mulțumesc lui Brad Birdsall pentru gândurile și feedback-ul său!