User Interface Design

DESIGNUL INTERFEEI UTILIZATORULUI

USER INTERFACE DESIGN

Ce este designul?
Designul este o metod de rezolvare a problemelor, e aceast
de natur vizual sau zic.
Scopul principal al designului este de a oferi produsului caliti
funcionale, tehnice, estetice, ergonomice i economice,
pentru a-l face acceptat de ctre consumator pentru o
anumit perioad de timp.
Esena designului este de fapt crearea unor produse eciente.

USER INTERFACE DESIGN

Ce este un design bun?

DIETER RAMS
Designer industrial german, strns legat cu produsele companiei Braun
i designul industrial funcional

USER INTERFACE DESIGN

Tipuri de design
DESIGNUL GRAFIC

Designerii graci lucreaz cu

imaginile grace, ind ele
ilustraii, tipograe sau alte
tipuri de imagini pe att pe
mediul web ct i print.

DESIGNUL INTERACIUNII

DESIGNUL INDUSTRIAL

Designerii industriali creaz

obiecte zice pentru
consum n mas.
Motociclete, iPod, periue
de dini sunt toate create de
designerii industriali.

DESIGNUL INTERFEEI
UTILIZATORULUI (UI)

Designul de interaciune este strict

focusat pe satisfacerea necesitilor i
cerinelor persoanelor care vor folosi
acest produs.

DESIGNUL EXPERIENEI
UTILIZATORULUI (UX)

USER INTERFACE DESIGN

User Interface
INTERFAA UTILIZATORULUI (UI)

Designului Interfeei Utilizatorului este

designul unei aplicaii sau a unui website cu
focusul pe experiena i interaciunea
utilizatorului.
Scopul designului UI-ului este de a face
interaciunea utilizatorului ct mai
simpl i ecient posibil.

Elements of Design
LINE / SHAPE / DIRECTION / SIZE / TEXTURE / COLOR

Elements of Design

LINIA

Legtura dintre dou puncte. Marcajul

fcut cu o pensul, marginea unui
obiect.

Elements of Design

SUPRAFAA / FIGURA

Poate o arie geometric denit i

separat sau o form organic.

Suprafeele regulate au form

geometric (cerc, ptrat, dreptunghi,
triunghi etc.)

Elements of Design

DIRECIA

Orizontalul sugereaz calmul,

stabilitatea i linitea.

Verticalul echilibru

Oblic - poate urcu, cobor sau

altele.

Elements of Design

MRIMEA

Relaia dintre aria ocupat de o form

n raport cu alt form.

Elements of Design

TEXTURA / FACTURA

Calitatea sau specicul suprafaei unei

forme - dur, neted, moale, tare, lucios
etc.

Elements of Design

CULOAREA

Lumina reectat de la obiecte.

RGB

HEX

CMYK

HSB

Design Principles
BALANCE / PROXIMITY / ALIGNMENT /

REPETITION / CONTRAST / SPACE

Principles

ECHILIBRUL

Echilibrul ofer stabilitate i structur

designului.

Echilibrul simetric (prin reexie,

translaie, rotaie)

Echilibrul asimetric

Echilibrul optic (formal, informal)

Principles

PROXIMITATEA

Relaia ntre elemente.

Ofer un punct de focalizare

Principles

ALINIEREA

Alinierea elementelor permite crearea

unei conexiuni vizuale ntre ele.

Principles

REPETAREA

Contribuie la crearea asocierii i a

coerenei.

Principles

CONTRASTUL

Juxtapunerea elementelor opuse. Acest

lucru ne ajut la evidenierea
elementelor cheie a designului.

Principles

SPAIUL

Distana sau aria din jur, deasupra,

dedesubt sau ntre elemente.

Visual weight and depth

GREUTATEA I ADNCIMEA VIZUAL

Visual Weight and Depth

GREUTATEA VIZUAL

Unele lucruri arat mai grele ca

altele din compoziie. Ele atrag
atenia mai rapid.

Greutatea vizual ajut utilizatorul

s observe lucrurile importante.

Greutatea vizual este relativ

Visual Weight and Depth

CONTRASTUL

Diferena ntre nuanele deschise i

cele nchise este contrastul.

Atribuie un contrast mai mare

elementelor eseniale

Visual Weight and Depth

ADNCIMEA

Observm mai uor elementele

