Mai multe despre Web Design

DESPRE WEB DESIGN

1. Imbunatatiri ale tendintelor curente in web design

Realizarea unui site web presupune o analiza amanuntita si o privire in perspectiva. Cum ar putea fi acesta creat inca de la inceput astfel incat sa satisfaca nevoile si cerintele utilizatorilor? Cum ar putea fi creat astfel incat sa nu se demodeze si sa fie inaintea competitorilor sai?

Mai jos vom enumera cateva tendinte in web design care ar putea usura atat munca proprietarilor de pagini web, cat si a programatorilor sau chiar a unor web designeri.

– Open source – este, cu siguranta, de ajutor pentru ca ofera oricand proprietarului unui site web sa adauge continut si sa detina control asupra sa.

– Mai putin inseamna mai mult – minimalismul va fi din ce in ce mai cautat in materie de web design. Ambiguitatile si elementele complexe isi pierd din farmec si din importanta.

– Mai mult scroll, mai putine clickuri – in ajutorul vizitatorilor aceasta metoda este si va fi din ce in ce mai aplicata. In web design, scrollul va pune accentul pe continutul unei pagini web crescand interesul utilizatorilor, pe cand clickurile si butoanele adesea ii incurca. Asadar, un site web care va avea un singur buton CTA va fi mult mai eficient si apreciat decat competitorii sai cu o cantitate mare de butoane.

– Mai putin continut scris – nu mai este o surpriza faptul ca majoritatea utilizatorilor nu dispun de timpul necesar pentru a citi pagini intregi de text. Luand in considerare si faptul ca utilizatorii folosesc din ce in ce mai mult dispoztitivele mobile, este logic faptul ca textele trebuie sa fie cat mai concise si directe pentru a usura experienta utilizatorilor.

– Culorile vibrante – folosirea unor culori deschise pentru a rezuma informatiile importante este o tehnica deloc noua. Folosite impreuna cu un layout curat vor da un rezultat neasteptat de bun.

– Simplificarea elementelor – cu cat mai simplu este un site web, cu atat utilizatorii au impresia ca proprietarilor le pasa. Nimic nu este mai apreciat decat o navigare simpla si cursiva si aflarea informatiilor in cel mai scurt timp.

– Layouturi simetrice – in web design, atat simetria cat si asimetria joaca roluri importante. Desigur, fiecare are scopul sau in functie de domeniul afacerii, insa layouturile simetrice arata intr-un fel traditional fiind cele la care se asteapta utilizatorii. De aceea, cele simetrice ofera o credibilitate mai mare. Insa, daca exista vreo indoiala, e recomandat sa se pastreze raportul de aur in constructia oricarui layout astfel incat acesta din urma sa fie cat mai captivant.

– Mai putine fotografii, mai multa grafica vectoriala – desigur aceasta tendinta nu se va putea aplica in crearea designului oricarui site web, insa avand in vedere necesitatea designului responsive trebuie luata in calcul si aceasta varianta. In niciun caz fotografiile un vor fi inlocuite de imaginile vectoriale intruct estetica pe care o ofera este incomparabila, insa multi web designeri si programatori considera ca imaginile vectoriale sunt mai utile in construirea unui design responsive, in timp ce fotografiile sunt cele care dau uneori batai de cap.

– Flat design – desi nu mai era cazul sa il mentionam, cu siguranta acesta va acapara, sau daca nu, cel putin va fi predominant in randul tendintelor in web design. Ofera o navigare usoara, iar simplitatea si recognisibilitatea elementelor folosite cu siguranta sunt apreciate de catre majoritatea utilizatorilor.

– Material design – se refera, in mare parte, la crearea unui limbaj vizual care sintetizeaza principiile clasice ale designului reusit cu inovatia si posibilitatea tehnologiei si a stiintei. Designul bazat pe layouturi cu carioaje, animatii responsive si efecte in profunzime cum ar fi lumina sau umbrele se situeaza cumva intre designul plat si cel skeuomoprhic.

