Designul site-ului

Odata parcursa etapa de planificare, avand clare audienta, scopul, obiectivele si specificatiile site-ului, puteti trece la etapa de creare efectiva. Pentru ca site-ul dumneavoastra sa aiba un aspect placut, o buna organizare, instrumente de navigare eficiente trebuie sa cunoasteti si sa aplicati regulile fundamentale de Web design.

Cand sunteti in faza de concepere a designului principalul dumneavoastra obiectiv este sa creati un aspect atractiv si sa oferiti vizitatorului site-ului un sentiment de satisfactie, pe masura ce acesta parcurge paginile. Designul unui site trebuie sa echilibreze performantele browserului, cu estetica si functionalitatea site-ului. In etapa de design sunt luate deciziile de ordin practic care vor conduce la indeplinirea obiectivelor stabilite: cate imagini sau elemente grafice veti include in pagina, cat de mult text vor contine paginile, ce texte sau imagini vor fi folosite drept legaturi.

1. Principiile designului web

Pentru a lua deciziile corecte in ceea ce priveste designul unui site trebuie sa aveti in vedere cateva principii de baza:

Asocierea semnificatiilor. Folositi-va de puterea hypertextului pentru a stabili legaturi intre informatiile inrudite ca semnificatie.

Mentinerea competitivitatii. Deoarece Web-ul este un mediu foarte competitiv, asigurati-va ca designul site-ului se mentine la cel mai scazut cost posibil, din punctul de vedere al vizitatorului. Acest cost include timpul de incarcare al paginilor, aplicatiile suplimentare necesare pentru vizualizarea optima a paginilor precum si efortul depus de vizitator pentru a intelege informatiile prezentate.

Folosirea eficienta a resurselor. Alegeti pentru site-ul dumneavoastra acele elemente care vin in intampinarea necesitatilor utilizatorului, si sunt cat mai eficiente posibil din punctul de vedere al dimensiunii fisierelor, al timpului de acces si al intretinerii ulterioare.

Concentrarea pe necesitatile utilizatorului. Acesta este, poate, cel mai important principiu de Web design si, paradoxal, cel mai adesea ignorat. Un site Web nu se construieste pentru a satisface gustul designerului (sau al clientului pentru care lucreaza) si nici pentru a etala cunostintele sale vaste asupra celor mai noi tehnici de programare Web, ci pentru a veni in intampinarea nevoii de informatii a vizitatorilor sai. Focalizarea asupra utilizatorului este prioritatea principala a unui site de calitate.

Intelegerea permeabilitatii. Acest principiu se refera la intelegerea si asumarea faptului ca vizitatorul poate accesa un site prin oricare pagina a sa. Din acest motiv este de dorit ca informatiile din cadrul unei pagini sa se auto-sustina fara a depinde de informatiile din restul site-ului. Daca acest lucru nu este posibil, este obligatorie prezenta unor instrumente de navigatie eficiente care sa permita vizitatorului orientarea cu usurinta in interiorul site-ului.

Crearea unui aspect placut, coerent si fluent.

Paginile site-ului trebuie sa ofere impresia unui tot bine organizat, elementele vizuale (icon-uri, elemente de navigare) trebuie sa fie coerente pe tot parcursul site-ului, fiecare pagina trebuie sa contina indicii asupra identitatii site-ului si asupra scopului ei.

Sustinerea interactivitatii. Chiar daca nu folositi formulare care asigura un grad inalt de interactivitate cu vizitatorii site-ului, este obligatorie prezenta unor informatii de contact (adresa de mail a Webmaster-ului, cel putin) astfel incat utilizatorii sa poata obtine informatii suplimentare sau sa poata comunica eventualele probleme aparute la parcurgerea site-ului.

Sustinerea navigatiei. Asigurarea unor instrumente de navigatie eficiente este una dintre conditiile esentiale ale unui site de calitate. Se spune ca un site bun este acela in care vizitatorul nu este niciodata obligat sa apese butonul Back al browserului.

2. Organizarea unui site

Buna organizare a site-ului este unul dintre elementele cheie ale succesului sau. Modul de organizare depinde de scopul, obiectivele si subiectul site-ului si se bazeaza pe principiile de design enuntate mai sus.

In functie de structura lor, site-urile se impart in mai multe categorii:

site-uri liniare, formate dintr-o singura pagina (mono-pagina)

site-uri liniare formate din mai multe pagini (multi-pagina)

site-uri cu structura ierarhica

site-uri cu structura de tip Web

Legaturile dintre pagini trebuie sa fie corespunzatoare tipului de site pe care il construiti.

Site-urile liniare mono-pagina

Acest tip de site este, asa cum indica si numele, format dintr-o singura pagina. Aceasta structura se foloseste atunci cand informatiile prezentate sunt sub forma de text care se poate imparti firesc in sectiuni mai mici. Vizitatorii pot parcurge intreaga pagina deruland-o dar, de obicei, la inceputul paginii exista o lista de legaturi care are rol de Cuprins. Acestea sunt niste legaturi interne (ancore) care conduc rapid vizitatorul la sectiunea care il intereseaza, fara a mai derula intreaga pagina. Impartirea continutului paginii in sectiuni mai mici se poate face folosind linii orizontale. Este indicat ca la fiecare noua sectiune sa inserati o legatura interna catre partea superioara a paginii unde se afla Cuprinsul.

