1

I Bazele design-ului pe web

Site-ul existent
Colectarea cerinelor
Cunoaterea scopului
Schiarea ideilor
Selectarea schielor

II Alegerea culorilor
Fundamentele culorilor
Contextul culorilor
Evocarea emoiilor prin culori
Scheme de culori
Paleta de culori Web-Safe
Construirea schemelor de culori
Alegerea schemei adecvate

III Fonturi i tipografie
Anatomia font-urilor
Tipuri de font-uri
Limitrile font-urilor
Selectarea fonturilor
Utilizarea unui Baseline Grid

IV Proiectarea logo-ului Foodcenter
Configurarea unui dosar de lucru
Logo-ul Foodcenter

In prima parte vom aborda procesul de proiectare web pentru programatorii care au puine
noiuni de design. Pe lng toate culorile i machetele atractive, site-urile web au nevoie de o
programare serioas pentru a fi corect proiectate.
Un design web implic mai mult dect crearea de pagini atractive. Concepte de baz
precum teoria culorilor, tipografie, layout-ul i gradul de utilizare sunt toate eseniale pentru un
bun design. Aceste lucruri conlucreaz, a.. site-ul s devin un succes pentru utilizatori. Putem
alege toate culorile n mod corect i s folosim gradient-uri omogene, dar dac nu utilizm un
font lizibil, site-ul nostru nu este bine proiectat. Putem realiza ceva minunat n Photoshop sau
GIMP, dar nu vom fi niciodat n msur s facem s arate mai bine ntr-un browser, dac nu
tim s lucrm cu HTML i CSS. Dac utilizm un markup defectuos, JavaScript nu va funciona
aa cum ne-am atepta s funcioneze. Dac nu optimizm coninutul, motoarele de cutare vor
ignora site-ul nostru. Dac nu lum accesibilitatea i gradul de utilizare n serios, utilizatorii vor
evita site-ul.
Un alt aspect cheie pentru un design web bun este creativitatea. Vom construi un site
pentru a ilustra procesul de proiectare, dar important este s nu urmai complet fiecare exemplu,
exact aa cum este expus. Alegei culori i fonturi proprii, folosind exemplul ca un ghid pentru a
obine designul dumneavoastr. Pe msur ce punei n aplicare propriul design, vei afla mult
mai multe despre teoria design-ului web.
Exist mii de programatori care n mod obinuit primesc un fiier Photoshop (PSD) de la
un grafician. O parte a job-ului unui dezvoltator este de a ncorpora acest design ntr-o aplicaie
web, i s tie s manipuleze PSD-urile ca parte a procesului de proiectare. Vom folosi machete
Photoshop din dou motive:
2
- ele sunt instrumente bune pentru a descrie multe pri ale procesului de proiectare i
- este mai uor s nvm conceptele CSS atunci cnd lucrm cu culorile din machete.

I Bazele design-ului pe web

Foodcenter, este site-ul nostru exemplu i reprezint o comunitate online unde utilizatorii
pot posta reete i le pot mprti cu lumea. Destinaia este de a fi una din site-urile de tip reea
social n care utilizatorii pot plasa tag-uri pe reete, las comentarii i construi propriile lor cri
de bucate.
De unde s ncep?
n primul rnd, trebuie s ncercm s nelegem ce cred c vor clienii dumneavoastr de
la site-ul pe care l vom proiecta. Feedback-ul primit este un bun punct de plecare, dar de multe
ori exist o list de cerine. Colectarea cerinelor este la fel de de important pentru proiectare, ct
i pentru dezvoltare. Este nevoie s utilizm experiena noastr ca dezvoltatori pentru a obine
rspunsurile de care avem nevoie pentru a rezolva problemele clienilor notri.
n al doilea rnd, trebuie s ne asigurm c am neles scopul real al site-ului i c avem
un sim pentru publicul int. Diversele categorii de public vor avea ateptri diferite i vor
interaciona diferit cu site-ul. Deci, vom afla care audiena int a clientului nostru, i apoi vom
cerceta concurena pentru a afla punctele sale forte i punctele sale slabe. Aceast cercetare ne va
ajuta sa ntrebm clienii notri: "V-ai gndit la asta? "
n cele din urm, dac am obinut mpreun cu clientul o list de cerine, vom ncepe s
schim toate aceste informaii. Da, este vorba de o schi realizat cu stiloul i hrtia. Vom intra
ntr-un pic "de ce?", dar mai nti hai sa vorbim despre cum s extragem informaiile de care
avem nevoie de la clieni.

Colectarea cerinelor

Dac ar fi s reproiectm o aplicaie existent, trebuie s tim exact ceea ce trebuie s fac
aplicaia respectiv. Vom intervieva prile interesate i utilizatorii. Vom intra i n codul surs i
vom studia sistemul actual. Vom investiga, de asemenea, ceea ce concurena face. Este nevoie s
urmm acelai proces pe care le l utilizm atunci cnd reproiectm un site web. Exemple de
cerine:
"Putem obine nite butoane aspectuoase, poate chiar strlucitore sau lucioase? "
"S facem logo-ul nostru s reflecte ceva, aa cum se ntmpl pe alte site-uri Web 2.0."
"Avem nevoie de anumite culori care s atrag oamenii. Noi nu vrem ca site-ul s fie
abandonat."
"Vreau s vd c formele arat frumos. Totul s se asemene cu o aplicaie."
"Nu sunt foarte sigur de ceea ce caut, dar vreau s fie distractiv. "
"Avem nevoie de imagini ale produselor alimentare pe site care i vor face pe oameni s
devin flmnzi. "
"mi place foarte mult ceea ce Amazon a fcut putem face asta? Cu excepia faptului
c pierdem navigarea cu tab-uri, putem folosi mai multe culori? Asta ar trebui sa fie usor, nu? "

Cunoaterea scopului

Pe msur ce proiectm acest site, ne vom pstra concentrarea pe deservirea publicului
int. O abordare util este de a obine de la clieni o list de cteva site-uri web pe care ar dori s
le foloseasc ca referin. Nu le vom folosi ca un model, dar s avem cunotin despre ele ne
poate ajuta depistm ce elemente plac clienilor notri. De obicei, clienii se vor uita la ceea ce
3
realizeaz concurena direct, n timp ce altele vor ncerca s proiecteze site-ul lor pe baza unor
site-uri dintr-un domeniu independent. Este comun pentru oameni s spun lucruri de genul, "F-
o cum o face eBay-ul." Clienii notri doresc aceste caracteristici, deoarece sunt familiari cu ele.
Este necesar s proiectm site-urile noastre cu publicul int i obiectivele site-ului bine
stabilite n minte. Vom avea nevoie, probabil, s renunm la multe lucruri, dar rezultatul final va
fi un site mai bun.

Realizarea unui plan de implementare

S presupunem c am adunat cerinele i am neles foarte bine ce dorete site-ul s
construiasc. Acum este momentul s venim cu un plan de implementare. Dac descompunem
cerinele n etape logice, ele ar putea arta astfel:
1. schiarea unor design-uri de baz i obinerea aprobrii pentru unul din ele;
2. selectai culorile;
3. selectai fonturile;
4. implementai design-ul de baz n Photoshop;
5. creai imagini pentru banner, butoane i alte elemente;
6. creai un ablon HTML i CSS;
7. testai design-ul pentru compatibilitate i accesibilitate.

Creionul i hrtia sunt importante pentru procesul creativ i putem trasa mult mai repede
cu aceste instrumente dect putem pe un calculator. De asemenea, este mai uor consultm
desenele i modelele anterioare deoarece am investit puin n ele.
Un client non-tehnic ar putea pleca dac v scoatei laptop-ul i ncepei s tastai i s
facei clic pe un design; creionul i hrtia poate fi instrument excelent de comunicare
interpersonal. Schiai ideile n fata clientului, i apoi nmnai creionul clientului pentru a vedea
ce idei are pentru site.
Scopul acestui lucru este de a facilita comunicarea cu echipa i cu clienii notri. Design-
ul nostru iniial s-ar putea s nu semene deloc cu produsul final, dar orice designer ne va spune c
e normal. Putem petrece ore ntregi pe versiunile digitale, sau putem petrece minute cu un creion
i nite hrtie. Creionul i hrtia sunt parte din echipa noastr de design; folosii-le pentru a nota
fluxul ideilor.

Schiarea ideilor

Ar trebui s desenm pe hrtie design-ul pentru a capta ideile noastre ct mai rapid.
Astfel, este uor s mprtim ideile noastre cu alte persoane sau s facem ajustri pentru ei.
Putem obine chiar ajutorul clientului nostru.
Pentru a schia un design, trebuie s cunoatem ce ar trebui s conin layout-ul site-ului.
Ce legturi trebuie s fie prezente n pagina de start? Ce elemente ar trebui s conin pagina de
start? Din discuiile cu clientul acesta va conine urmtoarele elemente:
numele site-ului
un cmp de cutare
un formular de autentificare
un paragraf introductiv scurt despre ceea ce face site-ul
o list cu reetele trimise cele mai recent
o list de categorii.
n plus, fa de aceste elemente, pagina de start conine, de asemenea, legturi pentru
diferite pagini de informare, inclusiv urmtoarele:
4
Schia 1 - o versiune simpl a site-ului
termeni si condiii
nregistrai-v (text)
politica de confidenialitate
informaii de contact

