Design. Visual Design.

Delia Prisecaru
UPB, sII 2019
 Agenda

• Principii ale unui design de calitate/good design

• grid și layout
• Feedback/word, affordance
• ierarhie vizuală
• tipografie
 Design = inovare
TP 1 radio/record player portabil,
1959, Dieter Rams pentru Braun
• Posibilitățile există întotdeauna
• Tehnologia testează permanent
limitele posibilului, design-ul
trebuie să recupereze.
• Designul inovator se cumulează
cu tehnologia inovatoare și nu
are niciodată un maxim absolut.
• Apple, Braun, Microsoft
Design-ul accentuează funcționalitatea

• Produsul este cumpărat pt uz.

• Criterii: funcționalitate
psihologică și estetică vizuală.
• Design-ul evidențiază modul
de interacțiune cu obiectul și
punctele lui forte
MPZ 21storcător fructe, 1972,
Dieter Rams și Jürgen Greubel
pt Braun
Design-ul conferă plăcere vizuală
RT 20 radio, 1961, Dieter Rams
pt Braun
Calitatea estetică a unui
produs este integrată
pentru utilitatea sa,
deoarece produsele pe care
le folosim în fiecare zi
afectează și influențeaza
persoana noastră și
bunăstarea. Numai
obiectele bine executate
pot fi frumoase.
Prin design un obiect devine inteligibil

Clarifică structura
produsului.
Talking Product
În cel mai bun caz, este
explicativ.
Cylindric T 2brichetă, 1968,
Dieter Rams pt Braun
Prin design un obiect devine inteligibil

Clarifică structura
produsului.
Talking Product
În cel mai bun caz, este
explicativ.
Cylindric T 2brichetă, 1968,
Dieter Rams pt Braun
Produsele care îndeplinesc un scop sunt asemenea instrumentelor. Ele nu sunt nici obiecte decorative, nici opere de artă. Prin urmare, d

Good design is unobtrusive

Produsele care îndeplinesc
un scop sunt precum
instrumentele. Ele nu sunt
nici obiecte decorative, nici
opere de artă. Prin urmare,
design-ul lor ar trebui să fie
atât neutru, cât și restrâns,
pentru a lăsa loc pentru
Cylindric T 2brichetă, 1968, exprimarea sinelui
Dieter Rams pt Braun utilizatorului.
 Desin-ul este onest
Nu face un produs mai
inovativ, puternic sau
valoros decât este în
realitate. Nu încearcă să
manipuleze consumatorul
cu promisiuni care nu pot
fi păstrate.
T3 radio de buzunar, 1958,
Dieter Rams pt Braun
 Good design is honest
It does not make a product
more innovative, powerful
or valuable than it really is.
It does not attempt to
manipulate the consumer
with promises that cannot
be kept.
T3 radio de buzunar, 1958,
Dieter Rams pt Braun
 Design-ul trebuie să dureze
Evită să fie la modă și, prin
urmare, nu va părea
niciodată vechi. Spre
deosebire de design-ul de
modă, acesta durează mulți
ani - chiar și în societatea
consumeristă de astăzi.
620 Chair Programme, 1962,
Dieter Rams pt. Vitsœ
Nimic nu trebuie să fie
arbitrar sau lăsat la
întâmplare. Grija și precizia
în procesul de proiectare
arată respect față de
utilizator.
 Design-ul trebuie să fie ecofriendly
Designul are o contribuție
importantă la conservarea
mediului. Conservă
resursele și minimizează
poluarea fizică și vizuală
pe tot parcursul ciclului de
viață al produsului.
606 Universal Shelving System,
1960, Dieter Rams pt. Vitsœ
Design-ul este imperceptibil
Mai puțin, dar mai bine -
deoarece se
concentrează asupra
aspectelor esențiale, iar
produsele nu sunt
împovărate cu elemente
superflu. Să revenim la
puritate, la simplitate.
L 2 speaker, 1958,
Dieter Rams pt. LESS IS MORE
Braun
 Ghidarea privirii
Greutatea vizuală a părților proiectate și ghidajul ochiului

Poziție - Ordinea elementelor, deci utilizatorii o văd prin structură