apropiate de noi dect cele
ndeprtate.

Elementele mai mari sunt

percepute a mai aproape.

Efectul de blur si umbra face ca

percepia noastr s e mai
realistic.

Obiectele mai importante trebuie

s e mai mari aceasta creaz o
ierarhie vizual pe care o va
parcurge utilizatorul

ntrebri?

Typography
WHY IT IS IMPORTANT?

Typography
Tipografia reprezint arta i procesul de aranjare a textului pe diferite suporturi
media.

Tipografia este alctuit din caractere care creeaz fontul.

Caractere - litere, numere, semne de punctuaie.

Cunoscnd istoria tipograei, anatomia caracterelor, precum i clasicarea fonturilor devenim

contieni chiar de cele mai subtile diferene ntre fonturi.

Typography

Anatomia

Typography

Anatomia
baza (baseline) meanline -

linia de baz pe care se a litera adic serifele corespunztoare orizontale.

linia imaginar care se a deasupra literelor minuscule (X-height) nlimea de baz a literei

este determinat de nlimea literelor mici. Acea nlime se extinde de la baseline (linia de baz) pn la
meanline i este marcat cu X.

ascendent (ascender) -

nlimea extensiilor superioare ale literelor mici, adic partea formei literelor

mici i mari care se ridic deasupra nlimii literei de baz (meanline).

descendent (descender) -

nlimea extensiilor de jos ale literelor mici, adic o parte dintr-o form a

literei mici, care coboar sub linia de baz (baseline).

ligatures - 2 sau mai multe caractere unite ntr-o singur unitate. Un ranament tipograc care
compenseaz pentru anumite litere care sunt aranjate urt una lng cealalt, cum ar ,, , , .

stress (axa)

axa liniei literelor rotunjite

Typography

Ierarhia

Atragei atenia la mrimea fontului pe care o utilizai. Facei o pauz naintea lurii
deciziei ce mrime s utilizai. Planicaile, pstrai consistena, asigurai-v c se
combin cu celelalte mrimi.

Typography

Evidenierea textului
Uneori avem nevoie de a evidenia anumite
cuvinte sau anumite paragrafe n text. Cum
facem acest lucru?

Typography

Combinarea fonturilor

Scopul

Cte font-uri trebuie s utilizez?

De ce natur este coninutul meu?

Cum pot obine o combinare

bun?

Concordan

Contrast

Conict
http://fontpair.co/

https://www.google.com/fonts

http://100daysoonts.com/

http://femmebot.github.io/google-type/

http://designmodo.com/great-font-combinations/

http://webtypography.net/toc

Culorile

Colors

Lucrul cu culorile

Colors

Lucrul cu culorile
Culorile pot iptoare sau linitite.

Colors

Lucrul cu culorile
Creaz schiele n alb-negru pentru a te focusa la coninut i funcionalitate.

Colors

Lucrul cu culorile
Uneori culoarea este funcionalitatea

Colors

Working with color

Utilizeaz culorile atunci cnd ele adaug
importan.

Colors

Color psychology
Adopt o culoare

Folosete culoarea
pentru a crea o
nsemntate.

Utilizeaz n toate
spaiile aceei nuan

Repetition & Patterns

Oricnd ceva se repet n
continuu noi vom observa
rapid acest lucru.

Repetition & Patterns

Repetition & Patterns

Noi nu vedem 6 pisici
individuale, dar vedem
un grup de pisici. i
tipic analizm de la
dreapta la stnga.

Repetition & Patterns

Repetition & Patterns

Noi nu vedem 6 pisici
individuale, dar vedem
un grup de pisici. i
tipic analizm de la
dreapta la stnga.
Dac una iese din grup
atrage ndat atenia.
Astfel se creaz focusul la
un element individual.

Repetition & Patterns

Proximity
Pisicile din ecare grup
par mreun ca o
familie.

ntrebri?

Functional Layout Design

Layout

Bazele compoziiei
Din toate timpurile s-a observat o
relaie strns ntre art i
matematic, dar care ar
formulele frumuseii? Filozoi,
matematicienii, arhitecii i artitii
au ncercat s rspund la aceste
ntrebri de-a lungul istoriei.

Layout