Site-urile liniare multi-pagina

Structura de acest tip se foloseste in situatia cand informatiile prezentate se succed intr-o ordine secventiala, de la inceput la sfarsit, informatiile prezentate intr-o pagina bazandu-se pe cele din pagina anterioara. Pentru a-l indruma pe vizitator sa parcurga site-ul in ordine, fiecare pagina trebuie sa contina o legatura cu pagina urmatoare, precum si cu cea anterioara. De asemenea, este necesar sa inserati si o legatura cu prima pagina a site-ului care trebuie sa contina Cuprinsul, pentru a facilita si saltul direct la o anumita pagina. Intr-un site cu o astfel de structura paginile nu trebuie sa fie prea lungi (de dorit ar fi sa nu depaseasca un ecran) pentru a face navigarea mai comoda. Cu toate ca acest tip de organizare este logica, nu trebuie sa uitati principiul permeabilitatii. Pentru un vizitator care va intra in site printr-o pagina oarecare, indicatii de navigare cum ar fi 'Inainte' , 'Inapoi' ar putea sa nu aiba prea mult inteles.

Site-urile cu structura ierarhica

Site-urile de acest tip sunt cele mai numeroase pe Web. Un astfel de site este format dintr-o pagina de baza (Home) de nivel zero, care contine legaturi catre alte pagini, fiecare pagina continand cate o parte a subiectului site-ului. Fiecare dintre aceste pagini de nivel unu poate avea, la randul sau, legaturi cu alte pagini, detaliind subiectul si furnizand informatii specifice.

Un exemplu de site de acest tip este o librarie virtuala. Pagina Home ar putea contine legaturi catre diverse categorii: Beletristica, Istorie, Politica, Economie, Calculatoare si Internet. Daca un vizitator este interesat de un manual de programare in Perl, el va alege legatura catre Calculatoare si Internet si va ajunge intr-o pagina de nivelul unu unde va gasi legaturi catre Programare, Internet, Hardware. Va alege legatura Programare care va deschide o pagina de nivelul doi care va contine o lista de titluri, printre care si manualul cautat.

Atunci cand concepeti structura unui astfel de site, trebuie sa acordati o mare atentie organizarii logice si fluente a site-ului. Fiecare pagina trebuie sa contina o legatura catre pagina Home astfel incat vizitatorul sa poata reveni la inceput fara sa fie obligat sa strabata toate nivelele. Nu legati prima pagina de prea multe pagini de nivelul unu ci ramificati-le in adancime. Daca site-ul este de mari dimensiuni, introduceti in partea superioara a fiecarei pagini o bara de navigare care informeaza vizitatorul despre locul unde se afla. Revenind la exemplul cu libraria, un astfel de instrument de navigare ar putea arata asa: Home > Calculatoare > Programare.

In plus, este indicat sa oferiti o bara de navigare secundara la baza paginii.

Site-urile de tip retea.

Aceste site-uri au o structura libera. Ele sunt formate din mai multe pagini, fiecare putand avea legatura cu oricare alta pagina. Exista si aici o pagina Home, insa de la ea, vizitatorul poate naviga prin site fara a urma un drum precis. In general, acest tip de site este potrivit pentru subiectele care nu au o structura logica interna, subiecte recreationale sau distractive. Daca doriti sa creati un site de acest tip, trebuie sa aveti grija sa oferiti in fiecare pagina, pe langa legaturile cu alte pagini, o legatura catre pagina Home. In plus, asigurati-va ca materialul dumneavoastra este adecvat acestui tip de site deoarece altfel site-ul va purta amprenta neconcordantei intre subiectul abordat si modul sau de organizare.

3. Metodologia de construire a site-ului

Desi nu exista un mod unic de desfasurare a procesului de construire a unui site, exista trei tipuri de abordari posibile, pe care creatorul site-ului le poate alege sau combina, in functie de necesitati.

Metoda 'Top-Down'

Daca designerul are inca de la inceput o idee clara asupra continutului site-ului, aceasta abordare este cea mai potrivita. In acest tip de metodologie, este creata mai intai pagina de inceput a site-ului (pagina Home) si apoi celelalte pagini. Paginile pot contine un minim de informatii, urmand ca la dezvoltarea ulterioara a site-ului, ele sa fie imbogatite. Avantajul major al acestei abordari este acela ca permite continuitatea vizuala si de continut, deoarece toate paginile vor fi construite in acord cu pagina de start. O metoda foarte buna de a realiza acest lucru este crearea unor template-uri care sa contina acelasi tip de elemente pentru toate paginile si care vor fi folosite drept tipare la momentul scrierii codului HTML pentru paginile respective.

Metoda 'Bottom-Up'

