Creare site web – Practici si principii de web design

A. CREARE SITE WEB – Practici si principii de web design

Etapa de creare site web presupune multa munca si mult timp acordat documentarii, cercetarii, crearii designului, implementarii acestuia si in final, testarii. Un site web considerat de succes va fi un site util, relevant si nu in ultimul rand va avea un design reusit. Site-urile reusite nu se realizeaza intamplator. Dar ce inseamna un web design reusit?
Daca fiecare proiect in parte se va realiza in functie de nevoile si obiectivele stabilite, exista cateva practici (sau principii) care sunt universal valabile pentru crearea oricarui site web. Le vom enumera pe aceastea astfel incat procesul de creare site web sa fie unul mai usor plecand de la cateva principii de baza:

• Trebuie sa avem conversiile in minte – orice tehnica de web design se va aplica si dincolo de estetica. Desigur, un site web trebuie sa fie atractiv, dar trebuie sa ne gandim la utilizatorii finali care nu vor accesa site-ul pentru a il admira, ci pentru a gasi anumite informatii sau pentru a indeplini o anumita actiune.
Un site web de succes se traduce printr-un site care intelege nevoile utilizatorilor, de aceea prin web design, vizitatorii trebuie condusi catre actiunile pentru care navigheaza pe respectivul site. Avand acest principiu in minte, nu putem ignora potentialul pe care il au elementele de web design centrate pe conversie.
Orice aspect al designului poate juca un rol in convertirea simplilor vizitatori in clienti. De exemplu, imaginile, culorile, continutul scris, dar si navigarea sunt protagonistii unui site web care poate fi de succes. Atat timp cat imaginile sunt calitative si unice, culorile sunt atractive si contrastante, textele includ descrieri si instructiuni , iar navigarea este cursiva si placuta nu exista motive pentru care vizitatorii unui site web sa aiba intentii de abandon.
Dar cum stim cat de eficiente sunt tehnicile de web design aplicate? Cea mai simpla metoda este testarea A/B. Daca suntem in dubii, vom recurge la testarea a doua variante de design pentru a masura care dintre ele produce rezultate mai bune, respectiv mai multe conversii.

• Folosirea cu incredere a spatiului liber – un web design eficient inseamna de multe ori, un design aerisit si curat. Iar obtinerea acestuia nu se poate realiza fara sa avem in vedere spatiile albe care, pe de o parte ajuta la o mai buna distingere a elementelor unui site web, iar pe de alta parte, permit utilizatorilor sa “respire”.
Procesul de creare site web va incepe si se va desfasura cu gandul la utilizatorii sai. Un layout incarcat va crea confuzii, va fi greu de descifrat si va duce in final la abandonul website-ului. In acelasi timp, spatiile libere adecvate dintre elementele unei pagini web permit o mai buna inteligibilitate a textelor care inseamna adesea o experienta a utilizatorului (UX) reusita.
Spatiile libere folosite in crearea unui site web ofera tuturor elementelelor de web design atentia cuvenita. De exemplu, prin efectul de parallax scrolling, toate imaginile din prim plan vor capta atentia. Insa pentru ca aceste elemente sa aiba un impact pozitiv cand apar, e nevoie de o buna sincronizare si de folosirea eficienta a spatiului liber.

• Typography – e o componenta indispensabila in procesul de creare site web sau in orice alt proces de web design. Oricat de reusite pot fi clipurile sau imaginile unui site, nu putem sa ignoram puterea pe care o detine continutul scris in online.
Daca vreme de cativa ani buni, majoritatea site-urilor erau limitate la folosirea “fonturilor sigure” precum Arial, Verdana, Times New Roman, Georgia, Tahoma etc., in ultimii ani extinderea posibilitatilor de alegere sau de personalizare a unor fonturi deosebite (prin @font-face, de exemplu) permite crearea unui stil unic de typography.
Prin aceasta metoda, fisierele de fonturi pot fi incluse impreuna cu imaginile in designul unui site web. Desigur, chiar si asa, e nevoie sa intelegem clar ce tip de font (cu serife sau fara serife) se potriveste cu domeniul de activitate pe care il va reprezenta respectivul site web.
Typography nu inseamna doar selectia fonturilor, ci si potrivirea dimensiunei, a culorilor, a inaltimii literelor, a spatiului dintre caractere si cuvinte si multe altele. Iar mai presus de toate, typography reprezinta arta de a face continutul scris inteligibil si atractiv.

