Transcript Principii de baza in webdesign

PRINCIPII DE BAZA IN DESIGN
Oricine poate sa invete tehnicile crearii unei pagini Web.
Si oricine poate sa creeze o pagina Web urata.
Totusi singurul motiv pentru care atatea persoane realizeaza pagini web
slabe este faptul ca nu cunosc principiile de baza ale designului.
Cele patru principii de baza, care permit ca o pagina Web sa arate clara,
ordonata si profesionista sunt:
alinierea
proximitatea
repetarea
contrastul
ALINIEREA








Alinierea inseamna ca elementele de pe pagina sunt aliniate
unele in raport cu celalalte. Lipsa alinierii este principala
problema de pe paginile Web, aceasta reprezinta o problema
importanta si pe paginile tiparite, insa pare si mai prezenta si mai
dezastroasa pe paginile Web. Nimic nu trebuie asezat la
intamplare pe pagina. Se creeaza un aspect curat, sofisticat si
proaspat al paginii daca fiecare element are o legatura vizuala cu
un alt element de pe pagina.
Alinierea elementelor dupa latura stanga, dreapta sau centrat
trebuie sa urmeze o anumita regula, si anume:
Alegeti UNA. Se alegei o singura aliniere care se utilizeaza pe
toata pagina.
Daca se opteaza a se alinia textul de baza in stanga, nu se pune
titlul pe centru;
Daca se aliniaza centrat o parte din text, atunci se aliniaza centrat
peste tot.
Nu amestecati alinierile.
Acest singur principiu va modifica radical aspectul paginilor.
Se pot face alinieri verticale orizontale si centrale.

O aliniere centrala se poate spune ca este :
echilibrata;
 simetrica;
 calma;





oficiala.
Aliniind o parte din text la stanga, o parte la dreapta si o
parte centrat, se creaza senzatie de dezordine si se
transmite impresia de amatorism.
Daca se aliniaza textul si imaginile, este bine sa
indepartam textul de marginea stanga. Este obositor si
distrage atentia sa dam cu ochii de marginea stanga a
paginii browserului de fiecare data cand trecem la
randul urmator.
Cand decalam text (operatie de “indentare”), se poate
face si din partea dreapta, impiedicand formarea
randurilor de text lungi si dificil de citit.



Alinierea orizontala este la fel de importanta ca si cea
verticala.
In exemplul de mai sus, literele nu se aliniaza pe
orizontala. Aceasta deplasare “sus/jos/sus/jos” face ca toata
manseta sa arate dezordonata.
De aceea, pe langa alinierea verticala trebuie sa fim atenti
si la alinierea orizontala a butoanelor si legaturilor.
Text pe butoane corect realizat


Literele stau pe o linie invizibila numita “linie de
baza”. Manseta de legaturi este mai ordonata si mai
organizata daca aliniem tot textul pe aceeasi linie de
baza.
In majoritatea software-urilor de creatie pentru Web
exista un buton pentru alinierea dupa linia de baza,
de obicei in specificatiile pentru tabele.
FORMULAR INCORECT
REALIZAT DIN PUNCT DE VEDEREA AL
WEBDESIGN-ULUI
Formularul acesta incepe excelent;
exista cateva alinieri foarte bune, bine
definite, dar si locuri in care textul pare
sa fi fost trantit aleatoriu pe pagina.
Aliniere verticala in partea laterala a
formularului lasa de dorit. Consolidam
aspectul paginii, aliniind celalalte
elemente dupa aceasta linie.
Totul trebuie sa aiba un motiv pentru asi justifica locatia deoarece, nimic nu
trebuie plasat arbitrar pe pagina.
Nu azvarlim pur si simplu elementele si
vedem cum si unde se lipesc. Trebuie
sa putem explica motivul pentru care
un element se afla in acel loc.
FORMULAR CORECT REALIZAT DIN
PUNCT DE VEDEREA AL WEBDESIGNULUI
O pagina, poate sa fie
instantaneu
folosita,
prin
alinierea tuturor elementelor
dupa o latura si pagina arata
mult mai organizata.
Daca lucrurile sunt organizate,
ele comunica mai bine.
Alinierea nu inseamna ca totul
este aliniat dupa aceeasi
latura. Inseamna pur si simplu
ca totul are aceeasi aliniere –
fie lipit la stanga, fie lipit la
dreapta, fie centrat.
Cand o margine buna se repeta,
ea castiga in forta.
PROXIMITATEA