Convenii privind layout-ul

Ai observat, probabil, c site-urile tind s aib multe lucruri n comun. Cele mai multe au
o regiune antet care afieaz numele site-ului sau logo-ul. Multe site-uri au, de asemenea
regiunea cu coninutul principal mprit n coloane, i cel puin una dintre aceste coloane este
folosit ca o bara lateral, care ar putea s conin elemente de navigare sau informaii
suplimentare. Este, de asemenea, probabil ca site-ul s aib o bar de navigare, fie n partea de
sus a paginii sau pe partea stng. n cele din urm, putem gsi o regiune de subsol care conine
informaii privind drepturile de autor i, poate, unele legturi suplimentare.
Motivul cel mai evident pentru aceast similitudine ntre site-uri este faptul c design-erii
i dezvoltatorii imita ceea ce lucreaz. Nu este o coinciden faptul c multe site-uri de tiri arat
la fel. De fapt, cele mai multe ziare urmeaz acelai layout.
n timp, utilizatorii trebuie s se atepte la aceste similitudini. Pentru a proiecta un
site web funcional, trebuie s ne asigurm c utilizatorii pot gsi ceea ce doresc imediat, fr s
fie nevoii s "sape" prea adnc. n site-ul nostru trebuie s fie uor de navigat.
nainte de a ncepe s schim design-ul, vom naviga pe Internet pentru a cuta idei.
Cutai site-urile care se afl pe aceeai pia ca site-ul dvs. Uitai-v la cteva exemple din
domenii care nu au legtur pentru a vedea dac concurenei noastre i lipsete ceva ce ar putea
folosi in avantajul nostru.

Trei schie

Realizai cel puin trei schie pentru clienii
dumneavoastr pentru fiecare proiect. Oferii:
- un design simplu, conservator;
- un design complex;
- un design de mijloc, ceva mai conservator, dar
care, de asemenea, s denote fler.
5
Schia 3 - o versiune funcional a site-ului
Schia 2 - o versiune grafic a site-ului
Vom parcurge cele trei schie care se bazeaz pe cerinele pe care le avem pn n prezent.
Prima schia are un design minimalist, i
nu este menita s arate bine. Aceast
pagin nu are mai mult funcionalitate
dect cea cu butonul de nregistrare si
caseta de autentificare. Este o versiune
text grosier a site-ului care cel mai
probabil se va baza pe culoare, gradient-
uri, precum i efecte de umbrire care s
atrag atenia asupra diferitelor seciuni.
Un avantaj pentru al acestui design este
faptul c dac avem mai mult text n
coninut putem ajuta motoarele de cutare
s ne plaseze ntr-un top.
A doua schi ne arat mai mult design
grafic, cu un spaiu mai mare
pentru o fotografie pe partea stng i casetelele de conectare i de nregistrare pe dreapta.
Aceast pagin ar trebui s fie un pic mai atractiv dect primul desen, dar nu avem att de multe
informaii pentru a spune utilizatorilor ce ar trebui s fac dincolo de pagina principal.
Ultima schi ne arat un design mult mai funcional, care ncorporeaz elemente din
pagina de start, dar care transform categorii de site-ul original ntr-un "nor de tag-uri. Acest
design pstreaz caseta de cutare i restul de legturi, las casetele de conectare i de nregistrare
pe pagina de start, nlocuind casetele cu butoane. Este similar cu design-ul original, dar include
anumite elemente grafice i las spaiu pentru a explica utilizatorilor cine suntem i de ce ar
trebui s utilizeze ceea ce oferim.

Selectarea schiei

n urma ntlnirii cu prile interesate, se pare
c acetia au selectat a treia schi; cu toate acestea, ei
ar dori s o vad ca imagine color ct mai curnd
posibil. Prile interesate vor s vad o mostr cu
culoare. Pentru a face asta, avem nevoie s aflm
despre modul de alegere a culorilor i font-urilor,
astfel nct s putem construi o mostr digital care s
arate bine laurmtoarea ntlnire.

Design-ul este un fel de aa ceva, cu
excepia faptului c dup ce trece prin toate aceste
etape, putei s v ateptai ca clientul s v spun
c nu-i place deloc. Va trebui s facei concesii n
design-ul dumneavoastr. Vei schimba culorile cu
ceva care nu v place pentru c asta este ceea ce
clientul vrea. Un lucru care frustreaz designerii este viziunea lor creatoare distrus de cerinele
clientului. n calitate de dezvoltatori, suntem deja familiari de modul n care cerinele
direcioneaz proiectele. Gndii-v c faza de proiectare esteun alt set de cerine pentru aplicaia
noastr i trebuie s fie rafinat, rescris i restructurat.


6
II. Alegerea culorilor

Dispunem deschie i de confirmarea c putem realiza o mostr a design-ului; urmtorul
pas este s alegem unele culori i construim o schem de culoare.
Culorile pot influena pozitiv sau negativ aplicaia noastr, n funcie de modul n care le
utilizm i de modul n care le amestecm. Culorile evoc emoii i atrag atenia ctre detaliile
importante.
Marii design-eri au un ochi special pentru culoare. Experienai intuiia lor ne ghideaz
de multe ori atunci cnd este vorba s crem o schem de culori pentru un site web. Anumite
scheme de culori sau combinaii de culori sunt bazate pe strategii de tipul ncearc pn devine
adevrat similar cu modele de proiectare pe care dezvoltatorii le utilizeaz. Dac cunoatem
cum culorile sunt legate ntre ele, avem posibilitatea s alegem culorile care merg mpreun, la
fel de uor cum putem alege modelul de proiectare pentru o aplicaie bazat pe web.

Fundamentele culorilor

O culoare este descris prin numele acesteia, nivelul su de saturaie i luminozitate.
Atunci cnd lucrm cu culori, trebuie s ne gndim la nuana de culoare, cantitatea de culoare i
cumarat culoareaalturi de alte culori. De asemenea, trebuie s se ne gndim la modul n care
culoarea ar putea fi interpretat de ctre public. n aceast seciune, vom afla cum funcioneaz
toate acesteampreun.

Nuan, saturaie i luminozitate

Cnd oamenii vorbesc despre culoarea unui obiect, ei se refer de fapt la nuan.
Am fost obinuii s folosim nuane tot timpul, indiferent dac cumprm banane (cele verzi nu
sunt coapte nc!) sau dac ncearcm s distingem culoarea galben a semaforului.
Saturaia este cantitatea de culoare din imagine. O culoare saturat este vibrant, n timp
ce o culoare desaturat apare sumbr i gri. Dac reducem saturaia, vom face culorile s aib un
aspect mai splcit. n unele de cazuri, aceasta este un lucru bun, deoarece reduce din pregnana
unor culori dure sau ocante.
Alterarea luminozitii unei culori poate face aspectul de ansamblu al culorilor mai nchis
sau mai deschis. De exemplu, dac adugm fric la o cafea, putei modifica luminozitatea unei
cafele maro, ceea ce face trecerea de la maro nchis la maro deschis.
Schimbarea luminozitii i saturaiei ne permite s modificm aspectul culorii (vezi
Figura).
7



Mixarea culorilor aditiv i substractiv

Culorile pe care le vedem pe ecran ar putea s nu fie aceleai cu cele pe care le obinei la
imprimare. Exist o diferen fundamental ntre modul n care culoarea apare pe hrtie sau n
natur, caz n care lumina se reflect, i modul de afiare a culorii pe un ecran, caz n care este
proiectat. Pe ecran, mixajul de culoare este aditiv; la tiprire, este substractiv. Putem vedea
aceast diferen cel mai bine prin compararea culorilor din vopsele i culorile de pe un ecran de
calculator.
Cnd lucrm cu vopsele, creioane i markere, lucrm de fapt cu culori primare de galben,
albastru i rosu. ncepem cu toate culorile luminoase mixate mpreun (alb) i filtrm ceea ce nu
dorim pentru a obine culoarea pe care o cutm. Atunci cnd culorm cu un creion rou, vom
determina ca toate celelalte culori s fie absorbite sau sczute, cu excepia roului, care este
reflectatat napoi n ochii notri.

