Website-ul este cartea de vizita interactiva a business-ului tau. Pentru un potential client, website-ul este un punct de contact cu brandul. Astazi exista mai multe astfel de puncte de contact online intre brand si consumator: website, pagina de Facebook, cont de Instagram, canal de Youtube si orice alt mijloc de comunicare a continutului de brand in social media. Aceste moduri diferite ale brandului de a fi prezent online ii ofera mai mult decat oricand ocazia de a propune continuturi interesante pentru consumatori. Continuturi al caror rol este multiplu: sa pozitioneze brandul ca pe un partener de dialog amuzant, de incredere sau cu acel tone of voice pe care il asteapta consumatorul; sa favorizeze crearea unei comunitati in jurul brandului si interactiunea dintre membrii comunitatii si diverse declinari ale brandului; sa creasca loialitatea fata de brand si, mai ales, sa influenteze decizia de cumparare a brandului respectiv.
Cand exista un mijloc de comunicare a brandului catre publicul larg cu un asemenea potential de marketing, e bine sa-ti faci temele ca sa-l exploatezi la maximum. In ordinea logica a etapelor, pentru a avea un website care lucreaza in favoarea brandului tau, trebuie sa incepem cu un design de layout potrivit.
Este o capcana in care cad multi marketeri – sa se substituie propriilor utilizatori. Daca tu folosesti un website (si Internetul in general) intr-un anume fel, nu inseamna ca toata lumea procedeaza ca tine. Exista zeci de moduri in care poti aborda designul unui website, iar alegerea celui mai potrivit depinde de multi factori. Nu exista scurtaturi in aceasta privinta. Nu exista un tip de website sau de user experience potrivit pentru toata lumea. Asa ca trebuie sa-ti cunosti publicul tinta. Noi vom incerca sa adaptam designul website-ului la preferintele probabile ale publicului tau. De aceea, vom incerca sa stabilim impreuna un profil general al utilizatorului, care va tine seama de cateva caracteristici importante, cum ar fi:
- media de varsta a publicului tinta
- nivelul probabil de studii
- gradul de familiaritate cu instrumentele de navigare online
- tipul probabil de dispozitiv de navigare folosit (PC, laptop, tableta, telefon mobil).
In general, o idee buna este sa pastram designul web cat mai simplu si mai accesibil pentru toata lumea. Nu exista insa reteta. Strategia de comunicare a unui brand cere solutii vizuale originale si personalizate. De aceea vom balansa layout-urile cu impact vizual puternic si grija pentru user experience.
Web design – creare layout-uri de website si user experience
Din punct de vedere vizual, va exista intotdeauna o tensiune intre ce place ochiului si ce functioneaza din punct de vedere practic. Statisticile nu mint. Exista in prezent numeroase instrumente de urmarire a interactiunilor utilizatorilor cu layout-ul web si instrumente de raportare. Daca un website sau un landing page arata bine, dar nu au cifre bune (adica numar de click-uri, timp petrecut pe pagina, numar de pagini vizitate etc.), cel mai probabil exista ceva gresit din punct de vedere al experientei utilizatorului. Un design frumos nu garanteaza o utilizare eficienta si satisfacatoare. Designul (in domeniul web sau orice fel de design) are intotdeauna si o functie practica, utilitara. De aceea, atunci cand concepem layout-ul unui website avem grija sa privim din perspectiva utilizatorului. Adica ne gandim la user experience.
Exista trasee naturale de parcurgere a informatiei. Teoria spune ca citim de la stanga la dreapta, de sus in jos, dar asta era valabil pentru formatele tiparite. Desigur, titlul cel mai mare iti atrage atentia primul, dar online sunt multi factori de luat in calcul. In primul rand, trebuie sa alegi cu atentie ce plasezi above the fold, adica in primul ecran – ceea ce vede utilizatorul fara sa fie nevoit sa foloseasca butonul de scroll. Cand iei in considerare ca above the fold trebuie sa fie cele mai relevante informatii, in forma cea mai simpla si mai scurta (cu linkuri catre pagini mai detaliate) intelegi ca poti folosi un titlu foarte mare doar daca acea informatie este intr-adevar esentiala pentru experienta utilizatorului. Merita sa o promovezi cu prioritate fata de orice altceva?
Cand insa ai mai multe mesaje care trebuie sa primeasca loc pe prima pagina, vei avea mai multa grija cum folosesti pixelii pe care ii ai la dispozitie. Totul depinde de scopul pe care il urmaresti prin website-ul tau: sa aduci utilizatorul pe o anumita pagina, sa citeasca o informatie? Sa il convingi sa cumpere un produs (daca vorbim de un magazin online)? Sa il convingi sa completeze un formular si sa se inscrie la un eveniment? Sau pur si simplu sa-l tii la curent intr-un mod prietenos si informal cu activitatea companiei tale, sub forma unui blog…
Sunt doi factori decisivi pentru relatia dintre utilizator si website-ul tau (de care trebuie sa ai grija inainte ca utilizatorul sa iti deschida pagina). Primul este design-ul de layout – cum arata website-ul, unde sunt meniurile, unde este bara de search, unde sunt plasate acele imagini si texte care il vor conduce pe utilizator catre acele pagini si informatii pe care iti doresti sa si le aminteasca dupa ce iese de pe site.
Al doilea factor este continutul propriu-zis pe care il publici pe website. Iar la continut intra si texte, si imagini, si orice alte elemente pe care iti doresti ca utilizatorul sa le asocieze cu brandul tau si cu o experienta pozitiva.
Cum deosebesti un design bun de layout de unul mediocru sau slab?
Nu tine totul de cum arata. Sau, mai bine spus, cum arata un website reflecta respectarea sau nerespectarea unor principii fundamentale de design. Pana la urma, un layout este un mod de a structura din punct de vedere vizual informatia pe care vrei sa o transmiti. Structura ajuta sa o transmiti intr-un anumit mod. Iti spui povestea intr-un mod care sa creeze o emotie si sa declanseze anumite reactii din partea vizitatorilor site-ului.
Un lucru pe care il stie un web designer cu experienta este ca un layout bun nu isi propune sa reinventeze roata. Majoritatea website-urilor marilor jucatori din industria online au o structura asemanatoare. Diferentele sunt fine – la nivel de logo, de culori, de simetrii si asimetrii – dar nimeni nu incearca sa propuna ceva absolut nou si in nici un caz contra-intuitiv. De ce? Pentru ca este necesar sa stabilesti o punte de comunicare cu utilizatorul din prima secunda, iar asta este posibil doar daca mizezi si pe familiaritatea lui sau a ei cu un anumit tip de structura vizuala.
De exemplu, website-urile cu o singura coloana sunt foarte potrivite pentru bloguri, pentru a spune povesti si a parcurge un continut liniar – scroll down pentru a mai afla ceva, pentru a a afla continuarea. Pe de alta parte, website-uri care servesc transmiterii catorva informatii cheie folosesc un pattern de citire in Z sau in zig-zag, care pare sa reflecte cel mai bine modul natural in care ochiul parcurge informatia online. Atunci cand vizitam un website, cautam cu rapiditate lucrurile care ne intereseaza si despre care vrem sa aflam mai mult.
Exista diverse tipuri de layout. Cum il alegem pe cel potrivit? Noi nu mergem pe principiul: care ii place clientului! Nu suntem aici sa insistam pentru cel care ne place noua, dar vom insista pentru cel care credem ca are cele mai mari sanse sa te ajute in business. Poate ti se pare ca e un simplu site, oamenii intra si gasesc ce au nevoie, citesc si dau click. Dar experienta ne invata ca utilizatorii sunt extrem de selectivi (ca sa nu spunem pretentiosi) atunci cand consuma continut online. Daca nu reuseste sa gaseasca in cateva secunde o functionalitate de baza, acolo unde este obisnuit sa o gaseasca, utilizatorul poate foarte bine sa inchida website-ul dupa cateva secunde.
Prin urmare, vom propune un layout cu fotografii puternice, fullscreen, daca business-ul tau ofera servicii sau produse memorabile, care trezesc emotii puternice si este avantajos sa fie asociate cu anumite stari sau emotii. Sau daca tot ce ai nevoie este ca vizitatorul sa ajunga pe un landing page in care sa se inscrie intr-o campanie sau sa completeze un formular. La imaginea fullscreen poate vom adauga doua randuri de text discrete, ca sa explicam in cat mai putine cuvinte despre ce e vorba. Incercam sa profitam de timpul petrecut de utilizator pe website ca sa creem o amintire, o asociere care sa-i ramana in minte ca gustul madlenei lui Proust si sa-i aminteasca de brandul tau.
Sau, daca business-ul tau are nevoie sa prezinte un portofoliu de produse, servicii sau proiecte, poate vom propune un layout de tip grid of cards (cam cum poti vedea pe homepage-ul INOVEO). Iar cand trebuie sa te pozitionezi ca o corporatie care trateaza cu precizie matematica operatiunile de productie sau relatia cu clientii? Vom cauta combinatia perfecta de clean sheet, simetrii si asimetrii geometrice, imagini reprezentative si styling de titluri, galerii foto si video, astfel incat ansamblul sa transmita mesajul potrivit pentru publicul tinta.
Site de prezentare / corporate
Cele mai multe proiecte online pe care le executam sunt website-uri de prezentare (corporate sau mai putin corporate). Ce au in comun este ca incercam sa sintetizam valorile brandului si sa le transpunem intr-o forma care sa functioneze in mediul online – fie ca este vorba de partea vizuala, fie ca ne referim la acel tone of voice al textelor de prezentare care individualizeaza comunicarea online.
Pentru a crea designul unui website care sa fie reprezentativ pentru brandul tau si sa transmita mesajele potrivite, trebuie sa intelegem cui te adresezi. Daca website-ul este pasul urmator al unei colaborari in care am facut deja branding impreuna, inseamna ca avem deja informatii despre publicul tau tinta si despre valorile brandului. Daca ai o identitate vizuala bine conturata si vrei sa colaboram doar pentru web design si programare website, va trebui sa construim impreuna un brief detaliat, care sa specifice cat mai complet care sunt asteptarile si nevoile tale.
Ce oferim noi din punct de vere al web designului: declinarea identitatii tale de brand in mediul online; layout pentru homepage; una sau doua pagini de interior; styling pentru module, ilustratii, favicons, inconografie; vizualuri pentru comunicarea in mediul digital (bannere, cover image, profile picture pentru social media).
In functie de principalele scopuri pe care le urmaresti prin prezentarea activitatii online, vom aduce in prim plan cele mai importante continuturi ale website-ului tau. Insistam de la bun inceput ca este nevoie sa definim obiectivele principale, fie ca este vorba despre promovarea unui nou produs sau serviciu, despre atragarea de noi angajati, deschiderea unei noi linii de business sau listarea la Bursa. Daca ne este clar de la inceput ce urmarim, putem folosi designul ca pe un instrument puternic pentru comunicarea brandului tau online.
Structura website – homepage si pagini interioare
Structura website-ului este un mijloc de a te asigura ca informatiile sunt usor de gasit, iar traseele de navigare sunt intuitive si la indemana. De multe ori, trebuie sa ai in vedere ca utilizatorul website-ului (potentialul sau actualul tau client) gandeste altfel decat tine. Poti fi tentat sa-i prezinti structura business-ului tau asa cum o vezi tu din interior, cu lux de amanunt. Sau sa insiri o multime de specificatii tehnice despre produsele sau serviciile pe care i le oferi intr-o maniera prea complicata, pe cand el si-ar dori sa afle informatii esentiale, foarte pe scurt. Pentru a ne asigura ca informatiile ajung la utilizatorul final intr-o maniera interesanta si poate entertaining, iti oferim servicii de copywriting sau (daca preferi sa-ti scrii propriile texte) de consultanta de marketing.
Pagina cea mai importanta a website-ului tau este prima pagina, numita cel mai adesea homepage. La fel ca in intalnirile din viata reala, prima impresie conteaza intr-adevar cel mai mult. La urmatoarele vizite, homepage va functiona ca o platforma, ca un punct de pornire familiar, din care utilizatorul a invatat sa ajunga pe o anumita cale acolo unde e interesat sa ajunga. Ce trebuie sa tii minte este ca utilizatorul website-ului tau nu vrea sa piarda timpul. Textele unui website nu se citesc precum cele dintr-o revista, cu atat mai putin ca o carte. Propozitiile scurte si cuvintele cheie bine alese sunt la ordinea zilei. La fel pozitionarea titlurilor si a Nu doar pentru ca le favorizeaza motoarele de cautare. Exprimarea concisa si folosirea cuvintelor cheie ajuta si utilizatorii sa gaseasca repede ceea ce cauta si sa nu se simta frustrati ca nu gasesc repede si simplu informatiile de care au nevoie. De aceea, prima pagina trebuie sa contina un numar mic de mesaje cheie, cele mai importante, pe care vrei sa le vada vizitatorul imediat ce se afiseaza site-ul. Designul ajuta utilizabilitatea prin pozitionarea titlurilor, prin alegerea fonturilor potrivite, a dimensiunii potrivite de text, a unui raport corect intre volumul de text si imagini.
Prima pagina este in primul rand o carte de vizita. Felul in care se afiseaza website-ul ii da utiilizatorului din primul moment indicii despre standardele tale de calitate. Culorile si imaginile din homepage creaza asocieri in mintea utilizatorului, care te plaseaza din primul moment intr-o anumita categorie. Totusi, homepage functioneaza si ca o strategie de vanzare. Cu un design web bine gandit, care scoate in evidenta anuite trasee de navigare, utilizatorul website-ului tau ajunge din cateva click-uri in pagina in care il asteapta un text sau cateva imagini convingatoare, care il vor determina sa faca business cu tine.
Homepage este deci o invitatie la a sta de vorba. Daca invitatia este corect transmisa, vizitatorul iti va acorda o intrevedere in care vei avea ocazia sa-l convingi sa cumpere de la tine.
Asta ne aduce la paginile de interior. Si aici structura si design sunt cuvintele cheie. O structura intuitiva si un design curat, aerisit, cresc sansele ca utilizatorul sa-ti acorde din timpul si din atentia lui. Prin structura intuitiva a website-ului intelegem ca felul in care ajungi dintr-o pagina in alta este natural si la indemana, informatia nu este ingropata in prea multe click-uri, dar nici sa se repete suparator – desi se spune ca online redundanta este buna. Design-ul web curat inseamna ca pagina nu este aglomerata cu prea multe elemente vizuale sau prea mult text, iar vizitatorul isi gaseste fara probleme drumul inapoi catre baza (homepage).
Cele mai multe teme de WordPress (sistemul de administrare a continutului web pe care il folosim cu precadere) au deja incorporate elemente de design si programare care favorizeaza o experienta comoda online (user experience). Temele de WordPress, oricat de user-friendly ar fi, au nevoie de adaptari si customizari care sa le optimizeze pentru o experienta cat mai apropiata de cea pe care iti doresti sa o creeze brandul tau. Acesta este motivul pentru care acordam atentie micilor detalii care fac diferenta: pozitionarea unui buton din meniu, culoarea unui titlu sau styling-ul unei galerii foto pot transmite mici mesaje subliminale. Toate acestea fac parte din personalitatea website-ului si – prin extensie – a brandului tau.
Website pentru desktop vs mobil. Responsive sau adaptive?
Astazi oamenii au internet pe o multime de dispozitive: PC (desktop), laptop, tableta, mobil. Mai mult, toate acestea vin la pachet cu diverse ecrane, fiecare cu rezolutia si dimensiunea lui. Layout-ul website-ului tau trebuie sa fie prietenos si versatil. Prietenos, pentru ca trebuie sa se vada bine pe toate aceste ecrane. Versatil, pentru ca trebuie sa se adapteze la aceste ecrane in diverse moduri.
Asa cum functioneaza lucrurile astazi in lumea site-urilor web, trebuie sa ai pregatite mai multe versiuni ale site-ului. Ce inseamna asta? Cand un utilizator iti acceseaza site-ul, platforma de administrare (care se mai cheama si back-end si este altceva decat backhand-ul de la tenis) stie sa livreze catre browserul pe care il foloseste utilizatorul interfata grafica adecvata pentru dispozitivul respectiv.
Multe din problemele care tin de vizualizarea corecta a website-urilor pe diverse dispozitive sunt rezolvate de la inceput de platformele de web management. Asta inseamna ca temele de WordPress, de exemplu, vin gata programate sa se afiseze corect in diverse medii. Totusi, asta nu inseamna ca website-ul nu trebuie customizat si verificat. Ii facem un fel de control al calitatii, in sensul ca ne asiguram ca se vede bine in toate situatiile, pe toate browserele si pe diverse device-uri. Exista instrumente online care simuleaza accesarea site-ului de pe dispozitive variate, cu rezolutii variate. Chiar si asa, nu poti sa fii niciodata sigur ca ai epuizat intreaga gama de posibile afisari gresite. De aceea, mai testam afisarea website-ului tau si fizic, incarcandu-l pe diverse dispozitive, mobile sau nu.
In ultimii ani, a devenit foarte la moda in web development cuvantul ‘responsive’. Un website responsive isi redimensioneaza automat layout-ul in functie de rezolutia ecranului pe care este afisat sau de dimensiunea in pixeli a browser-ului. Practica obisnuita pentru implementarea acestei solutii tehnice pentru afisarea site-urilor este instalarea unei platforme de administrare a continutului web si a unei teme vizuale. O tema de website (cum sunt cele de WordPress, despre care am scris mai sus) este un draft de layout care are deja programate o serie de functionalitati. Ea poate fi customizata in acord cu nevoile concrete ale fiecarui client. Customizarea temei poate include schimbarea culorilor, a fonturilor, a dimensiunilor imaginilor sau campurilor vizuale, precum si adaugarea unor module noi, care indeplinesc diverse functii pe care nu le includea tema originala. Majoritatea temelor sunt astazi programate sa functioneze responsive, astfel incat layout-ul website-ului se redimensioneaza automat in functie de dimensiunea in pixeli a browser-ului, pornind de la dimensiunea maxima a layout-ului.
In ce priveste versiunile ‘adaptive’ ale site-urilor, acestea presupun conceperea de la bun inceput a layout-urilor pentru dimensiunile standard ale diverselor ecrane de afisare. De exemplu, un site va avea layout-uri separate, programate separat, pentru versiunile lui de desktop si de mobil. In momentul in care utilizatorul acceseaza site-ul de pe un dispozitiv mobil, site-ul este in asa fel programat incat sa se afiseze in mod automat versiunea de mobil. La fel cu versiunea pentru desktop.
Daca optezi pentru un website responsive, avantajul este ca dezvolti un singur layout, care se adapteaza la dimensiunile ecranului pe care este afisat. De asemenea, pe termen lung, presupune o investitie mai mica in mentenanta.
Pe de alta parte, o versiune adaptive de website se poate dovedi mai eficienta atunci cand website-ul are un design cu multe elemente vizuale care au nevoie de multe resurse pentru a se incarca. In versiunea de mobil a website-ului, complet separata de cea pentru desktop, consumul de reurse poate fi optimizat prin felul in care se afiseaza layout-ul. In plus, daca publicul tau este unul care isi petrecea majoritatea timpului pe mobil, cu un design de tip adaptive te poti concentra in primul rand pe aceasta categorie de public. Versiunea pentru desktop functioneaza ca un back-up pentru rarele cazuri in care site-ul tau este accesat de pe un PC. Totul depinde de specificul publicului tau si de directia in care consideri ca este cel mai eficient sa investesti.
