Guideline pentru designer¶

Un web design bine facut este unul care este usor de interpretat cu un tool precum Photoshop, Gimp, etc(preferam varianta de fisier .psd). Usor de interpretat inseamna ca este construit din elemente independente aduse in pagini, organizate pe layere, pe foldere, in functie de zone. Ideal ar fi ca elementele sa fie structurate pe un grid. Noi folosim Bootstrap 4 si cel mai eficient ar fi sa fie si fisierele construite pe grid system-ul implicit ( https://getbootstrap.com/docs/4.3/layout/grid/ ). Totodata, foarte important este ca designul sa cuprinda si diferitele stari ale elementelor la interactiunea cu userul (hover state, focus, animatii, opacitati, transformari etc)

Cel mai indicat ar fi sa incepi constructia de content dupa ce se cunosc destule date despre ce isi doreste clientul. Pentru dummy content foloseste chiar "lorem ipsum" pentru a nu se face confuzia cu un content cu destinatie precisa. Putem tine legatura 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 Gremini.

Fiind vorba de un magazin online, "centrul de greutate" este produsul. Acesta, fie pe pagina lui speciala, fie intr-o pagina de lista de mai multe produse, trebuie reprezentat cat mai usor si inteles cat mai usor de userii ce viziteaza magazinul. Bineinteles, avem nevoie de talentul de designer de a creea "frumosul" dar in acelasi timp trebuie sa avem in minte ca userul sa poata cu usurinta sa inteleaga detaliile si mai ales sa interactioneze usor cu produsul (actiunile cele mai importante sunt cele ce contruiesc traseul produsului pana in cosul de cumparaturi si apoi pana la comandarea acestuia).

Asadar, prima pagina, pagina de homepage, va fi pagina pe care de obicei sunt reprezentate elementele esentiale de marketing, precum bannere, produse aflate la promotii etc., dar si alte elemente secundare precum formulare de newsletter, articole de noutati din blog, logo-uri de producatori/colaboratori si altele.

In general, in proportie de 99%, fiecare pagina va fi insotita Header si Footer. In header, in general, sunt prezente logo, bara de search, meniu contul meu, produse favorite, cosul de cumparaturi si suplimentar alte informatii precum cele de contact sau diverse beneficii ale magazinului. Tot in header, este foarte des intalnita varianta cu meniu de categorii cu subcategorii.

Cateva sugestii pe care le recomandam, din experienta altor colaborari, unui web designer:

1. Pentru content de preferat ar fi sa ne raportam la o latime de 1200px (cea uzuala din Bootstrap, dar nu neaparat), dar daca vei folosi full-width, creeaza fisierele pe o anumita latime reala pentru browsere de desktop si pastreaz-o pe toate fisierele.
2. Ne intereseaza sa putem cu usurinta sa citim dimensiunile de caractere, inaltimi de linii, culori si alte elemente de stil de pe caractere. Adica sa le putem vedea din Photoshop de exemplu. Nu e nevoie sa creezi o legenda sau alte fisiere suplimentare explicative.2.1. Ar fi indicat sa folosesti web fonturi pentru texte si mai ales sa suporte si diacritice (clientii au tendinta de a trece pe texte ce contin diacritice pentru limba romana).
3. Pentru elementele de tip "icons" propunem doua variante. Ori ni le atasezi impreuna cu fisierele de design (format imagine sau font) ori le creeati in fisierul de design, independente pentru a putea fi extrase cu precizie.
4. Un logo este foarte binevenit inca de la inceput. Daca nu face parte din convetia ta cu clientul, afla cat mai multe detalii despre proportiile acestuia, pentru a nu avea surprize pe parcurs.
5. Pentru meniu cere clientului informatii complete despre cate categorii are si cum sunt structurate. In functie de asta poti insera meniul (sus in header eventual) dispus pe orizonala sau pe verticala. Si mai presus de toate, analizeaza si eventual intreaba clientul cum prefera reorganizarea (unde este cazul) elementelor 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 "stricam" munca designerului.
6. Zona de myaccount. Trebuie sa stii dinainte cum intentioneaza si daca intentioneaza sa foloseasca in header linkurile de contul meu. Totodata, nu insera optiuni de logare sau creare cont (ex. Google, facebook), decat daca ai informatia aceasta de la client.
7. Pentru versiunile de layout-uri responsive, avem nevoie de viziunea designerului asupra reorganizarii elementelor in pagini, pentru minim doua marimi de display-uri (tableta si mobil). Daca ai mai multe viziuni pentru mai multe standarde de display-uri, este si mai bine.
8. Lucrul pe zonele ce contin produse (in special pagini de categorie sau pagina de produs), trebuie facut dupa ce au fost stranse informatiile de la ce doreste clientul sa afiseze pentru a putea construi o solutie de UX rezonabila. #