Seciunea de aur
Seciunea de aur (numit uneori i
Raportul de aur, Proporia de aur,
Numrul de aur) (sectio aurea n
limba latin), notat cu litera
greac (phi majuscul) sau i cu
(phi minuscul), care se citesc "",
este primul numr iraional
descoperit i denit n istorie. El
este aproximativ egal cu 1,618033
i poate ntlnit n cele mai
surprinztoare mprejurri.

Layout

Seciunea de aur
Seciunea de aur se ntlnete
peste tot, n natur, matematic,
arhitectur, proporia corpului,
art, design.

Layout

Seciunea de aur
Seciunea de aur se ntlnete
peste tot, n natur, matematic,
arhitectur, proporia corpului,
art, design.

Layout

Seciunea de aur
Seciunea de aur se ntlnete
peste tot, n natur, matematic,
arhitectur, proporia corpului,
art, design.

Layout

Seciunea de aur
Seciunea de aur se ntlnete
peste tot, n natur, matematic,
arhitectur, proporia corpului,
art, design.

Layout

Regula celor 3 seciuni

Se utilizeaz n fotograe cel mai
des, de acolo a fost importat n
designul web. Ea este mult mai
simpl i mai des utilizat.
Explicaia ei este foarte simpl,
mparte spaiul de lucru la 3 pe
orizontal i vertical i la
intersecia liniilor acolo se
focuseaz ochiul.

Layout

Balana
Website-urile bune aranjeaz
elementele grace n aa mod ca pagina
s e balansat. Acest lucru nu
nseamn c trebuie s e oglindit
partea stng cu cea dreapt dar s aib
aceeai greutate vizual.

O pagin arat simetric atunci cnd

elementele grace arat similar.

O pagin este asimetric atunci cnd

elementele sunt de diferite mrimi dar
cntresc similar din punct de vedere vizual.

Layout

Balana
Website-urile bune aranjeaz
elementele grace n aa mod ca pagina
s e balansat. Acest lucru nu
nseamn c trebuie s e oglindit
partea stng cu cea dreapt dar s aib
aceeai greutate vizual.

O pagin arat simetric atunci cnd

elementele grace arat similar.

O pagin este asimetric atunci cnd

elementele sunt de diferite mrimi dar
cntresc similar din punct de vedere vizual.

Layout

White space
Spaiul alb este aria website-ul
care nu este acoperit de text,
grac, chiar dac nu este de
culoare alb. Amplasarea textului
sau gracii oriunde pe pagin este
o greeal. Spaiul Alb calmeaz i
direcioneaz ochiul spre coninut,
precum i mrete valoare
coninutului.

Layout

Ierarhia
Unele link-uri, texte sau imagini
de pe pagina web vor mai
importante ca altele. Un design
bun evideniaz aceste elemente.
Lucrurile care necesit atenie mai
mare trebuie s e observate n
primul rnd i s ghideze ochiul
rapid pe pagin. Un text de
mrime mai mare poate atrage
atenia n primul rnd la o imagine
sau bucat particular de text.

Layout

Culoarea
Nu ai nevoie mai mult de dou
sau trei culori de baz pentru un
design bun.

Alegei culori care se combin

bine mpreun, creaz atmosfera
necesar a website-ului.

Unele culori sunt mai iptoare

ca altele.

Layout

Adncimea
Pagina web este un singur strat
bidimensional dar el nu trebuie s
e tot timpul aa. Adugnd a
treia dimensiune se confer o
importan elementelor dup
apropierea fa de utilizator sau
suprapunerea pe alte elemente.

Layout

Simplitatea
Dac continui s adaugi elemente
doar pentru c ele arat frumos,
vei ajunge s suprancarci
designul.

Un design complex, sau animaii

prea multe distrag i deranjeaz
utilizatorul dac nu este spaiu
alb destul pentru a le compensa.

Include elemente bttoare la

ochi doar dac ele au un scop
anumit, nu le adugai doar de
aceea c putei face asta.

Layout

The fold
Una din cele mai populare concepii
greite din coala veche de design este
ndoitura (the fold) care reprezint
partea superioar care este vzut la
deschiderea adresei web. Ideea acestei
teorii este de a plasa toat informaia
important n aceast zon.

Totui studiile recente arat c

utilizatorul dac va interesat de ce
vede la deschiderea website-ului va
face scroll pentru a aa mai multe.

Layout

Imaginile
Imaginile pot direciona privirea
utilizatorului.

Mai ales imaginile cu oameni atrag

