PROIECTAREA

INTERFEȚELOR
UTILIZATOR

GIANINA GABOR
C9
 CUPRINS

Structura paginilor web individuale

 Aranjament /layout
 Flux vizual – flow
 Cromatică
 Aspecte referitoare la conţinut
 Accesibilitate
 Internaționalizare
 STRUCTURA PAGINI WEB

 Organizare pagini web individuale

• Aranjament – layout
• Flux vizual – flow
• Cromatică
• Aspecte referitoare la conţinut
• Accesibilitate
• Internaționalizare
ARANJAMENT -LAYOUT
 ARANJAMENT –LAYOUT

Fiecare pagină web include un container

(container block) care va cuprinde
conţinutul propriu-zis

 Tipuri layout (Jason Beaird, 2007)

fix – lăţime prestabilită
lichid – lăţime variabilă
 ARANJAMENT –LAYOUT
Poate fi stabilit utilizând grile (grids)

 Reguli
secţiunea de aur
cele trei coloane
simplitatea
balansul
unitatea
 ARANJAMENT –LAYOUT
Balansul
• asigurare echilibru vizual pe
orizontală şi verticală
• simetrie orizontală, bilaterală
sau radială

simetrie vs. asimetrie

ARANJAMENT –LAYOUT
 ARANJAMENT –LAYOUT

Unitatea
 maniera în care elemente diferite
interacţionează în cadrul aceluiaşi
document/aceeaşi pagină web
 uzual se realizează prin grupare
 criterii de grupare
• spaţială
• cromatică
• via elemente grafice de separare – linii
orizontale, aliniere diferită
 ARANJAMENT –LAYOUT
 menţinerea structurii aranjamentului se
poate realiza prin repetare elemente de
design pe parcursul tuturor paginilor web
 şabloane de proiectare – design patterns
 site-uri de interes
Design Patterns
http://sourcemaking.com/design_patterns

Web Patterns
http://www.awwwards.com/background-patterns-
designs-and-resources-for-websites.html
 ARANJAMENT –LAYOUT
Şabloane de proiectare
left column navigation
 ARANJAMENT –LAYOUT
Şabloane de proiectare
right column navigation
 ARANJAMENT –LAYOUT
Şabloane de proiectare
three-column navigation
 ARANJAMENT –LAYOUT
Şabloane de proiectare
three columns with content first
 ARANJAMENT –LAYOUT
Şabloane de proiectare
three-column content
 FLUXUL VIZUAL -FLOW
Fluxul vizual poate fi realizat şi prin
contrast  asigurarea focalizării atenţiei
 tipuri de contrast pe baza variabilelor
vizuale
FLUXUL VIZUAL -FLOW
 CROMATICA
 Schema de culori
• Mental – fierbinte , foc, căldură, sânge
• Asociaţii directe – pericol, Crăciun, Mărţişor, steag
• Impresii obiective – pasional, incitant, activ
• Impresii subiective – intensitate, furie, capacitate,

ferocitate
• Stimulează în cel mai înalt grad emoţiile
“In an overpowering red environment, lengths of material

appear longer, weights feel heavier, time seems to pass

more slowly and temperatures seem warmer.
 CROMATICA
 Schema de culori
• Mental – atenţie, test, încetinire
• Strălucire, cheerful
• utilizat ca şi cod vizual pentru instalaţii de
ţevi sau cabluri
“Too much yellow can supposedly cause an
increase in overall frustration
• perceput ca desemnând rapiditatea
• poate conduce la producere de confuzii
 CROMATICA

 Schema de culori
• Semnificaţii – ok, liber, vegetaţie, siguranţă
• Induce un sentiment de calm
• Supra-utilizarea conduce la plictiseală
”One company repainted its red tool boxes
green after employees complained of the boxes
being too heavy. The employees were pleased with
their new lighter tool boxes”
 CROMATICA

 Schema de culori
• Semnificaţii – rece, apă, calm,cer, neutralitate
• un mediu albastru poate ajuta la tratarea
migrenelor, hipertensiunii sau insomniei

“The best colour for break areas, because it

decreases blood pressure, pulse and respiration.”
 CROMATICA
 Schema de culori
• cea mai odihnitoare culoare / restful
• scade presiunea sângelui, pulsul & respiraţia
• pentru suprafeţe mari devine enervantă

 Schema de culori
