Documente Academic
Documente Profesional
Documente Cultură
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.
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 buc ele, n diferite fi iere, 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.
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
puncte diferite sunt conectate i au rol de capete.
La nivel vizual, linia are un rol artistic important. Ea are poten ialul 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 ascu ite, 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 sec iuni 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.
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 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 Forme
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 interfe e de site-uri sunt formele primitive
studiate n geometria euclidian: dreptunghiuri, elipse i triunghiuri.
Oamenii percep mai nti ntregul prin a distinge obiectele (spaiul pozitiv) de fond
(spaiu negativ), apoi sunt contientizate elementele constituente, prile din imagine, urmrind
urmtoarele principii:
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.
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 per ansamblu, distana dintre ele determin nc un
ptrat mare.
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 (spa iu negativ) care
creeaz impresia de decupare, dar acesta se confund cu fundalul.
Similaritate. Elementele vizuale sunt grupate dup form, culoare sau proporii.
1.1.3 Compoziie
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.
O alt tehnic mprumutat din pictur pentru a realiza design-uri de interfe e 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.
Se mai folosesc i efecte vizuale care au un aport substanial n obinerea iluzii de adncime:
degradeuri, reflexii i umbre.
1.1.4 Culori
Culorile pe care le percepem n jur sunt determinate de mai muli factori: n func ie 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.
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, situa ii 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.
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 desf urat
evoluia n domeniul teoriei culorilor care a introdus o gam larg de termeni cu diferen e
semantice minore ntre ei.
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.
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. RGB i
CMY(K) sunt modele de culori care au ca scop definirea modului n care se ob in 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.
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 s 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.
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.
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.
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.
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.
1.3 Layout
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.
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.
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 Photoshop
utilizate pentru realizarea de astfel de interfee.
Un alt aspect care trebuie luat n considerare n procesul de realizare a unei interfe e 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 s 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.
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.
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 men inut utiliznd
aceeai interfa (design, layout i culori) pentru toate paginile din site. ntr-o carte, consisten a
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.
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 pu in
dispui s citeasc articolele, deoarece ochiul uman obosete s menin aceea i linie pentru prea
mult timp. Astfel, soluia este de a parcurge coninutul i pe vertical prin mpr irea 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 men ionat 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 ob ine
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.
La nivel de text exist o multitudine de moduri de a stila i de a influen a 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.
1.3.4 Fonturi
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.