Principii de design

1 Principii de design
n general, fiecare web site trebuie s fie unic, s aib elemente distinctive la nivel
de design, coninut sau chiar prin funcionalitile oferite utilizatorilor. Designerul are
datoria de a realiza o interfa unic prin culorile, fonturi i layout-ul folosit. Un site
bine realizat la nivel vizual are o interfa adecvat cu coninutul prezentat, cu specificul
acestuia i este conceput astfel nct s transmit mesajul dorit de productor sau
client. Mai mult dect att, o interfa trebuie s fie accesibil i dinamic pentru a facilita schimbrile ulterioare la nivel de coninut i funcionaliti.
n realizarea unei interfee de web site se pot observa cteva etape: planificare,
efectuarea designului, colorarea acestuia, popularea cu coninut i n final, implementarea interfeei la nivel tehnic, utiliznd HTML i CSS sau alte tehnologii web. Aceste
etape se bazeaz pe mai multe principii de design la nivel de layout, culori, tipografie,
implementare i accesibilitate. Despre acestea voi vorbi n acest capitol.
n etapa de planificare trebuie stabilite funcionalitile oferite utilizatorilor (cutare, schimbare de limb, etc), tipul de web site (personal, instituional, de prezentare
produs, etc), preferine vizuale, structura site-ului la lansare, ce informaii apar pe prima
pagin, tehnologiile pentru implementarea site-ului, etc. Toate aceste informaii sunt
foarte importante n realizarea interfeei deoarece influeneaz foarte mult i n mod
direct forma final. Un site bogat, cu o structur de meniuri mare, informaii multe, nu
poate fi, n principiu, foarte intens la nivel vizual, cu design bogat i animat, deoarece,
n acest mod, ar fi subminat scopul site-ului, fie prin limitarea informaiilor afiate n
favoarea graficii i a designului, fie prin distragerea ateniei de la coninut, reducerea
importanei sale. Astfel, n aceste cazuri, o interfa trebuie s fie mai simpl, mai concis, pentru a pune n valoare coninutul i a-l expune vizitatorului ntr-un mod plcut.
ns, cnd este vorba de un site de prezentare de produs, bineneles, gradul de libertate
la nivel vizual este mult mai mare, iar informaiile se afl n plan secund.
Cnd etapa de planificare este suficient de concludent, urmeaz realizarea propriu-zis a interfeei. Aceast etap const n definirea structurii vizuale, a layout-ului,
unde se gsesc elementele funcionale din site n design, ce elemente de design decorativ sunt folosite i se stabilesc proporiile ntre acestea, etc. Dup care, elementele sunt
colorate. Culorile sunt eseniale pentru a transmite un mesaj artistic utilizatorilor siteului. Adesea se folosesc diferite efecte vizuale n design pentru nfrumuseare, cum ar fi
degradeuri, reflexii i umbre. Prin urmarea a ctorva principii de design, o interfa
poate fi mai profesional: alinierea elementelor, spaii generoase ntre ele, contrast ntre
texte i elementele vizuale, etc.
Principii de marketing, eventual coroborate cu studii de marketing i de impact pe
grupul de utilizatori int, sunt foarte importante n vederea realizrii unei interfee n
concordan cu cerinele potenialilor clieni, chiar din etapa de planificare. Astfel, dac
acestea sunt luate n considerare, definirea layout-ului i a culorilor devine mult mai facil deoarece se cunosc ateptrile vizitatorilor.
Dup ce designul este complet realizat, se populeaz cu coninut textual, pentru a
se exemplifica cum va arta la final site-ul: meniuri, articole, link-uri, etc. Dimensiunile
textelor, fonturile utilizate i alinierea trebuie s subscrie unor cunotine de tipografie,
10

Principii de design
mcar minimale. Cunoaterea ctorva lucruri de baz din domeniul tipografiei ajut la
augmentarea considerabil a calitii interfeei unui web site. Lizibilitatea i accesibilitatea informaiilor sunt direct influenate de aceste aspecte.
La final, n mod obinuit, o interfa de site este o serie de imagini efectuate
ntr-un program de grafic, de design, cum ar fi Corel Draw, Adobe Photoshop, etc.
Pentru a avea un site propriu-zis, aceste imagini urmeaz s fie tiate (tranate) n bucele, n diferite fiiere, n funcie de design, de elementele din interfa i n funcie de
tehnologia folosit pentru a implementa interfaa. Implementarea unei interfee const n
programarea HTML i CSS. Toate proprietile definite textelor n programul de design
trebuie corelate cu proprieti CSS pentru a obine un maximum de fidelitate cu designul iniial i trebuie evitat cu orice pre rasterizarea, transformarea, textelor din
design n imagini, pentru a obine acelai aspect vizual, deoarece gradul de accesibilitate
scade drastic.

1.1 Design
Elementul principal al oricrei arte vizuale este punctul. Ca i n pictur, acest prim element de baz este la fel de
important i n designul de interfee de site-uri web. Punctul
este elementul esenial pentru a obine linii care se obin
prin unirea a dou puncte. Prin trasarea unei linii dou puncFig. 1
te diferite sunt conectate i au rol de capete. Omul are tendina la nivel perceptual de a subnelege liniile, fr ca acestea s fie trasate. De exemplu n imaginea alturat, utiliznd doar trei puncte, fr nici o linie, am construit o form geometric: un triunghi.
La nivel matematic, orice linie poate fi considerat fie o mulime discret de
puncte cu densitate variabil, fie o funcie continu
, unde a i b definesc
limitele intervalului.

1.1.1 Linie
La nivel vizual, linia are un rol artistic important. Ea are potenialul de a ghida
privirea ntr-o lucrare artistic, la nivel compoziional, spre subiectul imaginii sau poate
contribui n transmiterea unor mesaje artistice. Liniile pot fi frnte, cu unghiuri ascuite,
obtuze, continue, discontinue, curbate, etc; pot fi groase sau subiri. Liniile sunt utilizate
pentru a desena contururi de elemente vizuale, forme, n design sau pentru a delimita
spaiu, cum ar diferite seciuni din interfaa site-ului sau a unei pagini de revist, ziar,
etc.
n funcie de orientare, liniile au conotaii diferite pentru privitori. Linii orientate
vertical exprim aspiraia la ceva mai mult, nlime, putere, ascensiune, verticalitate,
dreptate. Liniile orientate pe orizontal sunt asociate cu repaosul, cu linite, relaxare,
calm, siguran. Se poate observa cu uurin c n arta vizual tot mai mult este utilizat
raportul de 16/9 al imaginilor i c este agreat de majoritatea oamenilor. Rar este utilizat
un raport n care nlimea s fie mai mare dect limea, deoarece acesta exprim tensiune.
11

Principii de design
Liniile n diagonal exprim micare, activitate,
vibraie i tensiune. n cultura european, occidental, liniile orientate n diagonal de la stnga la dreapta, exprim cderea, ns n orient, unde se citete de la dreapta
la stnga reprezint opusul: cretere. n picturi, fotografii, liniile diagonale pot exprima i reda adncimea perspectivei. Astfel de linii exprim i instabilitate, datorit
ambiguitii: nici verticale, nici orizontale. [1]

Fig. 3

Linii curbe

Fig. 2

Linii diagonale

Liniile curbe, ondulate, pot aminti privitorului de forme din natur, de formele corpului omenesc. Acestea de obicei exprim tandree, linite, plcere, delicatee, uurin, etc
i nu permit dihotomii, contraste, fiindc exist ntotdeauna
un interval de parcurs de la un capt la altul, din aproape n
aproape, fr salturi. Liniile frnte sunt antipodul n acest
sens, deoarece exprim lucruri concise, precise, clare, n mod
abrupt i direct. Unghiurile ascuite contribuie la o posibil
percepie de duritate exprimat n lucrarea vizual.

1.1.2 Form
Pentru a realiza forme sunt necesare fie linii curbe, fie linii frnte. Dup aspect, formele pot fi geometrice sau organice. O form organic se obine cu linii
curbe, iar o form geometric din linii frnte. Cele mai
utilizate forme n design de interfee de site-uri sunt
formele primitive studiate n geometria euclidian:
dreptunghiuri, elipse i triunghiuri.

Fig. 4

Forme geometrice

Fiecare contur al unei forme poate fi definit prin cteva puncte (de coordonate x,
y) i liniile care le conecteaz. O dat definit conturul, acesta poate fi umplut cu o
culoare i atunci forma ocup un spaiu n plan bidimensional (spaiu pozitiv la nivel
compoziional). O form umplut este un obiect n spaiul plan cu mai multe proprieti:
coordonate, arie, lime i lungime, etc.
Modul de recunoatere vizual al procesului de gndire a fost observat de ctre
studenii i profesorii de psihologie de la coala Berlinez n anii 1920. n linii mari,
percepia oricrui design sau pictur a fost definit prin teoria Gestalt - esena sau
forma unei entiti complete. Potrivit acestei teorii, principiul operaional de baz al
creierului uman este holistic, paralel i are tendina de a fi auto-organizatoric [2]. Prin
aceast teorie a psihologiei formelor se pot identifica mai multe moduri n care creierul
uman grupeaz i interpreteaz elementele ntr-un design, sau punctele dintr-un plan.
Teoria spune c oamenii percep mai nti ntregul prin a distinge obiectele (spaiul
pozitiv) de fond (spaiu negativ), apoi sunt contientizate elementele constituente, prile din imagine. Legile principale n gestaltilism sunt: continuitate, proximitate, completare i similaritate. [3]

12

Principii de design
Continuitate. Punctele formeaz un contur, o form sau o linie. Cercul i ptratul sunt obinute printr-o
serie de puncte care putea fi mai puin dens (fig. 6).
Proximitate. Punctele sau elementele vizuale sunt
grupate dup distana relativ ntre acestea. Elementele vizuale (cercurile i ptratele de diferite proporii)
formeaz patru ptrate n imagine, ns dac privim
Fig. 5
per ansamblu, distana dintre ele determin nc un
Continuitate ptrat mare (fig. 5).
Completare. Forma este completat cu elementele sau partea
lips deoarece o form nchis este mai uor de perceput dect una
deschis. n exemplul de mai sus, se pot observa un cerc i un ptrat (spaiu pozitiv). Ambele forme sunt incomplete, decupate.
Dup o privire mai atent, se poate percepe nc un ptrat suprapus
(spaiu negativ) care creeaz impresia de decupare, dar acesta se
confund cu fundalul (fig. 7).
a)

Similaritate

b)

c)

Fig. 6

Proximitate

Fig. 7

Completare

Fig. 8

Similaritate. Elementele vizuale sunt grupate dup form, culoare sau proporii. n
figura a) de mai sus, elementele pot fi grupate n funcie de dimensiuni, iar n b) pe lng diferitele proporii, avem i diferite forme: cercuri i ptrate. n c) avem n plus culorile ca al treilea criteriu pentru a regrupa elementele. [4]
Aceste principii observate prin psihologia formelor sunt aplicate n mod involuntar i constant att de privitori, ct i de designeri sau artiti n artele vizuale. n cele ce
urmeaz voi reliefa cum o interfa de site este de obicei structurat la nivel vizual. Se
va putea observa facil cum legile mai sus enumerate sunt exprimate.

1.1.3 Layout
n designul de interfee, ntreaga structur vizual, layout-ul, se bazeaz pe definirea de forme geometrice. Fiecare element din designul interfeelor de site-uri, poate fi
exprimat i este reductibil la dreptunghiuri de diferite dimensiuni. Potrivit teoriei Gestalt, se poate spune c adeseori un design se rezum doar la dreptunghiuri colorate i
umplute n diferite moduri. Contururile acestora sunt mai mult sau mai puin scoase n
eviden i eventual au colurile rotunjite sau teite. Sunt mai rar folosite elipse sau forme organice i linii curbe n design-uri, deoarece implic mai mult efort n unele cazuri
la nivel tehnic i nici nu se potrivesc cu fiecare tip de site.

13

Principii de design
Layout-ul unui design de web site este definit de succesiunea i de poziionarea a
elementelor din interfa, avnd diferite proporii ntre ele i spaii stabilite de distana
dintre acestea.
n vederea conceperii unui layout, un designer trebuie s stabileasc liniile principale ale interfeei. Orice web site este navigat fie de sus n jos, fie (foarte rar) de la
stnga la dreapta, adic pe vertical sau pe orizontal. n acest sens, trebuie stabilite
principalele linii verticale i orizontale n layout. Aceste linii nu vor fi ntotdeauna vizibile n designul final, ci sunt linii orientative, de lucru, sau implicite, perceptibile la nivel vizual la o privire mai atent. Acestea trebuie definite n mare parte de doi factori:
numr de coloane i de seciuni.
Seciunile eseniale ntr-un design
de interfa a unui site sunt antetul, bara
de navigare, partea de coninut - articol,
bar lateral i subsolul (figura alturat).
n antet trebuie s apar titlul siteului (numele instituiei, corporaiei sau a
persoanei fizice), sigla i opional un moto, o mini-bar cu faciliti precum cutare n site, schimbarea limbii i date de
contact succinte.
Bara de meniuri ntr-un site poate
fi compus din mai multe componente i
funcionaliti, n funcie de ct de bogat
este n coninut site-ul. O bar de meFig. 9
niuri este constituit din elemente viSeciunile principale ntr-un layout de site
zuale i/sau de tip text care permit utilizatorilor s navigheze ntre diferitele pagini ale site-ului n vederea satisfacerii nevoii de
informare prin coninutul pus la dispoziie. Ca o prim etap, se definesc meniurile principale, i n cazul unui site extins, ierarhia coninutului, a paginilor. Designerul stabilete cum vor fi orientate n interfa: pe vertical sau pe orizontal. Meniurile aflate
mai adnc n ierarhie (adic submeniuri de multiple nivele) pot fi afiate implicit sau n
urma unui anumit tip de interaciune cu site-ul care determin apariia acestora. De
obicei, n designul de interfee pentru site-uri cu o cantitate medie de coninut, apare o
bar de meniuri orizontal i o coloan pentru cele de nivelul doi i trei. O alt variant
pentru a avea meniuri cu multiple nivele este folosirea meniurilor n cascad care apar
doar cnd mouse-ul se afl deasupra unui buton.
n seciunea dedicat coninutului, se poate stabili cum apar titlurile, subtitlurile,
tabele, coloanele n articol, etc. Opional se poate folosi n design i o bar lateral pentru a oferi utilizatorilor funcionaliti n plus sau doar pentru a afia mai multe legturi
sau informaii cu privire la coninut.
n partea de subsol a site-ului de obicei apar elemente precum meniuni de drepturi de autor, sigle, date de contact, legturi la pagini mai puin importante i alte faciliti.
14

Principii de design
n urma reliefrii i ilustrrii seciunilor principale ntr-o interfa de site, se pot observa care sunt
liniile principale, pe orizontal i vertical. n primul
rnd sunt liniile care delimiteaz clar care este limea site-ului, pe vertical, dac se alege o navigare
pe vertical, n caz contrar, orizontale. Apoi, tot pe
vertical sunt liniile care definesc coloanele coninutului i a diferitelor spaieri dintre elementele din
design. Pe orizontal, se observ cum doar cteva
linii delimiteaz precis antetul de coninut i n partea
inferioar, subsolul de coninut. n imaginea alturat
se pot observa i liniile care indic spaiile necesare
pentru coninutul de tip text.

Fig. 10

Linii principale n design de site