Aceasta abordare se foloseste cand designerul nu cunoaste de la inceput care vor fi structura si aspectul final al site-ului, dar cunoaste aspectul si continutul unor pagini din cadrul sau. Aceasta situatie poate aparea cand doriti ca site-ul sa contina pagini deja existente, care au fost create in procesul de dezvoltare al altui site, de exemplu. Chiar daca nu detineti pagini create deja de la care sa porniti, aceasta abordare permite crearea unor pagini individuale care indeplinesc anumite obiective si care pot fi legate apoi de o pagina Home. Avantajul abordarii 'Bottom-Up' este acela ca, la construirea paginilor individuale, nu mai sunteti constrans la respectarea unui anumit stil, consecvent cu cel din pagina Home. Totusi, ajustarea ulterioara a paginilor in sensul realizarii unui aspect unitar, este necesara.

Metoda incrementarii

Aceasta metoda consta in construirea unei pagini de start si a unor pagini individuale legate de acesta, avandu-se in vedere crearea unor pagini intermediare, pe masura necesitatilor. Metoda se foloseste atunci cand este necesara construirea rapida a unui site care urmeaza a fi dezvoltat ulterior, in loc de a-l construi in intregime de la inceput. Este o metoda nerecomandata incepatorilor, deoarece prin adaugirile ulterioare exista riscul de a obtine un site defectuos organizat si lipsit de unitate.

4. Tehnici de design web

Pentru a realiza designul unui site sunt folosite o serie de tehnici cu ajutorul carora paginile capata contur, atat din punct de vedere vizual cat si din punct de vedere al organizarii legaturilor si al amplasarii continutului in pagini. In continuare sunt prezentate cateva dintre aceste tehnici, fiecare dintre ele referindu-se la cate un aspect al designului site-ului.

Schita site-ului

Odata ce v-ati decis asupra modului in care va fi structurat site-ul este foarte bine ca inainte de a incepe scrierea efectiva a codului HTML pentru fiecare pagina in parte, sa realizati o schita a intregului site.

Puteti folosi in acest scop Microsoft Word sau orice alt procesor de text. Pentru inceput creati un document nou in care listati punctele majore pe care doriti sa le acoperiti in pagina Home.

Faceti de asemenea o lista a elementelor grafice pe care intentionati sa le includeti, insotite de indicatii privind asezarea lor in pagina. Stabiliti care sunt paginile de nivel unu si ce informatii doriti sa oferiti in cadrul lor, precum si paginile subordonate acestora care vor cuprinde detalierea subiectelor anuntate in paginile de nivel unu.

Pentru a avea o imagine cat mai exacta a structurii site-ului inca din faza de schitare a sa este recomandat sa folositi bara de instrumente Outlining din meniul Tools > Customize din Word. Aceasta va permite sa stabiliti nivelul paginilor si sa realizati cu usurinta ramificarea lor in adancime.

O alta metoda pentru a realiza schita site-ului o constituie graficul (sau harta) site-ului. Daca nu doriti sa va complicati folosind un editor de text sau un program de grafica, puteti realiza o astfel de schita si pe hartie, cu creionul. Desenati cate un dreptunghi pentru fiecare pagina din site, specificand in interiorul sau scopul si obiectivele paginii, elementele si aranjarea lor in pagina. Apoi uniti dreptunghiurile prin sageti pentru a specifica traseele pe care le poate parcurge utilizatorul. Sagetile reprezinta de fapt legaturile dintre pagini. Aveti grija ca spre pagina Home sa indice toate sagetile, pentru a asigura astfel o legatura cu ea din orice pagina a site-ului. In acest mod puteti planifica pentru fiecare pagina ce urmeaza sa vada, sa inteleaga si sa faca vizitatorul acesteia, precum si unde se poate deplasa din pagina respectiva.

Oricare ar fi metoda folosita pentru a schita site-ul, la fiecare pagina trebuie sa va puneti urmatoarele intrebari:

Ce doresc sa afle vizitatorul din aceasta pagina?

Ce doresc sa faca vizitatorul in acest moment?

Ce doresc sa simta vizitatorul parcurgand pagina?

Unde doresc sa mearga vizitatorul in continuare?

Desigur, in ultima instanta comportamentul si impresiile vizitatorului scapa controlului designerului, insa un site in care fiecare pagina da raspunsuri clare si limpezi acestor intrebari are foarte multe sanse de a intruni aprecierile pozitive ale vizitatorilor sai.

Pagina de intrare in site (pagina splash)

Exista multe site-uri care inainte de pagina Home au o pagina de intrare in site, numita pagina splash. Scopul unei astfel de pagini este identificarea rapida a obiectului site-ului in timp ce se incarca restul de date. Pagina splash are pentru site acelasi rol pe care il are coperta unei carti sau prima pagina a unei reviste. Aceasta prima pagina trebuie sa se incarce rapid, sa aiba un impact vizual puternic si sa comunice esentialul despre subiectul site-ului sau compania careia ii apartine site-ul.

Exista opinii divergente in legatura cu folosirea si utilitatea paginii splash intr-un site. Mai ales daca face apel la elemente multimedia, sunet, grafica, animatie complexa care incetinesc timpul de incarcare, pagina splash poate aduce mai degraba deservicii site-ului. In plus, pagina splash poate fi resimtita de vizitator ca o bariera in accesul imediat la informatiile din interiorul site-ului.

Pagina Home