• Adaugarea elementelor strict necesare – simplitatea este o regula de aur in web design. Iar procesul de creare site web va avea loc cu acest principiu in minte. Un design reusit se realizeaza atingand proportia perfecta dintre contintul vizual si cel scris, adica cu alte cuvinte un proiect din care nu lipseste nimic si nici nu are vreun element in plus.
Adaugarea unor elemente sau unor bucati de continut care sunt necesare pentru succes este acceptata, insa multe elemente creeaza sentimentul de dezordine si de ambiguitate in loc de claritate. Asadar, in loc sa ne gandim ce-am mai putea adauga, putem sa ne uitam ce avem deja si ce putem inlatura astfel incat designul sa fie aerisit, clar si placut.
Aceste principii de baza pot simplifica procesul de creare site web astfel incat acesta din urma sa isi indeplineasca telul, oricare ar fi el. Trebuie sa retinem ca asteptarile pe care le avem de la un site web trebuie sa fie exprimate, intr-un fel sau altul prin tehnicile si principiile de web design.

B. CREARE SITE WEB – notiuni de baza

Sunt multe aspecte de luat in calcul cand vine vorba de web design, mai ales in procesul de creare site web, de la utilizarea unui wireframe pentru a desena un schelet si ideea de baza a unui site web si pana la alegerea potrivita a culorilor, a typography sau a dimensiunii site-ului etc.
Lumea web designului este vasta, tendintele in web design vin si se duc si intotdeauna apare o noua modalitate de a indeplini o sarcina.
Iata care sunt notiunile de baza si de ce anume vom tine cont in etapa de creare site web:

1. Wireframe/ structura – reprezinta un ghid vizual si functioneaza mai mult inutitiv petru a ne da seama cum va arata scheletul unui site web. Elementele acestuia sunt: designul informatiei, designul navigarii si designul interfetei.

2. Designul si layoutului – este faza cea mai complexa a procesului de creare site web in care vom tine seama de ideea de la care am pornit, de schita unui framework, de adaugarea unui caroiaj fisierului PSD, de impartirea layoutului, de alegerea typography si de selectarea schemei de culori. Dupa ce am stabilit toate acestea vom regandi totul ca un intreg si vom imbunatati aspectele ce necesita remedieri.
In crearea designului unui site web trebuie sa tinem cont de browserele care vor fi folosite pentru accesarea sa (Google Chrome, Internet Explorer, Mozila Firefox, Safari, Opera), de dispozitivele folosite (telefoane, tablete, desktopuri etc.), respectiv de rezolutiile ecranelor acestora. Majoritatea utilizatorilor au rezoltuii de minimum 1024×768 de pixeli pe ecranele dispozitivelor pe care le folosesc.
De asemenea, la fel de important este si typography in web design. In functie de domeniul afacerii care necesita site-ul se vor alege si fonturile potrivite: cu serife sau fara serife, dar si dimensiunea adecvata a acestora si distanta potrivita intre caractere astfel incat sa obtinem inteligibilitatea textului din continutul site-ului.
Nu in ultimul rand vom tine seama de importanta unui design responsive – pentru a nu fi nevoie de crerea unei alte versiuni a site-ului speciala pentru dispozitivele mobile. Mai mult de 60% dintre utilizatori folosesc mobilele pentru a accesa Internetul, dintre care aproximativ 70% fac cumparaturi online, iar mai mult de 40% isi planifica concediile in acest fel. Imposibilitatea de a accesa un site de pe mobil reprezinta pierderea unor clienti valorosi.
De asemenea, intreg designul nu se va crea tinand cont doar de aspect, ci mai ales de functionalitate si de experienta pe care i-o ofera utilizatorului. A aparut in scena termenul de UX design – o componenta esentiala a procesului de web design pe care nu o putem neglija nici in actul de creare site web. Asa ca designul se va axa pe experienta utilizatorului, tinand cont de faptul ca vizitatorii nu au timp sa citeasca intreg continutul ci mai degraba scaneaza site-urile.
Vom mentine un echilibru intre creativitate si modelele cu care acestia sunt obisnuiti.