Pentru un design profesional, alinierea elementelor n interfa este foarte important. Nu este admis s fie elementele decalate, pe vertical sau pe orizontal. Este imperativ ca designerul s dea atenie deosebit interfeelor, pentru ca elementele s fie
bine poziionate i aliniate. Dup cum s-a reliefat n ilustraiile de mai sus, textele din
diferitele seciuni trebuie s fie aliniate pe vertical, la nivel de pixel: antet, bara lateral
i subsol. Iar pe orizontal, n seciunea de coninut, textele din coloane, inclusiv n bara
lateral, trebuie s fie poziionate la acelai nivel. Ca o regul, aceste distane, adic
spaieri, trebuie respectate i n restul designului. Se poate observa c spaiile sunt egale
n stng i dreapta coloanelor, la fel i n plan orizontal. Trebuie subliniat faptul c i
cel mai mic element de design trebuie s fie aliniat corespunztor: un buton, un text n
subsol, etc.
Spaierea corespunztoare a elementelor n design i a textelor fa de marginile
elementelor din interfa n care se gsesc este iari un aspect important, deoarece, n
final, gradul de frumusee perceput i nivelul de satisfacie a utilizatorii site-ului vor fi
n mod direct influenate. O interfa ticsit i nghesuit cu mult text mic, cu multe
chenare mici i eventual dispuse incorect, fr aliniere corespunztoare, va fi n mod
cert neplcut pentru utilizatori i va determina o insatisfacie oricrui utilizator, va
prea greoaie i apstoare. O interfa profesional trebuie s ofere o stare de libertate, aer vizitatorilor si. Asta este posibil doar dac designerul utilizeaz spaii destul de largi ntre elementele din design i cu texte mari care s fie poziionate astfel nct
s existe spaii, recomandabil egale, ntre marginile chenarelor i acestea.
Designerii au la dispoziia lor mai multe
moduri de a alinia n mod corect elementele
ntr-un design i de a-i facilita acest proces.
Exist site-uri online care ajut la generarea de
grilaje, fie pentru implementarea designului n
CSS/HTML, fie pentru programe precum
Fig. 11
Photoshop - utilizate pentru realizarea de astTrei coloane cu linii de ghidare 960GS
fel de interfee. Un astfel de site, probabil
unul din cele mai cunoscute de acest fel este 960 Grid System realizat de Nathan
Smith [5]. n Photoshop i alte programe de design, utilizatorii au la dispoziie tot felul
de faciliti care uureaz considerabil alinierea elementelor: linii de ghidaj, rigle i op15

Principii de design
iuni de facilitarea procesului de repoziionare a fiecrui obiect prin mutarea asistat,
care magnetizeaz elementul n micare fa de restul elementelor sau a liniilor de ghidare.
Un alt aspect care trebuie luat n considerare n procesul de realizare a unei interfee de site este proporia ntre elemente din design i seciuni. n acest sens, designerul
trebuie s stabileasc o ierarhie vizual bazat pe importana elementelor exprimat prin
dimensiunea lor. Nu este recomandat ca titlurile n site s fie foarte mici, iar corpul
textului s fie mai mare dect acestea sau dect meniurile principale. Meniurile de nivelul doi au o dimensiune mai mic dect meniurile principale. De obicei, antetul siteului i bara de meniuri principale trebuie s aib dimensiuni mai mari, iar titlurile din
coninut s fie iari mai mari dect textul propriu-zis. Antetul este considerabil mai
nalt ca subsolul site-ului, ns aceasta nu este o regul clar. n subsol este de preferat
ca textele s fie mai mici dect n coninut i sa nu fie prea intens ca design.
Site-urile sunt afiate pe ecrane de diferite rezoluii (1024 x 768, 1600 x 1200,
1920 x 1080) sau pe dispozitive cum ar fi telefoane mobile, televizoare sau altele. Este
de dorit ca primele lucruri pe care le vede utilizatorul pe ecran s fie i cele mai importante. Nu am dori ca navignd pe Internet s vedem un subsol mare n loc de antet i
coninutul s apar doar dup ce glism mult pagina. Astfel, putem pune n discuie cteva caracteristici i proprieti vizuale pe care elementele din design le pot avea i pe
care designerul le utilizeaz pentru a impune la nivel vizual o ierarhie a acestora n
funcie de importana lor: poziionarea, dimensiunea i culoarea. Stabilirea importanei
elementelor funcionale i decorative din design poate facilita considerabil procesul
creativ. Un design profesional trebuie s rspund ct mai bine ntrebrii: ce vrea utilizatorul s vad mai nti?.
n partea superioar a site-urilor trebuie afiate funcionalitile imediat necesare
utilizatorilor: schimbare de limb, contact, bara de meniuri pentru navigare i titlul siteului. Antetul nu trebuie s ocupe tot ecranul, deoarece utilizatorii vor s aib o privire
asupra coninutului imediat dup ce se schimb pagina. n subsolul site-ului trebuie puse
elementele funcionale neimportante i informaii mai puin relevante. Trebuie luat n
calcul ce utilizatori vor naviga pe site, ce rezoluii vor folosi pentru a alege n cunotin
de cauz poziia i dimensiunea elementelor din design.
Un alt mod de a augmenta sau decrementa importana elementelor n design este
prin folosirea abil a nuanelor i a culorilor. Pentru a reduce importana unui element
trebuie folosite culori mai puin stridente, sau se poate estompa. De exemplu, un cmp
de text pentru cutare aflat n antet poate fi estompat, astfel nct s nu fie pronunat i
s apar privitorului doar la o privire mai atent asupra site-ului.
Un designer are un grad ridicat de libertate n a alege ce elemente apar n diferitele
seciuni ale designului i cum sunt afiate. ns apar constrngeri i limitri datorit mai
multor factori exogeni, precum: accesibilitate, comportamentul utilizatorilor pe Internet,
scopul site-ului, cerinele i preteniile clientului, tehnologii, etc. Toi aceti factori, n
fapt, ngrdesc considerabil libertatea designerului, mai ales dac sunt luai n calcul n
mod strict, fr ncercarea de a iei din context sau abloane, orict de puin.

16

Principii de design

1.1.4 Compoziie
n ideea de a iei din context i deoarece interfeele de site-uri reprezint un fel de
art vizual, designerii profesioniti implementeaz mai mult sau mai puin tehnici din
pictur i fotografie, deoarece o interfa de site poate fi considerat o imagine artistic.
n acest sens, se pot aplica principii de compoziie cunoscute n aceste forme de exprimare artistic: echilibru compoziional, repetiie, simetrii, proporii, etc.
Cnd se pune n discuie compoziia unei imagini, trebuie luat n considerare i
cunoscut foarte bine conceptul de spaiu n plan. n principal, o imagine are o lime i
lungime bine definit, un cadru precis. Acest cadru de exprimare (un ecran, o foaie sau
o pnz de dimensiuni precise) reprezint spaiul de desfurare al creativitii i numai
dac este analizat per ansamblu se poate vorbi despre compoziie. Mai precis, n orice
punct unde se decide ca un element grafic s fie desenat are un potenial artistic, n
funcie de spaiul din jurul acestuia n plan. Spaiul poate fi pozitiv, cnd este ocupat de
un element vizual, sau negativ, cnd este perceput ca spaiu gol.
Pentru a ilustra cele spuse, s lum ca exemple urmtoarele dou imagini:

Fig. 12

Fig. 13

Aceste imagini ilustreaz ct de important este direcia liniilor i cum poziionarea diferit n cadru a elementelor grafice (compoziia) schimb mesajul imaginilor.
n figura 12 se poate observa ca personajul urc un drum i este la nceputul
acestuia. Dac personajul ar fi fost situat n dreapta, ar fi fost la capt de drum, ar fi ieit
din cadru, semnificnd plecarea. Direcia linii de orizont indic un urcu relativ uor, o
cretere i o tensiune nu prea mare. La nivel compoziional, datorit spaiului gol foarte
mare, se poate nelege c personajul este singur i pustiu. Mai mult dect att, nu este o
compoziie echilibrat deoarece pe nici o ax nu se poate gsi vreo simetrie. n stnga
jos, imaginea are un element bine conturat, iar n rest este gol. Acest spaiu se numete
spaiu negativ, iar personajul reprezint spaiu pozitiv. Utilizarea abil n imagini artistice a spaiului negativ i pozitiv poate contribui substanial n ceea ce privete exprimarea artistic.
n opoziie cu figura 12, n figura 13 direcia linii de orizont indic o cdere
abrupt i o tensiune mult mai mare dect n prima ilustraie. La nivel compoziional,
prin poziionarea personajului n extrema dreapt, se poate vedea ca o plecare, o ieire
din cadru, din existen a acestuia. Compoziia este echilibrat, deoarece se poate observa o simetrie informal. O simetrie informal este obinut prin utilizarea de elemente
vizuale care nu sunt identice: soarele i personajul. Acestea sunt dispuse relativ la
aceeai distan fa de axa de simetrie care poate fi subneleas n imagine i au
aceleai proporii. Un element vizual suficient de mare n plan poate fi echilibrat prin
mai multe elemente mai mici care s echivaleze proporia acestuia.
17

Principii de design
n exemplul de mai sus s-a folosit simetrie informal, ns exist mai multe tipuri
de simetrii. Simetria formal se poate obine prin oglindirea coninutului, cnd prile
aflate n simetrie sunt identice. Un alt tip de simetrie este cea radial. Simetria radial
este constituit din dispunerea la distan egal a acelorai elemente vizuale fa de un
punct central i ntre ele. [6]

Simetrie formal

Simetrie radial

Simetrie informal
Fig. 14

Revenind la designul de interfee de site-uri web, aceste noiuni despre compoziie

au o relevan semnificativ n mai multe moduri.
n ceea ce const layout-ul, putem identifica cum regulile de compoziie exprimate mai sus se aplic. n antet, titlul site-ului de obicei este contrabalansat prin elemente vizuale, imagistice ce in de domeniul de activitate al companiei, al persoanei creia
site-ul aparine. O alt particularitate este c de obicei, se evit adugarea unei bare, fie
vertical, fie orizontal, dac nu sunt elemente funcionale care s o populeze. De
exemplu: o bar anume doar pentru funcia de cutare. n mod obinuit, aceasta este populat cu legturi, cu butoane sau alte funcionaliti distribuite n ambele pri. n
subsol, de obicei apar mai multe legturi fie interne - spre diferite pagini, fire spre siteuri externe, iar n partea cealalt se afl detalii de despre drepturile de autor, sau un
breadcrumb, opiuni de accesibilitate, etc.
Ornamentarea designului poate fi abordat prin prisma principiilor de compoziie.
Un design poate fi realizat simetric informal sau formal prin folosirea de elemente
vizuale ce au relativ aceleai proporii i s fie dispuse simetric n antet, subsol i pe
marginile site-ului. Aa cum s-a vorbit mai sus despre mesajul artistic care poate fi
schimbat prin compoziie, orientarea liniilor, n ilustraiile date ca exemplu, se poate la
fel de uor vorbi i despre un antet de site, un subsol sau alte aspecte ce in de o interfa
de site.
O alt tehnic mprumutat din pictur pentru a realiza design-uri de interfee care
s ias din context este realizarea iluziei de adncime, de spaiu. Designerii pot crea,
precum orice pictor, iluzia de adncime n mai multe moduri. ns, cele mai utilizate
tehnici sunt: suprapunerea formelor, schimbarea dimensiunii, modificarea de perspectiv (perspectiv linear) i estompare cu ajutorul nuanelor i al culorilor care creeaz
efectul c elementul reced n perspectiv [7]. Se mai folosesc i efecte vizuale care au
un aport substanial n obinerea iluzii de adncime: degradeuri, reflexii i umbre.

18

Principii de design
Urmtoarele figuri ilustreaz diferite procedee de a crea iluzia de adncime:
a)

b)

c)

d)

Fig. 15

a)
b)
c)
d)

suprapunere i linii care marcheaz conturul obiectelor.

suprapunere i estompare - schimbarea nuanei n funcie de distan.
suprapunere, estompare, reflexii i umbre.
suprapunere, estompare i schimbarea dimensiunii obiectelor n funcie de distan.

1.2 Culori
n arta vizual, inclusiv n designul de interfee de site-uri, culorile au o capacitate
imens n stimularea privitorilor. Culorile strnesc cele mai vii triri n oameni. Impactul lor vizual este de departe cel mai important n realizarea oricrei lucrri artistice:
poz, pictur sau design. Pentru a atrage vizitatori i de a-i menine pe site ct mai mult
culorilor interfeei sunt decisive n acest sens. Un designer trebuie s aib o cunoatere
aprofundat a teoriei culorilor i a semnificailor acestora. Utilizarea lor n mod contient este imperativ, deoarece permit oricrui designer s transmit mesajul artistic
dorit. Folosirea de culori inadecvate poate drastic schimba experiena utilizatorilor pe
site: acesta poate fi repulsiv, inaccesibil i ilizibil.

1.2.1 Optic
n fizic, culorile sunt radiaii
electromagnetice de diferite lungimi
de und, frecvene i intensiti. De
obicei, o surs de lumin radiaz fotoni pe o plaj larg de frecvene i
lungimi de und. La nivel cosmic, radiaiile electromagnetice sunt msurate de la 1 km (undele radio) pn la
Fig. 16
10-14 m, ns spectrul de lumin vizi- Tabel cu lungimile de und i frecvenele care corespund
diferitelor culori
bil este doar n intervalul 390-750
nanometrii. Lumina poate fi descompus spectral pentru a identifica cu precizie culorile
spectrale, pure, numite monocromatice. Tabelul alturat ilustreaz culorile spectrale.
n principal, obiectele opace au diferite culori n funcie de frecvenele i lungimile de und pe care le absorb i reflect. Astfel dac un obiect absoarbe toate lungimile
de und este negru i reine cldura mai mult. Un obiect alb le reflect pe toate i nu reine cldura la fel de mult ca un obiect negru. A se ine cont c nici un obiect nu
absoarbe sau reflect integral lungimile de und, altfel am cunoate obiecte absolut pur
negre sau absolut pur albe i ar fi de neimaginat ct de calde sau ct de reci ar fi. Dac o
surs de lumin este roie, aceasta radiaz doar n intervalul 700-630 nanometrii, orice
obiect aflat n jurul aceste surse nu va avea culoarea lui real, deoarece intervalul de
19

Principii de design
lungimi de und care poate fi absorbit i reflectat este limitat. Astfel, dac obiectul este
alb n realitate, el va aprea rou. De aceea sursele lumin trebuie s emit fotoni pe o
plaj ct mai larg de lungimi de und pentru a include tot spectrul de culori. [8]
Dup cum s-a putut nelege din cele spuse mai sus, ochiul uman poate percepe lumina doar ntr-un interval de lungimi de und bine stabilit, datorit construciei sale biologice. ntr-un ochi se gsesc trei tipuri de receptori fotosensitivi (celule conice) pentru
percepia culorilor: L, M i S. Fiecrui tip de receptor i corespunde un interval de lungimi de und pentru care este sensibil: lungimi lungi, medii sau scurte. n funcie de gradul de stimulare a acestor receptori, creierul uman detecteaz diferitele culori. n ntuneric culorile sunt mai puin vii deoarece receptorii funcioneaz doar la lumin. n acest
caz sunt folosite celulele bastonae care regleaz timpul de expunere, adic gradul de
sensibilitate la lumin pentru a putea vedea n ntuneric. [9]
Pentru a face un sumar a celor spuse mai sus, culorile pe care le percepem n jur
sunt determinate de mai muli factori: n funcie de intervalul de lungimi de und radiate
de sursa de lumin i de intensitatea acesteia, de modul n care obiectele absorb i
reflect frecvenele i n final, de modul n care ochiul uman, din poziia de privitor, este
capabil de a percepe radiaiile electromagnetice din jurul su generate de lumini i
obiecte.

1.2.2 Temperatura culorilor