atenia i creaz empatie dac
sunt utilizate cu bine. Privirea
omului din poza va direciona i
privirea utilizatorului.

Cu ct mai mult emoie va n

imagine cu att mai atras va
utilizatorul.

Layout

Imaginile
Potrivit unui studiu, omul are
tendin a s priveasc acolo unde
este ghidat de privirea atlcuiva.

Layout

Imaginile
Potrivit unui studiu, omul are
tendin a s priveasc acolo unde
este ghidat de privirea atlcuiva.

Layout

Titlul
Ochii notri sunt atrai de bucile
de text contrastante din restul
contextului. Iat de ce titlurile vor
capta atenia utilizatorilor.

Totui nu trebuie de exagerat cu

text mare pentru a atrage atenia,
dac titlul nu are nici o legtur cu
textul ce urmeaz mai bine de
folosit o alt metod de focusare.

Layout

Call-to-action
CTA este denumire sau textu
mpreun cu butonul pe care se
a i cheam utilizatorul la
aciune.

Layout

Call-to-action
Formula general pentru un CTA bun este:

Verb + Beneciu + Urgen sau Loc

Layout

Call-to-action

Layout

Instruciuni
Instruciunile trebuie s e
scurte i directe

Spune utilizatorului exact ce

trebuie s fac

Nu scrie ca pentru proti, dar

exprim-te clar

Layout

Butoane
primare i secundare
La general e nevoie de doar 2 stiluri a butoanelor. Pentru c
majoritatea nimeresc n una din cele dou categorii de baz.

Aciunile primare care realizeaz scopul websitelui/

aplicaiei

Aciuni secundare care nu realizeaz aceste scopuri.

Layout

Layout

Delete

Cancel

Layout

Labels
Folosete cele mai comune,
uoare i simple versiuni
existente pentru etichete /
labels.

ntrebri?

Tools &
Work ow

Tools & Workow

What is your primary tool

for interface design?

Workow

Design Workflow

Workow

Sketches

Workow

Wireframes

Workow

Wireframes

Workow

Paper cutouts

Workow

Stenciling

Workow

Wireframing software

Workow

Graphic Design Software

Workow

Presentation Software

Workow

Fidelity Levels
Block Diagrams

Workow

Fidelity Levels
Block Diagrams
Grey Boxes

Workow

Fidelity Levels
Block Diagrams
Grey Boxes
HF Text

Workow

Fidelity Levels
Block Diagrams
Grey Boxes
HF Text
HF Color

Workow

Fidelity Levels
Block Diagrams
Grey Boxes
HF Text
HF Color
HF Media

Workow

Fidelity Levels
Block Diagrams
Grey Boxes
HF Text
HF Color
HF Media
HF Interactions

Workow

Mockups
Mockups are the models of
web design and one of the
most eective mediums for
communicating visual
design.

Wireframes are skeleton.

Mockups are skin.

Workow

Prototypes
In addition to the information structure
and visualizations of the previous two

PROTOTYPES HELPS YOU

phases, the prototype introduces more

depth to the early UI, allowing users to:

communicate concepts

experience actual content

interact with the UI in a way similar to

the nal product

predict and solve usability problems

before further development

work through a design

sell an idea

gauge technical feasibility

test usability

Workow

Prototype Tools
Presentation Software
Coded (HTML)
UXPin
Invision
MockFlow
JustInMind
Axure
Omnigrae
JustProto
Flinto
Marvel
Pixate

Layout

Atomic Design

Layout

Rezumat
SKETCHING Prin sketching faci un brainstorm cu schie rapide pe hrtie

WIREFRAMING ncepi a stabili scheletul cu dreptunghiuri i forme brute.

MOCKUPS Injectezi detalii n wireframe precum culori, tipograe, fotograi i elemente

de design vizual.

PROTOTYPING Adaugi interactivitate la machete prin legarea paginilor i a elementelor

din pagin, prin adugarea animaiei / interaciunii pentru prototipuri avansate.

DEVELOPMENT Codul n limbajul ales pentru a converti prototipul n produsul nal.

ntrebri?

Web User Interface

Patterns

http://ui-patterns.com/patterns

menu

carousel

carousel

forms

promo

content

images

features

price

contacts

tabs

UXPin Mobile UI Design Patterns

Android Patterns

https://www.google.com/design/spec/patterns/