3. Navigarea – utilizatorii vor mai degraba sa acceseze rapid informatia decat sa aiba mai multe optiuni intr-un design interactiv al navigarii. De aceea, accentul se va pune pe accesibilitate si usurinta de folosire in constructia meniului de navigare. De asemena, vom tine cont de arhitectura informatiei incluzand elemente comune si usor identificabile de catre vizitatori: homepage, produse/servicii, despre, contact, dar si alte pagini relevante pentru afacerea respectiva.

4. Continutul – de cele mai multe ori este cel care face diferenta intre un utilizator care ramane pe pagina accesata si unul care se grabeste sa abanoneze. Continutul unic, original, informativ, educativ si relevant este util atat pentru optimizare SEO (motoarele de cautare interepretand relevanta continutului) cat mai ales pentru mentinerea vizitatorilor pe un site web.

5. Usurinta de utilizare si accesibilitatea – oricat de aratos este designul unui site web, daca nu poate fi accesat si folosit cu usurinta este inutil. In acest sens, vom evita tehnicile de publicitate agresive (ferestre pop-up) care ingreuneaza incarcarea site-ului si care intrerup navigarea utilizatorului. Tot in acelasi context, vom optimiza imaginile si codul sursa pentru a ne asigura ca site-ul se incarca rapid. O intarziere de o secunda duce la abandonul paginii respective.

6. Optimizare SEO – este un proces continuu care incepe in momentul in care incepe etapa de creare site web si se creeaza URL-urile tuturor paginilor, metadata, meta tags, descrierile meta si atributele ALT ale imaginilor. Apoi se va optimiza intreg continutul tinandu-se cont de cuvintele cheie relevante pentru site cu ajutorul carora vizitatorii il gasesc mai usor.
Desigur, asa cum anunta si titulul, notiunile acestea sunt fundamentale. In realizarea unui site web vom tine cont de mult mai multe lucruri, in functie de nevoile fiecaruia, dar mai ales de asteptarile utilizatorului final. De aceea, niciodata nu incepem procesul de creare site web fara sa stim exact obiectivele acestuia (masurabile) si publicul caruia i se adreseaza.

C. CREARE SITE WEB – integrarea meniurilor de navigare in designul responsive

Obtinerea unui design responsive este o etapa ce nu poate fi ignorata in procesul de creare site web, dar si in aproape orice produs digital care se creeaza in prezent. Un produs digital cu web design responsive nu numai ca ofera tuturor utilizatorilor posibilitatea de a il folosi dar ajuta inclusiv la procesul de optimizare SEO.
Pe langa beneficiile evidente pe care le aduce implemetarea unui design responsive, exista si cateva aspecte ce necesita eforturi suplimentare. Unul dintre acestea este crearea sistemelor de meniu intrucat este destul de dificil de a afisa meniuri complexe intr-un mod eficient si pe ecrane mici si pe ecrane mari. De aceea e nevoie de un plan inainte de a incepe etapa de creare site web astfel incat rezultatul final sa poata fi utilizat indiferent de dispozitiv, browser sau sistem de operare.
Mai jos vom insira cateva recomandari care pot ajuta la integrarea meniurilor in designul responsive ce vor asigura in acelasi timp si o navigare usoara:

