Smaranda Clin

Machetare
cele 4 principii de baza
Culori
cand si cum se folosesc
Web usability
structurarea paginilor web
 90% din informatia pe care o
percepem este pe cale vizuala.
Majoritatea dintre noi suntem VIPs

Visually
Illiterate
Person
 design web
documente personalizate
reclame
carti de vizita
interfete

exista principii de baza care se aplica in

toate disciplinele
stapanirea lor mareste impactul vizual,
eficienta, comunicarea
 Machetarea se refera la tot ceea ce
inseamna lookul paginii:
pozitia textului, fontul, schema de culori,
marimea imaginilor etc
4 principii de baza se aplica in orice situatii:
Contrastul
Repetitia
Alinierea
Proximitatea
 design web
documente personalizate
reclame
carti de vizita
interfete

exista principii de baza care se aplica in

toate disciplinele
stapanirea lor mareste impactul vizual,
eficienta, comunicarea
 Tendinata generala:
insirearea elementelor pe intraga pagina
lipsa spatiilor goale
informatie neaccesibila

Grupeaza elementele care se afla in

legatura.
 elementele apropiate vor fi percepute ca un
tot unitar
informatiile care nu sunt conectate ca inteles
si mesaj nu trebuie sa trebuie sa fie alaturate
=> cititorul obtine o imagine imediata despre
ce contine pagina

Ideea:
constientizeaza modul in care ochii ti se
plimba pe pagina
interesaza: traseul si numarul de opriri (3-5)
 Tendinte generala:
asezarea imaginilor si altor simboluri oriunde
exista spatiu liber pe pagina
=> deordine de bucatarie

Nu aseza nimic arbitrar: fiecare

componenta trebuie sa aiba o legatura
vizuala cu altceva de pe pagina.
 forteaza-te la constiinciozitate: nu arunca
lucrurile pe pagina!
cine se aliniaza cu cine?
=> se creaza unitate, pagina e mai
ordonata in minte privitorului

Ideea:
pagina este un intreg
linia de baza = linia invizibila pe care
uneste 2 sau mai multe elemente
 st sus: textul nu e
aliniat cu nici o linie de
baza
dr sus: alinierea e
frumoasa
dr: alinierea dreapta e
mult mai puternica!
 Tip:
fereste-te de alinierea centrata!
folosita cel mai adesea de incepatori
paginile sofisticate nu au aliniere centrata
 daca nu ai
experienta,
foloseste un singur
tip de aliniere

daca esti expert,

gaseste liniile
puternice:
date de elementele
grafice
alte blocuri de text
 Repeta anumite parti ale machetarii in
intreaga lucrare.

elementele recurente pot fi:

linii, marcaje, fonturi ingrosate, culori,
pictograme etc
exemplu frecvent: titlurile scrise cu acelasi tip
si marime de font
confera unitate si asigura un liant intre
sectiunile aceluiasi document sau site.
utila pentru o singura pagina, vitala pentru
lucrarile de mai multe pagini
 Tip:
daca esti mai experimentat poti folosi un
element pe care sa il arunci prin pagina
poate fi o litera, o imagine mica
evident, trebuie sa aiba legatura ca forma
sau culoare
 aduce culoare paginii si creaza ierarhii
contrastul trebuie sa fie puternic
nu umbla cu jumatati de masura!

Daca 2 elemente nu sunt exact la fel, ele

trebuie sa fie complet diferite!
creare prin:
un font mare/unul mic
un font elegant/unul ingrosat, fara serife
o culoare calda/una rece
un element orizontal/unul vertical
 ochiul uman este atras de contrast
=> folosirea lui face pagina mai atractiva

Tip:
nu te teme sa faci cuvintele prea mari sau
prea mici
desene ingrosate si abia schitate
in viata cateodata tipam, alte ori soptim
 cum se formeaza culoarea?
 se creaza atunci cand
diverse frecvente de
lumina directa sunt
combinate
orice culoare pe care o
pot percepe ochii
poate fi creata astfel
prin combinare se
obtine alb = lumina
(pe monitor)
 date de lumina
reflectata
numele vine de modul
in care artistii imbina
culorile pe hartie
prin combinare se
obitne negru =>
culoarea obtinuta
devine din ce in ce mai
inchisa
(pe hartie)
 P = primar
S = secundar
T = tertiar
 HUE = se refera la culoare in sine
albastru, rosu etc
culorile (the hues, S, T, P) sunt la saturatie
maxima in color wheel (nu exista alb, gri sau
negru adaugat)
SATURATION = gradul de puritate al unui
hue
VALUE = luminozitatea sau intunecimea
unei culori (procentul de alb sau negru)
LIGHTNESS = cantitatea de lumina
reflectata de un hue (cele cu mai mult alb
sunt mai luminoase)
 culorile mai apropiate in color wheel vor si
mai armonioase
culorile opuse sunt contrastante (in sensul
rau!)
trebuie folosite cu grija pentru ca pot crea
dificultati

Tip:
pentru a alege o schema de culoare
armonioasa, exclude o treime din color
wheel
 e bazata pe asociatiile pe experienta
noastra cu natura
ORANJUL este cea mai calda culoare
ALBASTRUL este cea mai rece

Tip:
ne putem aranja color wheel-ul in functie
de asta
 ies in evidenta
si ne atrag
atentia
creaza contrast
chiar si pe
suprafete mici
 resping
ochiul
e nevoie de o
arie mai mare
de culoare rece
pentru a crea
suficient
contrast
 ...is a design philosophy and a process in
which the needs, wants, and limitations of
the end user of an interface or document
are given extensive attention at each stage
of the design process. (Wikipedia)

a philosophy that places the person (as

opposed to the 'thing') at the center.
(Usability Interface, vol 5, 1998)
 cunoaste-ti utilizatorul!
cata experienta are cu computerul?
cat stie despre domeniul tau?
care sunt mediile lui de lucru?
ce hardware/software/browser foloseste?
cata instruire va primi in folosirea sitului?
ce au nevoie sa gaseasca pe site?
ce se asteapta sa gaseasca pe site?
Mihaela Brut 2002/2007
 nu va lasati inselati de noutatea web-
ului!
orientati-va dupa interfata unei carti
(sute de ani de experienta)
cuprins
index
organizarea paginilor
organizarea pe capitole
integritatea designului
simplitatea interactiunii
vezi The Chicago Manual of Style
 diferente notabile:
paginile web sunt de sine statatoare
trebuie incluse informatii despre cine, ce, unde,
cum, cand
atentie la titlul documentului! (search engines)
navigarea prin hyperlink-uri
 diferente cond
navigarea:
impune o structura clara, arborescenta, in care
utilzatorul sa se poata orienta usor
home page link vizibil
fara dead-end-uri
meniuri cu 5-7 optiuni
factorul latimii de banda
grafica nu va impresiona daca incetineste
feedback
siturile bune au linkuri la webmaster, web editor
 Machetare
importanta
cele 4 principii de baza (CRAP)
Culori
the color wheel
cand si cum se folosesc
Web usability
o pagina la o carte
structurarea paginilor web