– Parallax – efectul de parallax scrolling cucereste majoritatea utilizatorilor intrucat imaginile din fundal se misca mai incet decat cele din prim-plan creand o iluzie de adancime ca intr-un joc video bidimensional. Acasta tehnica, folosita inca din anii 1930 in animatiile traditionale se foloseste cu succes si in prezent.

– Animatii stratificate –imaginile transformate in ilustratii pot capata viata prin adaugarea mai multor straturi ce creeaza efectul de miscare.

– Clipuri video in fundal – se practica deja aceasta metoda de plasare a clipurilor video in fundalul primei pagini web a unui site. Ofera dinamism si in acelasi timp informeaza utilizatorii doar cu o simpla accesare.

– Abordarea designului centrat pe utilizator – poate cuprinde de la design plat, la typography dinamic si imagini puternice in functie de publicul tinta al fiecarui site web.

– Simplitatea – cu cat UI (interfata cu utilizatorul) este mai simpla cu atat mai multe sanse de succes va avea un website. In acelasi timp, fiecare site web trebuie sa spuna o poveste captivanta.

Oricare ar fi tendintele in web design, in general, unele dintre ele – cum ar fi simplitatea, designul responsive, navigarea cursiva sau continut vizual predominant – vor ramane mereu valabile intrucat realizarea unui site web se va face cu gandul la utilizatorul final iar toate acestea vor simplifica si vor face mai placuta experienta sa.

2. Cum se creeaza o prima impresie reusita in web design

E lucru cunoscut ca e greu de remediat o prima impresie negativa. Cand vine vorba de web design, provocarea consta in crearea unei impresii placute inca de la prima accesare a unui site web. Daca vizitatorii acestuia nu sunt multumiti de ce vad in primele secunde de navigare pe un site, vor migra catre competitori iar sansele sa revina pe acel site web sunt minime daca nu chiar inexistente.

Crearea unei prime impresii reusite e fundamentala pentru abilitatea unei pagini web de a se pozitiona in topul brandurilor care genereaza vanzari. Prima impresie creata este cea care ii determina pe utilizatori sa actioneze. Credibilitatea unui site web se poate obtine in cateva secunde.

Cum se poate atinge aceasta prin web design? Cum pot fi impresionati vizitatorii de un site web inca de la prima accesare?

• Web design responsive

In primul rand trebuie sa ne asiguram ca in procesul de web design incepe cu gandul la utilizatorii respectivului site web. De aceea, este important ca, atat aspectul cat si functionarea website-ului sa fie perfecte. Este crucial sa se adopte un design responsive indiferent de anvergura proiectului.

Avand in vedere ca Google impune folosirea designului responsive inseamna ca multe companii nu se gandesc suficient la clientii lor. Pentru ca optimizarea SEO este absolut necesara pentru orice site web care are ca obiectiv principal obtinerea a cat mai multor clienti, primul pas in crearea site-ului consta in optarea pentru un design responsive.

Livrarea unei experiente saracacioase utilizatorilor de dispozitive mobile nu va duce decat la esecul unei afaceri. Daca acestia nu pot gasi informatiile necesare din cauza unei vizibilitati slabe a continutului unui site web, cu siguranta vor abandona site-ul fara sa se gandeasca sa il acceseze de pe desktop sau laptop. In timp ce daca utilizatorilor de dispozitive mobile li se ofera o experienta placuta obtinand informatiile utile inseamna ca acel site web este creat pentru a incuraja conversiile.

Cheia consta in continutul concis, relevant, usor de citit completat cu imagini originale si sugestive inteligibile de pe orice tip de dispozitiv. Chiar si la aceasta data inaintata e foarte posibil ca prin web design sa se obtina un avantaj major in fata competitorilor daca se adopta designul responsive.