• asociată uneori cu ieftin/cheap
• se foloseşte uzual în conjuncţie cu
roşu/galben
 CROMATICA
 Proprietăţi - temperatura
culori calde

culori reci
 CROMATICA
 Proprietăţi – valoarea (value)
• măsoară gradul de luminozitate
 CROMATICA
 Schema de culori
• roata culorilor pentru web
 CROMATICA
 Schema de culori
• armonii monocrome
• armonii analoage

• armonii complementare
 CROMATICA
 Schema de culori
• armonii complementare divizate

• armonii cu patru culori

CROMATICA
 CROMATICA

 Schema de culori (Linda Goin 2005)

• contextul în care apare o culoare este foarte
important

• anumite culori au conotaţii multiple

roşu = pasiune roşu = furie

!! Atenţie la utilizarea internaţională !!

CROMATICA
CROMATICA
 CROMATICA
 Schema de culori
• combinaţiile atipice pot sugera mesaje
speciale
 CROMATICA
 Tendinţe actuale
• Fundalurile adoptă nuanţe neutre = gri
odihnitoare bazate eventual pe
dégradé-uri
• Informaţiile de interes & simbolurile
grafice sunt redate utilizând culori
“puternice” =strong
CROMATICA
 CROMATICA
 Instrumente pentru generarea de
palete cromatice
• Color Scheme Designer
colorschemedesigner.com
• Colr colr.org
• Colrd colrd.com
• Color Explorer colorexplorer.com
• Color palettes colorpalettes.net
 CULORI & PAGINI WEB
Contrast
 La alegerea culorilor site-ului web trebuie să
existe un contrast suficient de puternic între
culoare textului și fundal astfel încât
utilizatorul să poată citi cu ușurință textul
Fundal
 Culorile intense trebuie combinate cu un
fundal neutru
 Nu este indicat să întâmpinăm vizitatorii cu
niște culori de fundal intense → acest lucru va
crește rata de respingere a site-ului web
 CULORI & PAGINI WEB
ALB = culoarea perfecțiunii
 denotă siguranţă, claritate, simplitate,
generozitate, moralitate şi curăţenie
 în simbolistica aplicată transmite profesionalism
 în domeniul tehnic alb scoate în evidenţă alte
culori
 site web site foarte bun = lăsaţi o cantitate
semnificativă de alb sau un spaţiu gol între
elementele paginii
 utilizat pe site-urile web pentru a sugera
simplitatea produselor tehnologice
 sugerează siguranţa atunci când se face reclamă
la produse farmaceutice
 CULORI & PAGINI WEB
NEGRU = culoarea autorității & puterii
 semnificaţii - eleganţă, formalitate, profunzime,
dramatism, seriozitate, mister, bogăţie, durere,
demnitate, putere, prestigiu
 design grafic - lasă impresia de rafinament, mister
şi eleganţă
 design web - oferă sentiment de perspectivă şi
adâncime dar ca fundal reduce lizibilitatea &
utilizat pe suprafețe mari induce o stare depresivă
 util pentru site-urile web cu conţinut de artă şi
fotografie, unde ajută alte culori să vibreze
 contrast bun cu culori deschise – roșu, portocaliu
 CULORI & PAGINI WEB
ALBASTRU = armonie, încredere, siguranță
 semnificații - creativitate, inteligenţă, inspiraţie, artă,
avansare, siguranţă, tehnologie, libertate, infinit,
consolare, stabilitate
 complement perfect al culorilor naturale - gri, verde
 crează o impresie puternică în combinaţia -
albastru, roşu şi galben
 cel mai frecvent folosită în designul de afaceri
 utilizată de site-urile de afaceri, din domeniul
tehnologiei, produselor farmaceutice, de curăţenie,
aer, apă, mare şi maşini
 utilizarea exagerată a culorii dă senzaţia de frig
 CULORI & PAGINI WEB
MARO = confort, stabilitate, simplitate
 semnificații - lemnul, pământul, stabilitatea, prietenia,
casa, confortul, rezistenţa, intimitatea, seninătatea,
grija, satisfacţia, puterea, senzualitatea,
productivitatea, comoditatea
 compatibil cu verde şi albastru respectiv cu roşu şi