8
Putem observa metoda substractiv n aciune, atunci cnd se amestec vopsele. Dac se
amestec galben i albastru, obinem verde. n cazul n care se amestec albastru i rou, obinem
purpuriu. Dac se amestec toate culorile, mpreun, obinem negru pentru c obiectele absorb
ntregul spectru vizibil; nu mai avemo lumin care s ne afecteze ochii. O banan nu are, de fapt,
nici o culoare. Ea nu are nici o surs energetic de lumin pentru a produce culoare. n schimb, o
banan pare s fie galben deoarece reflect toate undele de lumin care s ne fac s o vedem
galben, n timp ce absoarbe toate celelalte unde.
Ecranele de calculator afieaz culorile folosind sistemul aditiv de culoare. Culorile
primare pe care le cunoatem din copilrie sunt nlocuite de rosu, verde i albastru. Aceste culori
sunt amestecate i proiectate, pentru a crea lumin. Spre deosebire de banan, imaginea de pe un
ecran de calculator este generatoare de unde de lumin i nu o reflect ea. ncepem de la nimic
(negru pe monitor) i ncepem s adugm culori. Atunci cnd amestecm rou, verde i albastru
mpreun, vom termina cu alb. Cnd nu se amestec toate culorile mpreun, obinem negru.
Acesta este un proces aditiv de amestecare de culorii. Ochii notri absorb culorile care provin de
pe ecran. n acest caz, obinem galben amestecnd verde i rou.
Termenii aditiv i substractiv pot crea confuzie, uneori, printre oameni. n aceast
situaie, vorbim despre reflecia culorii - amestecul de culoare substractiv pe baz de pigment.
Cnd amestecm galben i albastru pentru a obine verde, adugm culori. Dar, acest proces nu
este denumit aditiv deoarece substragem un set diferit de lungimi de und.
Cnd lucrm cu culori pe calculator, avem posibilitatea de a alege ntre RGB, metoda
aditiv de culoare i CMYK, care reprezint Cyan, Purpuriu, Galben, Key (de obicei negru),
metoda substractiv. Pentru web se utilizeaz de obicei RGB. n cazul n care dorii s imprimai
ceva, vom utiliza CMYK, modul de culoare folosite de majoritatea sistemelor de imprimare.

Contextul culorii

Privii cu atenie imaginile din figur. Dreptunghiul albastru din stnga pare a fi mai
nchis, chiar dac ambele dreptunghiuri sunt exact de aceeai culoare. Acest truc pe care ochii l
joac cu noi se numete contextul culorii i poate fi extrem de frustrant.



Contextul unei culori poate influena foarte mult modul n care aceasta apare n aplicaia
noastr. Chiar dac din punct de vedere tehnic alegem culorile corect, s-ar putea s facem ajustri
suplimentare pentru a le face s arate bine.
Acest efect este cauzat de fluting, care este termenul tehnic pentru modul n care ochii
notri amestec mpreun culorile adiacente. Avem posibilitatea s utilizm fluting-ul de culori n
avantajul nostru (vezi Figura). Aa cum ilustreaz exemplul, fluting-ul este ceea ce face gradient-
urile posibile. Dac nu facem tranziia suficient de treptat, vom obine efectul de banding. Dac
facem tranziia cu o mulime de mici variaii, ochii le ignor i le amestec pe toate mpreun.

9


Evocarea emoiilor prin culori

Din natere suntem nvai s asociem culorile cu emoiile, starea de spirit sau
sentimentele. Cnd alegem culorile pentru aplicaia noastr, este important s ne gndim la
diferitele rspunsuri pe care alegerile noastre le-ar putea declana. Folosirea roului sau
albastrului n mod necorespunztor ar putea declana un rspuns nedorit sau chiar ar putea crea
confuzie.
Alegerea culorii influeneaz perspectivele utilizatorilor notri; aplicarea unei scheme de
culori diferite unui site schimb complet experiena utilizatorului.

Culorile calde

Dup cum sugereaz i numele, culorile calde face ne fac s ne gndim la caldur, lumina
soarelui i cldur. Unii oameni cred c ne simim mai calzi, dac ne uitm la aceste culori.
Culorile calde includ rou, galben i portocaliu.

Rou
Rou este o culoare puternic, care poate nsemnadragoste, bucurie, fericire i romantism.
Aceasta poate reprezenta, de asemenea, poft, mnie, rzboi, o situaie de urgen sau pericole. n
aplicaii este aproape ntotdeauna folosit pentru a afia un avertisment sau un mesaj de eroare.
Rou atrage imediat ochii unui utilizator.

Galben
10
Este greu pentru un utilizator s se concentreze pe galben, dar culoarea poate evoca
inteligen i fericire atunci cnd este utilizat corect. Multe aplicaii utilizeaz un fel de efect de
decolorare galben pentru a nentiina c aciunea a fost reuit.

Portocaliu
Portocaliu poate fi vesel ca i galben, dar poate fi, de asemenea, arogant i superior, n
funcie de cantitatea de rou. Unii experi susin c rou coninut n portocaliu poate stimula
creierul.

Culorile reci

Culorile reci au un efect de rcire sau calmant asupra oamenilor. Sunt reconfortante i le
putem utiliza pentru a diminua tonul unui site. Culorile reci includ albastru, verde, i violet.

Albastru
Albastru poate fi calmant, linititor i rcoros. El are o tendin de a face utilizatorii s se
relaxeze atunci cnd este desaturat. Cu toate acestea, cu ct nuanele de albastru devin mai
nchise, ele pot provoca sentimente de tristee si depresie.

Verde
Oamenii au tendina de a asocia verdele cu natura, sperana, sntatea i capacitatea de
reacie. Cu toate acestea, dac este utilizat n mod incorect, verdelepoate declana sentimente de
invidie (cel mai probabil din cauza expresiei "verde de invidie"). Pe lng invidie, verdele poate
evoca sentimente de lcomie, vinovie i dezordine. Anumite nuane de verde permit ochilor s
se odihneasc, ceea ce poateavea efect calmant asupra utilizatorilor. Amestecul greit de culori
poate face ca utilizatorii s se simt ru sau dezgustai.

Purpuriu
Purpuriu este una dintre acele culori ciudate care nu apare n natur foarte des. O putem
vedea pe petale florilor, dar mai ales n lucruri pe care oamenii le creaz. Purpuriu este adesea
asociat cu regalitatea i misticismul, deorece a fost extrem de dificil de obinut din cele mai vechi
timpuri. Purpuriu este un amestec de rou i albastru, ceea ce nseamn c a luat unele dintre
atributele din fiecare culoare. Purpuriu deschis este deseori asociat cu natura, pacea, linitea i
spiritualitatea. Violet nchis poate evoca sentimente de depresie. Cantitile mari de violet pot fi
dificile pentru ochi.

Culorile neutre

Negru, alb, argintiu, gri, bej i maro sunt unificatoare de culori. Ele contribuie la
reducerea decalajului dintre culorile reci i calde. Cnd sunt utilizate ca i culori de fundal,
acestea ajut alte culori s ias n eviden.

Negru
Negrul poate reprezenta prestigiul i elegana, i poate fi ntr-adevr puternic dac este
utilizat n contextul potrivit. Cu toate acestea, negrul este de asemenea asociat cu doliu, moarte,
disperare. Cnd utilizai culoarea neagr ntr-un design, trebuie s v alegei publicul int cu
atenie.

Alb
11
Albul evoc sentimente de puritate i perfeciune. Este o culoare perfect pentru un site
web curat. Preamult alb poate fi plictisitor i steril, dar face ca celelalte culori s ias mai mult n
eviden.

Maro
Culoarea maro poate stimula senzaia de foame, sntate i simplitate. Pe de alt parte,
unii oameni percep culoarea maro ca pe o culoare murdar, ceva ce cu siguran nu e de dorit
pentru site-ul dumneavoastr.

Beige
Bejul i face pe oameni s se relaxeze; este o culoare conservatoare care mprumut de la
maro si alb. Este o alegere excelent pentru un fundal, deoarece poate fi calmant i va permite
altor culori s ias n eviden.

Gri
Aceast culoare rareori evoc o emoie, dar cnd o face, de obicei este asociat cu
sentimente de tristee, de doliu, irascibilitate, la fel ca o zi nnorat. Se nclin spre partea rece a
spectrului de culori. Gri este o culoare amuzant; dac o facei ntunecat va mprumuta ceva din
elegana negrului, iar dac o facei luminoas va mprumuta unele din trsturile albului.

Culorile i utilizatorii

Prejudecile unei persoane vor avea un anumit efect asupra modului n care culorile alese
de dvs. i vor afecta emoiile. Aceste prejudeci se pot datora unei asociaii create de o
experien sau de memorie, dar cel mai adesea sunt culturale.
De exemplu, dei am putea credec rou este o culoare pentru furie sau pasiune, este o
culoare de noroc i de srbtoare n China. n unele pri din India, culoarea roie poate nsemna
triumf sau succes. Roul poate de asemenea simboliza socialismul i comunismul; n Africa de
Sud, este culoare de doliu. Negrul este o culoare de doliu n lumea occidental, dar chinezii
utilizeaz negrul pentru a simboliza calitatea superioar. Dac site-ul dvs. va fi utilizat de ctre un
public internaional, nu uitai s localizai culorile, la fel cum localizai textul.

Scheme de culoare

Unele culori nu arata bine unele lng altele, pe cnd altele da. Schemele de culori sunt
grupuri de culori care lucreaz mpreun pentru a crea un rezultat atrgtor din punct de vedere
vizual. n continuare vom prezenta diferitele tipuri de scheme de culoare i modul n care le
putem aplica.
nainte de a alege o schem de culori trebuie s avem nite cunotine despre teoria
culorilor, de aceea vom arunca mai nti o privire la roata de culori, care arat relaiile ntre
diferite culori. n diferitele exemple de scheme de culori vom folosi roata RYB de culori
amestecate, care folosete rou, galben i albastru ca i culori primare (vezi figura)
12

