Anatomia unei pagini web

Chiar si din punctul de vedere al unui non-designer, definirea unui design care satisface toate cerintele pe care le-am schitat anterior este o sarcina simpla. Se aseamana cu alcatuirea unei expresii pe frigider cu litere magnetice. Desi exista milioane de blocuri necesare depinde de marimea si de subiectul site-ului, majoritatea siteu-urilor au componentele: container, logo, zona de navigare, continut, subsol, spatiu gol.

Blocul container: Fiecare pagina web are un container. Acesta poate fi sub forma tag-ului body al paginii sau a unui tag div atotcuprinzator. Fara un oarecare container nu am avea unde sa punem continutul paginii noastre Elementele ar pluti in deriva dincolo de limitele ferestrei browser-ului si apoi intr-un spatiu gol. Latimea acestui container poate fi fluida, adica se extinde pentru a umple latimea ferestrei browser-ului, sau fixa, astfel incat continutul sa fie de aceeasi latime indiferent de marimea ferestrei.

Logo: Atunci cand designerii se refera la o identitate, se refera la logoul si la culorile existente in diferitele forme de marketing ale companiei, cum ar fi carti de vizita, foi cu antet, brosuri si asa mai departe. Blocul de identite care apare pe site ar trebui sa contina logoul sau numele companiei si sa fie plasat in partea de sus a fiecarei pagini a site-ului. Blocul de identitate creste recunoasterea brand-ului si in acelasi timp informeaza utilizatorii ca paginile pe care se afla apartin unui singur site.

Navigare: Este esential ca sistemul de navigare al site-ului sa fie usor de gasit si de folosit. Utilizatorii se asteapta sa vada zona de navigare chiar in partea de sus a paginii. Indiferent daca planuiti sa folositi meniuri verticale pe laterala paginii sau un meniu orizontal de-a lungul paginii, zona de navigare ar trebui sa fie cat mai aproape de partea de sus a layoutului. Cel putin, toate elementele principale de navigare ar trebui sa apra in primul ecran vizibil la accesarea paginii.

Continut: Continutul este regele. Un vizitator tipic al unui site web va intra si va parasi un site in cateva secunde. Daca vizitatorii nu pot sa gaseasca ceea ce ii intereseaza, fara indoiala ca vor inchide browser-ul sau vor trece la alt site. Este important sa mentineti blocul principal de continut ca punct de atractie al unui design, pentru ca vizitatorii sa poata explora pagina dupa informatia de care au nevoie.

Subsol(footer): Plasat in josul paginii, de obicei, footer-ul contine informatii legate de drepturi de autor, de contract sau legale, precum si cateva linkuri catre seciunile principale ale site-ului. Prin separarea continutului din zona inferioara in zona de jos a ferestrei browser-ului, footer-ul ar trebui sa le arate utilizatorilor ca se afla la finalul paginii.

Spatiu gol: Termenul din designul grafic “whitespace” – spatiu gol sau spatiu negativ – se refera literal la orice zona din pagina fara text sau ilustratii. In timp ce multi designeri web incepatori(si majoritatea clientilor) simt nevoia sa umple fiecare centimetru din pagina web cu fotografii, text, tabele si date, spatiul gol este la fel de important ca si continutul. Fara un spatiu gol planificat cu atentie, un design va da impresia de sufocant, ca o camera aglomerata. Spatiul gol ajuta un design sa respire prin ghidarea ochiului utilizatorului de-a lungul paginii, insa ajuta si la crearea echilibrului si a unitatii – doua concepte importante pe care le vom discuta detaliat pe parcursul acestor articole.

In acest punct, am avut deja intalnirea initiala cu dl. Smith, clientul nostru teoretic, iar acesta ne-a ajutat. A explicat in amanunt cu ce se ocupa firma sa si ce vrea sa realizeze site-ul sau. Desi inca nu am vazut continutul in site, putem folosi si blocurile standard din anatomia unei pagini web pentru a incepe dezvoltarea layoutului. Chiar daca blocuri specifice fiecarui site intra in designul multor layouturi, anatomia unei pagini urmareste sa sintetizeze blocurile cel mai des intalnite.

Acum ca avem aceasta informatie, cum o putem folosi pentru a crea un layout de baza pentru Smith’s Services? Este timpul pentru teoria grilei.