Culoare - culorile îndrăznețe și subtile ajută utilizatorii să se uite

Contrast - Diferit - iese în evidență, similar - face să se ascundă

Dimensiunea - mare este un contrast cu micul, și o face important

Elemente de design - dacă există o săgeată gigantică care indică

ceva, ghiciți unde se va uita utilizatorul?
 Spațierea
Spațiul gol pote parea inutil.

Linia de spațiere - prea puțin și ochiul este atras de

altceva, prea mult și se pierde. Găsirea echilibrului și a
armoniei - cheiea.

Padding - elementele și textul nu trebuie să se atingă

reciproc. Trebuie să existe un spațiu.

Spațiul alb - (negativ). Mai mult -> elegant, puțin ->

ieftin. Spațiul liber nu este o pierdere, dimportivă
 Navigarea
Una dintre experiențele cele mai frustrante:
imposibilitatea de a afla unde sunteți sau de a
ști încotro să o luați
Navigare - Unde poți merge? Feedback,
feedforward și ceea ce poți face aici. Explicit și
proeminent.
Orientare - Unde ești acum? Pași de urmat
indicați, puncte de reper, indicii și harta sitului
pentru persoanele cu adevărat pierdute.
 Design to Build
Se poate face? - fezabilitatea (tech, css)

Ce se întâmplă când se redimensionează un ecran? - design web

receptiv (platforme mobile)

Faci ceva dificil din punct de vedere tehnic? - ar putea fi evitat sau
gata făcut?

Ar putea mici modificări în design să simplifice foarte mult modul în

care îl construiți? – echilibru a se vedea și simplitatea implementării

Pentru proiecte mari, în special, puteți simplifica lucrurile? -

simplificați designul folosind butoane, gradienți, umbre
 Tipografie
Cel mai comun element în designul de UI (user interface)

Alegerea de fontului - moderne, retro, vechi, futuriste

Dimensiunea fontului - consistența dimensiunilor. Gândit pt. A fi citit,

privit, trecut cu vederea (Kinetic Typography - exc.)

Spațierea - linii BTW, litere. Principiile gestalt. Lungimea liniei - coloane,

linii (60 de cuvinte optim)

Culoare - mai puțin saturate atunci când există o mulțime de text

Alinierea – aliniat cu o grilă șicu formatul de ansamblu

 Gradul de utilizare
Designul este despre cum funcționează, nu despre cum arată.

Aderarea la standarde

Gândiți-vă la ceea ce vor face efectiv utilizatorii - prototipuri,

teste de utilizator, decizii de proiectare

Gândiți-vă la sarcinile utilizatorilor - site-ul este un instrument.

de exemplu. "Citiți informații despre noi", "începeți
cumpărăturile", "trimiteți un feedback“/ ‘reading info about
us’, ‘start shopping’, ‘sending a feedback’
 Aliniere
Grid și layout
 Clariatate (Sharpness)

• Păstrarea informației/limitelor obiectului

clare și ascuțite
• Edges - a cedat la pixeli
• Anti-aliasing în fonturi
• Contrastul este ridicat, deci limitele pot fi
definite
 Consistență
Tot trebuie să fie coerent cu tot.
ansamblu – detaliu.

Dimensiuni, materiale, tehnică de prindere,

ansamblare, lipire, alegerile de fonturi/lipsa lor,
segnalectica, cromatica, stilul, spațierea,
elementele de design, stilurile de ilustrații,
opțiunile de fotografie.
Alinierea
Echilibru și spațiere
Use designer fonts
Lungime text
Aliniere la stanga
Culoare pentru a evidenția. Tot timpul alta
Rules Are Made To Be Broken
 Înca ceva...
Good design principles video:
http://www.youtube.com/watch?feature=player_embe
dded&v=A6-wA-7QIeE

Google keywords: visual design, graphic design,

bauhaus
Sites to look: tutsplus, blogs of great designers
https://www.youtube.com/watch?v=TcmkqMHn_AA
https://www.monotype.com/resources/articles/the-
evolution-of-typography-with-variable-
fonts/https://futuracha.holy.gd/