iOS Patterns

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

Its Not UX vs. UI

Its UX & UI
In contextul spaiului web, s zicem ca designerul decide s
includ opiunea drag-and-drop pentru organizarea
cntecelor n list. Acesta este UI.

Acum s zicem c utilizatorii aleg anume acest website, fa

de cel al concurenilor deoarece lor le place ct de uor i
plcut le este s-i organizeze i s asculte muzica favorit.
Acesta este UX

Tips & Techniques

1. Pstrai interfaa ct mai simpl

2. Creai coeren i folosii pattern-urile i elementele bine stabilite

3. Urmeaz un scop n crearea aspectului paginilor

4. Utilizai strategic culoarea i textura

5. Utilizeaz regulile tipograei pentru a crea ierarhie i lizibilitate

6. Asigurai-v ca sistemul d de tire ce se ntmpl

7. Gndii-v la valorile implicite.

Surse
USER INTERFACE BASICS
1.

http://www.telegraph.co.uk/technology/apple/8555503/Dieter-Rams-Apple-has-achieved-something-I-neverdid.html

2.

https://www.vitsoe.com/gb/about/good-design

3.

http://gizmodo.com/343641/1960s-braun-products-hold-the-secrets-to-apples-future

4.

https://en.wikipedia.org/wiki/Interaction_design

5.

https://en.wikipedia.org/wiki/User_interface_design

6.

https://en.wikipedia.org/wiki/User_experience_design

7.

http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/

Tipografia
1. http://designmodo.com/web-typography/

2. http://webdesign.tutsplus.com/articles/a-beginners-guide-to-pairing-fonts--webdesign-5706

3. http://freelancefolder.com/typography-essentials-a-getting-started-guide/

4. http://www.creativebloq.com/typography/better-web-typography-few-simple-steps-5132803

5. Prezentare sesiune Anatomia tipograei Link Academy

6. https://ia.net/know-how/the-web-is-all-about-typography-period

7. http://webdesign.tutsplus.com/articles/choosing-the-right-font-a-practical-guide-to-typography-on-the-web-webdesign-15

8. http://www.merttol.com/articles/web/checklist-for-better-web-typography.html

9. http://www.markboulton.co.uk/journal/ve-simple-steps-to-designing-grid-systems-preface

Tools and Worfklow

1. http://studio.uxpin.com/ebooks/guide-to-mockups/?_ga=1.244361089.58065319.1445246311

2. http://studio.uxpin.com/ebooks/guide-to-prototyping/?_ga=1.46579747.58065319.1445246311

3. http://studio.uxpin.com/ebooks/web-ui-design-best-practices/?_ga=1.46579747.58065319.1445246311

4. http://studio.uxpin.com/ebooks/mobile-design-patterns/?_ga=1.46579747.58065319.1445246311

5. http://studio.uxpin.com/ebooks/guide-to-wireframing/?_ga=1.46579747.58065319.1445246311

6. http://tools.subtraction.com/interface-design.html

Culorile
1. http://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/

2. http://www.smashingmagazine.com/2010/02/color-theory-for-designers-part-2-understanding-concepts-andterminology/

3. http://thenextweb.com/dd/2011/12/30/9-places-to-get-inspiration-for-your-websites-color/

4. Five Simple Step - A Practical Guide to Designing For the Web. Book

Layout
1. http://ui-patterns.com/patterns

2. http://smallbusiness.chron.com/rules-composition-design-art-graphics-30554.html

3. https://mockupstogo.mybalsamiq.com/projects/web/grid

4. https://docs.google.com/le/d/0Bx1232tOvCsfUGdXYmZiTGxHT0U/edit

5. https://en.wikipedia.org/wiki/Golden_ratio

6. https://en.wikipedia.org/wiki/Rule_of_thirds

7. https://boagworld.com/design/why-whitespace-matters/

8. http://blog.teamtreehouse.com/white-space-in-web-design-what-it-is-and-why-you-should-use-it

9. http://uxmyths.com/post/2059998441/myth-28-white-space-is-wasted-space

10. http://webdesign.tutsplus.com/articles/understanding-visual-hierarchy-in-web-design--webdesign-84

11. http://www.awwwards.com/understanding-web-ui-visual-hierarchy.html

12. http://99designs.com/designer-blog/2014/06/09/6-principles-of-visual-hierarchy/