Desi aspectul si continutul paginii Home poate varia foarte multe de la un site la altul, exista cateva elemente comune prezente in orice pagina de start:

Identificarea firmei sau companiei careia ii apartine site-ul (daca este cazul)

Descrierea scopului site-ului

Descrierea structurii site-ului. Pagina Home are si functia de Cuprins al site-ului oferind indicatii vizitatorilor asupra subiectelor abordate

Stabilirea relatiilor intre sectiunile de nivel unu ale site-ului si cele subordonate lor. Aceasta se realizeaza prin intermediul barelor de navigare, butoanelor, hartilor de imagini sau listelor de legaturi.

Furnizarea informatiilor de contact.

Paginile din interior

Paginile de nivel unu reprezinta diviziunile majore ale subiectului general al site-ului. Exista tentatia de a include prea multe informatii detaliate la acest nivel. Daca site-ul acopera un subiect vast, cu o cantitate mare de informatii specifice, este bine sa lasati detalierea acestora pentru paginile de nivel doi. Paginile de nivel unu trebuie sa contina o descriere succinta a subiectului acoperit precum si legaturi catre paginile de nivel doi care detaliaza fiecare parte a subiectului. O tehnica des utilizata este plasarea resurselor suplimentare in pagini de nivelul trei. De exemplu o pagina de nivelul doi care ofera pe langa text si imagini explicative ale unui anumite notiuni poate fi legata de pagini de nivel trei care contin imaginile. Cand vizitatorul face click pe un anumit text aflat in pagina de nivel doi se deschide pagina de nivel trei cu imaginea explicativa. Avantajul acestei abordari este descongestionarea paginilor de nivelul doi care cuprind detalierea subiectului.

Schita dumneavoastra trebuie sa cuprinda, pe langa modul de organizare a paginilor, si o lista cat mai completa a elementelor pe care doriti sa le includeti in fiecare pagina (imagini, formulare, fisiere multimedia, etc.).

Fragmentarea informatiilor

Omul poate procesa o cantitate limitata de informatii intr-o anumita unitate de timp. Din acest motiv, una dintre sarcinile specifice in designul Web este fragmentarea informatiilor in secvente care sa nu depaseasca posibilitatile de cuprindere ale utilizatorului. Cantitatea de informatii cuprinsa intr-o pagina nu trebuie sa-l copleseasca pe vizitatorul paginii sau sa mareasca timpul ei de incarcare. De asemenea, modul de fragmentare al informatiei trebuie sa focalizeze atentia vizitatorului asupra principalelor subiecte abordate in pagina si sa il ajute sa ia cunostinta in mod gradat de subiectul prezentat. Fragmentarea corecta a informatiilor este in avantajul designerului, deoarece il ajuta sa creeze pagini reutilizabile. Daca fiecare pagina pe care o veti crea serveste la indeplinirea unui anumit scop, puteti include aceasta pagina fie direct, fie ca o resursa utila si in alte site-uri pe care le creati ulterior si care au subiecte conexe cu pagina respectiva.

In cadrul site-ului fragmentarea informatiilor conduce la stabilirea modului in care va fi detaliat subiectul, la determinarea numarului de pagini necesare pentru acesta precum si a nivelului paginilor. Desi divizarea subiectului in parti mai mici este o tehnica deosebit de utila, nu abuzati totusi de puterea hypertextului. O fragmentare excesiva a subiectului intr-un mare numar de pagini este la fel de obositoare ca si prezentarea acestuia in bloc. Un design eficient anticipeaza nevoia vizitatorului de a obtine informatii suplimentare si furnizeaza la momentul oportun legaturi catre paginile care detaliaza acel punct.

In cadrul unei pagini modul de fragmentare al informatiilor tine de logica interna a subiectului prezentat. Pentru a diferentia partile constitutive ale subiectului unei pagini o mare importanta o are organizarea textului in cadrul paginii.

Cei mai multi dintre cei care navigheaza pe Web obisnuiesc sa 'scaneze' paginile in cautare de informatii. Ei citesc mai intai titlurile, listele, si primele fraze dintr-un paragraf. Este bine sa tineti seama de acest lucru cand organizati textul in pagina.

Continutul paginii trebuie sa fie cat mai usor de citit. Folositi paragrafe scurte, despartite prin linii libere, evitati frazele prea lungi si folositi in mod judicios titlurile. Accentuati partile pe care vreti sa le scoateti in evidenta in text prin ingrosare sau scrierea lor cu alta culoare, dar nu in exces. Abuzul de culori sau de texte scrise cu caractere aldine fac pagina incarcata si greoaie. Este indicat sa va limitati la un numar redus de tipuri de font. Cele mai apreciate sunt Verdana si Arial, deoarece sunt lizibile si elegante. Este mai bine sa evitati folosirea tipului Times New Roman, desi este un tip foarte folosit in editarea de texte. Spre deosebire de textele tiparite, pe monitor citirea se face cu 25% mai incet deoarece monitorul adauga fonturilor un anumit grad de neclaritate (fuzziness), mai accentuat la fonturile cu serife, asa cum este Times New Roman. Nu aranjati textul in pagina pe doua coloane astfel incat vizitatorul sa fie nevoit sa revina in partea superioara a paginii pentru a citi ce-a de-a doua coloana. Acest format este potrivit pentru ziare si reviste dar nu si pentru o pagina Web deoarece rupe cursivitatea deplasarii in cadrul site-ului.

