Tehnici de web design

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.

Structura(schita) site-ului

Odata ce s-a decis 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 se realizeze o schita a intregului site.

O metoda pentru a realiza schita site-ului o constituie graficul (sau harta) site-ului. Se deseneaza cate un dreptunghi pentru fiecare pagina din site, specificand in interiorul sau scopul si obiectivele paginii, elementele si aranjarea lor in pagina. Apoi se unesc dreptunghiurile prin sageti pentru a specifica traseele pe care le poate parcurge utilizatorul. Sagetile reprezinta de fapt legaturile dintre pagini. In acest mod se poate planifica pentru fiecare pagina ce urmeaza sa vada, sa inteleaga si sa faca vizitatorul acesteia, precum si unde se poate deplasa din pagina respectiva.

Pagina de intrare in site (pagina intro)

Exista multe site-uri care inainte de pagina Home au o pagina de intrare in site, numita pagina intro. 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 intro intr-un site. Mai ales daca face apel la elemente multimedia, sunet, grafica, animatie complexa care incetinesc timpul de incarcare, pagina intro 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.

Referat: Istoria Microsoft - fondata in 1975 de catre Bill Gates si Paul Allen Referat: Limbaje de programare - limbaje specifice

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).

A.     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.

A.     Greseli de web design

n 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.