Designul paginilor Web este mai mult o chestiune de a echilibra puterea de asociere a legaturilor hypertext si abilitatea de a adauga elemente grafice si, eventual, animatii. Unele pagini de start sunt similare copertelor de carti sau de reviste. Ideea este de a atrage utilizatorul prin intermediul unei combinatii atente de descrieri textuale si elemente grafice interesante legate de subiectul abordat.
Cel mai eficient design pentru utilizatorii obisnuiti ai Internetului tinde sa utilizeze interfete ingrijite avand preponderent informatii text si elemente grafice de dimensiuni relativ reduse. Aceste pagini se vor incarca rapid si vor avea totusi un impact vizual substantial.
Trebuie sa tinem seama ca dimensiunile ecranului monitorului sunt de obicei mai mici decat cele ale unei pagini tiparite. Chiar daca paginile Web si documentele conventionale prezinta asemanari grafice, functionale si editoriale, ecranul computerului – care este primul loc de furnizare a informatiei prezente pe Web – nu se poate asemana deloc cu o pagina tiparita pe hartie.
Autorii de grafica electronica destinata site-urilor Web nu trebuie sa uite ca majoritatea utilizatorilor nu pot vizualiza la un moment dat decat 50-75% dintr-o pagina Web obisnuita si numai aproximativ 10% dintre cititori deruleaza pagina pentru a parcurge si continutul din partea inferioara a documentului. O greseala des intalnita este aceea de a insera elemente grafice in locuri care depasesc latimea normal a ecranului la rezolutia de 800×600 – cea mai des utilizata in prezent – sau 1024×768.
Elementele grafice ale paginilor Web nu trebuie sa fie mai mari de 535 de pixeli latime si 670 de pixeli inaltime; in caz contrar, imaginea va fi prea larga pentru a putea fi tiparita pe o foaie de format A4.
Utilizarea caroiajului
Asa cum un desenator tehnic foloseste hartia milimetrica pentru a realiza planse impecabile, la fel proiectantul unei pagini Web poate recurge la metoda caroiajului (grid-ului). Consecventa si posibilitatea de anticipare sunt atribute esentiale pentru un sistem de informatii bine proiectat, ajutand utilizatorii sa identifice originea si relatiile paginilor Web si furnizand un acces usor de anticipat la elementele de interfata. Caroiajul – utilizat si pentru proiectarea publicatiilor tiparite – este folosit si in realizarea documentelor electronice, disponibile online, unde relatia spatiala dintre elemente de pe ecran se modifica in mod constant ca raspuns la actiunile utilizatorului si la activitatea intreprinsa de sistem.
Cand sunt utilizate intr-o maniera inadecvata, in mod inconsecvent, elementele grafice si textuale ale paginilor Web pot genera confuzii, fara a oferi nici o ierarhie vizuala in functie de importanta. Acest nefericit efect de “pantaloni de clovn” determina un nivel scazut al utilizarii si lizibilitatii continutului, la fel ca in cazul paginilor tiparite, redactate neingrijit. Din contra, un caroiaj atent organizat, implementat consecvent in cadrul unui set de pagini, va ajuta utilizatorii sa gaseasca rapid informatiile dorite si va mari increderea cititorului ca foloseste o colectie de informatii judicios organizate.
Desigur, nu exista un sistem unic de organizare bazata pe caroiaj a informatiilor dintr-o pagina.
- In primul rand trebuie sa analizam care ar putea fi caroiajul de baza pentru toate paginile site-ului : locul continutului textual – titluri, subtitluri, textul tehnoredactat -, pozitionarea elementelor grafice cu rol in focalizarea atentiei (e.g.: ornamentatii grafice si ilustratii), aranjamentul legaturilor navigationale etc. Pentru aceasta trebuie colectate exemple representative de text si componente grafice (fotografii scanate, imagini de sinteza sau prelucrate electronic, ilustratii, pictograme si altele);
- Urmatoarea etapa este analiza diverselor modalitati de aranjare a informatiilor in pagina. Pentru proiectele Web complexe aceasta etapa ar putea fi reiterate deoarece este dificil de stabilit ca prima solutie este cea optima, modeland cel mai bine interactiunea dintre utilizator si pagina Web. Deseori, se realizeaza mai bine interactiunea dintre utilizator si pagina Web. Deseori, se realizeaza – manual sau computerizat – diverse schite ale aranjamentului elementelor Web;
- Scopul principal care trebuie urmarit este acela de a stabili o prezentare (layout) consistenta si logica a continutului destinat a fi prezentat pe ecran ceea ce va permite apoi atasarea de text si de alte informatii grafice/multimedia pentru fiecare pagina in parte, fara a mai realiza de fiecare data o analiza a site-ului de aranjare. Rezumand, proiectantul Web trebuie sa imagineze un sablon ferm de prezentare vizuala a continutului. Acest sablon, utilizand tehnicile caroiajului, va trebui utilizat pentru toate paginile dintr-un site sau dintr-un sub-site, in caz contrar designul global va avea de suferit, consecinta majora fiind distragerea vizitatorilor.
Desigur, pentru un anumit site putem sa ne inspiram din designul folosit in altul. Acest lucru se poate realiza optim prin analizarea caroiajului utilizat.
Anteturi si subsoluri de pagina
Trebuie sa reamintim faptul ca procesul de transfer al continutului documentelor de la serverul Web spre navigator necesita un anumit timp, astfel incat pagina isi construieste gradual impactul grapfic. Cea mai buna masura a eficientei designului unei pagini este data de numarul optiunilor disponibile utilizatorului in cei cativa centimetri din antetul acelei pagini. Incluzand in antetul paginii elemente grafice de mari dimensiuni, avand drept consecinta intarzierea incarcarii continutului propriu-zis, nu vom face decat sa determinam vizitatorul sa paraseasca site-ul si sa se indrepte spre adresele altor site-uri, mai usor de parcurs.
Astfel, trebuie sa gandim in termeni de ecrane de informatie si nu de pagini deoarece, dupa cum am vazut, Web-ul este un mediu special de interactiune. Cele mai bune solutii de proiectare adopta in cadrul antetului paginii o combinatie echilibrata de elemente grafice cu legaturi spre alte documente. O tehnica des folosita este cea a imaginilor senzitive (image maps), care insa trebuie dublate de legaturi text prezente in subsolul aceleasi pagini.
In ceea ce priveste subsolul paginii Web, acesta va contine informatii referitoare la originea si data ultimei actualizari a continutului. Desigur, aceste informatii nu sunt atat de importante pentru a fi plasate in antetul documentului, dar ele trebuie obligatoriu sa apara in subsol. De cele mai multe ori, subsolul va include si un meniu de legaturi navigationale de genul Pagina urmatoare, Pagina anterioara, La inceputul paginii, Inapoi la prima pagina etc. pentru site-ul unui magazin de comert electronic putem include o parte dintre legaturi cu Urmatorul produs ,Precedentul produs si Lista tuturor produselor.
Unele din sfaturile care pot fi aplicate in proiectarea si tehnoredactarea materialelor tiparite pot fi folositoare si in contextul designului Web:
- Aspectul aerisit al paginii poate fi dat si de stabilirea unor margini suficient de mari si de adaugarea de spatii intre anteturi si subsoluri de pagina si textul adiacent. De altfel, spatiile albe pot contribui foarte mult la realizarea unui design profesionist;
- Liniile lungi de text trebuie inlocuite cu mai multe coloane – maxim 3-4. Aceste coloane trebuie spatiate corespunzator;
- Se poate utliliza, de asemenea, diverse chenare (borders) pentru incadrarea unor zone din pagina – de exemplu, combinatii de linii orizontale si verticale (rules) sau casete de text (definite prin tabele sau proprietati CSS).
Designul continutului
Aspect tipografice ale continutului text
Acelasi text (adica aceeasi informatie) poate fi vizualizat intr-o multitudine de forme. O vizualizare diferita va avea drept consecinta un impact diferit asupra cititorului.
Unul dintre aspectele care trebuie luate in consideratie este cel al contrastului vizual dintre blocurile de text si zonele inconjuratoare ale acestora. Ochiul si mintea vizitatorului sunt atrase de contrastul ferm si de formele distincte oferite de o pagina Web. O pagina ocupata exclusiv de informatiile text dense nu va fi perceputa decat ca o imensa pata cenusie, lipsita de orice urma de contrast vizual. Uniformitatea excesiva nu va atrage atentia utilizatorilor. La fel, daca toate propozitiile sunt scrise cu caractere italic ori aldine (ingrosate), vizitatorul nu va mai percepe care informatie este cu adevarat importanta pentru el.
Punctul-cheie este economia de mijloace. Folosind fara discernamant zeci de proprietati CSS aplicate asupra continutului unei pagini Web, nu vom obtine decat un “vacarm” vizual, in care fiecare element este tratat ca fiind solist intr-o “ orchestra” a formei si continutului.
Utilizarea majusculelor
In ceea ce priveste aspectul vizual al textului, trebuie in primul rand sa avem in vedere faptul ca oamenii citesc in principal prin recunoasterea formei generale a cuvintelor, nu prin analizarea fiecarei litere in parte. Scrierea intregului text cu majuscule va conduce la dificultati in parcurgerea acestuia, deoarece cuvintele compuse exclusiv din litere majuscule formeaza dreptunghiuri monotone care ofera un contrast mai putin accentuat decat formele determinate de alternanta dintre majuscule si minuscule. Titlurile scrise doar cu majuscule ocupa mai mult spatiu decat aceleasi titluri avand in componenta combinatii de minuscule si majuscule. De asemenea, folosirea inutila a majusculelor poate crea confuzii. Asadar, trebuie sa evitam utilizarea majusculelor in situatiile cand nu sunt strict necesare.
Dimensiunea
Marimea corpului de litera folosit conteaza foarte mult in asigurarea lizibilitatii continutului. Trebuie evitate liniile lungi, scrise cu caractere de dimensiuni reduse, deoarece ele necesita numeroase deplasari ale ochilor de la stanga la dreapta, fapt care oboseste cititorul. De asemenea, nu se vor scrie linii scurte compuse din caractere de dimensiuni mari, pentru ca ele de obicei sunt caracterizate de o spatiere neregulata a cuvintelor. De cele mai multe ori, designul Web impune utilizarea unor corpuri de litera de dimensiuni reduse – uzual, de la 8 pana la 12 puncte tipografice (pt). Titlurile pot fi scrise cu caractere de la 14 sau 16 pt. Daca folosim proprietatea CSS font-size vom utiliza o unitate de masura relativa la corpul de litera curent si nu una absoluta, deoarece dimensiunea fontului depinde de rezolutie si monitor. De exemplu, pe platforma XWindow (din Unix) corpurile de litera vor parea mai mici decat sub Windows.
Tipul corpului de litera
Tipurile corpului de litera se refera la aspectul visual al reprezentarilor simbolurilor (litere, cifre, semne speciale) pe ecran sau la imprimanta. Aceasta reprezentare poarta numele de corp de litera sau de font.
Desi numarul de caractere este acelasi (de exemplu, codul ASCII classic include maximum 128 de caractere care pot fi codificate intern prin numere), formele reprezentarii acestora pot fi teoretic infinite. Corpurile de litera se impart in familii, iar fiecare tip de font se bucura de diverse proprietati (i.e. marime, spatiere intre caractere sau culoare) sau de maniere de afisare (fonturi ingrosate – bold, italic sau oblice). Deosebirea dintre fonturile oblice si cele italic este aceea ca in cazul fonturilor italic sunt redesenate toate formele prin care se reprezinta un anumit caracter – succesiunea caracterelor italic sugereaza scrisul de mana. Cele oblice (denumite si inclinate) provin din forme obisnuite care sunt inclinate cu un anumit grad.
Familiile importante de corpuri de litera sunt:
- Cu serife (e.g.:Times, Garamond, Bodoni, Minion Web) – fiecare reprezentare (glyph) include adaugiri sau tuse finale care contribuie la o buna lizibilitate in cazul tiparirii, mai ales prin contrastul puternic dintre fonturile obisnuite si cele ingrosate;
- Fara serife – sans-serif (e.g.: Arial, Helvetica, Verdana, Univers) – formele caracterelor nu include serife, neavand nici un fel de adaugari suplimentare, fiind indicate pentru afisarea pe ecran. Ofera un contrast mai putin intens intre corpurile de litera obisnuite si cele aldine;
- Cursive (e.g.: Zapf-Chancery, Caflisch Script, Adobe Poetica, Zurich Calligrafic) – ofera o reprezentare a corpurilor de litera sugerand scrisul de mana sau cu pana, formele caracterelor putand fi partial sau complet conectate una cu cealalta. Pentru dimensiuni reduse a caracterelor, aceste tipuri de fonturi devin ilizibile;
- Decorative – fantasy (e.g.:Critter, Cottonwood, Star Down etc.) – pot contine reprezentari ale caracterelor sau alte forme asociate fiecarui simbol (i.e. Webdings). Trebuie utilizate cu moderatie;
- Monospatiate – monospace(e.g.:Courier, Prestige, Everson Mono) – se bucura de proprietatea ca fiecare reprezentare a unui caracter are aceeasi inaltime si latime, spre deosebire de familiile anterioare care cuprindeau fonturi spatiate proportional (de exemplu, litera “I” are latimea mai mica decat “m” in cazul unui corp de litera spatiat proportional). Deoarece sugereaza prin forma lor masina de scris, fonturile din aceasta categorie sunt folosite pentru afisarea fragmentelor de cod-sursa dintr-un limbaj de programare.
Dupa cum se observa, cele mai potrivite tipuri de fonturi care trebuie utilizate in cadrul paginilor Web sunt cele fara serife. De altfel, majoritatea site-urilor actuale folosesc Arial sau Helvetica.
Gruparea si aranjamentul
Gruparea cuvintelor in cadrul unei linii de text este foarte importanta. La fel, aranjarea pe randuri a textului.
Spatierea
Dupa alegerea corecta a tipului de font si a dimensiunii acestuia, trebuie aleasa spatierea liniilor de text. Acest lucru se realizeaza prin intermediul proprietatii line-spacing, pusa la dispozitie de CSS. O spatiere prea mica va conduce la diminuarea contrastului vizual al paginii, insa nu trebuie sa trecem in extrema cealalta.
Un alt aspect important il reprezinta spatierea dintre paragrafe sau dintre paragrafe si titluri/subtitluri. Folosind proprietatile CSS – e.g. : margin-top si margin-bottom – se poate alege o spatiere precisa, coerenta pentru toate paginile Web ale site-ului.
Alinierea
Asigurarea unei alinieri corecte conduce la un design elegant. Trebuie sa tinem cont de faptul ca alegerea modului de aliniere depinde de:
- Mesajul dorit a fi transmis cititorului – textul aliniat la stanga este considerat a fi mai prietenos, mai putin formal si mai deschis decat cel aliniat complet (justify). Textul aliniat complet , si la stanga si la dreapta, este utilizat pentru a sugera un stil clasic, plin de seriozitate, putand fi folosit incazul cartilor online.
- Lungimea liniilor (coloanelor), textul dispus pe coloane de latime redusa nu trebuie aliniat complet, mai ales in cazul folosirii unor corpuri de litera de dimensiuni mai mari, deoarece conduce la o spatiere inegala intre cuvinte.
- Lizibilitatea, desi nu exista o parere unanim acceptata, se considera ca alinierea la stanga si spatierea unitara a cuvintelor ofera cititorilor mai mult confort la parcurgerea textului fata de textul aliniat complet.
De retinut ca paragrafele sau titlurile de lungimi mari aliniate la dreapta sau centrate sunt mai dificil de parcurs decat cele aliniate la stanga. De asemenea, subtitlurile vor fi centrate doar atunci cand coloanele de text sunt aliniate complet pentru asigurarea unui contrast vizual puternic. Daca textul este aliniat doar la stanga, atunci si subtitlurile se vor alinia tot la stanga. Subtitlurile pot atrage atentia utilizatorului si prin variatii de culoare, spatiere sau dispunere spatiala in cadrul paginii.
Identarea
Pentru a face deosebirea intre anumite zone de text, se poate utiliza indentarea diferita a textului fata de titluri/subtitluri. Aceasta se poate realiza prin intermediul tabelelor de latimi diferite sau cu ajutorul proprietatilor de stil (e.g. : margin-left, margin-right). O alta tehnica folosita este cea a liniilor orizontale sau a chenarelor (se pot utiliza marcatorul „hr” sau setul de proprietati CSS border).
Utilizarea titlurilor si subtitlurilor.
Un design bun al unei pagini Web nu va folosi fara discernamant pictograme, banner-e grafice, fundaluri colorate, ilustratii (clip-art-uri) sau alte ornamentatii. Captarea atentiei vizitatorilor se va face prin utilizarea titlurilor si a subtitlurilor, similar metodei utilizate pentru materialele tiparite. O abordare consistenta a modului de pozitionare, aliniere si afisare a acestora va avea drept consecinte facilitate parcurgerii continutului si usurinta de navigare.
La prima vizita pe pagina, privirea cititorului va baleia doar textul, oprindu-se asupra titlurilor, subtitlurilor si a sumarelor de articole, asadar trebuie sa acordam o atentie speciala acestor elemente ale continutului. Astfel , titlurile si subtitlurile vor trebui sa nu fie vagi, continand cuvinte lipsite se semnificatie sau prea lungi. Titlurile si subtitlurile vor avea un corp de litera diferit, in general fiind caracterizate de un stil care contrasteaza cu aspectul paragrafelor avand informatii de continut.
Titlul paginii. Dupa cum am mai amintit, titlul paginii Web trebuie ales cu grija, numele organizatiei si/sau subiectul tratat de acea pagina fiind obligatorii. Titlul trebuie sa fie suficient de scurt pentru a putea fi parcurs chiar si daca fereastra navigatorului este minimizata.