Legarea paginilor

Modul in care veti realiza legaturile dintre pagini depinde de structura site-ului. Daca optati pentru o structura ierarhica, legaturile din interiorul site-ului vor fi adaptate acestei structuri. Avantajul structurii ierarhice este ca ofera utilizatorului posibilitatea unei navigari logice, plecand de la informatiile generale catre cele particulare. Dezavantajul acestei tehnici este ca utilizatorul trebuie sa urmeze o cale prestabilita pentru a ajunge la o anumita informatie, care se poate afla cateva link-uri distanta de pagina Home.

O alta maniera de a realiza legaturile din interiorul site-ului este de a lega fiecare pagina de toate celelalte. Veti obtine astfel o structura ne-ierarhica care are avantajul ca fiecare pagina se afla la distanta de un link de oricare alta, inclusiv de pagina Home. Pentru site-urile de dimensiuni reduse o astfel de structura poate functiona bine, insa pentru site-urile cu un mare numar de pagini numarul de legaturi creste rapid iar navigarea in interiorul site-ului devine foarte dificila. In plus, utilizatorul nu are la dispozitie o cale ierarhica prin care poate ajunge la o informatie specifica.

Instrumentele de navigare

Pentru a realiza o navigare logica si eficienta in cadrul site-ului instrumentele de navigare trebuie sa fie perfect adaptate modului in care sunt create legaturile dintre pagini si in plus, sa ofere indicii vizuale asupra functiei lor. Pentru a crea un aspect vizual unitar al intregului site si pentru a nu deruta vizitatorul, este recomandat ca instrumentele de navigare sa fie aceleasi in toate paginile.

Stabiliti de la inceput aspectul icon-urilor, butoanelor sau textului pe care le veti folosi drept legaturi si pastrati-l pe parcursul intregului site. Aceasta tehnica ofera site-ului coerenta si unitate si stabileste imediat identitatea fiecarei pagini in cadrul site-ului. In plus, folosirea repetata a acelorasi elemente grafice de navigare mareste eficienta browserului deoarece acestea sunt incarcate la deschiderea primei pagini si stocate in memoria cache, fara a mai fi necesara incarcarea lor la fiecare noua pagina.

Instrumentele de navigare trebuie sa fie cat mai usor de inteles si localizat. Daca folositi o bara de navigare plasati-o acolo unde vizitatorii sunt obisnuiti sa o caute: in partea superioara a paginilor, in stanga sau in dreapta paginii. Folositi o bara secundara de navigare la baza paginii, aceasta il va ajuta pe vizitator sa se deplaseze intr-o alta sectiune a site-ului fara a mai fi nevoit sa deruleze pagina in sus pana la bara principala de navigare.

Daca site-ul este de dimensiuni mari este o idee buna sa creati o pagina speciala care sa reprezinte harta site-ului si sa plasati legatura catre ea in bara principala de navigare din cadrul fiecarei pagini. Aceasta va permite vizitatorului sa se orienteze in interiorul site-ului, oricare ar fi pagina prin care a intrat in site. Harta va contine legaturi catre toate paginile, grupate conform modului de organizare al site-ului.

De asemenea, daca folositi o structura ierarhica, este utila prezenta unui instrument suplimentar care sa informeze vizitatorul asupra locului unde se afla in cadrul site-ului si a caii prin care a ajuns aici, in maniera urmatoare:

Home > Pagina de nivel unu > Pagina de nivel doi > Pagina curenta.

Informatiile despre site si pagina curenta

Fiecare pagina a site-ului trebuie sa contina indicatii privind scopul si obiectivele site-ului precum si obiectivele specifice acelei pagini. In faza de planificare ati colectat informatii privind publicul tinta, ati formulat scopul si obiectivele intregului site. Acestea reprezinta elementele fundamentale in jurul carora este construit site-ul. Fiecare pagina a sa are drept scop indeplinirea unuia dintre obiective. Aceste informatii trebuie comunicate in pagina respectiva. Vizitatorul nu trebuie fortat sa ghiceasca ce rol are o anumita pagina in cadrul site-ului.

Multe site-uri prezente pe Web contin o pagina speciala cu informatii de contact precum si o pagina care contine informatii despre site si creatorii sai (pagina About). Totusi este recomandat ca aceste informatii sa fie incluse si in subsolul paginilor din interiorul site-ului. Este bine sa includeti aici informatii despre copyright, data ultimei reactualizari a paginii, despre organizatia sau compania careia ii este dedicat site-ul (daca este cazul) si informatii de contact (adresa de mail, numar de telefon, adresa postala).

Organizarea paginii cu ajutorul tabelelor