Schema monocromatic
Schema monocromatic este alctuit din o singur nuan de culoare (vezi figura). Putei
crea schema prin modificarea luminozitii i saturaiei nuanei i adugnd aceste variaii la
schem.
Aceast schem adaug form i adncime unui design. Atunci cnd este utilizat la un
site, alte elemente precum fotografiile sau iconiele vor iei n evidenta. Aceast schem este
extrem de simplu de creat, dar funcioneaz cel mai bine pentru site-urile n care coninutul este
cel mai important element.


Schema analoag
Cele dou culori adiacente unei culori de pe roata de culori sunt denumite culori analoage.
Luai toate cele trei culori-culoarea de baz i cele dou nvecinate i utilizai-le pentru a construi
13
o schem (vezi figura). Schema este atenuat, dar culorile adiacente o aceentueaz un pic.
Aceast schem de culori implic alegerea culorilor care sunt direct adiacente n roata de culori.
O culoare domin schema, iar culorile similare sunt utilizate pentru impact.
Schema este la fel de uor de creat precum cea monocromatic, dar se obin rezultate mai
bune, deoarece se utilizeaz culori diferite, n loc de nuane diferite ale aceleiai culori. Culorile
suplimentareajut la accentuarea culorii principale, atrgnd atenia utilizatorilor spre coninutul
important.



O problem major deriv din faptul c aceast schem este lipsit de un contrast real de
culoare, neavnd att contrast ct s-ar obine cu o schem complementar. Totui, este cea mai
potrivit schem pentru ncepatori, deoarece nu este greu de creat i se poate alege dintr-o gam
de culori care se armonizeaz.

Schema complementar
O schem de culori complementar folosete ca i culori de baz dou culori care apar n
pri opuse ale roii de culoare (de exemplu violet galben, rou verde vezi figura). Schemele
de culori complementare sunt adesea dificil de echilibrat, deoarece culorile pot fi extrem de
luminoase, necesitnd diferite trucuri pentru a le atenua. Unele combinaii, cumar fi portocaliu i
indigo, pot fi extrem de dificil de echilibrat.
14


Cnd sunt folosite n mod necorespunztor, aceste culori pot fi foarte ocantei intense;
totui se poate obine un efect bun prin desaturarea culorilor reci i saturarea celor calde. Cel mai
bun mod de a folosi aceast schem este prin folosirea culorii de baz ca i culoare principal, iar
culoarea sa complementar ca o culoare de accent. Folosirea unei culori pentru text i a culorii
complementare pentru fundal poate face textul mai greu de citit dac nu se fac ajustrile de
saturaie corespunztoare.

Schema complement - adiacent
Schema de culori complement-adiacent este mai dificil de folosit, dar ca i cea
complementar, poate fi destul de atractiv dac se fac ajustri corespunztoare la saturaie i
luminozitate. Aceast schem nu este folosit foarte des, ceea ce nseamn c v poate oferi o
ans de a face anumite caracteristici ale unui design s ias n eviden.


15
Aceast schem implic alegerea unei culori de pe roata de culori i apoi alegerea celor
dou culori adiacente complementului primei culori. Aceast abordare permite un contrast
puternic, adugnd n acelai timp diferite variaii de culoare, dar rezultatul este mai puin extrem
sau ocant dect cel dat de o schem complementar. Nu trebuie utilizate culori plictisitoare,
deoarece efectul global va fi diminuat.
ncercai s lucrai cu toate aceste scheme de culori pentru a nelege modul n care
funcioneaz, precum i avantajele i dezavantajele fiecrei scheme.

Gama de culori web-safe

Paleta de culori web-safe este format din doar 216 culori care ar trebui s arate exact la
fel pe toate sistemele de operare. Aceast palet de culori era extrem de limitant, constnd din
ase nuane de albastru, ase nuane de verde, i ase nuane de rosu amestecate mpreun n
diverse cantiti. n prezent designerii abandoneaz aceast palet, majoritatea utilizatorilor avnd
monitoare care pot reda milioane de culori. Se pot observa mici variaii de la main la main,
dar acestea sunt minore n cele mai multe cazuri. Civa designeri web cu experien, precum i
unele organizaii nc insist s lucreze cu aceast palet, i multe pachete grafice ofer opiuni
care v vor ajuta s rmnei n cadrul paletei web-safe. n figur este prezentat Color Picker din
Photoshop (observai checkbox-ul Only Web Colors n colul din stnga-jos). Dac decidei (sau
sunt forai) s utilizai o culoare care nu este web-safe, trebuie s fii contieni de faptul c este
posibil s nu arate la fel peste tot.


Construirea schemelor de culori
Vom utiliza dou metode diferite pentru a selecta culori: metoda tehnic i metoda
natural.

Selectarea culorilor folosind metoda tehnic
Metoda tehnic folosete teoria culorilor pentru aconstrui o schem de culori. Se alege o
culoare de baz i apoi se combin cu una din schemele de culoare prezentate pentru a obine
culori care se armonizeaz cu culoarea de baz. Apoi se ajusteaz luminozitatea, saturaia i
contrastul pentru a crea combinaia potrivit de culori.

16

Coduri de culoare HTML
Codurile de culoare HTML sunt triplei hexazecimali. Primul numr reprezint rou, al doilea -verde, iar al
treilea - albastru. De exemplu, #FF0000 va fi de culoare roie, deoarece toi biii sunt on pentru primul numr i
off pentru celelalte dou numere. Fiecare grup conine o valoare 0 la 255, deci culoare roie este FF (rou
complet), 00 (fr verde), i 00 (fr albastru).

Metoda tehnic este o metod bun pentru a ncepe dac nu avei nclinaii artistice. Este
de asemenea, metoda de utilizat atunci cnd nu avem fotografii pentru inspiraie i avem nevoie
rapid de o schem de culori. Putem folosi o roat de culori i dezvolta manual o schem, sau
putem utiliza unele instrumente de culori pentru definirea unei scheme. Exist numeroase
instrumente pe web care ne pot ajuta s construim scheme de culori, unul dintre cele mai bune
fiind ColorSchemeDesigner.com. Acesta ofer o interfa pentru a construi o schem rapid i
salveaz rezultatul n formate diferite, inclusiv o palet de culori Photoshop.

Alegerea unei roi de culori
n figura urmtoare sunt prezentate roata de culoare obinuit RYB n partea stng i
roata de culoare RGB, n dreapta. Cnd se proiecteaz o schem trebuie s alegei roata pe care
dorii s o utilizai.


Culorile complementare din aceste roi sunt diferite. Dac ai creat o schem
complementar folosind roata RYB cu culoare de baz galben, complementul ar fi violet. Dac
ai folosit roata RGB, complementul lui galben ar fi albastru. Aceast diferen poate fi o surs de
frustrare pentru dezvoltatori i designeri, mai ales dac nu realizeaz diferena dintre cele dou
roi, sau, mai ru, le folosesc alternativ. Unii designeri cred c schemele de culori create cu roata
RYB sunt mai plcute ochiului (aceasta fiind roata culorilor folosite de pictori i designerii
tradiionaliti), alii cred c ar trebui s utilizai roata RGB pentru a afia pagini web, deoarece
culorile de pe aceast roat sunt afiate cu mai mult precizie pe un ecran de computer.
Roata de culori pe care o alegei nu conteaz prea mult pentru web design, att timp ct o
utilizai consecvent pe ntreg site-ul. Chiar i instrumentele pentru culori bazate pe web utilizeaz
roi de culoare diferite: selectorul de culoare de la ColorSchemeDesigner.com, pe care l vom
utiliza pentru a crea site-ul nostru, folosete roata de culoare RYB; Adobe Kuler - roata RGB.

Construirea unei scheme
Ce culoare trebuie utilizat ca punct de pornire? Cnd ne gndim la produsele alimentare,
culorile care ne vin n minte natural sunt nuane de portocaliu, verde, rou i galben. S ncepem
prin utilizarea unei variante de galben pentru culoarea de baz. Putei controla culoarea de baz
pentru schem prin selectarea unui punct de pe roata de culori de pe partea stng a interfeei. Pe
17
msur ce selectai o culoare, patratele de culoare de pe partea dreapt se modific, oferindu-v o
idee despre modul n care funcioneaz culorile n schem.
Dac tii deja codul hexazecimal al culorii pe care dorii s o utilizai, l putei seta
manual fcnd clic pe codul de culoare RGB n colul din dreapta jos al roii i introducerea
codului n caseta de dialog care apare. Acest lucru este util n cazul n care ai selectat o culoare
de baz de la o alt surs, cum ar fi o fotografie sau o pagin web, i dorii s construii rapid o
schem pornind de la ea.Vom utiliza o culoare de baz #FFE500 pentru aceast schem, care este
o nuan de portocaliu-galben. Verde, galben i portocaliu sunt culori adiacente pe roata de
culori, deci putei utiliza schema de culori analoage pentru a construi o schem folosind culori
adiacente. Schimbai schema din Mono n Analogic, care ofer o schem de culori compus din
diferite nuane de galben, portocaliu, i verde.
Culorile adiacente se gsesc implicit la 30 de gradedistan de culoareade baz pe roat;
putei ajusta acest unghi prin glisarea uneia dintre culorile adiacente mai aproape sau mai departe.
Cu cat este mai mare unghiul, cu att este mai mare contrastul ntre culori.
Ar trebui adaptate acum saturaia i luminozitatea, astfel nct s putei vedea modul n
care aceasta afecteaz ntreaga schem. n mod implicit, selectorul de culoare selecteaza diferite
niveluri de luminozitate i saturaie. Putei modifica acest lucru prin selectarea seciunii Adjust
Scheme. Reducerea saturaiei decoloreaz culorile noastreiar reducerea luminozitii le face mai
intunecate, orice variaie de saturaie sau de luminozitate pentru o nuan fiind permis din punct
de vedere tehnic ntr-o schem (vezi figura).
Pentru a ajusta schema de culori, selectai tab-ul Export al selectorului de culoare, i
alegei una dintre opiunile de export. Recomandat este selectarea ACO (Photoshop Palette),
astfel nct s putem utiliza aceste culori ca mostre, atunci cnd facei machetele. Fiecare schem
are URL-ul asociat astfel nct s putei reveni la schem mai trziu.




