Public

h1. Guideline design web - Cerinte si Recomandari:

Tichetele de design care contin exclusiv text (descriere a designului dorit) sau atasamente tip imagine (.png. *.jpg, *.jpeg, *.pdf) vor fi respinse, deoarece nu contin informatiile si detaliile esentiale (explicate in continuare in acest material). 

* _Un design web corect este construit din elemente independente organizate pe layere, pe foldere, in functie de zone si trebuie sa cuprinda diferitele stari ale elementelor la interactiunea cu userul (hover state, focus, animatii, opacitati, transformari etc). O imagine / schita nu ne da toate aceste informatii._ **

*Cerinte design web*: 

*FORMAT* -  trebuie obligatoriu sa fie interpretabil cu unul dintre programele folosite de echipa Avanticart: Photoshop, Gimp, Inkspace. Formatul .psd este cea mai sigura varianta.

*CONTINUT* - elemente care trebuie sa se poata prelua din fisierele puse la dispozitie:

dimensiunile de caractere

fonturi (!!! Atentie - sa fie web fonts si sa suporte diacritice)

inaltimi de linii

culori si alte elemente de stil de pe caractere

dimensiunile exacte ale tuturor elementelor din design

imaginile folosite

icon-uri folosite

logo (Designul trebuie sa tina cont de dimensiunile logo-ului care ni se pune la dispozitie)

*STRUCTURA* - cum trebuie orgazinat designul

*Grid de 12 coloane egale intre ele* - Avanticart foloseste, in implementarea designului, *Bootstrap 4* - un model de layout bazat pe impartirea ecranului in 12 coloane egale intre ele (Vezi poza de mai jos) atat pe mobile, cat si pe desktop. Layout-ul magazinului online si dispunerea elementelor si latimile lor trebuie sa tina cont de asta si sa se incadreze in cele 12 coloane / multiplu de o coloana (ex: in imaginea de mai jos  filtrele in stanga ocupa 3 coloane iar lista cu produse ocupa 9 coloane​ ) 

!bdc89a2e-15e1-40cb-91bd-2906b97c726d.png!

* Un design care nu tine cont de grid-ul de 12 coloane va prezenta probleme la implementare si timp suplimentar pentru ajustari si adaptari.

* Meniurile* adaptate nevoilor magazinului online - a se lua in considerare:

Cate categorii vor fi in meniu

Cate nivele de subcategorii 

Care varianta de meniu se potriveste mai bine cu nevoile - orizontal sau vertical

Cum se face reorganizarea elementelor (unde va fi cazul) pe diferite marimi de display-uri, a intregului header. De multe ori categoriile nu incap pe un singur rand pe orizontala si suntem nevoiti sa alteram munca designerului.

* _Daca design-ul este gandit pentru 8 categorii cu denumiri relativ scurte dar site-ul are nevoie de mai multe categorii cu denumiri lungi, nu vor incapea. Designul implementat nu va putea reda corect informatia de pe site.

_

*Paginile site-ului*  trebuie sa aiba fiecare design adaptat si corespunzator:

 Pagina principala (Homepage-ul)

Pagina de categorie

Pagina de produs

Pagina de checkout (sau cosul de cumparaturi, pagina de comanda, etc…)

Pagina de contact

Contul de client

Optional: pagina de 404, modalul (fereastra mica) de Newsletter

*Dimensiunea layoutului* 

O latime de 1200px este dimensiunea ideala pentru un design implementat in Bootstrap. Daca se foloseste full-width, fisierele trebuie create pe o anumita latime reala pentru browsere de desktop si pastrata pe toate fisierele - astfel designul va arata la fel si dupa implementare.

*Design Responsive*

Optimizarea designului pentru *device-uri diverse* (desktop, laptop, mobile, tableta) si *dimensiuni de ecran* diferite (modelele principale de ecrane) poate avea un efect foarte mare asupra vanzarilor unui magazin online.

Pentru o implementare eficienta pe acest aspect, este necesara viziunea designerului asupra reorganizarii elementelor in pagini in functie de rezolutie.

Mobilul este un mediu care a devenit esential in experienta de shopping online - unde, insa, vizitatorii au toleranta scazuta. Daca designul furnizat nu trateaza strategic afisarea paginilor pe mobil, bounce rate-ul va fi foarte crescut - multe comenzi ratate.

*RECOMANDARI suplimentare*

*PRODUSUL* - centrul de greutate al oricarui eShop

Poze de produs de calitate

Acces usor si direct la detalii despre produs

Layout care sa nu concureze, ci sa scoata in evidenta pozele

Structurarea strategica a informatiei de produs

Tratare situatiilor cea mai aglomerata si cea mai libera situatie/pagina                                                                                              (ex. Categoria de promotii → cum va arata pagina categoriei cand nu vor fi produse la promotie, cand vor fi doua produse sau 80 de produse)

* _Studiind marile magazine online de la nivel mondial sau local, vei observa cum layoutul are rol de suport (background uni foarte light, spatiu alb care evidentiaza poza de produs, butoane de Adauga in cos proeminente pe baza neutra). Pozele de produs sunt scoase in evidenta prin evitarea distragerii atentiei catre alte elemente de design neesentiale.

_

*Filtre - optimizarea lor*

Ia-ti suficient timp sa gandesti solutii cuprinzatoare pentru folosirea filtrelor: ia in calcul tipuri diverse de marimi, tipuri de produse, incearca sa te gandesti care ar putea fi provocarile unui user care cauta produse.

*Numar minim de click-uri*

La fiecare pas pune intrebarea: actiunea aceasta se poate realiza prin mai putine clickuri?

EXEMPLE: 

*Numarul de click-uri*  necesar sa ajung de la a vrea sa caut ceva la rezultatul dorit, de la a vedea un produs la a vedea informatia de baza despre el, de la a adauga in cos la a finaliza comanda. 

Se incadreaza aici si *numarul de field-uri* din formulare - care este informatia minima de care am nevoie de la intrarea pe site pana la plasarea unei comenzi - si care detalii pot fi obtinute ulterior?

Pentru predarea materialului:

* foloseste " _lorem ipsum_ " in zonele de dummy content pentru a nu se face confuzia cu un content cu destinatie precisa. Designerul poate tine legatura cu Avanti pentru diverse informatii si putem pune la dispozitie modele ale altor magazine, pentru o intelegere cat mai buna a tipului de content disponibil pe platforma Avanticart.