Unul dintre aspectele pe care trebuie sa le aveti in vedere la construirea unei pagini este rezolutia ecranului. Multi dintre vizitatorii paginii folosesc rezolutia de 800x600 de pixeli. O pagina cu latimea mai mare de 600 de pixeli poate face necesara derularea pe orizontala a paginii, care pentru multi vizitatori este obositoare si incomoda. Din acest motiv, este recomandat ca tot continutul paginii sa fie inclus intr-un tabel de baza cu latimea de 600 de pixeli.

Tabelul de baza

Construirea paginii incepe cu un tabel de baza, cu latimea (width) de 600 de pixeli, o linie si o coloana. Aliniati tabelul la marginea din stanga sau centrat in pagina. Setati chenarul (border) la valoarea '0' pentru a-l face invizibil pentru vizitator. Intregul continut al paginii va fi plasat in interiorul acestui tabel.

Asigurati-va ca ati setat culoarea de fond (bgcolor) pentru pagina dumneavoastra. Optiunea 'default' lasa browserul sa controleze culoarea fondului. De cele mai multe ori aceasta este alb, dar este mai bine sa aveti certitudinea ca ea va aparea la fel in orice browser, asa incat setati bgcolor='white' sau orice alta culoare doriti.

In functie de felul cum doriti sa va organizati site-ul si de scopul acestuia veti hotari unde doriti sa plasati bara principala de navigare.

Bara de navigare in stanga paginii

Daca ati decis sa optati pentru plasarea barei de navigare in partea stanga (cea mai uzuala asezare), veti include in tabelul de baza un tabel cu 2 sau 3 coloane.

Daca folositi un tabel cu 2 coloane setati distanta intre celule (cellpadding) la valoarea '4' pentru a spatia textul de marginea tabelului. Puteti specifica latimea celulelor fie in pixeli fie in procente.

Daca folositi un tabel cu 3 coloane, coloana din centru poate fi folosita ca 'tampon' , care va separa continutul coloanei din stanga de continutul celei din dreapta. Setati atributul border al tabelului la '0' pentru ca marginea sa nu fie vizibila. Odata stabilite aceste atribute, puteti adauga in tabel atatea linii cate sunt necesare sau puteti include un alt tabel in cel existent.

Bara de navigare in partea superioara

Pentru a construi o bara de navigare in partea de sus a paginii, trebuie sa includeti in tabelul de baza un tabel cu o singura coloana. Setati atributele cellpadding = '4' si border = '0'. In prima linie a tabelului veti introduce logo-ul sau titlul site-ului, in linia a doua veti afisa bara de navigare, iar pe liniile urmatoare, continutul paginii.

Bara de navigare in partea dreapta

Este o abordare mai putin utilizata. Cel mai adesea este folosita pentru paginile de tip catalog de produse, unde imaginile si descrierea produselor sunt plasate in coloana din stanga, care ocupa cea mai mare parte a spatiului.

Folosirea tabelelor pentru organizarea continutului paginii este o practica foarte folosita. Tabelele vor pastra imaginile si textul acolo unde le-ati plasat. Puteti include si alte tabele in interiorul celor pe care le-ati creat, in functie de modul in care sunt organizate informatiile si de aspectul pe care doriti sa il dati paginii.

5. Greseli de design

In procesul de creare a unui site pot aparea o serie de greseli de design, cele mai multe datorate nerespectarii tehnicilor si principiilor prezentate anterior.

Pagini fara legaturi ('fundaturi')

Una dintre cele mai frustrante situatii in care se poate gasi o persoana care navigheaza pe Web este o pagina fara instrumente de navigare si fara nici un indiciu privind site-ul caruia ii apartine. Desigur, site-ul din care face parte pagina poate fi localizat observand prima parte a adresei URL a paginii, care apare in bara de adrese a browserului. Dar a forta vizitatorul sa efectueze aceasta manevra este cu totul nerecomandat. Cel mai probabil acesta nu se va osteni sa caute pagina Home a unui asemenea site ci il va parasi definitiv. Evitati sa creati asemenea pagini.

Prezenta unor 'fundaturi' intr-un site denota faptul ca designerul nu a inteles caracterul permeabil al Web-ului si ideea ca un vizitator poate intra in site prin oricare pagina a sa. Pericolul construirii unor astfel de pagini apare mai ales in cazul site-urilor liniare multi-pagina, in care designerul doreste sa conduca vizitatorii de-a lungul site-ului pe un traseu liniar, prestabilit. Aceasta nu inseamna ca acest tip de site-uri nu trebuie folosit, mai ales daca informatiile prezentate sunt adecvate acestui mod de prezentare. Trebuie insa acordata atentie instrumentelor de navigare care trebuie astfel concepute incat vizitatorul sa poata ajunge cu usurinta cel putin la pagina Home. In plus, informatiile despre site si pagina curenta nu trebuie sa lipseasca din subsolul fiecarei pagini.

O variatie a acestor pagini de tip 'fundatura' o constituie paginile Home care ofera informatii prea putine sau lipsite de semnificatie. Destul de des pot fi intalnite pe Web pagini Home care nu ofera nici un fel de indicii asupra structurii sau continutului site-ului, fara a mai vorbi de scopul si obiectivele sale. Instrumentele de navigatie sunt absente, preferandu-se folosirea unor imagini sau texte cu prea putina semnificatie pentru a realiza accesul in diferitele sectiuni ale site-ului. Poate ca este o abordare avangardista, dar pentru marea majoritate a vizitatorilor este neplacut sa ajunga intr-o asemenea pagina asa incat este mai bine sa respectati regulile clasice de design prezentate.