• Folosirea meniurilor de tip drop-down (lista) – acestea ofera posibilitatea de a manevra strutura complexa a continutului. Insa, intrucat dispozitivele cu touch screen au caracteristici limitate, aceste meniuri trebuie manevrate cu multa precizie. Asadar:
– Vom urmari o structura cu care utilizatorii sunt familiarizati – putem afisa continutul intr-o maniera clara. Utilizatorii vor putea sa gaseasca informatiile prin drop-down accesand doar optiunea necesara. In acest mod li se va oferi utilizatorilor o vizualizare exacta a continutului dorit si va fi accesibil indiferent de dispozitivul folosit.

– Vom tine cont de dimensiunea degetelor – nu putem ignora faptul ca accesarea unui link sau a unui element se va face prin apasare (cu degetul), iar daca utilizatorii se chinuie sa acceseze cu siguranta vor abandona respectivul site web. Pentru a evita aceasta, cel mai bine este sa abordam dimensiune ideala astel incat accesarea sa fie cursiva si usoara.

• Folosirea casutelor (butoane) – Navigarea unui site web de pe desktop e mult mai usoara si mai convenabila decat cea de pe dispozitivele mobile. De aceea, abordarea ideala in procesul de creare site web cu design responsive necesita convertirea tuturor elementelor din bara de navigare in casute si distribuirea verticala a lor. Este metoda cea mai potrivita pentru meniurile cu cateva butoane, intrucat pentru o lista mai mare de butoane este nevoie de scroll.
Unde putem plasa meniul vertical de navigare?
– Daca dorim sa mentinem nivelul continutului in partea de sus putem permite utilizatorilor sa exploreze site-ul pas cu pas si sa extraga ce doresc. Aceasta abordarea va asigura o interfata simpla si intuitiva si le va permite vizitatorilor respectivei pagini web sa navigheze intr-un mod convenabil.
– Daca dorim sa mentinem nivelul continului in partea de jos utilizatorii vor fi nevoiti sa parcurga pagina de aterizare (landing page) pentru a vizitat oricare dintre paginile site-ului. Prima data utilizatorul va observa antentul iar apoi restul continutului unui site web si in final a putea accesa bara de meniu. In acest fel poate decide mai bine unde vrea sa ajunga.

• Folosirea meniurilor cu pictograme – reprezinta o alta solutie destul de des abordata in etapa de creare site web. Avantajul acestora este ca ofera o experienta deosebita utilizatorilor de dispozitive mobile. In acest fel, lista categoriilor din meniu poate fi accesata prin apasarea pictogramei „Meniu”. Aceasta abordare reprezinta o alegere buna datorita faptului ca se va folosi in mod optim spatiul permitandu-le designerilor sa creeze pictograma de meniu astfel incat sa fie in concordanta cu intregul design al interfetei. Se poate realiza eficient folosindu-se platforma jQuery.
Folosirea unor meniuri cu multi layout – adaptate in functie de latimea dispozitivului – poate combina meniurile de tip lista cu cele cu pictograme afisate sub forma de casute. Pentru un web design deosebit, se pot adopta si include mai multe tipuri de meniu creand unul singur.
Exista cateva moduri in care se poate crea meniul de navigare al unui site web. Cele mai eficiente si uzuale abordari sunt prezentate mai sus. Ele asigura crearea unei experiente placute utilizatorilor mai ales a celor de dispozitive mobile. Aderarea la recomandarile de mai sus poate sa va asigure crearea unei navigari cursive si line si in acelasi timp un web design care sa nu compromita atractivitatea layoutului.
In functie de nevoile, obiectivele si asteptarile proprietarului, dar mai ales in functie de publicul tinta (de profilul utilizatorului final) se va aborda si se va implementa solutia optima in etapa de creare site web astfel incat sa se potriveasca perfect iar potentialii vizitatori sa se bucure de un design remarcabil si de o navigare placuta.