portocaliu
 are o intensitate prea redusă pentru a fi utilizată în
web design fără combinaţia cu alte culori care să o
evidenţieze
 denotă siguranță și încredere - compania
internaţională de curierat rapid UPS, este cunoscută
după culoarea sa dominantă de maro a propriei
identităţi corporative
 CULORI & PAGINI WEB
VERDE = sănătate, natură, relaxare
 semnificații - prospeţime, frig, dezvoltare, bogăţie,
siguranţă, stabilitate
 în artă şi design este foarte plăcut dar nu trebuie
exagerat şi utilizat pe suprafeţe foarte mari fiind o
culoare tare cu impresie puternică
 verdele închis este asociat cu banii, cu lumea
financiară, cu băncile şi cu succesul financiar
 utilizat des în combinaţie cu tonuri de albastru
închis
 în combinaţie cu portocaliu şi galben creează o
impresie potrivită pentru produsele sportive
 CULORI & PAGINI WEB
GRI = creativitate, inspirație
 semnificații - confort, siguranţă, fiabilitate,
înţelepciune, maturitate, compromis
 în design denotă exclusivitate
 din punct de vedere tehnic reprezintă o bază
pentru elementele ce trebuie evidenţiate
 folosit cu tonuri reci de albastru şi violet lasă o
impresie foarte plăcută
 când se amestecă cu roşu, portocaliu sau galben,
devine un "gri cald”
 când se amestecă cu verde, albastru sau violet,
devine un "gri rece"
 CULORI & PAGINI WEB
ARGINTIU = bogăție
 semnificații - glamour, industrie, intuiţie, visuri,
comunicare, modernitate
 în practică este asociat cu înalta tehnologie
 arată bine pe web dacă este combinat cu auriu şi
alb
 un look high-tech al site-ul unei companii se poate
obține dacă utilizăm argintiu împreună cu alte culori
 din punct de vedere tehnic nefiind o culoare "pură”
se obține prin prelucrarea suplimentară a culorii gri
căreia i se adaugă strălucire
 paleta de culori #C0C0C0 (HEX) sau 192 (RGB)
 CULORI & PAGINI WEB
AURIU = prestigiu
 semnificații - iluminare, înţelepciune, bogăţie,
victorie, bani, putere, fericire, sens, împlinire,
concentrare, calitate superioară
 merge foarte bine cu portocaliu, verde sau maro
 lasă o impresie foarte bună încombinaţie cu roşu sau
violet
 în design de afaceri utilizat pentru a reprezenta banii,
puterea, un nivel superior
 nu se poate obţine direct din paleta de culori,
deoarece conţine reflexii
 paleta de culori #FFD700 (HEX) sau 255, 215, 0 (RGB)
 CULORI & PAGINI WEB
ROȘU = temperament
 semnificații - pasiune, foc, viteza, concurenţa
 vizibilitate ridicată & se combină foarte bine cu
portocaliu, maro şi galben
 în design/artă utilizată ca accent când dorim să scoatem
în evidenţă ceva și dorim să lăsăm o impresie puternică
 tehnic - scoate în prim plan textul şi imaginile făcând
obiectele să arate mai mari şi mai apropiate
 web design - combinaţia de albastru şi roşu puternic în
nu este recomandată asocierea fiind foarte obositoare
pentru ochi
 folosit pentru a stimula utilizatorul să ia decizii
 CULORI & PAGINI WEB
GALBEN = optimism, fericire, idealism imaginaţie
 semnificații - satisfacţie, intelect, învăţare rapidă,
memorie, colaborare, organizare, curăţenie,
entuziasm, curiozitate, dorinţe de îmbunătăţire,
speranţă, iluminare, energie
 eficient în atragerea atenţiei & se foloseşte pentru a
evidenţiere celor mai importante elemente de
design ale unui site web
 se combină foarte bine cu albastru sau gri
 pentru a evoca focul încercaţi să combinaţi cu roşu
 pentru o impresie de vară combinaţi cu portocaliu
 CULORI & PAGINI WEB
VIOLET = fantastic, joc, vise
 semnificații - demnitatea, poziţia înaltă, respect,
rafinament, sofisticare, putere, eleganţă, efect, mândrie,
ambiţie, generozitate
 culoare foarte populară în artă și design
 utilizată împreună cu culori pastel = tonuri reci de