Pagini 'uriase'

Daca paginile 'fundatura' ofera prea putine indicii vizitatorului, exista si reversul lor: paginile 'uriase'. Aceste pagini sunt incarcate pana la refuz cu informatii, liste, imagini, link-uri si alte elemente. Paginile de acest fel ridica doua mari probleme:

Timpul de acces. Mai ales daca pagina contine foarte multe imagini, timpul de incarcare al paginii poate fi foarte mare

Supraincarcarea cu informatii. Daca veti pune prea multa informatie intr-o singura pagina vizitatorul acesteia nu va fi capabil sa o proceseze.

Exista opinii care spun ca lungimea unei pagini nu ar trebui sa depaseasca un ecran pentru a se evita ca vizitatorul sa deruleze pagina pe verticala. O asemenea cerinta este prea drastica si poate fi adesea in dezavantajul prezentarii explicite a informatiilor. Fragmentarea subiectului trebuie sa se faca in functie de logica lui interna si nu de reguli arbitrare cum este marimea ferestrei browserului.

Exista situatii in care paginile lungi indeplinesc cel mai bine obiectivele urmarite. De exemplu, in paginile de prezentare ale unor produse, pe un site comercial, plasarea descrierii produsului pe doua sau mai multe pagini rupe cursivitatea prezentarii si se poate solda cu pierderea unor potentiali clienti. Analog, daca pagina contine o lista lunga de elemente inrudite, ruperea listei este arbitrara si dezavantajoasa. Pe de alta parte, aglomerarea de informatii la nivelul unei singure pagini, mai ales cand intre sectiunile paginii nu exista o legatura intrinseca face ca pagina sa apara ca un amalgam din care vizitatorul va extrage cu greu informatiile care il intereseaza.

Daca este necesar sa folositi pagini foarte lungi nu uitati sa oferiti pe parcursul paginii ancore care sa conduca vizitatorul la inceputul sectiunilor principale, precum si in partea superioara, respectiv inferioara a paginii. Daca pagina contine mult text nu o incarcati suplimentar si cu imagini sau cu elemente multimedia deoarece timpul de acces va creste foarte mult.

Excesul de elemente multimedia

Folosirea fara discernamant a elementelor multimedia (imagine, sunet, video) precum si folosirea in exces a celor mai noi tehnologii Web este adesea daunatoare pentru site. Daca va adresati unei audiente despre care presupuneti ca nu dispune de conexiuni rapide, de ultimele versiuni de browsere sau de aplicatiile necesare executarii si afisarii corecte a unora dintre elementele din paginile site-ului, este mai bine sa nu includeti aceste elemente.

Astfel, desi aplicatiile create cu Macromedia Flash sunt spectaculoase si se pot realiza efecte speciale deosebit de atractive, un astfel de fisier poate ajunge cu usurinta la dimensiuni care depasesc 1 megabyte, ceea ce incetineste considerabil viteza de incarcare a paginii. In plus, pentru vizualizarea corecta a acestora, vizitatorul trebuie sa descarce plug-in-ul Shockwave in cazul cand nu il are deja instalat pe computerul propriu. Este foarte neplacut pentru vizitator sa efectueze toate aceste operatii doar pentru a constata ca informatiile prezentate in aceasta forma puteau fi tot atat de bine prezentate ca text sau imagini obisnuite.

O solutie de compromis este aceea ca, simultan cu includerea unui astfel de fisier, sa se puna la dispozitia vizitatorului o optiune de 'eludare' de tip 'skip intro' , atunci cand prezentarile sunt folosite doar cu rol de splash screen, ca ecran de deschidere a site-ului, de exemplu.

In plus, folosirea prezentarilor Flash fara ca acestea sa serveasca unui scop bine definit nu face altceva decat sa distraga atentia vizitatorului de la subiectul site-ului.

O alta greseala destul de des intalnita este includerea fisierelor audio, fara ca acestea sa aiba legatura cu scopul site-ului. Exista designeri care considera ca furnizarea unei muzici de fundal sporeste atractivitatea site-ului. In realitate se intampla exact contrariul. In afara situatiei cand subiectul site-ului este legat de muzica sau cand fisierele de sunet vin sa completeze informatiile prezentate in pagini, muzica de fundal nu face altceva decat sa incetineasca incarcarea paginilor si sa-l irite pe vizitator, prin repetare. Daca este necesar sa includeti fisiere de sunet, lasati vizitatorului posibilitatea de a opta pentru deschiderea lor prin intermediul unei legaturi, mai ales in cazul in care este vorba despre fisiere de mari dimensiuni.

Este recomandat sa procedati la fel si in cazul fisierelor video, avertizandu-l pe vizitator ca pagina respectiva se va deschide mai greu.

Pagini inegale