18
Folosirea Adobe Kuler
Dac dorii s utilizai un selector de culoare care se bazeaz pe roata de culoare RGB,
putei opta pentru Adobe Kuler. Folosind Kuler, putei selecta o culoare de baz, i alege o
schem de culori, iar apoi Kuler genereaz o palet de cinci culori pentru site-ul dumneavoastr.
Putei ajusta apoi luminozitatea i saturaia pentru fiecare culoare din palet. Salvai apoi paleta
pentru a fi utilizat mai trziu.

Selectarea culorilor folosind metoda natural
Teoria culorilor este bun, dar uneori ajungem s folosim culori prea sumbre sau prea
tehnice. Metoda natural de selecie a culorii (potrivirea) este o alternativ popular n care putem
dezvolta o schem de culori prin selectarea culorilor din diferite seciuni ale unor materiale de
referin, de obicei o fotografie. Aceast metod necesit mai mult timp i planificare pentru ca
este foarte uor sa selectm culori nepotrivite din imaginea surs. Cel mai mare avantaj al
metodei naturale este faptul c lucrai cu natura n sine. Dac folosii o fotografie cu alimente,
culorile din acea fotografie deja sunt armonizate.



Observai n imaginea de mai sus diferitele culori pe care le putei folosi: verde luminos i
rou lacpuni, culori ntunecate la fructele de padure, culoare luminoas la crust i tonuri de gri
n fundalul imaginii. Puteti extrage culorilemanual sau putei folosi un software. Putei vedea n
imaginea de mai sus culorile selectate manual utiliznd instrumentul Eyedropper n Adobe
Illustrator. Selectarea manual a culorilor este destul de greoaie: trebuie mai nti s selectai
regiunea cu instrumentul Eyedropper, iar apoi trebuie s vedei ce culoare este selectat uitndu-
v la numrul culorii n paleta de selecie a culorii. Din fericire, exist o cale mai uoar.

Utilizarea ColorSchemer Studio pentru a alege o palet de culori cu uurin
ColorSchemer Studio are o caracteristic numit PhotoSchemer care construiete n mod
automat o schem de culori pe baza unei fotografii pe care o furnizai. O examinare mai atent a
culorilor disponibile n imaginea cu cpuni arat c imaginea conine prea mult rou. ncercai s
gsii ceva cu mai mult galben i portocaliu, deoarece aceste culori sunt mai puin dure (vezi
figura).
19

Pentru a folosi caracteristica PhotoSchemer n Colorschemer Studio:
1. Lansai Colorschemer Studio, apoi facei clic pe butonul QuickPreview n bara de instrumente
(sau apsai Ctrl + P).
2. Facei clic pe pictograma PhotoSchemer n bara de instrumente (sau apsai Ctrl + H).
3. Facei clic pe butonul Open i ncrcai fotografia pe care ai descrcat-o. PhotoSchemer
afieaz imaginea i v arat o schem de culori format din patru culori.
4. Putei glisa fiecare din ptratele de culori ntr-o regiune n fereastra Quick-Preview pentru a
vedea cum ar arta ca o schem de culori. Putei de asemeneacrete numrul de puncte de
culoare pe imagine pn la nou.
Putei ajusta manual culorile selectate. Deplasai mouse-ul n jurul fiecrui punct de
selecie indicat de fiecare caset de culoare, i culoarea din caseta de culoare se va schimba.
5. Exersai cu schema de culori pn gsii o combinaie potrivit (vezi figura)


6. Cnd ai selectat culorile care v plac, facei clic pe butonul Add to Favorites. Acestaadaug
culorile alese n fereastra principal a ColorSchemer Studio (vezi figura).
20

7. Selectai View >Color Wheel Mode, i asigurai-v c exist un marcaj de selectare lng
opiunea Computer Color Wheel (RGB)(ne asigur c sunt create codurile de culoare
corespunztoare).
n acest punct, ar trebui avemtoate culorile i codurile lor HTML de culoare pe ecran. Le
putei copia n clipboard, sau putei folosi ColorSchemer Studio pentru a v ajuta s creai
scheme suplimentare bazate pe acea culoare. Salvai schema de culori prin selectarea File >Save
astfel nct s o putei folosi mai trziu.

Combinarea celor dou metode
Folosii ColorSchemer Studio pentru a lua o culoare dintr-o imagine i folosii acea
culoare ca i culoare de baz pentru schema de culori, n ColorSchemer Studio sau ntr-unul
dintre instrumentele online. Adobe Kuler poate extrage culori din orice imagine pe care o
ncrcai; putei apoi optimiza aceste culori pentru a construi o schem (vezi figura).
21


Alegerea schemei

Trebuie s alegei una dintre cele dou metode de creare a unei scheme de culori nainte
de a ncepe s lucrai la macheta digital. n acest caz, schema mai luminoas creat prin metoda
tehnic este cea mai potrivit i o vom folosi n continuare.

Culorile pentru Foreground i Background
Culorile pentru link-uri i text trebuie alese cu atenie pentru a fi lizibile. Culorile pentru
foreground i background ar trebui contrasteze (dac avei o culoare de fundal luminoas, alegei
culori nchise pentru text). Cu ct este mai mare contrastul ntre culorile din prim-plan i fundal,
cu att utilizatorii vor citi mai uor coninutul.

Link-uri
Link-urile trebuie s aib o culoare diferit de restul textului pentru a le ajuta s ias n
eviden. Trebuie alese i culorile diferitelor tipuri de stri ale link-ului: link-uri vizitate, link-uri
active, i hovered links (culoarea n care se schimb link-ul atunci cnd utilizatorul plaseaz
indicatorul mouse-ului pe link).
Opiunile pentru culorile link-urilor sunt oarecum limitate cnd utilizm o schem de
culori analoag sau monocromatic. O abordare eficient de a alege culorilelegturilor este de a
utiliza luminozitatea i contrastul pentru a face diferena ntre link-urile vizitate i nevizitate (vezi
figura). De exemplu, putem alege pentru link-urile vizitate o culoare mai tears, ceea ce va face
ca link-urile nevizitate s ias n eviden mai bine (contrastul trebuie s fie destul de evident
pentru cautilizatorii s poate face diferena). Pstrai culorile pe care vrei s le utilizai pentru
fiecare seciune, deoarece v vor fi necesare la realizarea machetei i a foii de stil.
22


III Fonturi i tipografie

Tipografia este mult mai mult dect arta de a alege fonturi; ea face coninutul paginii
lizibil. Textul este un element central al interfeei utilizator a aplicaiei, deci nevoile utilizatorilor
ar trebui s influeneze deciziile dumneavoastr privind tipul de font, dimensiunea i spaierea.
Dac textul nostru nu poate fi citit, ameuat n calitate de designeri, indiferent ct de frumos
arata restul paginii.

Anatomia fontului
Este uor s alegemun font bun, uor de citit dac nelegem elementele de baz ale unui
font. Din miile de fonturi din care putemalege, unele funcioneaz bine pentru titluri, iar altele
pentru pasaje lungi de text. Toate caracterele dintr-un font sunt aezate pe o linie de referin
baseline (vezi figura). nlimea literelor mici x este n mod tradiional utilizat pentru a defini o
linie medie pentru font. Distana dintre linia medie i linia de referin este denumit nlimea-x
a fontului (x-height).


Un font are o nlime-x mare n cazul n care literele mici x sunt relativ mai nalte n
comparaie cu majusculele X. Muli designeri cred c fonturile cu nlimi-x mari sunt mai uor
de citit deoarece unele litere sunt mai uor de distins. Totui, dac alegei un font cu o nlime-x
extrem de mare, cuvintele n sine pot deveni mai greu de citit, deoarece un astfel de font poate
semna cu textul scris n totalitate cu majuscule. Este mai usor de citit o propoziie compus din
litere minuscule i majuscule, dect o propoziie compus integral din litere majuscule.
Literele mici ale unui font, cum ar fi q i p, pot avea elemente (descenders) care coboar
sub linia de referin, iar altele (f, d) au elemente (ascenders) care depesc nlimea-x a
23
fontului. Descender-ii i ascender-ii pot afecta lizibilitatea textului deoarece pot interfera sau se
pot suprapune cu textul de pe alte linii.

Tipuri de fonturi
Ca dezvoltatori de site-uri web ne putem concentra pe trei tipuri de fonturi: fonturi serif,
sans-serif i de lime fix (monospaced), fiecare tip avnd avantaje i dezavantaje.

