Top
MAG-EXA2525
Membrana resorbabila EXAFLEX 25 x 25 x 0,2 mm - Maggi
Lot A24-118Val. 03/2029
In stoc - 14 buc.
389 lei cu TVA
Predare catre designer · revizia A
Specificatia de implementare pentru cele trei pagini care duc vanzarea: Acasa, Categorie, Produs. Referinta vizuala = macheta functionala Invictus Medical. Documentul de fata este contractul: ce e obligatoriu, ce e liber, si de ce.
Trei niveluri de libertate. Nu le amesteca - cele fixate au motiv de conversie sau de indexare in spate, nu preferinta.
Ordinea sectiunilor pe fiecare pagina, ce sta deasupra liniei de plutire, prezenta cautarii in antet, meniul in doua panouri, structura cardului de produs, si tot ce e in capitolul "Reguli de refuz".
Paleta finala, familia de fonturi, forma iconografiei, ilustratiile, fotografia, micro-animatiile, rotunjimile si umbrele. Valorile din document sunt un punct de plecare care functioneaza, nu o obligatie.
Container 1220 px, centrat. Marginile laterale se strang de la 20 la 14 px sub 900 px. Toate grilele au acelasi interval de 14 px, care scade la 10 px pe mobil.
| Prag | Ce se schimba | Grila produse | Grila categorii |
|---|---|---|---|
| ≥ 1000 | Asezare completa, meniu in doua panouri, filtre in coloana stanga | 4 coloane | 4 coloane |
| 1000 - 901 | Doar densitatea grilelor scade | 3 coloane | 3 coloane |
| ≤ 900 | Comutare mobil: antet pe doua randuri, meniul devine sertar, filtrele devin buton, produsul trece pe o coloana, apare bara lipita jos | 3 coloane | 3 coloane |
| ≤ 720 | Densitate de telefon | 2 coloane | 2 coloane |
| ≤ 520 | Butoanele din hero trec pe verticala, casetele de date se aseaza pe coloana | 2 coloane | 2 coloane |
| Banda | Desktop | Mobil | Observatie |
|---|---|---|---|
| Bara utilitara | 38 px | 34 px | Pe mobil raman doar telefon si WhatsApp |
| Antet principal | 78 px | auto, 2 randuri | Randul 2 = cautarea pe toata latimea |
| Bara de categorii | 44 px | 40 px | Derulabila orizontal pe mobil |
| Bara de incredere | 40 px | 36 px | Derulabila orizontal, nu se taie la 2 itemi |
Doua culori de marca - una de structura (antet, subsol, elemente pline) si una de actiune (butoane, legaturi, stari active) - plus o scara neutra rece si trei culori de stare. Actiunea nu se foloseste niciodata pentru suprafete mari; structura nu se foloseste niciodata pentru butonul principal.
Doua familii: una pentru interfata si continut, una monospatiata pentru tot ce e cod, cota sau eticheta - coduri de produs, loturi, dimensiuni, etichete de sectiune. Monospatiatul nu e decor: profesionistul citeste coduri, iar cifrele trebuie sa se alinieze pe coloana.
| Element | Valoare |
|---|---|
| Scara de spatiere | 4 - 6 - 8 - 10 - 14 - 18 - 22 - 26 - 34 - 42 |
| Sectiune, desktop | 42 px sus si jos |
| Sectiune, mobil | 26 px sus si jos |
| Interval grile | 14 px / 10 px pe mobil |
| Padding card | 12-14 px |
| Distanta titlu ? continut | 18-20 px |
| Element | Valoare |
|---|---|
| Colt card / buton | 4 px |
| Colt pastila | 99 px |
| Colt eticheta pe poza | 2 px |
| Chenar | 1 px |
| Chenar buton secundar | 1.5 px |
| Umbra (doar la hover) | 0 10px 26px -18px, 42% opac |
Fiecare componenta e desenata mai jos exact la cotele cerute. Ce vezi e randat, nu o poza - poti inspecta valorile direct in pagina.
| Tip | Inaltime | Padding | Text | Cand se foloseste |
|---|---|---|---|---|
| Principal | 44 px | 12 / 18 | 14 - 700 | Actiunea de cumparare. Unul singur vizibil pe ecran. |
| Latime completa | 50 px | 15 / 22 | 15.5 - 700 | Coloana de cumparare, mobil |
| Secundar | 44 px | 12 / 18 | 14 - 700 | Contact, alternative, actiuni auxiliare |
| Card produs | 38 px | 10 / 12 | 13 - 700 | Adaugare directa din grila |
| Poza | raport 1:1, fundal suprafata secundara, padding 14 px |
| Eticheta | coltul stanga-sus, 8 px de margine, majuscule mono 9.5 |
| Ordinea in corp | cod ? titlu ? lot si valabilitate ? stoc ? pret ? buton |
| Titlu | maximum 3 randuri, apoi taiat cu puncte de suspensie |
| Baza cardului | stoc, pret si buton se lipesc jos, ca sa fie aliniate intre carduri |
| Hover | chenar mai inchis + umbra; poza nu se mareste |
| Parte | Cota | Comportament |
|---|---|---|
| Coloana stanga | 296 px | Toate categoriile de nivel 1, cu numar de produse. Deruleaza intern, tine 30-40 de intrari. Categoria activa: fundal alb + bara de 3 px in culoarea de actiune. |
| Panoul drept | restul | Subcategoriile categoriei active, grupate pe coloane de minimum 200 px. Se schimba la trecerea cu mouse-ul, fara click. |
| Inaltime | max 520 px | Sau 72% din inaltimea ferestrei, care e mai mica |
| Subsolul panoului | - | "Vezi toate din <categorie> (N)" + producatorii principali ca pastile |
| Inchidere | - | Click in afara, Escape, sau click pe buton |
Rolul paginii nu e sa vanda un produs, ci sa trimita rapid in categoria corecta si sa demonstreze ca magazinul e serios. Coloana din dreapta spune ce se schimba pe telefon.
Supratitlu cu dovada de amploare, titlu categoric, un rand de propunere concreta, doua butoane si un rand de cautari frecvente. Fara carusel. Fara a doua casuta de cautare - exista deja in antet.
Patru afirmatii verificabile: termen de livrare, documentatie, garantie sau lot, plata pe firma.
Patru repere din ultimele comenzi, cu buton de adaugare directa. Se afiseaza doar clientilor autentificati; altfel sectiunea lipseste complet.
8-12 categorii, fiecare cu poza reala, numarul de produse si doua-trei subcategorii legate direct. Nucleul paginii.
3-5 scenarii reale de utilizare care duc in categorii dedicate, nu in cautari cu parametri.
Patru produse alese pe date reale de vanzari, nu manual.
Patru afirmatii care se pot dovedi. Fara adjective.
Sir de marci cunoscute. La produs tehnic, transferul de legitimitate vine de la producator.
Trei articole legate de decizia de cumparare.
4-6 intrebari despre livrare, plata, garantie, retur - fricile primei comenzi.
Cea mai importanta pagina din magazin: primeste traficul platit pe termeni generici si e tinta principala din cautarea organica. Continutul explicativ sta sub grila, ca sa nu intarzie cumparatorul care stie ce vrea.
Acasa > Categorie > Subcategorie. Orienteaza omul venit direct din reclama.
Doua-trei randuri: ce contine categoria si pentru cine e. Nu textul lung.
Cea mai rapida cale de ingustare, fara parasirea paginii. Prima pastila = "Toate (N)".
Numarul de rezultate, buton de filtre cu numarul filtrelor active, sortare.
Coloana de filtre 236 px, lipita la derulare. Filtre pe atribute tehnice reale ale categoriei, nu doar pret si marca. 24-36 produse pe pagina.
Clasica, cu numere. Nu derulare infinita.
Criteriile de decizie plus un tabel comparativ intre subcategorii.
400-800 de cuvinte scrise pe intrebarile reale din cautare, plus 4-6 intrebari specifice.
Accesorii, consumabile, piese - si ajuta omul, si leaga categoriile intre ele.
Pagina de aterizare pentru Shopping si reclamele dinamice. Tot ce decide cumpararea trebuie sa incapa in primul ecran.
Calea completa; din Shopping omul intra direct aici si trebuie sa poata urca in categorie dintr-un click.
4-6 imagini reale, raport 1:1, cu miniaturi dedesubt. Video daca exista.
Producator, titlu, cod, marcaj de conformitate, pret cu si fara TVA, disponibilitate cu data estimata de livrare, cantitate, buton principal, legatura cu un consultant.
Doar la marfa cu termen: lot, valabilitate, conditii de pastrare. Langa buton, nu ascunsa intr-un tab.
La kituri: lista cu bucati. La produse simple: 3-5 propozitii despre ce face in practica.
Legaturi rapide catre sectiunile de mai jos. Continutul ramane in pagina - nimic ascuns in taburi.
Sabloane fixe de subtitluri, aceleasi la toate produsele, ca sa poata fi generate si verificate la scara.
Obligatoriu. Aceleasi atribute care alimenteaza filtrele din categorie - o sursa, doua afisari.
Pasi numerotati, cu mentiunea ca nu inlocuiesc instructiunile producatorului.
Produse complementare reale, nu "ti-ar mai putea placea".
Intrebarile primite pe telefon, urcate in pagina.
Locul se deseneaza si pentru starea goala, cu explicatia cand vin parerile. La lansare vor fi zero.
Produse comparabile pentru cine inca alege.
Doar pe mobil: pret + buton principal, vizibile permanent la derulare.
Nu doar starea fericita. Astea apar in trafic real si, daca nu sunt desenate, ajung improvizate in implementare.
| Componenta | Stari cerute |
|---|---|
| Buton | normal - hover - apasat - focus la tastatura - dezactivat - in lucru (dupa adaugarea in cos) |
| Card produs | normal - hover - stoc redus - la comanda - indisponibil |
| Cautare | gol - in scriere - sugestii - fara rezultate (cu propuneri de corectare) |
| Grila categorie | normala - dupa filtrare - zero rezultate - in incarcare |
| Filtre | neaplicate - aplicate cu numar - toate sterse |
| Pareri | gol (la lansare) - cu note |
| Formulare | eroare de camp, cu mesaj care spune ce s-a intamplat si cum se repara |
Lucruri care par imbunatatiri si strica exact ce apara scheletul. Daca apar in machete, se intorc.
Muta continutul sub degetul omului, incarca greu, si aproape nimeni nu ajunge la a doua imagine.
Exista una in antet, permanenta. A doua e dublura.
Nicio fereastra care intreaba inainte sa arate produse. Ghidarea se ofera, nu se impune.
Ingroapa textul, ghidul de selectie si subsolul, si pierde reperul in catalog mare.
Pe produs, informatia sta in pagina, cu ancore. Ce e in tab nu se citeste si nu se indexeaza.
La brand nou, fara istoric de pret, reducerea inventata se vede si distruge increderea.
Se verifica usor si atrage sanctiune. Starea goala e onesta si se deseneaza.
In bara de incredere si pe stoc, textul ramane. Pictograma singura nu spune termenul de livrare.
Shopify. Lucruri care nu se pot desena "oricum", pentru ca implementarea le refuza.
| Zona | Constrangerea | Ce inseamna pentru desen |
|---|---|---|
| Ierarhie | Colectiile sunt plate, adresa fixa /collections/<nume> | Cele trei niveluri se construiesc din meniu, nu din adrese imbricate |
| Adresa produsului | Produsul are o singura adresa, /products/<nume> | Nu desena cai de tip categorie-in-adresa pe pagina de produs |
| Filtre | Vin din atribute structurate, nu din text liber | Fiecare filtru desenat inseamna un atribut care trebuie completat pe mii de produse |
| Cautare | Cautarea nativa nu acopera bine codurile si sinonimele | Deseneaza sugestiile cu poza, pret si stoc; cautarea dupa cod e obligatorie |
| Prima imagine | Este cel mai mare element de pe ecran si se incarca prioritar | Fara imagine de hero peste 400 KB si fara text important scris in imagine |
| Cos | Adaugarea se face fara reincarcarea paginii | Deseneaza confirmarea: sertar lateral sau notificare, cu starea "in lucru" |