• Transmiterea povestii printr-o succesiune logica a elementelor prin web design

In al doilea rand, prin web design trebuie sa se spuna o poveste. Vizitatorii unei pagini web au nevoie sa gaseasca o poveste reusita care sa le satisfaca nevoile si cerintele. Se poate adopta tehnica scrollingului vertical intrucat mare parte din utilizatori sunt deja obisnuiti cu aceasta, iar elementele care duc catre conversii se pot plasa in partea respectivei pagini web care e vizibila in browser in momentul incarcarii acesteia.

Un rol important in web design il joaca continutul unui site web, mai exact structura acestuia sau modul in care este impartit. Pe langa povestea pe care o spune, continutul bine structurat in paragrafe sau coloane ofera web designerilor mai multa flexibilitatea si varietate in alegerea imaginilor sau in crearea elementelor vizuale. Iar, per total, site-ul va deveni mai vibrant starnind curiozitatea utilizatorilor.

• Folosirea Imaginilor statice, dar puternice in antet prin web design

In continuare, in procesul de web design se va tine cont de imaginile din antet, de obicei statice. Este esential de inteles ca acestea sunt primele vazute in accesarea unei pagini web. Nu este o regula, insa caruselele sau sliderele au tendinta de a crea o prima impresie nu prea grozava contracarand de multe ori optimizarea SEO si reducand accesibilitatea utilizatorilor.

Pe de alta parte, imaginile statice de pe primele pagini ale site-urilor ofera posibilitatea unor web designeri de a prezenta intr-un mod mai puternic, concis si memorabil brandul si valoarea unei afaceri. In acelasi timp, se reduce riscul aglomerarii respectivei pagini web lasand doar informatiile necesare pentru a cuceri vizitatorii.

• Spatii libere in web design
Nu in ultimul rand, pentru a crea o buna prima impresie prin web design, se recomanda folosirea din abundenta a spatiilor libere (albe). Spatiul liber permite o inteligibilitate mai buna a elementelor de web design, transmitand intr-un mod mai eficient mesajul unui brand. In acelasi timp permite o scanare mai rapida a continutului unui site web si face mai permisibila utilizarea acestuia de catre vizitatori.

Nu este doar un element de web design, ci un instrument puternic care ajuta la indreptarea atentiei utilizatorului catre elementele de conversie, imagini si elemente vizuale sau texte cheie. Spatiul liber folosit corespunzator denota eleganta, simplitate si in acelasi timp creativitate. E important sa se mentina un raport intre elementele de design pentru a oferi un aspect clar si aerisit respecivelor pagini web.

Asadar, atragerea vizitatorilor inca de la prima accesare a unui site web nu este dificila. Necesita o atentie sporita la detalii si intelegerea modului in care acestia privesc si utilizeaza site-ul. Cu siguranta designul responsive, crearea unui fir logic al elementelor de web design, imaginile puternice din antetul primei pagini si folosirea spatiului liber vor oferi utilizatorilor o experienta placuta si vor ramane cu o impresie desavarsita despre acel site.

3. Flat vs. Material web design

In web design, au aparut doua concepte foarte semanatoare care se bazeaza unul pe cealalt. In timp ce designul flat este destul de popular si de folosit in crearea unor pagini web, material design este un concept relativ nou, creat de Google, care imbina multe elemente ale primului tip de web design cu o parte ale designului skeuomorphism.

Desi material design pare ca o extensie a designului flat, in realitate principiile dupa care functioneaza cele doua sunt diferite.

In primul rand le vom defini pe amandoua:

Flat design (designul plat) reprezinta o abordare minimalista care sintetizeaza accesibilitatea si usurinta de utilizare. Se defineste prin simplitate, spatii libere, aerisire, margini bine definite, culori vibrante dar deschise si, desigur, ilustratii bidimensionale. Imaginile folosite sunt adesea pictograme, iar culorile constrastante folosite ajuta la evidentierea ilustratiilor si a butoanelor captand imediat atentia utilizatorilor.