Proximitatea se refera la relatiile dintre elemente, cand
acestea sunt foarte aproape. Pe o pagina componentele aflate
in legatura cu altele trebuie sa fie grupate. Daca anumite
componente se afla in apropierea altora, ele devin o singura
unitate d.p.d.v. vizual, astfel informatiile pot fi organizate mai
bine si permite astfel sa dispara orice confuzie.
Se pare ca exista o frica fata de spatiu liber. Pagina pare
neorganizata, daca elementele de machetare sunt imprastiate
peste tot, fiind posibil ca informatia sa devina mai greu
accesibila.
Principiul proximitatii spune ca trebuie sa se grupeze
componentele aflate in legatura, sa fie mutate mai aproape
unele de altele, a.i. sa fie percepute ca un grup unitar, nu ca o
gramada de elemente fara legatura.
Componentele si grupurile de informatii care nu au legatura
unele cu altele nu trebuie sa se afle in proximitate
(vecinatate).



Dorim sa realizam o carte
de vizita care cuprinde 5
elemente (componente )
separate ).
In acest caz ochiul se
opreste de cinci ori.
Ochiul incepe sa citeasca
in mijloc, deoarece textul
este bold.



Proximitatea sau
apropierea, inseamna o
relatie.
O problema a cartii de
vizita anterioare este
faptul ca nici una dintre
componente nu pare a fi
in legatura cu alta.
Dar daca fac o rearanjare
a componentelor de pe
cartea de vizita aceasta
arata cu totul altfel,
componentele care au o
legatura intre ele sunt
grupate. Aceste
componente sunt mai
aproape unele de altele.
ATENTIE!!!!






Uneori, atunci cand se grupeaza componentele foarte apropiate, este
nevoie sa se modifici cate ceva, de exemplu, marimea, ponderea sau
asezarea textului ori a desenelor.
Componente aflate in apropiere unele de altele devin o unitate vizuala,
nu trebuie organizate ca unitati separate. Deci componentele cu legatura
intre ele trebuie grupate impreuna.
Principiul proximitatii are ca scop de baza organizarea paginii.
Daca pe pagina exista mai mult de trei pana la cinci componente, trebuie
vazut care dintre elementele separate pot fi grupate, mai apropiat, pentru
a deveni o unitate vizuale.
Proximitate nu inseamna ca totul este apropiat, ci ca elementele care
sunt legate din punct de vedere al semnificatiei lor, intre care exista un
fel de relatie privitoare la ceea ce comunica, trebuie sa fie conectate si
vizual
Informatia dintr-o pagina trebuie mai intai grupata din punct de vedere
al semnificatiei, apoi asezata din punct de vedere fizic pe pagina.
Informatia secundara trebuie sa fie mai distantata, astfel icat sa se vada
ca este vorba despre o completare a informatiei principale.
REPETITIA


Principiul repetitiei spune ca anumite parti ale
machetarii trebuie repetat in intreaga lucrare.
Se poate reppeta de exemplu un font ingrosat, o
linie groasa, un anumit tip de marcaj, un element
de design etc. Poate fi orice element care poate
fi recunoscut de vizitator.

Reluam cartea de vizita si organizam informatia altfel.

Observam ca dupa ce am privit informatia de aceasta carte de vizita, ochii raman agatati
de nume, deorece este ingrosat si subliniat.

Dar totusi avem senzatia de neterminare.

Urmatoarea figura prezinta aceiasi carte de vizita dar in care am ingrosat si ultima
informatie, astfel ochiul se uita la nume si la numarul de teledon.
CONTRASTUL


Contrastul este cea mai eficienta cale de a adauga valoare vizuala
paginii noastre.
Principiul contrastuluispune ca daca doua componente nu sunt
exact la fel, atunci trebuie sa fie complet diferite.

Regula de „aur” in utilizarea contrastului spuna ca pentru a fi eficient,
contrastul trebuie sa fie puternic.

Contrastul poate fi creat in mai multe moduri, de exemplu punem in
contrast:






un font mare cu unul mic;
un font elegant cu unul ingrosat;
o culoare rece cu una calda;
un element orizontal ( ex. un rand lung de text) cu unul vertical (ex. o
coloana de text inalta si ingusta);
randuri cu spatii multe intre ele cu randuri dese;
un desen mare cu unul mic.
Atentie nu putem pune in contrast maro inchis cu negru sau un font de
14 puncte cu unul de 16 puncte.
FIE UN ANUNT
PENTRU OBTINEREA UNEI BURSE
SOCRATES
Contrastul in formularul modificat este evident si ne uitam cu mult mai multa placere la cel de
al doilea anunt.
Am folosit un font mai puternic, am ingrosat titlurile.
Fontul folosit l-am repetat si in titlul paginii.
Titlul l-am transformat din majuscule in litere mici si astfel am avut posibilitatea sa folosesc o
dimensiune mai mare a fontului, pe care l-am ingrosat.
Totodata am scris titlul cu alb pe fond negru (banda neagra). Astfel am marit contrastul.
,
Contrastul nu numai ca face pagina mai atractiva ci si clarifica scopul si organizarea
documentului.