Shop
O constelație comercială plutitoare pe marmură albă
Magazinul online funcționează pe un model de „pânză albă”, cu produse afișate ca niște carduri de imagine mari, puternic curbate, în loc de grile de miniaturi. Întreaga interfață este incredibil de fluidă: raze de 20-28px pe toată suprafața, comenzi în formă de pilulă și un corp compact GT Standard de 16px cu urmărire negativă precisă, care face textul clar și îndrăzneț. Singurul accent îndrăzneț al sistemului este un violet vibrant (#5433eb), care apare în logo, în câmpul circular pentru rezultatele căutării și ca o umbră nuanțată pe același buton. Restul paletei este neutru cald: suprafețe albe, o pânză gri rece subtilă, margini subtile și text aproape negru. Densitatea rămâne compactă, cu margini de 12px, dar dungile pentru erou și categorie respiră datorită unui ritm vertical generos de 64-80px, făcând ca experiența comercială să se simtă mai mult ca navigarea decât ca un catalog.
Lățimea maximă este de 1200px, centrată pe o pânză translucidă #f2f4f5, cu o bară laterală persistentă de 64px în stânga, care conține doar pictograme de navigare. Elementul principal este o bandă cu lățime completă, cu carduri de produs poziționate deasupra unui logo „magazin” violet centrat și o bară de căutare în formă de pilulă direct sub aceasta. Pilulele de categorii sunt aranjate într-un singur rând centrat sub bara de căutare. Secțiunile de conținut (Femei, Bărbați, Frumusețe, Casă, Bebeluși și Copii) urmează ca benzi desemnate, fiecare conținând o grilă cu 4 coloane cu imagini de produse sau o compoziție cu 2 coloane de tip „element principal și grilă”. Ritmul vertical este generos: 64–80px între secțiunile principale. Subsolul este o bandă întunecată în partea de jos a paginii, cu grupuri de linkuri în formă de coloană. Săgețile carusel din partea dreaptă a panourilor orizontale de produse indică conținut derulabil fără puncte de paginare.
Fotografia este elementul vizual dominant: fotografii de produse pe ecran complet pe un fundal alb, decupate 1:1 și imagini lifestyle cu tonuri calde de pământ (bej, teracotă, salvie, fildeș). Imaginile produselor au propria culoare - interfața cu utilizatorul rămâne acromatică, permițând nuanțelor produselor să ofere varietate vizuală. Logo-urile mărcilor apar ca text suprapus peste imagini principale întunecate sau luminoase, mai degrabă decât ca pictograme individuale. În compoziția principală, cardurile de produs sunt poziționate ca o constelație plutitoare, ușor suprapusă, deasupra mărcii verbale. Pictogramele sunt minimaliste și monocrome (contururi negre), cu excepția pictogramelor categoriilor, care utilizează o singură culoare de marcă. Nu există ilustrații, efecte 3D sau gradienți în imaginile produselor.
Paletă
Marca
- Shop Violet
#5433eb— Butonul de trimitere, marcajul de text punctat și sigla mărcii sunt singurele accente care evidențiază acțiunea și individualitatea pe fundalul alb. - Violet Wash
#c0b5f3— Un halou translucid în spatele butonului violet de trimitere care își menține strălucirea fără a-și schimba nuanța.
Neutru
- Canvas Mist
#f2f4f5— Fundalul paginii și tratament suplimentar al suprafeței în spatele cartonașelor în relief. - Pure White
#ffffff— Suprafața principală pentru carduri, câmpuri de introducere, semne plutitoare și butoane în formă de pastilă. - Ink Black
#000000— Textul principal, titlurile, pictogramele, simbolurile de navigare și fișele de produs în modul întunecat. - Faint Border
#ebebeb— Linii subțiri de demarcație pe carduri, contururi de câmpuri de introducere a datelor și rame de butoane în formă de pastilă. - Muted Gray
#787574— Text secundar, etichete de navigare, contururi de pictograme când sunt inactive - Cool Stone
#cccccc— Substituenți, stări dezactivate și fundaluri pentru pictograme inactive
Tipografie
de la 11 la 16px · 4 pași
- GT Standard — înlocuire: Inter · contururi 400 · Fontul principal pentru toate dimensiunile - atât pentru textul principal, cât și pentru titluri. GTStandard-MRegular la 16px/-0.031em este fontul principal pentru textul principal, butoane și etichete. GTStandard-MSemibold la 20px/-0.05em este utilizat pentru mai multe titluri mari; GTStandard-MMedium la 11–12px este utilizat pentru microlegende. Fiecare variantă de font este afișată cu o greutate optică de 400 - ierarhia fonturilor este realizată prin gradienți subtili și spațiere densă negativă între litere, mai degrabă decât contrast îndrăzneț. Acesta este un stil caracteristic: Shop nu strigă cu fonturi îndrăznețe, ci mai degrabă modelează textul prin spațierea între litere.
- Shopify Sans — înlocuire: Inter · contururi 400, 700 · Rezervat pentru mesaje la nivel de sistem, cum ar fi bannerele de încărcare a aplicațiilor și textul de consimțământ pentru cookie-uri.
Intervale și formă
| Scop | Sens |
|---|---|
| Densitate | medie |
| Pasul de bază | 12px |
| Raza butonului | 9999px |
| Raza cardului | 28px |
| Umbre | umbre moi |
| Între secțiuni | 64px |
| Lățimea paginii | 1200px |
Inteligența artificială vă va construi site-ul web în stilul Shop și îl va completa
- Completează cu produse și postări prin link - Instagram, TikTok, Facebook.
- Transferați conținut de pe vechiul site - specificați doar adresa.
- Design modern pe cel mai bun motor: React ( Next.js) cu randare pe server și optimizare SEO gata de utilizare.
- Optimizare SEO complet automatizată pentru rezultatele căutării și recomandări de rețele neuronale.
Stiluri similare
- Cursor — Un atelier de pergament confortabil, luminat de cărbuni fumegând
- Slush — univers gonflabil de autocolante pe hârtie pastelată
- MindMarket — O carte de basm confortabilă pe hârtie crem - o pânză editorială prietenoasă unde titluri mari din Inter și personaje decupate din hârtie coexistă pe o suprafață scăldată în soare, moale ca un autocolant.
- Airbnb — Un perete alb liniștit al galeriei cu un singur semn de carte roșu coral
- Superr — Un caiet de școală cald în lumina blândă a după-amiezii. O pagină crem, un marker portocaliu fără capac și un teanc de abțibilduri laminate cu nume care așteaptă să fie dezlipite.
- Apple (España) — Galeria muzeului, în lumina blândă a zilei, este un spațiu alb, unic, captivant, fără greutate, fiecare exponat fiind iluminat de un reflector pe un perete ușor nuanțat.
- Lamborghini — Culoarea neagră a caroseriei în showroom, sub spoturi - o mașină galbenă
- Amplemarket — Un loc de muncă scăldat în soare, presărat cu confetti
- Getharvest — Un birou la ora aurie – o pânză crem caldă, cărți poștale albe atârnate pe pânză și o singură flacără portocalie strălucitoare
- Agence Foudre — Coperta revistei este o culoare roz pal, care amintește de ruj.
- Drive Capital — Afiș retro pentru călătorii rutiere pe hârtie caldă
- Apple (España) — vitrină albă pentru galerie