Designul flat se bazeaza pe un typography clar care ofera o inteligibilitate sporita. Aspectul si senzatia pe care o ofera un font anume va fi in concordanta cu tonul si mesajul designului unui site web. Adesea, multi web designeri aleg un singur font pentru crearea textului din continutul site-ului. E drept ca nu este indicat sa se foloseasca mai mult de trei fonturi diferite pentru a nu crea confuzii si senzatia de dezordine.

Material design se bazeaza pe un limbaj vizual creat special pentru utilizatori pentru a sintetiza principiile clasice ale unui design reusit impreuna cu inovatiile si posibilitatile oferite de stiinta si de tehnologie.

Principiile care stau la baza designului material sunt:

– Material inseamna metafora – material design este adancit in realitatea tactila, inspirat de studiile hartiei si cernelii si in acelasi timp foloseste tehnologia avansata. Suprafetele si marginile elementelor ofera senzatia de ancorare in realitate. Luminile, suprafetele si miscarea sunt elementele cheie pentru a exprima interactiunea obiectelor si existenta lor in spatiu.

– Material design este evident, intentionat si demonstrativ. Rolul acestui concept de web design este mai presus de a fi placut ochiului. Toate elementele au un sens si o ordine anume.

– Miscarea ofera mai mult inteles – obiectele sunt prezentate utilizatorului fara a intrerupe experienta acestuia. Miscarea are o importanta deosebita si serveste pentru a capta atentia si pentru a mentine continuitatea. Toate tranzitiile au coerenta si sunt eficiente.

Luminile si umbrele folosite in crearea unui site web sau a unei aplicatii web au rolul de a oferi senzatia de tridimensional. Axa Z este folosita pentru a crea mai multe strauri si nu pentru perspectiva asa ca efectele tridimensionale se obtin prin manipularea axei Y.

Care sunt principalele diferente dintre cele doua concepte de web design?

• Prima diferenta majora consta in planurile folosite: daca in flat design elementele sunt bidimensionale, in material design apare a treia axa (Z) oferind senzatia de tridimensional.

• Material design este intr-un fel skeumporhic folosind elemente realiste, straturi si animatii.

• Doar in material design vom observa folosirea straturilor prin mutarea elementelor in fata si in spate de-a lungul axei Z spre utilizatori si dinspre utilizatori.

• Umbrele realistice folosite in material design cu ajutorul carora elementele unui site web vor capata un sens mai adanc nu se regasesc in designul plat.

• In material design se folosesc animatii pentru a face mai usoara si mai placuta experienta utilizatorului.

• Spre deosebire de designul flat, material design ghideaza utilizatorii prin detalii si specificitati.

In timp ce designul flat poate fi considerat limitat, constrangand designerii sa foloseasca culori, forme si pictograme simple, designul material este mult mai permisiv si mai ofertant bazandu-se pe animarea obiectelor.

Folosindu-se designul flat exista riscul ca unele pagini web sa fie asemanatoare sau sa se confunde cu altele. Material design are avantajul ca aranjarea tridimensionala a elementelor face ca aplicatiile sau site-urile sa permita o interactiune mai usoara din partea utilizatorilor.

In concluzie, material design nu este cu mult mai diferit de designul flat ambele utilizand acelasi principiu al esteticii simple si curate. Plusul pe care il ofera designul material se regaseste in crearea animatiilor care fac intr-adevar experienta utilizatorului mai placuta.

In functie de nevoile si obiectivele stabilite de proprietarul unei afaceri care isi doreste un nou site web sau o aplicatie web, se va opta pentru o linie de design optima. Un site simplu, curat care se incarca rapid poate fi usor creat folosindu-se designul flat, in timp ce adaugarea animatiilor si a elementelor grafice care indica miscarea se poate realiza prin material design.