O alt proprietate a culorilor, i implicit a luminii, este temperatura. Temperatura
luminii se msoar n Kelvin. n cea de-a doua jumtate a secolului XIX, Lord Kelvin a
comparat lumina zilei cu un corp negru pe care l-a nclzit treptat. Astfel, dac se
folosete un obiect ideal negru care este treptat nclzit se va observa cum acesta devine
succesiv rou, galben, alb i n final, albastru. Temperatura culorii este indicele de neutralitate a albului. Culorile cu o temperatur de peste 5000K sunt culori reci (alb, cyan,
albastru), iar n intervalul de 2500K - 3500K sunt culori calde (rou, galben, alb). Albul
este neutral. [10]
Temperatura culorilor are dou roluri eseniale: artistic i tiinific. Artistic,
culorile calde sunt percepute ca fiind relaxante i plcute, iar cele reci, amintesc de anotimpuri reci, situaii mai tensionate, etc. n pictur, culorile reci sunt folosite pentru
efecte atmosferice deoarece creeaz senzaia c dispar n plan, iar cele calde par mai
aproape. n spaii publice se folosesc lumini calde, iar n cldiri de birouri, lumini reci,
pentru a stimula angajaii s lucreze mai mult. Designerii sau fotografii pot filtra imaginile pentru a le transforma n imagini mai calde sau mai reci, n funcie de mesajul artistic dorit.
Al doilea rol pe care temperatura culorilor l are este n cadrul tiinific. Diferitele
tipuri de surse de lumini au fost definite ca standarde. Aceste definiii iau n calcul i
temperatura corelat a culorilor (CCT, Correlated Color Temperature). De exemplu, lumina lumnrii are doar 1850K, un bec incandescent are temperatura de 2600K 3000K, iar un bec bazat pe halogen 3400K. [11]
C.I.E. (Commission Internationale de l'clairage) a definit mai multe standarde
de iluminare pe mai multe categorii: A, B, C, D, E i F. Aceste categorii reprezint diferitele tipuri de lumini. Categoria A este pentru simularea becurilor incandescente, B
20

Principii de design
pentru simularea iluminrii directe pe timpul zilei, C pentru simularea iluminrii
indirecte pe parcursul zilei, E pentru surse de lumini echienergetice i F pentru diferite
surse de lumini fluorescente. n categoria D (Daylight) se afl standardele de iluminare
care definesc iluminarea n condiii optime, n natur, n diferite momente ale zilei i
diferite locuri pe Terra. n aceast categorie standardele sunt D50 (5003K), D55
(5503K), D65 (6504K) i D75 (7504K). D50 definete iluminarea sub un cer albastru,
iar D65 un cer complet nnorat. Spectrul oricrei surse de lumin, inclusiv a unui standard de iluminare, poate fi exprimat sub forma unui triplet de valori. Acest triplet de
coordonate este numit punct de lumin (white point). n editarea de imagini pe calculator, aceste standarde sunt folosite n conversia ntre diferitele modele i profile de culori. [12]

1.2.3 Modele de culori

Pe parcursul istoriei au fost elaborate diferite sisteme de a defini, reprezenta i de
a denumi culorile. Actualmente, cea mai comun modalitate de a reprezenta culorile n
domeniile din art se bazeaz pe roata de culori, prima dat ilustrat de cercettorii din
acest domeniu n secolul XVIII. Isaac Newton i Johann Wolfgang von Goethe n
Teoria culorilor din 1810 au marcat progrese considerabile n nelegerea culorilor
[13].
n mod obinuit, designerii, fotografii i pictorii definesc fiecare culoare prin urmtoarele caracteristici: culoare spectral, saturaie, tent, intensitate, crom, nuan, luminozitate i valoare. Exist o abunden de termeni, astfel c, ntre acetia exist relaii
strnse la nivel semantic i pot uor crea confuzie. Aceast situaie este cauzat de modul n care s-a desfurat evoluia n domeniul teoriei culorilor care a introdus o gam
larg de termeni cu diferene semantice minore ntre ei. [14]
Pentru a obine culori exist dou moduri de sintez a
acestora: substractiv (CMY) i aditiv (RGB). n principal,
diferenele apar din cauza mediului de lucru i a tehnologiilor
folosite.
Pictorii i industria de tipografie i tiprire folosesc sinteza substractiv pentru a obine culori. Cu ct mai multe
vopsele sau pigmeni sunt suprapuse, cu att mai ntunecat
devine culoarea. Culorile primare a acestui tip de sintez sunt
cyan, magenta i galben. Prin combinarea acestora se pot obine urmtoarele culori secundare: rou, verde i albastru. n
tipografie se folosete modelul de culori CMY sau CMYK
(Key, ct de neagr este culoarea). Cu alte cuvinte, CMY
este un model de reprezentare i reproducere a culorilor standardizat, iar CMYK este doar o variant particular a modelului CMY folosit n programele de grafic. [15]
Fig. 17

Sintez substractiv
i sintez aditiv

21

Principii de design
n design, grafic digital i n industria de monitoare, ecrane, unde culorile sunt
obinute prin lumin, se folosete sinteza
aditiv. Potrivit acestui mod de lucru, cu ct
mai multe culori sunt folosite, prin suprapunere, culoarea devine tot mai alb [16]. Culorile principale sunt: rou, verde i albastru. Prin combi-narea a dou culori primare
rezult urmtoarele culori secundare: cyan,
magenta i galben. n domeniul informatic
se utilizeaz modelul de culori RGB (red,
Fig. 18
green, blue). Fiecare canal de culoare priReprezentarea geometric a modelului de culori
RGB, sub forma de cub
mar are o valoare reprezentabil fie aritmetic, fie n procente, fie n intervalele 0-255 (8 bits) sau 0-65535 (16 bits). n unele
medii de lucru profesionale n grafic digital i design devine tot mai comun folosirea
de RGBA. Alpha este o valoare tot pe 8 sau 16 bits care indic gradul de transparen a
culorii. [17]
Modelele de culori CMY i RGB sunt reprezentate n spaiu sub forma unui cub,
unde fiecare punct n spaiu de coordonate x, y i z reprezint o culoare r, g, b sau c, m,
y. Reprezentarea geometric a modelului RGB este echivalent cu CMY.
n domenii profesionale de grafic digital (design de interfee de site-uri, grafic
3D, DTP, etc) se folosete modelul de culori HSV sau HSL (Hue, Saturation i Light
sau Value). Culorile sunt obinute prin sinteza aditiv. HSL/HSV este implementat n
aplicaiile de procesare imagini i de design, fiindc este un mod mai intuitiv pentru percepia uman de a reprezenta modelul de culori RGB. Acest model poate fi reprezentat
geometric sub forma unui cilindru, astfel culoarea spectral (hue - culoarea pur) are valori n intervalul 0 - 360. Saturaia este o valoare care definete ct de intens este o
culoare, concentraia acesteia. Luminozitatea sau valoarea indic ct de deschis sau ct
de nchis este culoarea. n afar de culoarea spectral, ceilali doi parametrii (S, V sau
L) au valori ntre 0 i 1 sau n procente: 0% - 100%. [18]
Urmtoarele dou ilustraii reliefeaz diferenele dintre HSV i HSL. Diferite seciuni sunt redate pentru a facilita nelegerea acestor modele de reprezentare n spaiu a
culorilor.

Reprezentarea geometric a HSL i HSV sub forma de cilindru

Fig. 19

22

Principii de design
RGB i CMY(K) sunt modele de culori care au ca scop definirea modului n care
se obin culorile i cum se pot reprezenta n funcie de dispozitive i tehnologiile folosite. RGB este pentru ecrane, lumini i prelucrare digital a imaginilor. CMYK pentru
printuri, pictori i pigmeni. Nici unul din modele nu este conceput anume pentru a
defini modul n care ochiul uman percepe culorile. n acest sens, CIE a definit mai
multe standarde pentru a reprezenta ntr-un spaiu de culori percepia vizual a luminii
i a culorilor mult mai precis dect pn atunci. n general, CIE Lab este folosit doar n
medii de cercetare sau n domenii adiacente.
C.I.E. n 1976 a definit standardul CIE L*, a*, b* cunoscut sunt numele de CIE
Lab. L* este un parametru al spaiului de culori care definete luminozitatea ntre 0 i
100, iar a* si b* sunt valori de culori aflate n opoziie. Parametrii a* i b* pot avea valori
negative sau pozitive ntre -128 i +127. Aceti parametrii sunt calculai ca diferene de
transformri a luminozitii. [19]
Figura de mai jos prezint spectrul de culori n funcie de dimensiunile L, a* i b*.
Acest tip de reprezentare vizual a CIE Lab D50 este sub forma de CIE XYZ. Culorile
afiate pe ecran variaz foarte mult n funcie de valorile alese, astfel le-am notat precis.

CIE Lab

Fig. 20

CIE Lab este independent de orice tip de dispozitiv i este de obicei utilizat ca o
referin teoretic pentru alte modele de culori deoarece acoper ntregul spectru de
lumin vizibil. Mai pe larg, modelele de culori mai sus prezentate, RGB, CMYK, HSL
i HSV nu cuprind ntregul spectru de lumin vizibil, adic toate culorile perceptibile
de ochiul uman i sunt doar nite modele matematice abstracte care descriu cum pot fi
reprezentate culorile ca perechi de numere. Orice model de culori este un sistem de
culori arbitrar, fr context, dac nu este asociat printr-o funcie de corelare a datelor cu
un sistem de culori global, neles exhaustiv. n acest sens, CIE Lab este un spaiu de culori absolut i este folosit ca referin pentru celelalte modele de culori. Funciile de corelare a modelelor de culori cu un spaiu de culoare absolut, sunt folosite n profile de
culori care definesc aceast funcie i mai multe date despre culori. [20]

23

Principii de design

1.2.4 Spaii de culori

Un spaiu de culori este o implementare specific a unui model de culori. Adobe
RGB (1998) i ProPhoto RGB dezvoltat de Kodak sunt spaii de culori care au o acoperire foarte mare de culori din spectrul de lumin vizibil. Adobe RGB cuprinde aproximativ 51% din culorile definite de CIE Lab, iar ProPhoto RGB ajunge la circa 90%,
ceea ce este echivalent cu 12 - 14% mai multe culori dect un om poate distinge n mod
natural. Deoarece acest spaiu de culori este att de larg, se recomand lucrul n modul
RGB 16 bits per canal. [21]
Orice designer sau artist digital trebuie s cunoasc noiuni despre modele de culori, spaii de culori, profile de culori i calibrarea culorilor. Aceste noiuni sunt foarte
importante n domenii profesionale de grafic i n design deoarece stau la baza transferului de imagini pe web i ntre profesioniti. O imagine realizat pe calculatorul de
acas poate s nu arate bine cnd este printat sau afiat pe alte ecrane. Cunoaterea
acestor noiuni permit graficienilor i fotografilor s evite situaii neplcute n conversia
culorilor din RGB n CMYK pentru print sau afiarea corect a culorilor pe multiple
dispozitive i ecrane.

1.2.5 Profile de culori

Un profil de culori este un model numeric al spaiilor de culori. Sistemele de
operare i aplicaiile de grafic, de procesare a imaginilor, aparatele foto, imprimantele,
ecranele i scannerele folosesc diferite tipuri de profile de culori. Acestea se pot
clasifica n urmtoarele moduri: dup tipurile de dispozitive sau dup utilizarea lor n
software. Profilele de culori pentru dispozitive sunt dependente de acestea i ofer
posibilitatea de reproducere a culorilor dorite. La nivel de software, exist profile pentru
sistemul de operare care gestioneaz modul n care culorile sunt afiate i adesea depind
de dispozitiv, modelul de ecran. ntr-un cadru profesional de editare a imaginilor, de
fotografii i n design, se recomand utilizarea profilelor de culori care acoper un
spectru ct mai larg de culori (cele menionate mai sus).
n 1993, s-au pus bazele consoriului ICC (International Color Consortium) care a
definit mai multe standarde deschise de profile de culori. Profilele ICC sunt utilizate n
mod curent, fie n dispozitive, fie la nivel de soft. Profilele de culori descriu atributele
culorilor oricrui dispozitiv sau pentru condiiile de vizualizare prin definirea modului
de corelare dintre dispozitiv i spaiul de colori ales prin utilizarea unui spaiu de culori
conex, de referin. Acest spaiu de culori conex este CIE Lab, dup cum s-a evideniat
mai sus. Corelarea culorilor se face prin profile bazate pe tabele sau pe matrice. Profilele de culori bazate pe matrice folosesc formule matematice pentru a descrie culorile
n spaiul tridimensional. n domeniul editrii video profesionale se folosesc profile de
culori bazate pe tabele LUT (Look-Up Tables) care descriu spaiul tridimensional de
culori prin tabele foarte mari de puncte n spaiu care sunt mostre de culori i se utilizeaz funcii de interpolare pe aceste date. [22] [23]

24

Principii de design

1.2.6 Corecia gamma

Luminoforii dintr-un ecran CRT1
nu emit o lumin proporional cu tensiunea electric dintr-un tub catodic.
Pentru a fi rezolvat aceast problem,
o tehnologie n acest sens ar fi prea
costisitoare. Imaginile sunt afiate mai
Fig. 21
ntunecat dect sunt la nivel de pixel.
Diferena ntre o imagine calibrat gamma
Astfel, aceast limitare la nivel fizic a
i una necalibrat
Imagine:
The
piano room [67]
ecranelor CRT a determinat ca n industria de aparate fotografiat i camere video s se utilizeze o corecie gamma care s
manipuleze pixelii pentru a compensa ntunecarea imaginilor cnd sunt afiate pe ecrane. Procesul prin care se aplic o corecie gamma
asupra imaginilor se numete compresie gamma. Aceast funcie de corecie gamma este menit s ajusteze luminozitatea imaginilor pentru afiare. Profilele de culori Adobe RGB, sRGB folosesc o corecie gamma standard de y=1/2,2=0,454. Ecranele
sunt fcute s urmeze acest standard i astfel aplic
o funcie de de-compresie gamma y=2,2 care ntunec. Funcia matematic care st la baza coreciei
Fig. 22
gamma, este non-liniar i poate fi aplicat pe fieCorecia gamma compenseaz
ntunecarea imaginilor la afiare
care canal R, G i B. [24]
Fiecare designer sau artist digital trebuie s se asigure ca monitorul este bine calibrat, c afieaz corespunztor imaginile. Exist mai multe metode i imagini de tip test
care trebuie s fie afiate ntr-un anumit mod pe ecran, dac acesta este corect calibrat.
Prin ajustarea corect a valorilor gamma la monitor i corelarea acestora la nivel de software, utilizatorul se asigur c tonurile de gri sunt bine afiate, iar luminozitatea imaginilor este adecvat. Pe site-ul The Lagom exist o serie exhaustiv de astfel de imagini
care faciliteaz procesul de calibrare a monitorului. [25]
Modul de lucru ntr-un cadru profesional de editare grafic este bazat pe cel puin
dou sau trei profile de culori ICC. Aplicaiile de vizualizare a imaginilor i de editare
grafic implementeaz suportul pentru profile ICC, iar majoritatea formatelor de imagini utilizate n mod frecvent au suport pentru includerea de profile ICC ca metadate.
Pentru nceput, exist un profil de culori pentru ecran, care trebuie s provin de la productorul ecranului i s fie ncrcat la nivel de driver n sistemul de operare utilizat.
Asta asigur redarea culorilor n mod precis pe ecran. Un alt pas important este calibrarea monitorului astfel nct s fie posibil discernerea cu ochiul liber, n funcie de luminozitatea mediului n care se afl ecranul, a ct mai multor culori i nivele de gri pe
ecran. Ulterior, trebuie luat n vedere ca n programul de editare grafic s se utilizeze
un profil de culori ICC specific pentru lucru: sRGB, Adobe RGB din 1998 sau ProPhoto
RGB. Aceste profile de culori de lucru permit graficianului s obin culori mai bogate,
1

CRT = Cathode Ray Tube: un tub catodic cu vid utilizat pentru ecrane i osciloscoape; n
interiorul acestuia se genereaz fascicule de electroni
25

Principii de design
mai multe - n funcie de profilul ales i s nu piard din calitatea imaginilor prin procesarea succesiv a pixelilor. Un al treilea profil de culori ICC este necesar n funcie de
destinaia lucrrii. Dac lucrarea este pentru un print, trebuie folosit un profil CMYK,
de exemplu Coated FOGRA27. Prin utilizarea unui profil CMYK se asigur conversia i reproducerea culorilor n mod ct se poate de fidel ntre ceea ce se vede pe ecran i
rezultatul final, printat. n caz c destinaia lucrrii este web-ul, profilul de culori recomandat este sRGB. [26]

1.2.7 Conversia imaginilor color n alb-negru

Un aspect adeseori neglijat este conversia de imagini color n imagini alb-negru
(grayscale). Acest tip de conversie nu este, dup cum aparenele ar indica, ceva facil.
Culorile spectrale la nivel perceptiv au o luminozitate care trebuie luat n calcul n procesul de conversie. Fiecare culoare n RGB este constituit din trei valori, iar aceste valori la conversie devin o singur valoare care indic doar un ton de gri (0-255 sau 065535).
Un artist digital are la dispoziia sa trei metode de conversie a unei imagini color
n alb-negru. Prima metod const n aplicarea unui filtru banal pe imagine care nu ia n
calcul modul de percepie a culorilor. n aceast abordare se pierde luminozitatea perceput a culorilor, a elementelor vizuale din imagine. Chiar mai mult dect att, se poate
observa c o conversie de acest fel aplicat pe culorile spectrale la saturaie maxim, devin toate gri, cnd se utilizeaz ca spaiu de lucru modelul de culori RGB. Mai precis,
dac folosim ca referin HSV, oricare culoare din spectru cu saturaia de 100% i valoarea la 100%, devine gri. Pentru a obine alb sau negru, saturaia trebuie s fie la 0% i
respectiv valoarea 0%. Acest filtru depinde de modelul de culori folosit. Dac se folosete CIE L*a*b* conversia se efectueaz n mod corect. A doua metod const n utilizarea unui filtru de conversie care ia n calcul luminozitatea culorilor i percepia acestora. Aceast metod depinde de profilul de culori i modelul de culori folosite, deci rezultatele variaz destul de mult. n final, n programele specializate de editare grafic
ofer i o a treia metod care ofer artistului libertatea de a manipula conversia n albnegru selectiv, pe canale R, G, B i chiar pe baza culorilor spectrale. Seria urmtoare de
imagini ilustreaz aceste diferene care apar la conversia de imagini color n alb-negru.
Color

Filtru de reducere a saturaiei

Diferii algoritmi de conversie a imaginilor color n alb-negru

Imagine: Mushroom Kingdom [27]

Conversie alb/negru n CIE Lab

Fig. 23

26

Principii de design
De obicei, un designer de interfee de site-uri sau un artist digital (n 3D sau pictur), nu pune baza pe cunoaterea teoretic i practic a ceea ce sunt culorile n realitate. ns cei profesioniti, cu experien vast, ajung s aib cunotine despre ce sunt
culorile fizic, n realitate, i cum sunt acestea definite i reprezentate matematic sau cum
sunt gestionate digital culorile (modele de culori, spaii de culori, profile de culori i
conversii, etc). Dup cum s-a evideniat mai sus, cunoaterea acestor aspecte ofer unui
designer un grad ridicat de control asupra imaginilor sale i nltur probleme de afiare
a acestora n diferite medii i contribuie la luarea de decizii bine informate.

1.2.8 Roata de culori

O alt abordare, considerabil mai comprehensibil, n discuia despre culori este
din perspectiva artistic; altfel spus, din perspectiva practic i aplicat n ceea ce privete utilizarea culorilor n lucrri de design sau pictur. Aceast abordare se bazeaz pe
teoria culorilor din artele vizuale tradiionale, care nu i are rdcinile n colorimetrie
sau tiina vizual, despre care s-a discutat pe larg pn aici.
Roata de culori este o modalitate de a reprezenta culorile pentru artiti. Aceasta a fost pentru prima data ilustrat de Isaac Newton, care a avut ideea de a reprezenta
circular culorile n lucrarea Opticks (1704). n lucrarea
Traite de la Peinture en Mignature atribuit lui Claude
Boutet, din 1708, pentru prima dat roata de culori a fost
reprezentat simetric prin culori primare, mprit n 12
culori dispuse la distane egale (figura alturat). Rou,
galben i albastru erau considerate culori primare. Pe baza
acesteia, n timp s-a perfecionat modul de reprezentare i
n zilele noastre, culorile utilizate se bazeaz pe HSV sau
HSL. [28]

Fig. 24

Roata de culori, Claude Boutet

Credit: Rolf G. Kuehni 2003

1.2.9 Scheme de culori

Prin folosirea roii de culori au fost dezvoltat scheme de culori, moduri de a alege
culori potrivit unor teorii ce in de psihologia i percepia uman a diferitelor combinaii
de culori. n general, orice form geometric sau orice mod de a sistematiza alegerea de
culori pe circumferina i pe raza cercului definit de roata de culori, reprezint o schem
de culori. n cele ce urmeaz voi prezenta cele mai cunoscute.
Acromatice. Nu se folosesc culori, ci doar tonuri de gri,
alb i negru. Este aparent o schem de culori simpl sau chiar
restrictiv, care limiteaz expresivitatea artistului, ca designer
sau pictor. ns, utilizarea schemei cere abiliti deosebite n
exprimarea artistic i o cunoatere aprofundat a ceea ce nseamn iluminare n pictur i a contrastelor. Pentru unii privitori, o imagine acromatic poate trezi tristee sau ideea de
vechi, de trecut sau chiar melancolie.

Fig. 25

Acromatice

27

Principii de design
Monocromatice. Se alege doar o spi a roii de culori,
altfel spus, un punct pe circumferina cercului i se alterneaz luminozitatea culorii doar prin variaia razei. Utilizarea acestei
scheme de culori poate fi monoton, deoarece se utilizeaz doar
o culoare spectral, care poate fi doar mai deschis sau mai nchis. ns, este uor de utilizat i poate avea efect relaxant asupra privitorului. Aceast schem este frecvent ntlnit n design-uri.

Monocromatice

Adiacente. Se folosesc culori similare, adiacente, apropiate, una lng cealalt, reprezentnd o seciune din circumferina cercului, un arc, incluznd ntreaga raz pentru a putea
varia luminozitate i saturaia culorilor. O astfel de schem de
culori ofer artitilor un grad de libertate mai mare n expresia
artistic. Se recomand folosirea unei culori dominante fa de
celelalte adiacente i arcul de culori s fie restrns. La nivel perceptual, culorile adiacente se potrivesc ntre ele i sunt considerate confortabile. [29]

Adiacente

Complementare. Culorile sunt alese n opoziie pe circumferina cercului i la orice distan fa de centrul acestuia. Culorile complementare sunt contrastante i creeaz o senzaie puternic de energie, de vibraie. n design, se poate utiliza aceast
schem pentru a atrage atenia asupra unui element vizual. ns,
dac este utilizat n exces, trdeaz un comportament imatur la
nivel de designer. Pentru culoarea textului i a fundalului se recomand evitarea folosirii de culori complementare, deoarece
devine aproape imposibil lectura.
Triade. n cazul schemei de culori monocromatice s-a
ales o singur culoare spectral, o spi a roii de culori. ns, n
aceast schem de culori se aleg trei spie distribuite pe circumferina cercului fie echidistant, fie la alegerea artistului. Schema
ofer o libertate destul de mare la nivel artistic. n aceast configuraie, culorile tind s fie vibrante i se recomand ca una
din ele s domine, iar celelalte dou s fie folo-site pentru
accentuare.

Fig. 26

Fig. 27

Fig. 28

Complementare

Fig. 29

Triade

Mai exist i alte scheme de culori mai puin cunoscute i mai puin relevante: ptratic (patru culori echidistante), rectangular (patru culori, dou cte dou echidistante) i complementar separat (trei culori; dou echidistante i a treia n opoziie). [30]
Culorile primare pot fi RGB (rou, verde i albastru), RYB (rou galben i albastru) sau CMY (cyan, magenta, galben). n arta tradiional, sec. XVIII, nainte ca evoluia tiinific n domeniul colorimetriei s defineasc precis care sunt culorile primare n
funcie de sintez se folosea RYB. Pe roata de culori se pot evidenia culorile primare,
secundare i teriare. Culorile secundare sunt obinute prin combinarea a dou culori
primare, iar cele teriare se obin prin amestecarea celor secundare. Ilustraia de mai jos
arat care sunt acestea i unde sunt situate.
28

Principii de design
Culori primare

Secundare

Teriare

Roata de culori

Fig. 30

Pe baza roii de culorii un designer de interfee de site poate s i aleag culorile

pentru a le folosi n design, formnd o palet de culori. Exist aplicaii web care pot genera palete de culori, seturi de culori, care s fie folosite pentru diferite seciuni ale layout-ului: antet, subsol, titluri, bare de meniuri, etc. O astfel de aplicaie este Adobe
Kuler [31]. Pentru un design profesional, se recomand meninerea a textelor ct mai lizibile. Ochiul uman poate avea o varietate de afeciuni, de diferite grade, de la daltonism (imposibilitatea de a distinge unele culori), fie vedere nceoat sau altele. n general, pentru coninut textual trebuie evitate fundale colorate strident, ci culori ct mai
spre alb sau negru, iar textul s fie n contrast: negru sau alb.
Text lizibil
Lorem ipsum dolor sit amet pour
toujours.

Text nelizibil
Lorem ipsum dolor sit amet
pour toujours.

Influena culorilor asupra gradului de lizibilitate a textelor

Fig. 31

1.2.10 Degradeuri
Elementele n design dintr-o interfa pot fi colorate doar prin culori simple sau
prin degradeuri. Degradeurile pot fi de mai multe feluri: liniare, radiale, circulare, ptratice, etc. Acestea sunt definite prin cteva culori cheie (de ex. rou, galben, verde) care
software-ul le interpoleaz i genereaz culorile intermediare ntre acestea. Dac se decide utilizarea de degradeuri n design, se recomand degradeuri subtile, nu intense i
contrastante. De obicei, utilizarea lor chibzuit poate avea un impact realmente pozitiv
asupra designului.

Tipuri de degradeuri

Fig. 32

ntr-un design de site trebuie meninut o consecven n utilizarea culorilor, precum i la nivel de layout: alinierea elementelor vizuale, spaii ntre acestea, margini, dimensiuni, etc. Acelai tip de elemente vizuale trebuie colorate la fel peste tot. De
exemplu, un titlu n articol nu trebuie s apar o dat rou, iar pe alt pagin verde sau
meniurile haotic colorate, legturile la fel, etc. Culorile trebuie s fie alese logic, n
funcie de aspecte ce in de navigare, de layout i accesibilitate. De obicei, culorile stridente folosite excesiv creeaz repulsie. Astfel, se poate lua n calcul dimensiunea elementului vizual versus stridena culorii. Dac elementul vizual este cel mai mare n in29

Principii de design
terfa, trebuie folosite imperativ culori mai pale, terse, spre exemplu antetul sau partea
central a site-ului unde apare coninutul propriu-zis, articolul. ns, cu ct este mai mic
elementul vizual, cum ar fi un cmp de cutare, cu att culorile atribuite pot fi mai stridente.
O modalitate prin care un designer poate
experimenta n interfee, se bazeaz pe percepia
culorilor. ntr-o interfa de site se poate folosi
iluzia optic numit contrast simultan. O culoare
poate s par c i schimb culoarea n funcie
de context. n figura alturat se poate observa
Fig. 33
Contrast simultan
cum culorile centrale din chenare par sa fie mai
nchise, fie mai deschise fa de contur. Exist o multitudine de iluzii optice, ns aceasta se poate utiliza n designul de interfee n mod facil.

1.2.11 Semnificaii
Culorile au semnificaii i implicaii psihologice. Aceste semnificaii variaz n
funcie de individ i de cultur. n funcie de experienele personale, de educaie, culorile pot trezi anumite stri, sentimente afective n privitori.
Roul este culoare puternic, intens i este perceput ca fiind energic i pasional, iar n unele contexte exprim snge, vitalitate, violent i agresivitate. Culoarea
portocalie este mai domolit, mai puin pasional, mai accesibil.
Galbenul este o culoare care transmite optimism, vitalitate i amintete de soarele
de pe cer.
O culoare care sugereaz natur, naturalee, via este verdele. Este o culoare pozitiv, ns n anumite contexte poate sugera toxicitate i decdere (mucegai). Nuanele
de verde aduc aminte de iarb, de copaci i flori. Actualmente, verdele este o culoare la
mod, datorit noului val ideologic ecologist.
Culoarea albastr exprim distan, rceal, spiritualitate i elegan, profesionalism. Nu este o culoare pasional. Aceasta aduce aminte de natur, de cerul albastru,
senintate i linite, de ocean.
Starea de visare, de fantezie sau de impulsivitate se poate exprima prin violet. Culoarea violet poate sugera nebunie, comaruri, n context negativ.
Roz este o culoare modern, feminist, care este preponderent adorat de genul
feminin, fiind purtat i folosit adesea fie pentru accesorii sau haine. Aceasta exprim
vitalitate, joaca i visare. n diferite contexte sociale, poate avea conotaii de homosexualitate. [32]
Negru exprim doliu sau moarte. Tonuri de gri sugereaz tristee sau apatie, iar
albul puritate, confort, pace i linite. n funcie de context, tonurile de gri, alb i negru
sunt considerate neutre i pot fi uor combinate cu alte culori.

30

Principii de design

1.3 Elemente de tipografie

Un design complet de interfa ntotdeauna include texte. Sunt folosite texte scurte
pentru orientare i navigare n site: meniuri, butoane, legturi spre diferite pagini sau
funcionaliti: cutare, print, ajustarea mrimii textului, etc. n partea central, de coninut, n cazul site-urilor de prezentare se prefer texte de lungime redus, concise pentru a nu plictisi vizitatorii. ns, n cazul site-urilor de informare (tiri, enciclopedii, recenzii, etc), textele pot fi lungi, articole elaborate i detaliate despre subiectul dat. n
ambele cazuri, ct i pentru textele orientative din antetul sau subsolul site-ului, un designer trebuie s cunoasc un minim de teorie din domeniul tipografiei pentru a alege
feele tipografice (fonturi) pentru textele din interfa mai bine, de a asigura lizibilitatea
acestora i a face mai plcut lectura articolelor ntinse pe site-uri de informare.

1.3.1 Margini
O pagin web, chiar dac este interactiv, poate fi considerat la nivel vizual o pagin de revist sau chiar o pagin simpl dintr-o carte. n principal, avem antet i subsol,
iar n ambele cazuri trebuie meninut o consisten vizual ntre pagini. Aceasta este
meninut utiliznd aceeai interfa (design, layout i culori) pentru toate paginile din
site. ntr-o carte, consistena vizual const n utilizarea consecvent a aceluiai font
pentru text, aceleai mrimi pentru paragrafe, titluri, aceleai spaii ntre marginile paginii, etc. ns, aceste aspecte sunt valabile i la o pagin web. Mai precis, o bar de meniuri, indiferent de orientarea sa, trebuie s aib elementele vizuale bine aliniate, iar
textele s aib o margine, un spaiu liber. Textele nu trebuie s ating muchiile oricrui
element vizual din site: meniuri, antet, subsol sau coninut.
Pentru a reliefa cele spuse mai sus, n
imaginea alturat se observ aezarea
textelor n pagin. Pentru a asigura consistena vizual, s-au folosit dimensiuni egale
pentru marginile textelor (verticale i orizontale), evideniate n galben. n general,
pentru a asigura consistena vizual n poziionarea i alinierea textelor nu este imperativ folosirea de margini de aceeai dimensiune pe ambele axe. Astfel, un designer
are libertatea de a defini marginile verticale
la o dimensiune diferit fa de cele pe orizontal. Spaiile largi i marginile groase
transmit vizitatorilor o stare de lejeritate i
sunt ca o gur de aer la nivel de design n
interfa. Se mai poate observa n imagine
i modul de utilizare a coloanelor pentru
layout. n partea de coninut, articolul este
mprit n dou coloane. Bara lateral pentru meniuri este a treia coloan.

Fig. 34

Un design de interfa cu grosimea marginilor

pentru texte marcat prin galben

31

Principii de design

1.3.2 Coloane
ntr-o pagin, fie virtual, fie real, mprirea pe coloane a coninutului face lectura mai plcut, deoarece liniile de text nu sunt foarte lungi. Dac ntr-un ziar sau ntr-o
revist n format mare articolele nu ar fi mprite pe coloane, iar liniile de text ar ncepe
ntr-un capt al paginii i s-ar ncheia n cellalt capt, numrul de cititori ar scdea
drastic. Cititorii devin mai puin dispui s citeasc articolele, deoarece ochiul uman
obosete s menin aceeai linie pentru prea mult timp. Astfel, soluia este de a parcurge coninutul i pe vertical prin mprirea n mai multe coloane a articolelor pentru a
diminua gradul de obosire. Aceste aspecte sunt valabile i pe pagini web, mai ales n
cazul utilizrii de ecrane mari care permit site-urilor cu interfa fluid s devin prea
largi, astfel devin mai greu i mai obositoare de citit. Trebuie menionat i faptul c dac
se abuzeaz de coloane, iar liniile devin prea scurte, impactul acestora nu mai este pozitiv, ci negativ, deoarece cititorii pot fi iritai de lecturarea liniilor de text prea scurte.
Pentru a obine un nivel optim de plcere pentru cititori se recomand ca o linie s aib
aproximativ 70-90 de litere. Trebuie s fie luat n calcul limea coloanei i dimensiunea textului astfel nct aceast recomandare s fie obinut. O soluie n acest sens ar
fi folosirea de formule care s pun n relaie aceste variabile. Folosirea coloanelor nguste transmite cititorilor un aer de superficialitate, de lectur diafan, astfel pentru articole academice, se prefer coloane mai largi. [33]
La nivel de text exist o multitudine de moduri de a stila i de a influena modul n
care acesta este prezentat: culori, spaii ntre litere, cuvinte, paragrafe, stiluri, fonturi i
altele despre care voi vorbi pe parcurs.

1.3.3 Paragrafe
Paragrafele sunt uniti textuale (fragmente) n care se exprim o idee sau un
punct dintr-o argumentaie elaborat. Acestea sunt desprite prin aliniat nou i au n
compoziie mai multe propoziii sau fraze. Delimitarea vizual ntre paragrafe este important pentru a augmenta plcerea lecturii pe site (sau n cri). Exist dou moduri de
a scoate n eviden un paragraf: introducerea unui spaiu ntre acestea i indentarea
textului.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
bibendum egestas lobortis. Duis lectus neque, porttitor ac mattis id,
rutrum id turpis. Morbi laoreet dictum pellentesque. Donec eu
magna tincidunt metus pharetra pharetra. Cras sed libero urna.
Aliquam erat volutpat. Suspendisse at odio eu lectus feugiat sagittis
nec eu sem. Suspendisse cursus euismod libero, venenatis eget
tristique. Vestibulum nec elit lorem, eu rutrum urna viverra.
Aliquam condimentum elit quis justo dapibus laoreet. Aenean
consequat dolor non nisi faucibus commodo. In viverra orci in felis
sagittis ut semper massa dignissim. Pellentesque pharetra diam sit
amet elit porta luctus. Sed risus justo, venenatis eget tristique nec,
bibendum a mauris. Aenean vel lacus, ut consequat leo. Etiam a
dapibus tellus. Vestibulum nec elit lorem, eu rutrum urna viverra.
Fusce luctus laoreet arcu at feugiat. Vestibulum ante ipsum primis
in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur
elementum erat vitae neque porta et bibendum massa luctus.
Morbi ligula purus, ullamcorper tristique blandit sit amet, aliquet ac
dolor. Nulla facilisi.

Spaierea ntre paragrafe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam

bibendum egestas lobortis. Duis lectus neque, porttitor ac mattis id,
rutrum id turpis. Morbi laoreet dictum pellentesque. Donec eu
magna tincidunt metus pharetra pharetra. Cras sed libero urna.
Aliquam erat volutpat. Suspendisse at odio eu lectus feugiat sagittis
nec eu sem. Suspendisse cursus euismod libero, venenatis eget
tristique. Vestibulum nec elit lorem, eu rutrum urna viverra.
Aliquam condimentum elit quis justo dapibus laoreet. Aenean
consequat dolor non nisi faucibus commodo. In viverra orci in felis
sagittis ut massa dignissim. Pellentesque pharetra diam sit amet elit
porta luctus. Sed risus justo, venenatis eget tristique nec, bibendum
a mauris. Aenean vel purus lacus, ut consequat leo. Etiam a dapibus
tellus. Vestibulum nec elit lorem, eu rutrum urna viverra.
Fusce luctus laoreet arcu at feugiat. Vestibulum ante ipsum primis
in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur
elementum erat neque porta et bibendum massa luctus. Morbi
ligula purus, ullamcorper tristique blandit sit amet, aliquet ac dolor.
Nulla facilisi.

Fig. 35

n exemplele de mai sus se poate observa cum o privire per ansamblu poate fi
influenat. Dac ne uitm pe un text n care paragrafele nu sunt delimitate n nici un
mod, ni se va prea liniar, plictisitor i chiar neatrgtor, nu putem observa la o privire
rapid unde ncepe un paragraf, iar n timpul lecturii orientarea n text este realmente
32

Principii de design
mai dificil: nu avem un reper vizual. ns, acest lucru nu este valabil n exemplul al
doilea, unde paragrafele sunt delimitate; chiar i la o privire rapid a textului, observm
unde ncep paragrafele. n concluzie, spaiul ntre paragrafe are rolul important de a
facilita orientarea n text a cititorului n timpul lecturii.
O alt modalitate de a evidenia un paragraf este indentarea primei linii. Cuvntul
indentare provine din englez, verbul to indent. A indenta nseamn a mpinge spre
dreapta prima linie dintr-un paragraf printr-un spaiu introdus la nceputul acesteia.
Acest spaiu este un indent i dimensiunea lui variaz n funcie de designer. Exist i
un alt model de indentare, numit indentare suspendat. n acest mod, prima linie este
decalat spre stnga, ieind n afar, astfel urmtoarele linii ncep mai spre dreapta.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
bibendum egestas lobortis. Duis lectus neque, porttitor ac mattis id,
rutrum id turpis. Morbi laoreet dictum pellentesque. Donec eu
magna tincidunt metus pharetra pharetra. Cras sed libero urna.
Aliquam erat volutpat. Suspendisse at odio eu lectus feugiat sagittis
nec eu sem. Suspendisse cursus euismod libero, venenatis eget
tristique. Vestibulum nec elit lorem, eu rutrum urna viverra.
Aliquam condimentum elit quis justo dapibus laoreet. Aenean
consequat dolor non nisi faucibus commodo. In viverra orci in felis
sagittis ut massa dignissim. Pellentesque pharetra diam sit amet elit
porta luctus. Sed risus justo, venenatis eget tristique nec, bibendum
a mauris. Aenean vel purus lacus, ut consequat leo. Etiam a dapibus
tellus. Vestibulum nec elit lorem, eu rutrum urna viverra.
Fusce luctus laoreet arcu at feugiat. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Curabitur elementum erat neque porta et bibendum massa luctus.
Morbi ligula purus, ullamcorper tristique blandit sit amet, aliquet ac
dolor. Nulla facilisi.

Tipuri de indentare pentru paragrafe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam

bibendum egestas lobortis. Duis lectus neque, porttitor ac
mattis id, rutrum id turpis. Morbi laoreet dictum pellentesque.
Donec eu magna tincidunt metus pharetra pharetra. Cras sed
libero urna. Aliquam erat volutpat. Suspendisse at odio eu
lectus feugiat sagittis nec eu sem. Suspendisse cursus euismod
libero, venenatis eget tristique. Vestibulum nec elit lorem, eu
rutrum urna viverra.
Aliquam condimentum elit quis justo dapibus laoreet. Aenean
consequat dolor non nisi faucibus commodo. In viverra orci in
felis sagittis ut massa dignissim. Pellentesque pharetra diam sit
amet elit porta luctus. Sed risus justo, venenatis eget tristique
nec, bibendum a mauris. Aenean vel purus lacus, ut consequat
leo. Etiam a dapibus tellus. Vestibulum nec elit lorem
Fusce luctus laoreet arcu at feugiat. Vestibulum ante ipsum primis
in faucibus orci luctus et ultrices posuere cubilia Curae;
Curabitur elementum erat neque porta et bibendum massa
luctus. Morbi ligula purus, ullamcorper tristique blandit sit
amet, aliquet ac dolor. Nulla facilisi.

Fig. 36

Exemplele de mai sus ilustreaz indentarea normal i indentarea suspendat. Indentarea paragrafelor crete considerabil satisfacia cititorilor potrivit unor studii efectuate n acest sens, iar orientarea n pagin este mai facil. Paragrafele cu spaii ntre ele
i indentate sunt norma n redactarea crilor. ns pe web, designerii au nceput s nu
mai foloseasc aa des indentare pentru paragrafe. [34]

1.3.4 Interlinie
Nu este suficient s se in cont de spaiul ntre paraLorem ipsum dolor sit amet, consectetur
adipiscing elit. Nullam bibendum egestas
lobortis.
neque, porttitor ac mattis
grafe, dimensiunile marginilor a textelor sau lungimea li- id, rutrumDuisidlectus
turpis. Morbi laoreet dictum
pellentesque. Donec eu magna tincidunt metus
pharetra. Cras sed libero urna.
niilor pentru a obine un maximum de plcere n lectura pharetra
Aliquam erat volutpat. Suspendisse at odio eu
lectus feugiat sagittis nec eu sem. Suspendisse
unui articol, ntr-o revist sau pe web. Pentru a augmenta cursus euismod libero, venenatis eget tristique.
Vestibulum nec elit lorem, eu rutrum urna
i mai mult gradul de plcere n timpul lecturii, un de- viverra.
Aliquam condimentum elit quis justo
signer de interfa trebuie s aib n vedere i spaiul ntre dapibus laoreet. Aenean consequat dolor non
faucibus commodo. In viverra orci in felis
linii (interlinie). Liniile prea dense fac lectura neplcut i nisi
sagittis ut massa dignissim. Pellentesque
diam sit amet elit porta luctus. Sed
greoaie, deoarece ochiul uman gsete mai dificil meni- pharetra
risus justo, venenatis eget tristique nec,
nerea ateniei asupra aceleiai linii n mod constant. n fi- bibendum a mauris. Aenean vel purus lacus, ut
consequat leo.
nal, numrul cititorilor scade considerabil. La nivel artisFig. 37
tic, linii dense transmit o stare de tensiune, de stres. n
Linii dense vs. linii rsfirate
schimb, linii cu spaiere adecvat sunt considerate mult mai confortabile, plcute, contribuie la oxigenarea designului. Ca o recomandare general, interlinia nu trebuie s
fie mai mare dect spaiul ntre paragrafe, deoarece nu se mai poate observa spaiul
dintre paragrafe. Este de preferat ca interlinia s nu fie mai mult de 70% din ct este
spaiul dintre paragrafe.

33

Principii de design

1.3.5 Alinierea textului

Textul ntr-un paragraf poate fi aliniat n dreapta, stnga, centrat sau justificat. Alinierea textului pe
dreapta sau stnga asigur o linie continu pe marginea dreapt, respectiv cea stng. Cnd se folosete
aliniere centrat, fiecare linie este centrat pe orizontal i datorit variaiilor de lungime a acestora, nici
pe stng, nici pe dreapta nu se va obine o linie continu n plan vertical, o aliniere ntre ele. Alinierea centrat nu este recomandat, doar n cazuri excepionale.
Imaginea alturat ilustreaz alinierea pe stnga,
dreapta i justificare.

Lorem ipsum dolor sit amet, consectetur

adipiscing elit. Nullam bibendum egestas
lobortis. Duis lectus neque, porttitor ac mattis
rutrum turpis. Morbi laoreet dictum feugiat
sagittis eu sem. Suspendisse cursus euismod
libero, venenatis.
Aliquam condimentum elit quis justo pharetra
diam sit elit porta luctus. Sed risus justo,
venenatis tristique nec, bibendum a mauris.
Aenean vel lacus, ut consequat leo. Etiam a
dapibus tellus. Vestibulum nec elit lorem, eu
rutrum urna viverra.
Fusce luctus laoreet arcu at feugiat. Vestibulum
ante ipsum primis in faucibus orci Curabitur
elementum erat neque porta et bibendum
tristique blandit sit amet, aliquet ac dolor. Nulla
facilisi nae.

Fig. 38

Tipuri de aliniere a paragrafelor:

stnga, dreapta i justificare

Pentru a alinia textul pe ambele pri, n stnga i dreapta, astfel nct marginile s
fie scoase n eviden, se folosete alinierea justificat, unde toate liniile de text au
aceeai lungime. Lungimea liniilor este determinat de margini i de limea coloanelor
de text. Aplicaiile de tipografie i navigatoarele web, n mod automat, pentru fiecare
linie de text variaz spaiile ntre litere i cuvinte pentru a alinia textul pe ambele pri.
Se poate observa c n alinierea de tip justificare, ultima linie este exclus. n acest sens,
exist justificare pe stnga sau dreapta, unde ultima linie este aliniat fie la stnga, fie la
dreapta. n coloane de text prea nguste nu se recomand utilizarea alinierii justificate
deoarece apar spaii ntre litere i cuvinte mult prea mari, iar lizibilitatea textului scade
drastic. [35]

1.3.6 Interletr
Dup cum deja se poate nelege, i spa- Loremipsum dolorsitamet.
iul dintre dou litere (interletra) ntr-un bloc Lorem ipsum dolor sit amet.
de text sau o linie de text influeneaz cali- L o r e m i p s u m d o l o r s i t a m e t .
tatea perceput a designului pe web sau n
printuri. Spaierea ntre litere influeneaz li- Lorem ipsum dolor sit amet.
zibilitatea articolelor i are conotaii artistice. Lorem ipsum dolor sit amet.
Un text scris cu litere prea nghesuite, poate fi L o r e m i p s u m d o l o r s i t a m e t .
considerat subiectiv i dup caz, poate fi inFig. 39
terpretat ca un mesaj tensionat. n cazul
Interletra are un impact considerabil asupra
lizibilitii textelor
textelor cu dimensiuni mici, se recomand
spaii mai mari ntre litere pentru a permite ochiului uman s disting formele literelor
ct mai facil. Pentru texte mari, spaiul ntre litere poate fi redus fr ca lizibilitatea s
fie afectat att de mult. Interletra nu poate fi mai mare de 70% din ct este spaiul ntre
cuvinte, deoarece nu se mai poate deosebi n mod facil spaierea ntre cuvinte fa de
cea ntre litere (a se vedea ilustraia alturat). Spaiul ntre cuvinte trebuie s fie
considerabil mai mare dect cel ntre litere. Un text mai puin dens, cu o interletr mai
generoas, face lectura mult mai plcut i ncurajeaz citirea integral a textului, deoarece nu necesit o concentrare att de mare pentru deosebirea literelor. [36]

34

Principii de design

1.3.7 Crenaj
Interletra reprezint modul prin care este ajustat densitatea literelor ntr-un bloc de text, indiferent de literele utilizate. ns, pentru fonturile proporionale a aprut necesitatea ajustrii spaiului ntre perechi de litere, deoarece ntre
anumite litere spaiul nu este egal. n tipografie corectarea
vizual a spaiilor inegale se numete crenaj, din fr. crnage
(en. kerning). Crenarea se poate face n mod manual de creatorii de fonturi sau automatizat. Exist algoritmi n motoarele de afiare pentru texte n navigatoarele web i n aplicaiile de design care creneaz literele. n figura urmtoare
se pot observa spaiile inegale ntre litere i cum arat dup
crenare. [37]

Spaii inegale ntre litere ajustate prin crenare

Fig. 40

Crenare -90

Fig. 41

1.3.8 Fa tipografic
Feele tipografice sunt seturi de caractere concepute n acelai stil grafic. Un font
este un set particular de caractere al unei fee tipografice. De exemplu, Arial este o fa
tipografic, iar Arial Narrow Bold Italic este un font, o stilare particular a feei tipografice. [38] ntr-un font fiecare caracter este constituit din grafeme formate dintr-o
glif sau mai multe glife care definesc cum arat propriu-zis literele, cifrele sau oricare
alt caracter definit de font. O glif este cea mai mic unitate n tipografie, la nivel de caracter: diacritice, accente, sedile, etc. [39] Un grafem este o reprezentare vizual a unui
sunet sau a unui fonem: litere, cifre, semne de punctuaie, etc. Unele fonturi definesc caractere care-i schimb forma n funcie de context (ligaturi), adesea prin contopirea a
dou sau trei litere, pentru a augmenta lizibilitatea textelor. [40] n domeniul tipografiei
a fost definit o anatomie comprehensiv a literelor i a caracterelor pe care nu o vom
aduce n discuie pentru a nu divaga de la subiect. n figura urmtoare se reliefeaz elementele de baz din construcia literelor i liniile principale. [41]

Aspecte elementare din anatomia literelor

Adobe Garamond Pro (fa tipografic romanic-umanist cu ampatamente)

Fig. 42

35

Principii de design
Feele tipografice sunt clasificate
dup modul n care arat (vizual) i artistic. ncepnd din secolul al XII-lea
pn n al XVIII-lea, cnd tipografia era
la nceputuri, se foloseau fee tipografice gotice (de exemplu Fraktur, Cursiva,
Textualis, etc). ns, de atunci au aprut
Fig. 43
Tipuri de fee tipografice
mai multe tipuri: celtice, romanice i
monospace. n cazul feelor tipografice romanice i gotice caracterele variaz n lime.
Acestea sunt fee tipografice proporionale: Arial, Times New Roman, Calibri, etc. La
feele tipografice monospaced limea caracterelor este fix i egal ntre ele: Courier
New, Consolas, Lucida Console, etc. Feele tipografice monospaced se folosesc cel mai
mult n domeniul informatic, pentru programatori. [38]
La ora actual se folosesc cel mai
mult fee tipografice romanice pentru interfee de site-uri, documente oficiale, reviste, cri, etc. Acestea se pot clasifica
n cteva subcategorii principale: cu ampatamente (serifs), fr ampatamente (lineale, sans-serifs), script i ornamentale.
Cele din categoria script imit scrisul de
mn, iar feele tipografice ornamentale
nu pot fi folosite dect n situaii speciale, n contexte ni pentru a decora textul.

Fig. 45

Fee tipografice romanice cu

ampatamente i fr ampatamente

Fig. 44

Tipuri de fee tipografice romanice

n tipografie, ampatamentele sunt extensiile vizuale mici de la capetele literelor, a caracterelor. Feele
tipografice romanice cu ampatamente pot fi clasificate
dup felul ampatamentelor: stil vechi - umanist, tranziional - baroc, modern i egiptean. n printuri se folosesc preponderent fee tipografice cu ampatamente, deoarece sunt considerate mai lizibile pentru suporturi cu
DPI2 mare (reviste, cri, ziare, etc). Cele mai lizibile
sunt feele tipografice romanic-umaniste i romanic-baroc. [42]

Feele tipografice romanic-lineale (sau altfel numite groteti) sunt fr ampatamente la terminaiile formelor. Acestea sunt clasificate astfel: grotesc, neo-grotesc, geometric i umanist. Cele romanic-lineal geometrice sunt considerate ca fiind moderne i
atrgtoare pentru designul de interfee, putnd fi folosite pentru titluri sau alte elemente
din design. Deoarece DPI-ul este redus la ecrane, se recomand folosirea de fee tipografice romanic-lineale pentru texte scrise cu dimensiuni mici n design-uri de site-uri,
deoarece neavnd ampatamente distingerea literelor este mai facil, astfel textele sunt

DPI = Dots Per Inch; o unitate de msur n industria tipografic care definete cte puncte sunt
imprimate pe un inch (2,54cm).
36

Principii de design
mai uor de citit. Dintre acestea, se consider c feele tipografice romanic-lineal umaniste au cel mai nalt grad de lizibilitate i sunt recomandate pentru articole ntinse. [43]
Alternarea tipurilor de fee tipografice n design-uri de reviste sau interfee sporete considerabil atracia fa de coninut, deoarece ochiul uman rspunde pozitiv acestui tip de stimulare vizual prin variaie. n acest sens, pentru titluri cu dimensiuni mari
se recomand utilizarea de fee tipografice romanice cu ampatamente, iar pentru coninut, bare de meniuri, subsol i antet pot fi folosite fee tipografice romanic-lineale.

1.3.9 Fonturi
O fa tipografic poate fi format
din fonturi multiple pentru a da posibilitatea designerilor de a stila textele: greutate
variabil (aldin), italic, oblic i condensat.
Un font condensat are caracterele reduse n
lime. Se recomand evitarea confuziei
ntre stilul oblic i italic, deoarece un font
oblic are caracterele nclinate, de obicei
Fig. 46
spre dreapta, iar un font italic reprezint o Exemple comparative pentru italic, oblic i diferite
nivele de greutate / aldin
form stilizat a scrisului de mn caligrafic. Greutatea fonturilor definete ct de grase sunt literele: slab, semi-gras, gras, etc.
[44] n figurile alturate am folosit o fa tipografic romanic-lineal umanist pentru a
ilustra diferitele stiluri: Myriad Pro.
De obicei, n coninut se utilizeaz
un stil aldin, cu greutate mai mare, mai
gras, pentru a emfaza aspecte cheie din
mesajul scris, iar italic sau oblic pentru
citate. Pentru a scrie expresii matematice
sau formule chimice se utilizeaz caractere expozant sau indice sau direct n
MathML [45]. n design-urile moderne
de site-uri de prezentare se folosesc fonturi condensate pentru titluri. [46]

Fig. 47

Comparaii ntre diferite nivele de condensare i

exemplificarea utilizrii de expozani i indici.

1.3.10 Lorem ipsum

Dup cum s-a putut deja observa pn acum, pentru ilustrarea diferitelor aspecte
ce in de tipografie s-a folosit un text n latin care ncepe cu Lorem ipsum dolor sit
amet. Lorem ipsum este un text lipsit de sens utilizat de tipografi i designeri de layout-uri n reviste, ziare sau interfee de site-uri pentru a exemplifica modul n care arat
corpusurile de text, n absena celor definitive. Dac se folosesc soluii automatizate din
unele aplicaii de design sau de birotic, textul este generat astfel nct s par la prima
vedere un text obinuit. Textul Lorem ipsum se bazeaz pe seciunile 1.10.32-33 din lucrarea "De finibus bonorum et malorum" (Despre menirea binelui i a rului) de Cicero,
datat n anul 45 .Hr. Lorem ipsum a nceput s fie folosit de ctre tipografi cu
aproximaie din anul 1500. Mai jos este un paragraf mostr pentru acest tip de text: [47]

37

Principii de design
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.
Exemplu de text Lorem Ipsum

Fig. 48

Orice site, orict de bine ar fi realizat la nivel vizual (design, layout, culori i din
punct de vedere tipografic), poate lsa de dorit dac nu are coninut adecvat, coerent i
bine redactat. n acest sens, am decis c este util o prezentare a unor principii de redactare a coninutului care vin s sprijine un design bine realizat la toate nivelele, inclusiv
tipografic.

1.3.11 Tehnoredactare pentru web

Coninutul n site trebuie s fie la obiect, adic s prezinte informaiile relevante
n mod succint i pe nelesul tuturor. Articolele trebuie s fie structurate logic i scrise
fr erori gramaticale i de ortografie. Utilizarea adecvat a semnelor de punctuaie i a
caracterelor specifice fiecrei limbi, a diacriticilor i a accentelor, este o dovad de o
deosebit atenie acordat coninutului. n cazul unui site de prezentare a unei instituii,
persoane sau a unui produs, se recomand ca ideile i conceptele expuse pe site s nu fie
contradictorii cu subiectul dat. Exprimri infantilizante sau pompoase n scris sunt adesea considerate inadecvate i se recomand evitarea acestora.
La nivel de stilare a coninutului, trebuie luat n vedere designul site-ului i nu trebuie s se divagheze vizual de la linia artistic impus de designer. Trebuie evitat cu
orice pre stilarea abuziv a textelor n site. Mai precis, nu este mai profesional sau mai
bine dac se folosesc culori, fonturi diferite sau mrimi alese arbitrar pentru diferite cuvinte, linii, fraze sau chiar paragrafe, cu scopul de a emfaza anumite idei din articol.
Toate paragrafele i articolele trebuie s i menin aceeai stilare, pentru a avea un design consecvent. Adesea astfel de erori sunt comise de nceptori n tehnoredactarea
pentru site-uri web. Utilizarea majusculelor din senin, fie pentru propoziii sau fraze,
fie pentru titluri este nerecomandat, deoarece se las impresia c prin intermediul
acelui coninut cineva strig la cititor. Alte erori de stilare obinuite: sublinierea, centrarea textului, utilizarea excesiv a semnelor de exclamare sau a culorilor iptoare, etc.
Astfel de erori sunt considerate puerile de cunosctori, iar n unele cazuri, n funcie de
tipul de site, pot exprima disperarea celor ce au scris coninutul, ncercnd s fie persuasivi ntr-un sens sau altul. Toate aceste abuzuri de redactare i stilare sunt erori inadmisibile. Dac acestea apar ntr-un design profesional de interfa, se creeaz un contrast foarte mare care reliefeaz inadvertena dintre design i coninutul propriu-zis.

38

Principii de design

1.4 Implementarea tehnic

La nivel digital, imaginile sunt fcute fie n mod bitmap (raster, editare la nivel de
pixeli), fie n mod parametric i vectorial. n editarea bitmap se manipuleaz n mod
direct pixelii. Acest mod de lucru este folosit adesea n desenare digital. n editarea
vectorial i parametric, fiecare element este dinamic i manipulabil n mod succesiv.
Se folosesc obiecte de diferite tipuri, cu proprieti i caracteristici variate.

1.4.1 Editarea parametric a interfeelor

n design de interfee sau n DTP3 se folosete n mod uzual editarea vectorial. n
acest mod de editare liniile sunt spline-uri.
Un spline este o funcie polinomial definit
pe poriuni, intervale. Utilizarea spline-urilor
n design este realmente facil, deoarece pot
fi definite linii curbe doar prin cteva puncte
de control, care au ca parametrii tensiunea i
Fig. 49
modul de flexiune a curbei. Pentru orice tip de
Comparaie ntre tipuri de interpolare:
linie, chiar frnt sau ascuit, acest mod de
bzier, cubic i liniar
editare permite modificri ulterioare mult mai facil i mai frecvente. Pentru spline-uri se
folosesc diferite funcii de interpolare a punctelor de control definite de designer. Imaginea alturat ilustreaz cteva tipuri de interpolri. [48]
n aplicaii precum Adobe Photoshop, interfeele sunt realizate combinnd editare bitmap
cu editare parametric i vectorial. Obiectele,
adic elementele vizuale n aplicaie, pot fi bitmap sau vectoriale. Formele pot fi definite n
ambele moduri. Cnd un designer dorete s se
asigure c unele elemente i vor pstra calitatea
vizual i nu vor deveni pixelizate, nceoate, n
urma aplicrii repetate de transformri (redimensionare, rotire), folosete forme vectoriale
Fig. 50
obinute din spline-uri. Se poate aplica o gam
Ordinea straturilor reflect
variat de efecte dinamice (parametrice) i nonadncimea elementelor
dinamice (aplicate n mod bitmap) asupra obiectelor. Dintre efectele dinamice amintim:
umbr, contur, transparen, bizotare, estampare, halo, etc. Modul de lucru ntr-o astfel
de aplicaie software este bazat pe conceptul de straturi. Fiecare obiect este un strat, iar
ordinea lor n list corespunde cu adncimea lor (z-index, imaginea alturat ilustreaz
acest mod de lucru), avnd i posibilitatea de a le grupa. Designerul are la dispoziia sa
o varietate de unelte pentru a crea diferite tipuri de obiecte: forme i linii de tip bitmap
sau vectorial, contururi, texte, etc. i unelte de manipulare: redimensionare, rotire, repoziionare, selecie, etc.

DTP Desktop Publishing; O metod tehnologic utilizat n publicarea de reviste, ziare, etc.
39

Principii de design
n principal, un designer creeaz o imagine static a site-ului, aa cum dorete s
arate. Aceast imagine static include, de obicei, mai multe amnunte despre site: design (layout, aezarea elementelor, aliniere, proporii), culori, tipografie (fonturi, texte i
coninut Lorem ipsum pentru a ilustra mai bine cum arat site-ul). ntr-un design bine
fcut sunt prevzute diferite funcionaliti, modul de interaciune i instane diferite ale
site-ului (de ex. anumite pagini). La final, cnd interfaa este acceptat de client, se trece
la implementarea tehnic a acesteia.
Implementarea tehnic a unui design de interfa const, n prima faz, n tranarea imaginii n buci, n fiiere de tip imagine care conin diferite elemente din design: butoane, antet, subsol, etc. Toate obiectele parametrice, vectoriale i efectele dinamice sunt transformate n imagini bitmap, pixelizate, i sunt salvate n formate specifice
pe web: JPEG sau PNG.
JPEG (Joint Photographic Experts Group) este un format care comprim imaginea folosind algoritmi care degradeaz calitatea vizual a imaginilor alternd pixelii.
PNG (Portable Network Graphics) este un format care nu utilizeaz acest tip de algoritmi. Compresia n formatul PNG nu este la fel de eficient, ns se pstreaz imaginile
integre, nealterate. Mai mult, formatul PNG are suport pentru RGBA, transparene.
Cnd o interfa este tranat, adesea elementele vizuale au fie umbre, fie sunt forme organice i este necesar utilizarea formatului PNG pentru a menine transparena. n mod
obinuit, imaginile de tip poz sunt n format JPEG pe web, deoarece necesit o lime
de band mai redus. Pentru elementele din designul interfeei, formatul PNG este de
preferat. [49]

1.4.2 HTML
ntregul proces de tranare a interfeei trebuie s fie efectuat lundu-se n calcul
modul n care va fi implementat designul n HTML i CSS. Programatorul de HTML i
CSS decide ce structur va avea HTML-ul, iar n funcie de asta traneaz interfaa.
Structura HTML este influenat n mod direct de layout-ul designului i de competenele programatorului. Implementarea tehnic poate fi i perceput ca o transformare a
unei imagini statice ntr-o aplicaie interactiv.
HTML (HyperText Markup Language) este un limbaj standard de marcaj pentru
pagini web i st la baza oricrui site. n HTML programatorul definete o structur
ierarhic de tag-uri (etichete) n perechi de forma: <body> </body>, <div>
</div>,<h1> </h1>, <p> </p>, etc. Se poate observa c fiecare tag este deschis sub
forma <exemplu> i nchis sub forma </exemplu>. Fiecare tag poate avea atribute care
se definesc sub forma: <tag atribut="valoare">coninut</tag>. Teoretic se pot folosi
orice tag-uri, ns n standardele web HTML 1, 2, 3 i 5 (ultima versiune) sunt definite
clar ce tag-uri sunt permise, ce atribute pot avea i cum trebuie afiate i interpretate
semantic de navigatoarele web. Exist o multitudine de tag-uri i atribute care ajut la
definirea structurii documentelor. HTML permite rspndirea de coninut pe web cu
structur semantic, deoarece fiecare tag are o valoare semantic. Actualmente se tinde
spre un web semantic. ntr-o pagin HTML pot fi integrate obiecte externe, imagini,
JavaScript-uri pentru interactivitate, CSS-uri pentru stilare i pot fi fcute formulare.
[50]
40

Principii de design
Exemplul urmtor ilustreaz structura unui HTML i cum se poate defini o structur semantic pentru articole.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

<!doctype html>
<html>
<head>
<title>HTML este un limbaj simplu</title>
<link rel="stylesheet" href="/stilare.css" type="text/css"
media="all"/>
</head>
<body>
<h1>Titlul capitolului</h1>
<p>Exemplu de pagin web.</p>
<p>Connut</p>
<h2 lang=en>This is a subchapter</h2>
<p>Acest capitol este scris <em>n englez</em>.</p>
<ul>
<li>O list ordonat sau neordonat</li>
<li>Poate fi definit foarte uor.</li>
</ul>
</body>
</html>

Prima linie a codului este iniializarea modului de afiare specific fiecrei versiuni
de HTML - doctype. Tag-ul <html> este punctul de pornire a structurii paginii. n tag-ul
<head> pot fi definite meta-date care descriu pagina sau site-ul: autorul, titlul paginii,
referine la fiiere sau elemente externe (CSS-uri, JS-uri), etc. Atributele rel i href
determin ce tip de referin i ce fiier extern este integrat n pagin. n acest caz, a fost
inclus un fiier CSS pentru stilarea paginii. n <body> apare coninutul propriu-zis al
paginii pe care navigatorul web o afieaz pe ecran: <h1> definete un titlu de nivelul
nti, iar <h2> este de nivelul doi. Pentru <h2> s-a folosit atributul lang pentru a
preciza n ce limb este scris. Tag-ul <p> reprezint un paragraf, iar <em> este pentru a
emfaza ce s-a spus. n final, tag-urile <ol> sau <ul> sunt folosite pentru a defini liste
ordonate, respectiv neordonate. Pentru a delimita elementele listei se folosete tag-ul
<li> n ambele cazuri.
Exemplul de HTML de mai sus este foarte uor de neles i de prezentat. La nivel
de site, este necesar ca programatorul s fac o distincie foarte clar ntre coninut i
prezentare. n HTML nu se definete nimic despre cum arat pagina web pe ecran. Navigatoarele au setri implicite, definite n standard, cum trebuie afiate tag-urile. ns,
pentru a realiza un design, pentru a stila coninutul se folosete CSS (Cascading Style
Sheets). CSS este un limbaj folosit pentru stilare i formatare a elementelor semantice
dintr-un limbaj de marcaj, precum (X)HTML sau orice tip de fiier XML. Separarea
coninutului de prezentare, permite programatorilor web s foloseasc acelai fiier CSS
pe toate paginile dintr-un site i s ofere moduri diferite de prezentare a site-ului, a coninutului n funcie de rezoluia ecranului sau dispozitiv. Astfel, prin utilizarea corect a
CSS-ului se asigur o accesibilitate mai mare a site-ului, deoarece pot fi fcute designuri specifice pentru platforme diferite. Mai mult dect att, orice utilizator pe Internet
poate dezactiva stilurile CSS n funcie de necesitile sale. Programe de citit n Braille
sau de sintetizare vocal pot fi folosite mult mai uor pe astfel de site-uri. Ambele stan41

Principii de design
darde, CSS i HTML, au fost create i sunt meninute de W3C (World Wide Web Consortium). [51]

1.4.3 Selectori CSS

Un CSS este foarte uor de scris i de citit de cunosctorii de limba englez.
Programatorul definete blocuri de reguli de prezentare i stilare delimitate de acolade
{}. ntr-un bloc de reguli se definesc declaraii CSS delimitate cu semnul ; (punct i
virgul). Proprietile CSS sunt cuvinte n englez ce trebuie urmate de o valoare: proprietate: valoare;. O declaraie CSS este perechea format dintr-o proprietate i o valoare. Fiecare bloc de reguli ncepe cu un selector sau mai multe selectoare separate de
virgul: selector1, selector2, selector3 {proprietate: valoare;}. Exemple de proprieti
i valori: font-size: 10px; position: absolute; margin: 15px, etc. [52]
n CSS fiecare element din limbajul de
marcaj este considerat o cutie, un box model.
Orice tag din HTML este afiat n modelul de
cutie. Modelul de cutie n CSS este constituit din
margine, bordur, umplutur (padding) i coninutul propriu-zis. Aceste proprieti de stilare a cutiei
n CSS sunt pentru ajustarea spaiului ntre elementele din limbajul de marcaj. Marginea reprezint spaiul exterior fa de element i nu are culoare, este transparent. Bordura poate fi stilat n
mai multe moduri: linie continu, punctat, n cuFig. 51
CSS Box Model
lori, etc. Umplutura este un spaiu ntre bordur i
coninutul propriu-zis care preia culoarea sau fundalul stabilit pentru element, nu poate
avea o culoare specific setat. Cnd mai multe elemente se afl unul lng altul, marginile lor se contopesc. n implementarea unei interfee aceste proprieti sunt indispensabile pentru layout i nu se poate obine o interfa avansat fr manipularea acestora.
[53]
Selectoarele sunt expresii care determin asupra cror elemente (atribute sau taguri) din limbajul de marcaj (de ex. HTML) sunt aplicate proprietile de stilare CSS.
Selectoarele sunt clasificate n funcie de tipul de elemente: universal, element, clas, id
i atribut.
Un selector de elemente aplic regulile de stilare pe toate elementele de un anumit
fel ce se gsesc n document, de exemplu tag-urile <p> sau <h3> succedate de blocul
de reguli {proprieti: valori;}.
Selectorul de tip atribute aplic proprietile CSS n funcie de atributele elementelor. Acesta este de forma [atribut=valoare] {proprieti: valori;}, opional poate fi
precedat de un alt element, de orice tip, pentru a preciza mai specific unde se gsete
atributul i nu este imperativ s se specifice valoarea: selector [atribut] {proprieti:
valori;}. [54]
Pentru implementarea tehnic a unei interfee ntotdeauna este necesar stilarea
unor anumite tag-uri sau a unor seturi de tag-uri cu proprieti CSS comune. Fiecare tag
HTML poate avea atributul id=nume-de-identificare sau class=o-categorie-de42

Principii de design
elemente. Se pot marca mai multe tag-uri de acelai tip sau tipuri diferite folosindu-se
atributul class pentru a permite ulterior stilarea acestora n CSS utiliznd selectoare de
tip clas, avnd forma .nume-clas; numele clasei este precedat de un punct. Atributul
id trebuie s aib o valoare unic pentru fiecare tag marcat n acest mod. Selectorul
pentru id-uri este precedat de semnul # (diez). Cele dou tipuri de selectoare sunt foarte
des utilizate n implementarea de interfee. n general, pentru a realiza o interfa de site
se folosete tag-ul <div> foarte des, cu diferite id-uri, pentru a facilita procesul de stilare i de design. Acest tag nu are nici o valoare semantic, ns este utilizat pentru a
structura arborele logic al documentului astfel nct s permit implementarea tehnic a
designului.
Selectorul universal precedat de semnul * (asterisk). Acesta este implicit pentru
selectoarele de tipul: *.nume-clas, *[atribut], etc. ns, dac semnul * este utilizat
pentru nlnuirea de elemente ntr-un selector, atunci elementul secundar specificat
trebuie s fie absolut un descendent oarecare. Asta nseamn c dac exist elemente
secundare n relaie de descenden direct fa de primul element specificat din selector, acestea sunt excluse i nu vor fi stilate.
Pentru a specifica relaia la nivel ierarhic ntre elementele unui selector, exist mai
multe moduri de nlnuire a acestora: descenden oarecare, descenden direct, adiacen i general. Relaia ntre elementele unui selector este stabilit prin caracterul folosit ntre acestea. [55]
Relaiile de tip descenden oarecare i descenden direct pot fi explicate utiliznd dou selectoare de elemente ca exemplu pentru aceste moduri de nlnuire:
p span, li > em {proprieti: valori;}. n acest exemplu, selectoarele vor aplica stilarea
pe tag-urile <span> i <em> aflate ierarhic n tag-ul <p> i respectiv <li>. Diferena
ntre cei doi selectori este important: n primul caz nu conteaz adncimea ierarhic a
tag-ului <span>, ns pentru al doilea selector, tag-ul <em> trebuie s fie descendent
direct ierarhic n <li> pentru a fi gsit; dac se afl mai adnc, nu va mai avea proprietile de stilare aplicate. Se poate nelege cu uurin c dac se folosete un spaiu ntre
elemente, nu conteaz adncimea elementului secundar la nivel ierarhic, dar dac se
utilizeaz semnul > ntre ele, elementul secundar trebuie s fie descendent direct.
Elementele n selector pot fi nlnuite i cu semnul + sau ~ (tilda). Pentru a selecta un element adiacent celuilalt, la nivel ierarhic, se folosete + ntre acestea. Dac se
dorete stilarea a unor elemente ce succed elementul specificat, se utilizeaz semnul ~
(tilda).
n CSS se pot folosi mai multe tipuri de elemente ntr-un singur selector i pot fi
nlnuite n diferite moduri. De exemplu: #antet ol > li .subliniate [lang=fr]
{proprieti: valori;}. n acest exemplu, proprietile CSS sunt aplicate doar pe elementele din HTML ce au atributele class=subliniate i lang=fr. ns, construcia selectorului impune mai multe criterii pentru a fi stilate. Prima condiie: elementele trebuie s
se afle ntr-un element cu id=antet. Mai mult, indiferent ct de adnc n ierarhie, fa
de #antet, trebuie s se gseasc o list ordonat, <ol>, n care elementul <li> este
obligatoriu descendent direct. Asta nseamn c dac lista ordonat este de mai multe
nivele i se gsesc mai adnc n ierarhie alte elemente din clasa subliniate i au
atributul lang=fr, nu vor fi stilate.
43

Principii de design

1.4.4 At-rules n CSS

At-rules n CSS sunt instruciuni i directive din antetul unui fiier CSS care
permit programatorului s importe fonturi (@font-face) sau alte CSS-uri (@import), s
specifice ce CSS trebuie utilizat n funcie de dispozitivul de afiare (@media), etc.
Un designer de interfa de site poate folosi orice font sau fa tipografic dorete.
n domeniul informatic au fost dezvoltate formate de fiiere specifice pentru fonturi sau
fee tipografice. Feele tipografice sunt instalate n sistemul de operare, iar navigatorul
le folosete pentru a afia textele de pe site-urile web, n funcie de fonturile utilizate n
design. ns, designerul poate alege s includ n site fonturi care nu au o rspndire larg. De obicei, la nivel de sistem de operare, pe Windows, fonturile sunt n format .TTF
(TrueType Font). Au fost dezvoltate formate deschise de fonturi i fee tipografice care
pot fi incluse de designeri pe web, iar unii tipografi pun la dispoziie fonturi cu licene
ce permit redistribuirea lor. OpenType Font Format (.OTF) este predecesorul formatului
.TTF i include suportul pentru multe caracteristici noi specifice tipografiei. [56] Funcionalitatea standardizat n CSS 3 (@font-face rule) ce permite includerea de fonturi n
site-uri este implementat de toate navigatoarele moderne.

1.4.5 Specificitatea regulilor CSS

O alt particularitate a CSS este specificitatea regulilor de stilare. De multe ori,
cnd o interfa de site este complex, sunt situaii n care unele reguli de stilare CSS nu
se aplic pe elementele din HTML, chiar dac, aparent ar trebui. n standardul CSS a
fost definit o ierarhie a specificitii pentru tipurile de selectoare, elemente i modurile
de nlnuire. n general, dac pe un element din HTML se aplic dou selectoare, proprietile CSS din selectorul cu specificitate mai mare prevaleaz. n caz c ambele
selectoare au acelai nivel de specificitate, atunci prevaleaz cel ce apare ulterior n fiierul CSS. Selectoarele pentru elemente cu id, au o specificitate mai mare dect selectoarele pentru atribute sau clase. Selectorul universal are specificitatea zero, minim.
[57]
n CSS unele proprieti sunt motenite de elementele descendente ierarhic. A
priori, nu toate elementele motenesc de la prini orice proprietate CSS. n standard
sunt definite regulile de motenire. De exemplu: #antet {color: red; background:
wheat}. Proprietatea color va fi motenit de toate elementele de marcaj descendente,
ns background nu. n unele cazuri, se poate specifica anume dac se dorete motenirea unei anumite proprieti. n acest caz, dac dorim un anumit tag descendent s
moteneasc valoarea pentru background, se utilizeaz background: inherit.
n standardul W3C pentru CSS sunt definite reguli pentru calcularea specificitii
unui selector, relativ simplu. Specificitatea este un numr format prin alturarea a trei
variabile: a, b i c. Se numr selectoarele de tip ID - variabila a. Pentru b, trebuie numrate selectoarele de clase, de pseudo-clase i atribute. Iar pentru variabila c, numrul
total de selectoare de elemente i pseudo-elemente. [58]