Paginile inegale contin informatii foarte diferite ca importanta sau ca nivel de detaliere. Cel mai adesea se confrunta cu aceasta problema paginile Home in care sunt incluse link-uri catre noile pagini create in procesul de dezvoltare a site-ului. Este foarte usor sa cadeti in greseala de a include noile legaturi in pagina Home fara a mai respecta ierarhia stabilita in etapa de organizare a site-ului.

Daca site-ul la care lucrati necesita crearea unor noi pagini trebuie sa aveti in vedere plasarea acestora la nivelele specifice obiectivelor pe care le au precum si incadrarea la locul cuvenit in structura de legaturi a site-ului prezentata in pagina Home.

Legaturi fara semnificatie

Prezenta legaturilor fara semnificatie este, de asemenea, o greseala de design foarte frecventa. Probabil ati vazut de nenumarate ori in paginile Web formulari ca aceasta:

Pentru mai multe informatii apasati <A href='info.html'>aici</A>

Cuvantul 'aici' nu are in acest context, nici o semnificatie. O formulare mult mai potrivita ar putea fi urmatoarea:

Puteti obtine aici <A href='info.html'>mai multe informatii</A>

O alta situatie este aceea in care documentul indicat nu are legatura, din punct de vedere al continutului, cu pagina care contine referinta la el. Toate link-urile din cadrul unei pagini trebuie sa extinda continutul informational al paginii, vizitatorul care urmeaza o legatura asteptandu-se ca aceasta sa ii ofere informatii suplimentare despre subiect.

In aceeasi categorie se pot incadra si legaturile 'banale' , care nu imbogatesc prin nimic informatiile prezentate. De exemplu o constructie ca aceasta:

Bine ati venit in <A href='def.html'>Pagina</A> Home a Universitatii

unde documentul def.html contine definitia de dictionar a cuvantului 'pagina' , este o legatura 'banala' deoarece in acest context informatia oferita nu serveste nici unui scop. Pe de alta parte, intr-o pagina al carei subiect este vocabularul specific Web-ului, o astfel de definitie ar fi foarte importanta.

Un alt tip de legaturi fara semnificatie apare atunci cand fragmentarea informatiei este dusa la extrem prin folosirea unui numar foarte mare de link-uri. Subiectul este sectionat in parti foarte mici iar vizitatorul este obligat sa parcurga un mare numar de pagini in adancime pentru a pune cap la cap informatiile si a intelege sensul lor. O abordare de acest tip rupe cursivitatea subiectului si mareste efortul de a intelege si asimila al vizitatorului.

Pagini dezorganizate si stridente

Acest tip de pagini sufera din pricina lipsei de organizare a continutului. Chiar daca subiectul este impartit in sectiuni, unitatile de informatie sunt imprastiate in pagina fara o sistematizare prealabila care sa focalizeze atentia vizitatorului catre punctele importante. Aceste pagini au prea multe culori, adesea stridente, tipuri diferite de fonturi, sau imagini de fundal foarte incarcate. Adesea este folosita in exces animatia fara nici ca aceasta sa aiba vreo semnificatie sau legatura cu continutul paginii si muzica de fundal. Aspectul general al unor astfel de pagini este la fel de strident si tipator ca un decor de balci.

Concluzii

Construirea unui site necesita, pe langa o buna cunoastere a limbajului HTML, respectarea unor principii si folosirea unor tehnici consacrate. Site-ul trebuie sa fie orientat catre vizitator, catre intelegerea si satisfacerea nevoii de informatie a acestuia. Designul trebuie sa mentina un echilibru intre tehnologiile folosite si eficienta, asigurand o viteza convenabila de incarcare a paginilor si o vizualizare buna in cele mai populare dintre browsere. Aspectul site-ului trebuie sa fie in concordanta cu scopul si obiectivele sale, evitand excesele de orice fel.

Principiile care trebuie respectate in etapa de design sunt:

Asocierea semnificatiilor

Mentinerea competitivitatii

Folosirea eficienta a resurselor

Concentrarea pe necesitatile utilizatorului

Intelegerea permeabilitatii Web-ului

Crearea unui aspect placut, coerent si fluent

Sustinerea interactivitatii

Sustinerea navigatiei

Strategia de construire a site-ului poate urma una dintre metodele "top-down" , "bottom-up" sau metoda incrementarii.

In procesul de design, prima etapa o constituie schita site-ului care trebuie sa reflecte structura acestuia: liniara, ierarhica sau de tip Web.

Informatia trebuie fragmentata astfel incat sa nu depaseasca puterea de asimilare a utilizatorului.

Legaturile dintre pagini trebuie sa fie stabilite astfel incat sa permita o parcurgere logica a continutului site-ului, iar instrumentele de navigare trebuie adaptate modului in care sunt create legaturile dintre pagini, oferind indicii vizuale asupra functiei lor. Este recomandat ca instrumentele de navigare sa aiba acelasi aspect in toate paginile.

Nerespectarea principiilor si tehnicilor de design poate sa conduca la construirea unor pagini de tip "fundatura" , a unor pagini prea incarcate cu informatii sau, dimpotriva, a unor pagini inegale. De asemenea, printre greselile de design care pot aparea sunt legaturile fara semnificatie, excesul de elemente multimedia, paginile dezorganizate sau stridente.