Exista doua puncte de vedere principale din prisma carora majoritatea persoanelor hotarasc daca designul unui site web este “bun” sau “rau”. Exista unghiul ce tine strict de usurinta de folosire, care se axeaza pe functionalitate, prezentarea efectiva a informatiillor si pe eficienta. Apoi exista perspectiva pur estetica, ce se refera la valoarea artistica si atractia vizuala a designului. Unele persoane sunt prinse in estetica si grafica si uita de utilizator, in timp ce unii experti in practica se pierd in testari si uita de atractia vizuala. Pentru a ajunge la oameni si a le pastra interesul, este esential sa maximizati ambele elemente.
Cel mai important element pe care trebuie sa il aveti in vedere este ca designul inseamna comunicare. Daca realizati un site web care functioneaza si prezinta bine informatia, insa arata urat sau nu se potriveste cu brand-ul clientului, nimeni nu va dori sa il foloseasca. In mod asemanator, daca realizati un site atragator care este dificil de folosit sau inaccesibil, oamenii il vor parasi. Intr-adevar, elementele si functionalitatea unui design de site web finisat ar trebui sa functioneze ca o unitate unica si coherent, astfel incat:
Utilizatorii sunt incantati de design, dar atrasi catre continut
Una dintre cele mai mari griji din randul profesionistilor in practica este timpul de care au nevoie utilizatorii sa exploreze pagina dupa informatia pe care o doresc, fie ca este vorba de continut, de un link catre alta pagina sau de un formular. Designul nu ar trebui sa fie un impediment, ar trebui sa fie o legatura intre utilizator si informatie.
Un exemplu excelent de design care este in acelasi timp atragator dar si usor de folosit este Web Designer Wall. Ilustratiile bogat colorate curg in jurul structurii paginii, care este impodobita cu elemente de navigare si de site care parca ar fi taiate dintr-un caiet de schite. Abundenta de elemente lucrate manual si organice creeaza contrast si ajuta sa va atraga privirea catre continutul postarilor de pe blog, fara a interfera cu lizibilitatea paginilor sau cu modul in care este organizat.
Utilizatorii se pot misca cu usurinta prin intermediul navigarii intuitive
Vom vorbi mai tarziu mai mult despre plasarea modului de navigare, insa blocul principal de navigare trebuie sa fie foarte vizibil pe pagina si fiecare link ar trebui sa aiba o denumire descriptiva. O structura de navigare care isi schimba infatisarea atunci cand treci cu cursorul pe deasupra ei si indica pagina sau sectiunea active, ajuta utilizatorul sa recunoasca unde sunt si cum pot ajunge acolo unde doresc sa mearga.
Modulele secundare de navigare, modul de cautare si linkuri catre alte site-uri nu ar trebui sa fie elemente dominante ale paginii. Daca facem aceste elemente usor de gasit si le separam vizual de continut, le permitem utilizatorilor sa se concentreze pe informative, dar vor sti totusi unde sa caute atunci cand sunt gata sa treaca la alt continut.
Utilizatorii recunosc fiecare pagina ca apartinand site-ului
Chiar daca exista o diferenta dramatica intre layoutul paginii de start si restul site-ului, ar trebui sa existe o tema sau un alt stil comun in toate paginile site-ului pentru a pastra coeziunea designului.
Blocurile de continut desi sunt sectionate diferit, exista cativa indicatori vizuali care le spun utilizatorilor ca aceste pagini sunt din acelasi site. Aproape intreaga unitate se datoreaza repetitiei blocurilor de identitate si de navigare. Folosirea consecventa a unei foarte limitate palete de culori (negru, gri, galben si rosu) ajuta deasemenea la unificarea paginilor.
Anatomia unei pagini web
Chiar si din punctul de vedere al unui non-designer, definirea unui design care satisfice 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 posibilitati de a aranja cuvintele, numai cateva aranjamente au sens. Literele cu magneti sunt precum componentele sau blocurile dintr-o pagina web. Desi numarul de blocuri necesare depinde de marimea si de subiectul site-ului, majoritatea site-urilor au urmatoarele componente: Container, Logo, Zona de navigare, Continut, Subsol, Spatiu gol. Sa aruncam o privire asupra fiecareia dintre aceste componente:
Blocul container
Fiecare pagina web are un container. Acesta poate fi sub forma tag-ului body al paginii sau a unui tag div autocuprinzator. 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 logo-ul si la culorile existente in diferitele forme de marketing ale companiei, cum ar fi: carti de vizita, foi cu antet, logo-ul 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 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 vertical 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 layout-ului. Cel putin, toate elementele principale de navigare ar trebui sa apara in primul ecran vizibil la accesarea paginii – “deasupra indoiturii” (above the fold).
Deasupra indoiturii
“ Indoitura “ (the fold), asa cum o denumesc multi designeri, este zona in care se termina continutul unei pagini inainte ca utilizatorii sa fie nevoiti sa deruleze in jos pagina. Aceasta metafora provine de la indoitura unui ziar. Daca va uitati la pagina principala dintr-un ziar indoit, majoritatea titlurilor principale si a stirilor mari apar in jumatatea de sus, asa incat cele mai importante stiri sa poata fi vazute dintr-o privire atunci cand ziarul este indoit. Localizarea indoiturii pe o pagina web depinde de dimensiunile browser-ului si de rezolutia ecranului utilizatorului. La o rezolutie de 1024×768 de pixeli, luand in considerare tot spatiul ocupat de fereastra browser-ului sub forma taburilor, a butoanelor, a barei de adrese si a barei de status de jos – asa numitul “browser chrome “ – indoitura este de obicei la 500 pixeli de zona de sus.
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 contact sau legale, precum si cateva linkuri catre sectiunile principale ale site-ului. Prin separarea continutului in zona inferioara de zona de jos a ferestrei browser-ului, footer-ul ar trebui sa le arate utilizatorilor ca se afla la finalul paginii.
Spatiul gol
Termenul din designul grafic “whitespace” – spatiul gol sau spatiu negative – se refera la orice zona din pagina fara text sau ilustratii. In timp ce multi designeri web incepatori ( si majoritatea clientilor ) simt nevoia sa umple fiecare centimentru 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
Putem folosi blocurile standard din anatomia unei pagini web pentru a incepe dezvoltarea layout-ului. Chiar daca blocuri specifice fiecarui site intra in designul multor layout-uri, anatomia unei pagini web urmareste sa sintetizeze blocurile cel mai des intalnite.