44

Principii de design

1.4.6 Limitri n implementarea interfeelor

CSS este un limbaj mai mult pentru stilare, nu att de mult pentru design de layout-uri. De aceea devine mult mai complicat un design de interfa fluid. Poziionarea
elementelor pe vertical este considerabil mai grea, dect pe orizontal. Lipsa suportului
pentru expresii matematice la nivelul declaraiilor CSS este adesea evident, de exemplu: #ptrat {width: 50% - 10px}. Expresiile matematice ar permite realizarea de coloane ntr-un mod mai facil i layout-uri mai dinamice. Grupul de lucru de la W3C lucreaz
deja la implementarea suportului pentru expresii matematice.
Dup cum s-a putut observa, n CSS, la ora actual, nu exist nici un mod de a
avea selectoare pentru elemente aflate n relaie de ascenden. Mai precis, nu exist
posibilitatea de a aplica proprieti CSS pe printele unui element, la nivel ierarhic, n
funcie de anumite criterii. [52]
De altfel, un designer de interfa obinuit cu aplicaii ca Adobe Photoshop, este
adeseori constrns la un numr redus de efecte vizuale. n CSS nu exist posibilitatea de
a aplica n mod dinamic diferite tipuri de efecte pentru nceoarea elementelor din
HTML, reflexii calculate n timp real, bizotare sau estampare. n Photoshop fiecare strat
/ obiect poate fi suprapus folosind diferite moduri de supraimpunere / fuziune. n CSS
nu pot fi folosite moduri de supraimpunere a elementelor vizuale. Aadar, un designer
trebuie s evite astfel de efecte n design, dac nu pot fi transformate n imagini de tip
bitmap. n SVG i Canvas, standarde web noi definite de W3C care ncep s fie
implementate tot mai bine de navigatoarele moderne. Acest fapt permite utilizarea unui
set mai larg de efecte care pot fi obinute cu Adobe Photoshop.

