Web design- concepte de baza

Cursuri web design si programare web online, diplome avizate ANC


1. Sa disecam o pagina web

Indiferent de site, in general, structura este urmatoarea:
- o zona denumita container, in care se afla toate elementele sitului. Ganditi-va la un
container ca la o cutie in care se afla toate elementele paginii.
- logo: acesta este un element de identitate, de obicei plasat in partea de sus a paginii
- zona de navigare: este foarte important ca utilizatorul sa gaseasca foarte usor link-urile catre celelelate pagini ale sitului. In general se afla tot in partea de sus a paginii, dar poate fi si in dreapta sau in stanga. Este important in tot cazul sa se afle deasupra liniei terminale a paginii. Ce este linia terminala? In general, rezolutia este de 1024 x 768 pixeli, unde prima valoare reprezinta latimea paginii, iar a doua este inaltimea paginii. Luand in seama toate elementele care apar, in general, se considera ca linia se afla la 500 pixeli fata de partea de sus. Cum se defineste?
Este linia orizontala incepand de la care utilizatorul nu mai vede restul paginii, trebuind sa apeleze la scroll pentru a derula pagina in jos
- subsol (sau footer- daca ati lucrat in Word stiti la ce ma refer): este plasat in partea de jos a paginii si contine informatii despre firma, contact, proprietar, etc.
- spatiu gol: o tendinta a incepatorilor este de a umple intreaga pagina cu texte sau imagini, dar este o greseala. Spatiul “negativ” sau alb, cum mai este denumit, trebuie sa apara ca o “oaza” de liniste, unde ochiul se poate odihni. Altfel, veti da impresia de “sufocare”.


2. Numarul de aur

Numarul de aur a fost si este folosit pe scara larga in arta, si nu numai (inclusiv de Leonardo da Vinci). Acest numar este 1,6.... (si urmeaza o serie infinita de zecimale) si reprezinta raportul intre elementele sitului. In forma sa simplificata, putem considera numarul egal cu 1,5. Cum aplicam raportul: luam o lungime ca unitate de masura si o impartim astfel: o lungime si urmatoarea de aproximativ de doua ori mai mare. Procedand astfel si pe orizontala si pe verticala, putem imparti zona paginii respectand raportul dat.

3. Echilibrul: acesta poate fi:
- simetric: apare atunci cand dorim ca situl sa fie centrat fata de o linie orizontala sau verticala.
- asimetric: este mai bine perceput vizual decat primul. Ca sa ramana impresia de echilibru, puteti plasa in partea stanga a paginii o poza de dimensiune mai mare, iar in partea dreapta, aceeasi poza, repetata de mai multe ori, dar de dimensiuni mai mici.
Accentuarea: ca sa punem in evidenta anumite aspecte pe care le consideram importante, putem folosi accentuarea. Accentuarea se poate obtine prin mai multe metode: prin plasarea in centrul paginii, primul punct in care se opreste privirea, prin contrast (doua culori diferite sau un text de dimensiune mai mare si unul mai mic), prin repetitie (plasarea aceluiasi element de mai multe ori), prin schimbarea proportiilor (o imagine mult mai mare fata de restul).

4. Culori
Asociatiile de culori:

-rosul este culoarea care stimuleaza cel mai mult
-portocaliul este de asemenea foarte activa si pentru faptul ca nu prea apare in
natura, tinde sa ne sara in ochi
-galbenul este asociat cu fericirea
-verdele inseamna crestere si bogatie
-albastrul are un efect calmant
-violetul este asociat cu puterea
-albul inseamna puritatea
-negrul inseamna forta

Dupa ce am ales culoarea de baza a sitului, pornim de la aceasta culoare.
Exista mai multe scheme de culori:
- monocromatica: se pastreaza culoarea de baza si se alatura mai multe nuante mai inchise sai deschise ale culorii
- analogica
- complementara
- triadica

La aceasta adresa se poate alege o buna schema de culori:

http://www.sessions.edu/color-calculator

Exemplu:
presupunem ca am ales culoarea de baza rosu, adica in cod hexazecimal: #FF0000
Schema monocromatica inseamna alegerea culorii de pe margine: #e662e2e.
Schema complementara inseamna alegerea culorii care se afla in opozitie pe roata
culorii, in cazul nostru verdele.
Schema analogica presupune alegerea culorilor adiacente de pe roata, adica alaturate
Schema triadica inseamna alegerea a inca doua culori, dar alaturate celei complementare pe roata culorilor.
O analiza buna a culorilor folosite poate fi facuta cu urmatoarea unealta:
http://juicystudio.com/services/luminositycontrastratio.php

5. Forme geometrice

Forma de baza este punctul. Din doua puncte se poate obtine o linie, din mai multe linii se pot obtine diverse figuri geometrice mai mult sau mai putin regulate, care pot fi folosite in pagina:

-bazat pe triunghiuri
-bazat pe cerc
-bazat pe triunghiuri si patrate rotite
-bazat pe patrulatere
de prof. Bogdan Boroghina