albastru, verde şi gri
 combină stabilitatea culorii albastre şi energia culorii roşii
 violet deschis = una din culorile preferate ale doamnelor şi
domnişoarelor
 peste 75% dintre copiii aflaţi înainte de vârsta pubertăţii
preferă violetul
 CULORI & PAGINI WEB
PORTOCALIU = entuziasm,vibraţii
 semnificații - noroc, securitate, putere, bogăţia spiritului,
determinare, independenţă, echilibru, euforie, obiective,
ambiţie, carieră, succes, acţiune
 menţine vigilenţa & puterea de concentrare și creează
impresia de reducere a spaţiului
 se combină foarte bine cu gri şi verde dar NU se va
utiliza în combinaţie cu albastru
 în design = culoare ce emană senzaţia de căldură
 site web - utilizată pentru evidenţierea celor mai
importante elemente de design
 site web - ca fundal ajută imaginile să arate mai
apropiate şi mai mari
 CONŢINUT TEXTUAL

 Typography

• componentă vitală a procesului de

comunicare
• NU înseamnă “picking a cool font “
• typos (impresie) + grapheia (scriere)

http://webtypography.net
 CONŢINUT TEXTUAL

 Aspecte referitoare la typography

• Corpul de literă
• Culoarea tipografică
• Măsura
• Leading-ul
• Ritmul vertical
• Linia albă
 CONŢINUT TEXTUAL

Aspecte referitoare la typography

 Corpul de literă – typeface, font

• Mulțime unitară de glyphs (semne, simboluri
grafice) asociate unui set de caractere
 CONŢINUT TEXTUAL

Aspecte referitoare la typography

 Corpul de literă – dimensiune

• Măsurată în puncte tipografice sau picas
 CONŢINUT TEXTUAL

Aspecte referitoare la typography

 Corpul de literă – proporția

• Indică variația de lățime a setului glyphs
 CONŢINUT TEXTUAL

Aspecte referitoare la typography

 Corpul de literă – familia de font

• Clasifică fonturile pe baza unor caracteristici
exemplu  mod de redare glyph-uri
 CONŢINUT TEXTUAL

Aspecte referitoare la typography

 Corpul de literă – familia de font

• Include fontul de bază + variants  italic,
bold, bold italic, …
 CONŢINUT TEXTUAL
Aspecte referitoare la typography
 Corpul de literă – familia de font
 CONŢINUT TEXTUAL

Aspecte referitoare la typography

 Corpul de literă – fonturi “sigure” pentru

web
• Disponibile pentru orice sistem
 CONŢINUT TEXTUAL

Aspecte referitoare la typography

 Corpul de literă – utilizarea/încărcarea de

la distanță a unor fonturi/colecții de
fonturi
 CONŢINUT TEXTUAL

Aspecte referitoare la typography

 Corpul de literă – WOFF( Web Open Font

Format )
• Include fonturi TrueType, OpenType, Open
Font Format
 CONŢINUT TEXTUAL
Aspecte referitoare la typography
 CONŢINUT TEXTUAL
Aspecte referitoare la typography
 CONŢINUT TEXTUAL

Aspecte referitoare la typography

 Culoarea tipografică - indică densitatea

conţinutului unei pagini web

“It refers only to the darkness or blackness of the letter

form in mass”
(Robert Bringhurst – The Elements of Typographic Style)
 CONŢINUT TEXTUAL

Aspecte referitoare la typography

 Măsura – desemnează lungimea unei linii

de text
• element-cheie al uşurinţei parcurgerii
conţinutului
• valori recomandate 45 - 75 caractere
• dificil de stabilit pentru layout-uri lichide
 CONŢINUT TEXTUAL
Aspecte referitoare la typography
măsura
 CONŢINUT TEXTUAL
Aspecte referitoare la typography
măsura
 CONŢINUT TEXTUAL
Aspecte referitoare la typography

Leading (line spacing) – spaţiul vertical

dintre 2 linii de text
• uzual titlurile (headings) nu necesită leading
• fonturile masive au nevoie de leading mai mare
• fonturile sans-serif necesită mai mult leading
decât cele cu serife
• lăţimea mai mare a liniei conduce la creşterea
leading-ului
 CONŢINUT TEXTUAL
Aspecte referitoare la typography