1.4.7 Proprieti CSS

Anumite proprieti din aplicaia de design folosit pentru realizarea interfeei pot
fi reproduse la nivel tehnic, n site, cu ajutorul CSS: umbre i halouri (box-shadow, textshadow), coluri rotunjite (box-radius), transparene (opacity sau culori RGBA),
degradeuri (linear-gradient), etc. Proprietile menionate sunt nou introduse n CSS 3
i sunt n curs de implementare n navigatoarele moderne. La nivel tipografic, CSS ofer
proprietile necesare de a obine aceeai stilare a textelor ca n aplicaiile de design, cu
un nivel de acuratee remarcabil: line-height, letter-spacing, text-indent, font-size, fontfamily, etc.
n CSS culorile pot fi definite n RGB i HEX sub forma: #ff00aa (fiecare pereche
de caractere reprezint r, g, respectiv b). n CSS 3 se pot utiliza formatele HSL, RGBA
i HSLA (A pentru alpha transparen) pentru culori.
Proprietatea display din CSS ofer controlul asupra modului n care fiecare element este afiat n pagin. Display are urmtoarele valori posibile care ajut n acest
sens: auto (implicit), none, hidden, inline, block i multe alte mai rar utilizate. Toatele
elementele sunt afiate implicit, dar dac se dorete ascunderea unuia se utilizeaz
display: none sau display: hidden. n primul caz, afiarea layout-ul nu va fi afectat de
prezena elementului n arborele logic al documentului, ns n al doilea caz, elementul
va continua s afecteze modul de afiare a layout-ului i va fi luat n calcul pentru
formatarea acestuia, ns nu va fi afiat pe ecran. Unele elemente din limbajul de marcaj
sunt afiate ca un bloc care foreaz un rnd nou naintea i dup element i ocup
45

