Shop
Een zwevend handelssterrenbeeld op wit marmer.
De webwinkel werkt volgens een 'wit canvas'-model, waarbij producten worden weergegeven als grote, sterk gebogen afbeeldingskaarten in plaats van een raster met miniaturen. De hele interface is ongelooflijk vloeiend: overal radii van 20-28px, pilvormige bedieningselementen en een compacte lettergrootte van 16px GT Standard met strakke negatieve spatiëring, waardoor tekst scherp en vetgedrukt is. Het enige opvallende accent in het systeem is een levendig paars (#5433eb), dat terugkomt in het logo, het ronde zoekveld en als een getinte schaduw op dezelfde knop. De rest van het kleurenpalet is warm en neutraal: witte oppervlakken, een subtiel koelgrijs canvas, subtiele randen en bijna zwarte tekst. De dichtheid blijft compact met marges van 12px, maar de hero- en categoriebalken ademen dankzij een royale verticale ruimte van 64-80px, waardoor de winkelervaring meer aanvoelt als browsen dan als een catalogus.
De maximale breedte is 1200px, gecentreerd op een doorschijnend canvas (#f2f4f5), met een permanente zijbalk van 64px breed aan de linkerkant die alleen navigatiepictogrammen bevat. Het hoofdelement is een strook over de volledige breedte, met productkaarten boven een gecentreerd paars "shop"-logo en een pilvormige zoekbalk direct daaronder. Categorieën staan in één gecentreerde rij onder de zoekbalk. Inhoudssecties (Dames, Heren, Beauty, Wonen, Baby & Kinderen) volgen als aparte stroken, elk met een raster van 4 kolommen met productafbeeldingen of een compositie van 2 kolommen met "hoofdelement en raster". De verticale afstand is ruim: 64-80px tussen de hoofdsecties. De footer is een donkere strook onderaan de pagina met kolomvormige linkgroepen. Carrouselpijlen aan de rechterkant van de horizontale productpanelen geven aan dat er scrollbare inhoud is zonder paginering.
Fotografie is het dominante visuele element: productfoto's op volledig scherm tegen een witte achtergrond, bijgesneden op schaal 1:1, en lifestylefoto's met warme aardetinten (beige, terracotta, salie, ivoor). Productafbeeldingen hebben hun eigen kleur – de gebruikersinterface blijft achromatisch, waardoor de productkleuren voor visuele variatie zorgen. Merklogo's verschijnen als overlaytekst op donkere of lichte hoofdafbeeldingen, in plaats van als afzonderlijke pictogrammen. In de hoofdcompositie zijn productkaarten gepositioneerd als een zwevende, licht overlappende constellatie boven het woordmerk. Pictogrammen zijn minimalistisch en monochroom (zwarte contouren), met uitzondering van categoriepictogrammen, die één merkkleur gebruiken. Er zijn geen illustraties, 3D-effecten of kleurverlopen in productafbeeldingen.
Palet
Merk
- Shop Violet
#5433eb— De verzendknop, het stippellijntje en het merklogo zijn de enige accenten die de actie en individualiteit op de witte achtergrond benadrukken. - Violet Wash
#c0b5f3— Een doorschijnende halo achter de paarse verzendknop die zijn gloed behoudt zonder van kleur te veranderen.
Neutrale
- Canvas Mist
#f2f4f5— Pagina-achtergrond en extra oppervlaktebehandeling achter reliëfkaarten. - Pure White
#ffffff— Het hoofdoppervlak voor kaarten, invoervelden, zwevende pictogrammen en pilvormige knoppen. - Ink Black
#000000— Hoofdtekst, koppen, pictogrammen, navigatiesymbolen en productkaarten in de donkere modus. - Faint Border
#ebebeb— Dunne scheidingslijnen op kaarten, omlijningen van invoervelden en pilvormige knopframes. - Muted Gray
#787574— Secundaire tekst, navigatielabels en pictogramcontouren worden weergegeven wanneer de applicatie inactief is. - Cool Stone
#cccccc— Plaatsaanduidingen, uitgeschakelde statussen en achtergronden van inactieve pictogrammen
Typografie
van 11 tot 16px · 4 stappen
- GT Standard — vervanging: Inter · overzichten 400 · Het primaire lettertype in alle formaten – zowel voor de hoofdtekst als voor de koppen. GTStandard-MRegular met een lettergrootte van 16px/-0.031em is het primaire lettertype voor hoofdtekst, knoppen en labels. GTStandard-MSemibold met een lettergrootte van 20px/-0.05em wordt gebruikt voor diverse grote koppen; GTStandard-MMedium met een lettergrootte van 11–12px wordt gebruikt voor microcaptions. Elke lettertypevariant wordt weergegeven met een optisch gewicht van 400 – de lettertypehiërarchie wordt bereikt door subtiele verlopen en een dichte negatieve letterafstand, in plaats van een opvallend contrast. Dit is een kenmerkende stijl: Shop schreeuwt niet met vette lettertypen, maar geeft vorm aan de tekst door middel van letterafstand.
- Shopify Sans — vervanging: Inter · overzichten 400, 700 · Gereserveerd voor berichten op systeemniveau, zoals laadbanners van apps en tekst over cookie-toestemming.
Intervallen en vorm
| Doel | Betekenis |
|---|---|
| Dikte | gemiddeld |
| Basisstap | 12px |
| Knopradius | 9999px |
| Kaartradius | 28px |
| Schaduwen | zachte schaduwen |
| Tussen secties | 64px |
| Paginabreedte | 1200px |
AI bouwt je website in de stijl Shop en vult deze in.
- Vul het account aan met producten en berichten via de link - Instagram, TikTok, Facebook.
- Neem de inhoud van je oude website over; geef gewoon het adres op.
- Modern design op de beste engine: React ( Next.js) met server-side rendering en SEO-optimalisatie direct uit de doos.
- Volledig geautomatiseerde SEO-optimalisatie voor zoekresultaten en aanbevelingen op basis van neurale netwerken.
Vergelijkbare stijlen
- Cursor — Een knusse perkamentwerkplaats, verlicht door smeulende kolen.
- Slush — Opblaasbaar universum van stickers op pastelkleurig papier
- MindMarket — Een knus sprookjesboek op crèmekleurig papier - een vriendelijk redactioneel canvas waarop grote Inter-koppen en uitgeknipte papieren figuren naast elkaar bestaan op een zonovergoten, stickerzachte ondergrond.
- Airbnb — Een rustige witte galeriewand met een enkele koraalrode boekenlegger.
- Superr — Een warm schoolschrift in het zachte middaglicht. Een crèmekleurige pagina, een oranje stift zonder dop en een stapel gelamineerde naamstickers die eraf gepeld moeten worden.
- Apple (España) — De museumgalerie, badend in zacht daglicht, is één grote, fascinerende, gewichtloze witte ruimte, waarbij elk object wordt verlicht door een spotlicht tegen een licht getinte muur.
- Lamborghini — Zwarte carrosserie in de showroom, onder de schijnwerpers - één gele auto
- Amplemarket — Een zonovergoten werkplek bezaaid met confetti.
- Getharvest — Een bureau tijdens het gouden uur – een warm crèmekleurig canvas, witte ansichtkaarten die aan het canvas hangen, en een enkele heldere oranje vlam.
- Agence Foudre — De omslag van het tijdschrift heeft een zachtroze kleur die aan lippenstift doet denken.
- Drive Capital — Retro roadtrip-poster op warm papier
- Apple (España) — witte vitrinekast