Line spacing
 CONŢINUT TEXTUAL

Aspecte referitoare la typography

Linia albă – spaţiul vertical liber dintre 2

paragrafe adiacente
• Tipografia tradiţională foloseşte tehnica
aliniatului paragrafelor (indentation)
 Indicarea unui paragraf nou
• Tehnici-aliniat, linia albă, letrina, ornamente,…
• De folosit în mod unitar un singur mijloc
• Primul paragraf nu are aliniat
 CONŢINUT

 Textura

• oferă o înfăţişare distinctă a

suprafeţelor

• se bazează pe puncte, linii, forme

(shapes)
 CONŢINUT
 Punctul (dot, point)
element fundamental de design grafic
prin grupare poate sugera imagini - linii,
forme, volume  tehnica halftone

 Linia (line) - proprietăţi

• grosime, direcţie, curbură
• liniile diagonale – haşurile sugerează
mişcare
• liniile curbe sunt deosebit de expresive
 CONŢINUT
 Forma (shape) – creată pe baza liniilor
• categorii – geometrice sau libere
respectiv organice (freeforms)
• formele geometrice perfecte induc un
mesaj tehnic/mecanic
• formele libere sunt mai abstracte
sugerând informalitate, spontaneism,
umanism
 CONŢINUT
 Volumul
• a 3-a dimensiune spaţială a conţinutului
• indică profunzime (depth)
• Aspecte de interes
o Perspectiva – alegerea unui punct de
fugă (vanishing point)
o Proporţia
o Lumina & umbra
 CONŢINUT
 Grafica
• alegerea conţinutului grafic – relevant,
interesant, atragator
• utilizarea ilustraţiilor & fotografiilor
- ilustraţii de calitate
- minimizare timp de încărcare
- asigurare accesibilitate – descrieri
alternative
textuale
 EXEMPLE
 Greşeli
 EXEMPLE
 Discuţii
EXEMPLE
EXEMPLE
 EXEMPLE
 Discuţii
 EXEMPLE
 Discuţii – prevenirea erorilor
 ACCESIBILITATEA
 Accesibilitatea – accesul cu succes la
informaţii & tehnologia informaţiei de către
persoane cu nevoi speciale – vizuale,
auditive, motorii, cognitive

 Realităţi
• 20 % din populaţia SUA prezintă un anumit tip de
dizabilitate şi 10 % dintre aceştia au probleme
severe
• 4 % persoane cu probleme majore de vedere
 ACCESIBILITATEA

 În mod deosebit trebuie oferite mijloace

alternative care să faciliteze activităţile
utilizatorilor conform punctelor lor de
vedere & al stilului lor de lucru

 Tipuri de dizabilităţi – vizuale , auditive,

cognitive, referitoare la factori afectivi
 ACCESIBILITATEA
 Dizabilităţile pot fi temporare (de scurtă
durată) sau permanente unele provenind
din naştere
 Strategii generale
• descrieri alternative conţinut multimedia (imagini,
audio, video)
• organizare judicioasă conţinut & mijloace de
navigare
• oferire de suport de interacţiune via tastatură
• utilizare de formate standardizate
 ACCESIBILITATEA
 utilizatori cu probleme de vedere
• mijloace pentru mărire/micşorare fundal
• posibilitate de modificare contrast
• facilităţi pentru selectare & copiere text
 utilizatori cu probleme de auz
• subtitrări textuale pentru orice conţinut video
• alegere între conţinut video şi textual alternativ

 utilizatori cu ADD (Attention Deficit Disorder)

• mijloace de focalizare rapidă a atenţiei – conţinut clar &
concis, structură minimalistă
 INTERNAŢIONALIZAREA

 Preferinţe lingvistice & localizare fizică

utilizator
• Language - limbaj dorit de utilizator
• Locale – preferinţe culturale referitoare la
formatare numere şi dată, sortare
 Diferenţă majoră faţă de alte preferinţe
“if the user can’t read the description of the
preference, he/she doesn’t even have a chance to
make a choice” (Achim Ruopp, 2007)
INTERNAŢIONALIZAREA
 REZUMAT

Structura paginilor web individuale

 Aranjament /layout
 Flux vizual – flow
 Cromatică
 Aspecte referitoare la conţinut
 Accesibilitate
 Internaționalizare