Principii de design
ntreaga lime a elementului printe: <p>, <div>, <ol>, etc. Alte elemente sunt afiate
inline, n linie. Acestea nu foreaz rnd nou i nici nu ocup toat limea: <span>,
<em>, <a>, etc. CSS permite schimbarea modului de afiare, astfel putem avea <p>
sau <div> afiat n linie, ori <span>, <em> afiate ca blocuri. Un programator, utiliznd aceste moduri de afiare, poate obine alinierea fie pe vertical, fie pe orizontal a
unor elemente din interfa, de exemplu: o bar de meniuri. [59]
n CSS elementele vizuale pot fi reaezate pe orizontal folosind proprietatea float
cu valorile: left, right sau center. Elementul cu aceast proprietate aplicat este mutat
din poziia lui iniial pe orizontal n stnga, centru sau n dreapta coninutului, iar
modul de afiare este de tip bloc, nu n linie. Limea coninutului este dat de primul
element printe cu modul de afiare bloc (display: block). Toatele elemente de marcaj
afiate n linie (cu display: inline) aflate la acelai nivel n structura documentului sau
mai adnci fa de elementul pe care se aplic declaraia CSS float, se muleaz dup
acesta, excepie fcnd elemente care la nivel de cod se afl naintea acestuia. Un
element cu float poate fi redimensionat utiliznd proprietile width i height, ce permit
valori procentuale sau n pixeli. Proprietatea float este utilizat pentru poziionarea pozelor n pagin, astfel nct textele s se muleze dup poze. n cazul layout-urilor, se folosete pentru poziionarea ntr-o extrem sau alta a unor elemente, cum ar fi sigla siteului n stnga, iar bara de meniuri n dreapta, ambele la acelai nivel pe vertical. [60]
ntr-o interfa avansat apare adeseori nevoia de a repoziiona elementele vizuale
n funcie de alte elemente i de a controla modul n care acestea afecteaz layout-ul.
Proprietatea position din CSS ofer programatorului mai multe moduri de a repoziiona
elementele: static, fixed, relative, absolute. A priori, toate elementele din limbajul de
marcaj sunt afiate folosind position: static.
Pentru a deplasa un element n spaiul disponibil al ferestrei navigatorului, se
folosete position: fixed. n acest mod, chiar dac este derulat pagina, elementul rmne poziionat fix n cadrul ferestrei, deoarece fereastra propriu-zis este blocul care-l
conine. Astfel, elementul nu mai influeneaz restul layout-ului, nu mai ocup spaiu.
Repoziionarea se face folosind proprietile CSS cu valori n pixeli: top, right, bottom,
left.
Cnd se utilizeaz position: relative, elementul are ca pivot poziia sa iniial n
layout, adic repoziionarea este relativ. Spaiul ocupat iniial n layout rmne, astfel,
doar unde este afiat poate fi definit. n acest caz, proprietile CSS top, right, bottom,
left pot avea i valori negative n pixeli.
Un element din limbajul de marcaj poate fi ancorat ntr-o parte sau alta fa de un
element printe n ierarhia arborelui logic al documentului HTML utiliznd declaraia
CSS position: absolute. n acest caz, position: absolute folosete ca pivot pentru elementul stilat, primul element printe care are declaraia position: relative aplicat.
Elementul poziionat cu declaraia position: absolute este eliminat din structura vizual
a layout-ului, adic nu ocup nici un spaiu i toate celelalte elemente nu sunt influenate de acesta. Modul de afiare al acestui element este display: block. [61]