Fonturi Serif
Fonturile Serif sunt uor de identificat dup cozile (serife) de pe litere (vezi figura).
Caracterele serif pot avea linii groase la capt sau la baz, dar au linii mai subiri la mijloc sau
margini.

Times New Roman, fontul implicit utilizat n Microsoft Internet Explorer i Microsoft
Word, este un bun exemplu de un font Serif. Totui, acest font a fost proiectat pentru imprimare
i este o alegere proast pentru utilizarea pe un ecran de computer.
Una din principalele probleme cu fonturile serif este c liniile subiri ale literelor le pot
face dificil de citit pe ecranul unui computer, mai ales dac folosim un font de dimensiuni mai
mici (invers fa de textul imprimat, unde un font serif este considerat mult mai uor de citit).
Fonturile Serif arat foarte bine pentru titluri, logo-uri i sunt adesea asociate cu elegana
i prestigiul. Utilizatorii dislexici pot citi mai uor coninutul imprimat n fonturi serif datorit
unicitii caracterelor fontului.

Fonturi Sans-Serif
Fonturile fr serife sunt fonturi n care un linia fontului este constant pentru fiecare
caracter. Exemple bine-cunoscute ale acestui tip de font sunt Arial i Helvetica, precum i
Verdana (vezi figura). Fonturile fr serife sunt uor de citit pe ecran (chiar la dimensiuni foarte
mici), deci sunt o alegere excelent pentru coninutul principal al site-ului.





24
Fonturi cu lime fix (monospaced)
Fonturile cu lime fix, cum ar fi Courier, sunt fonturi n care fiecare caracter are acelai
spaiu, indiferent de ct de lat este litera. De exemplu, i i w difer semnificativ n lime ntr-un
font sans-serif, dar au aceeai cantitate de spaiu orizontal ntr-un font cu lime fix. Aceste
tipuri de fonturi sunt potrivite atunci cnd afim cod surs sau facturi pe baz de text care vor fi
trimise ntr-un e-mail text-only.
n figura de mai jos este afiat n stnga o factur folosind Myriad Pro, un font Serif, i
n dreapta aceeai factur folosind Courier New, un font cu lime fix. Observai cum fontul cu
lime fix face factura mai uor de citit, deoarece fiecare caracter (inclusiv spaiile) are acelai
spaiu i lime, totul aliniindu-se corect.


Confruntarea cu limitele fonturilor
Fonturile standard, cum ar fi Arial i Times New Roman sunt folosite peste tot, muli
designeri prefernd s foloseasc fonturi unice n design-ul web. Cea mai mare problem cu
fonturile de pe web este c acestea nu sunt ntotdeauna disponibile pe fiecare calculator. O
mulime de programe, cum ar fi Adobe Illustrator, Adobe Photoshop, i chiar Microsoft Word vin
cu numeroase fonturi. Putei folosi oricare din aceste fonturi n design-ul web, dar e posibil ca
utilizatorii s nu aib aceste fonturi instalate.

Fonturi Web-Safe
Se pare c fonturi web-safe nu prea exist. Microsoft a prezentat cinci fonturi - the
Microsoft Web Fonts - care sunt disponibile pe cea mai larg gam de computere (vezi figura).
Dac alegei unul dintre acestea avei un control mai strict asupra modului n care v prezentai
coninutul, dar nici atunci nu avei o garanie c utilizatorii dvs. vor avea fonturile.


Cele cinci fonturi web Microsoft nu sunt rele, dar nu sunt originale i pot fi destul de
plictisitoare. Sunt supra-folosite. Multe site-uri web folosesc Verdana i Arial ca fonturi
"standard", deoarece funcioneaz aproape peste tot.
Practic, exist o garanie de baz c fiecare sistem va avea un font serif, un font sans-serif
i un font monospaced, iar sistemul de operare va defini implicit care font din sistem este asociat
cu acele familii. Exist totui cteva strategii pe care le putei folosi pentru a depi aceste limite
i a obine mai mult control.
25
nlocuirea cu imagini
Designerii deseori creaz o imagine care conine textul redat n font (de exemplu logo-ul
companiilor sau la titlurile seciunilor). Este acceptabil s folosim imagini de fonturi pentru
titluri, dar nu trebuie s abuzm de aceast tehnic doar pentru c dorim ca fonturile s arate la fel
pe toate browserele. Dac lum un document Photoshop i-l tiem pentru utilizarea pe Web, vom
crea o gramada de probleme suplimentare. n primul rnd, pagina va necesita un timp
semnificativ mai lung pentru descrcare din cauza dimensiunii imaginilor. n al doilea rnd,
pagina ar putea s nu mai fie accesibil de ctre utilizatorii nevztori, care se bazeaz pe
cititoare de ecran care exprim textul de pe ecran i care nu sunt capabile s citeasc text
ncorporat ntr-o imagine.
Pentru Foodcenter, vom utiliza o tehnic cunoscut sub numele de metoda cover-up, un
tip de nlocuire a imaginilor n care suprapunem textul pe pagin cu imagini folosind CSS. Acest
lucru ne permite s crem ceva cu stil, care va fi totui accesibil i i va pstra acelai aspect pe
diferite platforme.

Definirea fonturilor de rezerv cu Font Stacks
O alt abordare care v permite s controlai fonturile pe care le vd utilizatorii este s
definii fontul dumneavoastr special i apoi s definii fonturile cu care ar trebui s fie nlocuit n
cazul n care utilizatorul nu are fontul dumneavoastr preferat instalat. Un stil CSS tipic pentru
selectarea unui font arat astfel:

body {
font-family: Helvetica
}

Acest fragment definete ca font Helvetica, un font sans-serif care este comun pe Mac OS
X. Problema este c sistemele Microsoft Windows nu au acest font n mod implicit. Cnd un
browser citeste aceast definiie de stil pe un sistem Windows, va ncerca s ncarce fontul
Helvetica, care nu exist, i va folosi Times New Roman - fontul implicit al browserului (un font
serif). Diferena dintre aceste dou fonturi este enorm, nu numai din cauza problemei serif vs
sans-serif, ci i pentru c dimensiunile de baz ale fonturilor sunt puin diferite. Limile i
nlimile literelor sunt uor mai mari n Helvetica, deci textul de pe pagin ar putea s nu se
nfoare n acelai mod. Pentru a rezolva acest lucru, vomdefini fonturi de rezerv pe care
browser-ul le poate utiliza dac primul font nu este gsit. Putemdefini fonturi de rezerv
multiple, deci nu este neobinuit s vedemo definiie stil ca aceasta:

body {
font-family: Helvetica, Arial, sans-serif
}
Aceast definiie instruiete browser-ul s ncerce nti Helvetica, apoi Arial, i apoi s
utilizeze fontul sans-serif implicit n cazul n care nu gsete nici Helvetica nici Arial. Aceast
soluie nu este perfect, dar funcioneaz pentru cele mai multe cazuri. Aceste fonturi sunt
denumite deseori stive de fonturi (font stacks).

Alegerea fonturilor de rezerv
Alegerea structurii stivei de fonturi este foarte important; fonturile de rezerv trebuie s
fie similare cu fontul preferat. De exemplu, Arial i Verdana sunt ambele fonturi sans-serif, dar
Verdana este un pic mai lat. Geneva ar fi o alegere de rezerv mai bun.
Cnd construii o stiv de fonturi, alegei mai nti fontul dorit apoi gsii un nlocuitor adecvat,
26
similar n nlime, lime, nlime-x, nlimea descender-ului i ascender-ului - aceasta
garanteaz faptul c layout-ul nu este depsit prea mult atunci cnd trebuie fcut substituia.
Apoi, specificai unul din fonturile web-safe care este aproapiat ca lime de fontul
dumneavoastr preferat. n cele din urm, specificai una dintre familiile de fonturi implicit
furnizate de ctre CSS (serif, sans-serif, monospaced, cursive, i fantasy). Familiile CSS se
transmit browser-ului, care red fontul, n modul urmtor:
p (font-family: Trebuchet, Lucida Sans, Arial, sans-serif;)
h1 (font-family: Verdana, Geneva, sans-serif;)
h2 (font-family: Baskerville, Times New Roman, Times, Serif)

Selectarea fonturilor
Selectarea unor fonturi eficiente pentru site-ul nostru impune n primul s ne gndim la
coninutul site-ului. Site-ul nostru va conine reete, aa c trebuie s ne asigurm c oferim un
font care este uor de citit i nu va fi confuz pentru cititori. Am putea folosi fonturi diferite pentru
meniul de navigare, titlurile de seciuni i de pagini i alte zone, pstrnd numrul maxim de
fonturi de pe o pagin la dou, fr a lua n calcul logo-ul site-ului. Vom folosi un font pentru
coninut i altul pentru titluri.

Fontul pentru coninut
Cei mai muli designeri consider c fonturile sans-serif sunt alegeri bune pentru coninut.
Dei unele litere sunt mai dificil de distins n mod individual, cuvintele complete vor fi mai bine
evideniate pe cele mai multe monitoare. Majoritatea site-urilor web utilizeaz Arial, avnd ca
rezerv Helvetica. Ali designeri folosesc Verdana - un font mai larg, care tinde s completeze
spaiul un pic mai bine dect Arial, dar trebuie evitat n situaiile n care avei nevoie de un font
extrem de mic. Verdana devine greu de citit, sub 10px.