46

Principii de design

1.4.8 Tipuri de interfee

Un design de interfa poate fi pe stnga, dreapta sau centrat. Navigarea poate fi
pe vertical (cel mai des) sau pe orizontal (foarte rar). O interfa fluid are o lime
variabil, procentual, i este mult mai dificil de implementat dect una cu lime fix.
Designerul din procesul de creaie, ntr-o aplicaie precum Photoshop, trebuie s aib n
considerare cum dorete s fie interfaa implementat n final. Dac dorete s aib o
interfa fluid, atunci elementele vizuale i structura vizual trebuie gndite astfel nct
s permit implementarea propriu-zis. n principal, trebuie avut n vedere cum vor fi
transformate n bitmap i tranate imaginile, astfel nct s arate la fel. Un alt aspect
care trebuie prevzut este modul n care se lete interfaa, ce elemente trebuie s se
redimensioneze, ce imagini trebuie fie repetitive sau s permit lirea interfeei i cum
se poate face s-i menin proporiile cnd se lete mult. Aceste amnunte trebuie
luate n calcul pentru a avea un design care se adapteaz la diferitele dimensiuni posibile
a ferestrei navigatorului web.
HTML i CSS sunt tehnologii web standard, client side, care ruleaz pe calculatorul utilizatorului de Internet. ns, funcionaliti mai mult sau mai puin avansate
sunt implementate folosind tehnologii server side, care ruleaz pe calculatorul de la distana de tip server: PHP, ASP, mySQL, etc. Aceste tehnologii permit implementarea
celor mai cunoscute funcionaliti pe site-uri: schimbarea limbii, cutare, hart site,
conturi, etc. La nivel de interfaa se folosete JavaScript pentru a implementa funcionaliti ce in de modul de interaciune cu site-ul: meniuri n cascad, sugestii pentru termenii de cutare, ncrcare a unor seciuni din site n mod dinamic, etc. O alt tehnologie frecvent utilizat este Adobe Flash pentru interfee interactive i n special pentru
integrarea de video-uri pe web.