Fonturi pentru titluri
Pentru titluri trebuie s utilizai ceva care s capteze atenia utilizatorului. n mod normal
vei utiliza o dimensiune mai mare de font pentru titluri. Unii designeri prefer s foloseasca o
variant mai ngroat a fontului pentru titluri, alii un font cu totul diferit, care s
condimenteze un site cu mult coninut. Atunci cnd alegei un font pentru titlu trebuie s ne
asigur c utilizatorii pot citi fontul cu uurin. Fonturile pentru titluri sunt de obicei mai mari
dect fonturile utilizate pentru coninut, deci putei utiliza un font serif. Putei exploata acest
lucru pentru a aduga un plus de eleganta la pagin. Vom utiliza fontul Monotype Corsiva (vezi
figura) un font atrgtor, non-standard, folosit doar pentru titluri, deci vom crea imagini cu
titlurile i vom folosi nlocuirea cu imagini pentru a le afia pe pagin.

Utilizarea grilei de baz
Crearea unui corp de text fluid este foarte important pentru furnizarea eficient de
coninut. Textul ar trebui s curg n jurul imaginilor i altor elemente, coloanele ar trebui s fie
aliniate i rndurile nu ar trebui s se ntrerup oriunde. Cei mai muli dezvoltatori web nceptori
las setrile implicite ale browser-ului s dicteze modul n care se aranjeaz textul, dar putei
obine un aspect mai ngrijit dac inei seama de cteva lucruri nainte de a ncepe.
Grila de baz este o gril vertical, sau mai multe linii orizontale suprapuse, care suport
caracterele fontului ntr-o compoziie. Distana dintre liniile orizontale devine unitatea de msur,
i fiecare linie din gril devine linia de baz pentru fonturi. Liniile orizontale din grila de baz
27
fucioneaz precum liniile dintr-un caiet liniat: pstreaz textul strns i uniform distanat n
pagin. Pentru a face ca textul s se aranjeze corect n coloane i n jurul imaginilor, trebuie ca
imaginile s fie aliniate la liniile orizontale ale grilei. nlimea fiecrei imagini ar trebui s fie
divizibil cu cantitatea de spaiu dintre liniile grilei. Cnd toate ader la gril, textul curge
automat n jurul imaginilor, coloanele de text se aliniaz uniform i totul este mult mai uor de
citit.
Putei vedea ct de mult elegan poate aduga grila de baz prin compararea unui layout
care nu o utilizeaz cu unul care utilizeaz aceast gril n figurile de mai jos.


Leading-ul
Leading-ul se refer la cantitatea de spaiu vertical dintre linii. Este adesea denumit
spaierea liniilor (line spacing sau line-height) n CSS. Spaiul alb dintre linii permite cititorului
s urmreasc mai uor linia i este ingredientul cheie pentru construirea grilei. Valoarea pe care
o alegem pentru leading este valoarea pe care o vom utiliza pentru spaierea vertical. Tot ce vom
aduga la pagin va trebui s fie divizibil cu acest numr, astfel nct totul s se potriveasc n
gril.

Uniti de msur
Grila este bazat pe spaierea liniilor textului, care este distana dintre liniile de baz (pe
care st textul). Dac alegei o spaiere de 18px, textul ar trebui s se alinieze la o gril care are
linii la fiecare 18px.
Cnd definim dimensiunea fontului pentru grila de baz utilizm pixeli (o msur exact).
Unii dezvoltatori web susin c atunci cnd utilizm dimensiuni de font pe baza pixelilor,
utilizatorii nu pot redimensiona textul. Acest lucru este doar parial adevrat: browserele mai
vechi nu suport redimensionarea textului definite n pixeli, dar cele mai multe browsere
moderne permit redimensionarea textului i a spaierii.
Putem face diferite calcule pentru a calcula fontul potrivit, spaierea, marginile i alte
elemente, dar browserele vor rotunji aceste valori n mod diferit. Fonturile relative au fost
considerate o caracteristic de accesibilitate pentru persoanele cu deficiene de vedere, deoarece
utilizatorul putea crete dimensiunea fontului utiliznd browser-ul web. Cu toate acestea,
imaginile nu se redimensionau odat cu fonturile, cauznd probleme de lizibilitate. n prezent
exist o soluie mai bun.
Microsoft Word i Adobe Acrobat permit cititorilor s fac zoom in pentru a citi textul
pstrnd n acelai timp layout-ul, indiferent de unitatea de msur folosit de autor pentru a reda
fonturile. Aceast abordare este suportat de majoritatea browserelor.

Alegerea fonturilor pentru Foodcenter
Trebuie s ncepem cu dimensiunea fontului de baz pentru a construi grila. Pentru acest
design, vom utiliza un font de 12px pentru textul din body, font uor de citit pe un monitor
mediu. Trebuie un spaiu suficient deasupra i dedesubtul liniei pentru a fi lizibil. Atunci cnd
28
alegei spaierea, alegei un numr care este divizibil. Vom utiliza o spaier de 18px pentru c ne
va da un buffer larg. O regul bun de urmat este s nmulim dimensiunea fontului de baz
definit cu 1.25 sau 1.5. Dac avei un font 12px i o spaiere de 18px, le putei exprima ca 12/18
pentru dimensiunea fontului.
Pn n prezent ne-am decis la o dimensiunea a textului din body de 12px cu o spaiere de
18px. Pentru a realiza grila, toate marginile de sus i de jos trebuie s fie multipli de 18px. De
fiecare dat cnd adugai spaiu vertical, trebuie s v asigurai c l adugai n multipli de
18px, astfel nct elementele din pagin s se alinieze la gril. Cnd tiai o fotografie, nlimea
imaginii trebuie s fie multiplu de 18.
Pentru subtitluri putem crete dimensiunea fontului la 18px (nlimea spaiului dintre
linii) i s lsm un alt spaiu de 18px sub fiecare subtitlu.
Pentru titluri vom dubla fontul de baz, ceea ce le face de 24px n dimensiune. Am
depit spaierea de 18px, deci va trebui s dublm spaierea pentru titluri (36px) pentru a ne
asigura c elementele rmn aliniate.
Vom apela din nou la grila de baz cnd vom ajunge la plasarea elementelor. Elementele
margins, borders, padding, image heights, i alte elemente trebuie adugate la baseline grid, sau
design-ul va fi un fiasco. Iat un rezumat al fonturilor care le-am ales:

Seciunea Fontul Dimensiunea Spaierea
Titluri Monotype Corsiva 24px 36 px
Sidebar headings Monotype Corsiva 18 px 18 px
Subtitluri Arial 14 px 18 px
Body Arial 12 px 18 px

Tipografia este o parte important a unui design web bun. Dac nu acordm atenie
fonturilor folosite i modului n care acestea afecteaz lizibilitatea, va fi mai dificil pentru
utilizatori s analizeze coninutul. Definirea unui sistem gril pe care s se bazeze layoutul va
mbunti att lizibilitatea ct i aspectul estetic al site-ului.


IV. Proiectarea logo-ului Foodcenter

Schia noastr iniial includea un logo pentru Foodcenter.

Configurarea unui dosar de lucru

Pentru acest proiect, vom utiliza o structur simpl de directoare cu locaii pentru foile de
stil i imaginile noastre.
Creai un folder nou, denumit foodcenter n /xampplite/htdocs. n cadrul acestui dosar,
creai trei foldere suplimentare: images, stylesheets i originals.
Folderul originals va pstra toate fiierele dumneavoastr de lucru, cum ar fi documentele
Illustrator i Photoshop, precum i orice alte documente sau fotografii trimise de ctre client.
Dosarul images va pstra toate imaginile pe care le vom utiliza direct n pagina web pe care o
vom crea. Folderul stylesheets va pstra stilurile CSS pe care le vomcrea odat ce am construit
site-ul.



29
Logo-ul Foodcenter

Cnd realizm logo-ul, este important s folosim un instrument care suport grafica
vectorial. n acest mod, putem scala logo-ul nostru la orice dimensiune i utiliza nu numai pe un
site web, ci i n presa scris, de asemenea. Standardul software pentru acest lucru este Adobe
Illustrator, iar noi vom folosi acest program pentru a crea acest logo.
Logo-ul Foodcenter const din patru ptrate i cuvntul Foodcenter. Logo-ul final ar
trebui s arate ca figura urmtoare. Avemposibilitatea s recream acest logo n doar civa pai.

Deschidei Illustrator, i creai un nou document. Dimensiunile, nu conteaz deocamdat
pentru c noi pentru c l vom scala mai trziu, cnd l vom integra n documentul Photoshop.
S ncepem cu cele patru cutii. Avem nevoie de o matrice 2/2 de casete cu coluri
rotunjite. Putem face acest lucru ntr-o serie de pai prin desenarea unei cutii cu dimensiuni
specifice i apoi s utilizm Illustrator s reproducemaceast caset:
1. Selectai utilitarul Rounded Rectangle din paleta de instrumente Illustrator, printr-un
clic i meninnd pe instrumentul Rectangle.
2. n bara de instrumente Options, schimbai umplerea (fill) la #FCEE21 (o culoare
galben) si alegei negru pentru contur (stroke)
3. Dublu-clic pe panza de desen (canvas). Ne apare o caset de dialog, care ne solicit
dimensiunileptratului. Introducei 100pt att pentru nlimea ct i pentru lime. Utilizai 12pt
pentru Radius Corner i facei clic pe OK. Amredactat doar o singur ptrat, prin definirea
dimensiunilor sale exacte.
4. Acum, dublu-clic pe instrumentul Selection din paleta de instrumente. Acesta va
deschide caseta de dialog pentru mutare sau copiere.
5. Dorim s copiem cutiai vrem s se asigurm c avem un spaiu ntre cele dou cutii
dup copiere. Caseta fcut de noi este de 100 de puncte n lime. Vom introduce 110 n caseta
pentru orizontal i apoi clic pe Copiere. Acest lucru creeaz o copie a casetei la 110 puncte de
prima caset, ceea ce nseamn c acum avem dou cutii plasate la 10 puncte distan.
6. Vom folosi aceast comand Copy pentru a crea celelalte dou cutii, de data aceasta
ajustndu-le pe vertical. Selectai ambele cutii prin selectarea lor cu mouse-ul, folosind
instrument Selection i apoi dublu clic pe instrumentul Selection pentru a deschide caseta de
dialog pentru mutare sau copiere, din nou. De aceast dat, vom seta valoarea orizontal la 0 i
valoarea vertical la 110. Facei clic pe Copy, i avem patru patrate, dispuse uniform.
Acum, avem nevoie s aplicm o culoare de umplere pentru fiecare cutie:
1. apsai F6 pentru a afia paleta de culori.
2. selectai fiecare ptrat cu instrumentul Direct Selection, i apoi dublu clic pe ptratul
color-fill din paleta de culori pentru a alege culoarea.
3. n sensul acelor de ceasornic din stnga sus, caseta de culori ar trebui s fie galben (#
FCEE21), verde (#C2EE21), portocaliu (# FCBA21) i bej (#FCEEB5).
30
Acum este momentul pentru a aduga un text. Pentru a face logo-ul s arate echilibrat, ne
vomasigura c cuvntul foodcenter este la fel de nalt n cutiile noastre. Pentru a face acest lucru,
vom utiliza guides.
Cele mai multe instrumente de desen furnizeaz ghiduri pe care le putem plasa pe
compoziia noastr pentru a ne ajuta s aliniem elementele sau s ne ajutes definim unde vor fi
plasate elementele din compoziia noastr. Conceptul de guidelines nu este nou pentru oricine a
facut munca de design i nainte. Vom utiliza ghidurile pentru a alinia textul, rapid i uor:
1. ne vom asigurac riglele (rulers) sunt afiate prin apsarea Ctrl + R.
2. creai un ghid care atinge partea de sus a cutiei. Plasai indicatorul mouse-ului oriunde
pe rigla orizontal n partea de sus a imaginii. Pentru a crea un nou ghid, apsai i meninei
apsat butonul mouse-ului, i apoi tragei-l n jos, spre cutii. Poziionai ghidul a.. s ating
partea de sus a cutiilor i apoi eliberai butonul mouse-ului pentru a plasa ghidul.
3. plasai un alt ghid n partea de jos a cutiilor. Acum avemposibilitatea s utilizm aceste
ghiduri pentru introducerea textului.
Trebuie s avem doi ghizi plasai ca liniile orizontale de deasupra i de sub casete, aa
cum se arat n figura.

Acum, trebuie s adugm text la logo-ul nostru:
selectai instrumentul Text.
utilizai panoul Options pentru a alege Arial Black pentru stilul fontului i 72pt pentru
dimensiunea fontului.
facei clic pe panza, i scriei foodcenter. Nu v facei griji dac nu l-ai plasat ntre
ghiduri acum.
alegei instrumentul Selection din paleta de instrumente. Sectiunea pe care am tastat-o
va avea acum mnere de redimensionare pe care le vom folosi pentru a scala textul astfel nct s
aib aceeai dimensiune ca cutiile. inei apsat tasta Shift, i tragei de mnerul de
redimensionarea de sus-dreapta pe zona de text, pn cnd partea de sus din f-ul din foodcenter
atinge ghidurile plasate. Verificai dac partea de jos a lui f, de asemenea, atinge ghidul. Dac
nu-l atinge, redimensionai i repoziionai pn cnd reuii. Nu v facei griji cu privire la orice
alte litere care vin mai jos pe ghid.
Dac v uitai cu atenie, vei observa c unele litere sunt mai jos de acest ghid. S
modificm printr-o uoar modificare a formei textului:
1. Selectai layer-ul text cu instrumentul Selection.
2. Selectai Text >Creare Outlines. Aceast comand transform obiectul text n forme
vectoriale. Nu putem s mai modificm textul, dar putem utiliza orice instrument de desen sau
instrumente de manipulare Illustrator pe aceste forme.
3. Alegei instrument Direct Selection din paleta, i trasai o cutie n jurul jumtii
inferioare a lui o. Acum, apsai tasta sgeat sus de patru sau de cinci ori, pn ce partea de jos a
lui o atinge ghidul.
4. Facei acest lucru cu restul literelor care depesc ghidul de jos.
31
n cele din urm, facei clic pe instrumentul Selection i apsai Ctrl + A pentru a selecta
tot. inei apsat tasta Shift, i folosii mnerele de redimensionare pentru a redimensiona logo-
ul s fie constrns n caseta care l delimiteaz (bounding box), care este un dreptunghi solid
black pe fundalul panzei.
Salvai acest document ca foodcenter_logo.ai, i plasai-l n folderul originals. Vom
importa acesta n Photoshop mai trziu, astfel nct atunci cnd salvai, asigurai-v c selectai
opiunea de a crea un fiier compatibil PDF. Dac omitem acest pas, Photoshop nu va fi n
msur s importefiierul.
Reinei c am folosit un instrument vectorial dedesen, astfel nct s putem utiliza acest
logo pentru orice, de la cafenele la panouri imense. Astfel, putem redimensiona logo-ul n funcie
de necesiti, fr a afecta calitatea imaginii.

Crearea unui logo propriu

Oamenii proceseaz imaginile mai rapid dect proceseaz propoziii sau etichete; se uit
la logo-ul Coca-Cola i nu trebuie s citeasc cuvintele: recunosc imediat logo-ul i-l asociaz cu
produsul companiei. Acesta este obiectivul dvs. final n ceea ce privete logo-ul: trebuie s v
reprezinte doar pe dumneavostr.
O recunoatere instantanee este realizat numai prin utilizarea logo-ului n mod constant
i consecvent. Dac schimbai mereu logo-ul dvs. va fi mai greu s ctigai recunoaterea de
brand pe care o cutai.
Dac logo-ul dvs. va conine cuvinte, asigurai-v c acestea sunt lizibile. Folositi
typeface-uri clare, care sunt lizibile la dimensiuni foarte mari i foarte mici. Alegei culori simple
i sigure. Aplicai ceea ce ai nvat despre evocarea emoiilor n logo-ul dvs.
Spre deosebire de o pagin web, logo-ul nostru ar putea s apar adesea tiprit, deci testai
culorile cu o imprimant din cnd n cnd pentru a v asigura c acestea arat acceptabil. Cnd
lucrai pe web, utilizai modul de culoare RBG. Cnd proiectai ceva care ar putea fi imprimat,
trebuie s lucrai n modul de culoare CMYK. Putei salva imaginile bazate pe CMYK n modul
RGB pentru utilizarea pe web, dar invers este foarte dificil n privina potrivirii culorilor.
n cele din urm, testai logo-ul fr culoare. Arat bine atunci cnd este imprimat n alb
i negru?

Instrumentele bazate pe vectori precum Illustrator faciliteaz construirea unor logo-uri
scalabile i versatile. Urmtoarea dat cnd proiectai un logo ncercai unele dintre tehnicile
prezentate cum ar fi duplicarea i manipularea fontului. Modificai logo-ul creat aici: utilizai
forme diferite, fonturi diferite, dimensiuni diferite sau plasri diferite, sau ncercai s aplicai
unele sfaturi cu privire la designul logo-ului i creai-v propriul logo complet diferit pentru
Foodcenter.


TEMA 2
Realizai dou - trei logo-uri n Illustrator folisind pentru nceput tehnici similare cu cele
de pe site-urile:
Illustrator Logo Design Tutorials - http://garmahis.com/tutorials/illustrator-logo-design-tutorials/
Logo designing tutorial using photoshop and illustrator plus resources -
http://www.webanddesigners.com/logo-designing-tutorial-using-photoshop-and-illustrator-plus-
resources
44 Perfect Adobe Illustrator Icon & Logo Design Tutorials - http://stylishwebdesigner.com/44-
perfect-adobe-illustrator-icon-logo-design-tutorials/
32
Pentru fiecare tem este recomandat s dispunei i de un fiier .doc n care s descriei
succinct paii parcuri pentru definitivarea problemei. Fiierul/fiierele le putei trimite pe e-
mail la adresa alexandru.sireteanu@feaa.uaic.ro