1.5 Marketing
Interfaa unui site sau a unei aplicaii web trebuie s fie un mijloc prin care utilizatorul sau vizitatorul site-ului este sprijinit n cutarea de informaii i totodat s faciliteze orice tip de interaciune cu site-ul dat. Mai precis, o interfa de site nu trebuie s se
afle n calea vizitatorului sau s distrag atenia printr-un design prea exuberant i ncrcat. Trebuie s fie redui la minim numrul de pai necesari pentru a ajunge la informaii. Utilizatorul trebuie s poat s efectueze operaiunile pentru care se afl pe site
ct mai eficient. Interfaa trebuie centrat pe utilizator, conceput anume pentru utilizator. Structura site-ului i funcionalitile trebuie gndite astfel nct utilizatorul s nu
fie confuz cnd ajunge pe site, din cauza numrul prea bogat de pagini sau de funcionaliti mai mult sau mai puin utile. n acest sens, coninutul trebuie s fie ct se poate la
obiect, succint i clar. Structura site-ului este de preferat s fie ct mai simpl, iar funcionalitile oferite trebuie s aib un nivel de relevan ct se poate de nalt. [62]
Cnd se ncepe realizarea unui site trebuie studiat competiia, consumatorii - potenialii utilizatori ai site-ului, nevoile i competenele acestora. Trebuie stabilite ce
funcionaliti sunt necesare (cutare, blog, fluxuri de Atom sau RSS, etc), ce funcionaliti ar dori potenialii utilizatori ai site-ului, ce tip de interfee i atrag, care sunt gusturile lor, modul n care acetia navigheaz pe web, obiceiurile lor n acest sens, etc. n
47

Principii de design
acest mod se pot stabili care sunt funcionalitile relevante, ce culori trebuie folosite
(mai stridente, mai pale), ce tip de design (mai minimalist, mai ncrcat, etc), layout-ul
i chiar structura site-ului. O interfa de site nu se rezum doar la decorarea acesteia, ci
trebuie ilustrat coninutul din fiecare pagin i per total, trebuie s fie unic, particular.
Un alt aspect ce trebuie luat n calcul este nivelul de utilizabilitate i de accesibilitate.
Trebuie ajustat interfaa site-ului nct s maximizeze aceste atribute. Cteva sugestii
n acest sens: culorile nu trebuie s fac dificil lectura textelor, fonturile alese i dimensiunile trebuie s asigure o lizibilitate crescut, iar implementarea tehnic s permit utilizarea de soft pentru Braille, sintetizare vocal, etc. Toate acestea sunt probleme foarte
des ntlnite pe web. n funcie de profilul site-ului trebuie s ofere funcionaliti n
plus de accesibilitate: definirea ordinii pentru apsarea tastei Tab, comenzi din tastatur,
control asupra dimensiunii textului sau stiluri CSS anume pentru deficiene de vedere.
Un alt fel de a face mai accesibil un site este de studia modul n care utilizatorii navigheaz pe Internet, de a studia cu ce sunt ei obinuii. n acest sens, s-a observat c funcionaliti precum cutare, breadcrumb, login, schimbarea limbii, trebuie s apar n partea superioar a site-ului pentru a facilita gsirea lor i navigarea pe site. Astfel, poziionarea elementelor n layout este un aspect foarte important, deoarece permite vizitatorilor site-ului s gseasc ce au nevoie mai uor. Un site bine realizat la nivel tehnic (separaie clar ntre coninutul HTML i prezentarea CSS) i accesibil este mult mai uor
de indexat de motoarele de cutare.
n timp, site-urile pe web au evoluat n direcii diferite, n funcie de profil. Astfel,
se pot observa norme informale pentru principalele categorii de site-uri: personale, de
prezentare produs, portaluri i instituionale sau academice, etc. Se poate nelege cu
uurin c un site de prezentare a unui produs sau un site oficial al unei instituii nu este
abordat din perspectiva unui site personal. Acest fenomen determin apariia unor ateptri i comportamente la nivelul celor ce navigheaz pe Internet, care n funcie de tipul
de site, la nivel de subcontient, acioneaz pe baza experienelor precedente, ajungndu-se la posibilitatea de a observa chiar modele mintale ce in de modul de interaciune
a utilizatorului cu site-urile. n cele ce urmeaz voi prezenta cteva caracteristici a acestor tipuri de site-uri. [63]
Un site personal este realizat dup gusturile persoanei respective. De obicei, la nivel de coninut, limbajul este informal i sunt prezentate lucruri ce in de activitile acelei persoane, n plan personal sau profesional. n funcie de vrsta i domeniul de activitate, site-ul va avea anumite caracteristici i un anumit design: de la ticsit, ntunecat sau
chiar repulsiv (alert, colorat n mod obositor) pn la interfee degajate, plcute sau profesionale. De obicei, nu exist un public int, eventual cercul de prieteni. Un site personal de designer, trebuie s pun n valoare lucrrile i abilitile sale tehnice. n acest
sens, este de preferat un site profesional sobru sau mai ndrzne la nivel tehnic i design. n principal, pentru site-uri personale se pot aborda idei ndrznee, de la cum arat
pn la cum se navigheaz, interacioneaz cu site-ul. Un site personal de programator
este de obicei mult mai sobru i minimalist. n mod obinuit, structura unor astfel de
site-uri este simpl i nu impune dificulti n procesul de navigare. Site-urile personale
care nu prezint o activitate specific, ci se limiteaz doar la aspecte absolut personale,
sunt mai colorate, mai puin bine realizat la toate nivelele i de obicei se bazeaz pe a-

48

Principii de design
bloane gata (template-uri) fcute, iar la nivel tehnic se utilizeaz CSS i HTML n principal.
Un site de prezentare de a unui produs (alimentar, electrocasnic, automobil sau
film, etc) este de obicei realizat pentru un grup mai restrns de consumatori. Avnd un
public int bine definit, acesta este studiat din perspectiva optimizrii campaniei publicitare. Sunt luate n considerare gusturile, obiceiurile i ceea ce ar putea fi mai persuasiv
pentru membrii publicului cruia site-ul se adreseaz. n spatele unu astfel de site se afl
de obicei o munc de cercetare elaborat asupra campaniei de vnzare i publicitate,
care dicteaz cum arat site-ul i ce funcionaliti sunt necesare pentru a pune n valoare produsul ct mai bine. Pentru a oferi o interactivitate sporit vizitatorilor pe site, se
utilizeaz Adobe Flash, ns acesta reduce drastic accesibilitatea site-urilor de acest fel.
Se folosesc fonturi mici, sunete i animaii care au menirea de a atrage clieni. De
obicei, astfel de site-uri sunt tematice i sunt foarte intense la nivel grafic, dar menin un
profesionalism deosebit prin execuia tehnic la nivel vizual. Un site de prezentare
avansat are un grad foarte redus de accesibilitate.
Site-urile portal sunt adesea foarte ncrcate vizual i la nivel de coninut, ticsite
cu articole mici, legturi externe sau spre alte pagini i bannere de tot felul: pop-ups, pe
coloane, verticale / orizontale, etc. Teoretic scopul acestora este de a ine la curent utilizatorii cu tiri dintr-o gam larg de domenii: de la tiin pn la art sau politic intern i extern. Layout-ul este structurat pe multiple coloane i chenare, iar la nivel de
design rareori se poate spune c este degajat sau c se transmite ceva. Structura acestor
site-uri este deseori foarte elaborat i stufoas. Un vizitator pe site-uri portal se poate
pierde relativ uor i poate deveni confuz datorit multitudinilor de pagini.
Site-urile oficiale care reprezint diferite instituii guvernamentale, academice sau
corporaii trebuie realizate n mod profesional la toate nivelele. La nivel de design, se ia
n vedere profilul instituiei i mesajul pe care aceasta dorete s-l ntipreasc n opinia
public, de obicei concepte cheie precum ncredere, consecven, inovaie, etc, i se studiaz publicul int pentru a se cunoate cum se poate transmite un astfel de mesaj, idee
sau concept. Se realizeaz un corporate brand, o imagine i o identitate vizual care trebuie s fie uor de recunosc de clieni: sigl, interfa de site, brouri, cataloage, campanii publicitare, spot-uri TV, etc. Toate trebuie realizate n aceeai linie de design, de
concept vizual. Se prefer design-uri degajate care transmit o stare de serenitate. La nivel de structur site-ul trebuie s fie simplist sau foarte bine organizat, nct s permit o
navigare ct se poate de facil. Coninutul trebuie scris folosind un limbaj formal, concis i obiectiv. Instituia sau corporaia trebuie prezentat pe nelesul vizitatorilor siteului. Oamenii navigheaz pe Internet n mod superficial, scaneaz rapid coninutul, nu
citesc n detaliu; din acest motiv coninutul este de obicei realizat s faciliteze scanarea
acestuia. Se folosesc liste neordonate, se pune emfaz pe cuvinte cheie, utiliznd text
aldin, niciodat subliniat deoarece se creeaz confuzia cu un text de tip legtur,
hyperlink. n multe cazuri, se investesc resurse n oamenii care elaboreaz coninutul pe
astfel de site-uri pentru a se adresa vizitatorilor ct mai bine i ntr-un mod n care reprezint instituia. La nivel tehnic, se folosete mai mult HTML i CSS. Deseori, astfel de
site-uri au un grad de accesibilitate semnificativ mai ridicat dect pe alte tipuri de siteuri. [64]

49