Shop
Eine schwebende Handelskonstellation auf weißem Marmor
Der Onlineshop arbeitet mit einem „White Canvas“-Design, bei dem Produkte als große, stark gewölbte Bildkarten anstatt als Raster aus Miniaturansichten präsentiert werden. Die gesamte Benutzeroberfläche ist äußerst flüssig: durchgehend 20–28 Pixel breite Kanten, pillenförmige Bedienelemente und ein kompakter 16-Pixel-Gleittext im GT-Standard-Format mit geringem negativen Tracking, wodurch der Text gestochen scharf und kräftig wirkt. Der einzige kräftige Akzent ist ein leuchtendes Lila (#5433eb), das im Logo, im runden Suchergebnisfeld und als getönter Schatten auf demselben Button zu finden ist. Die restliche Farbpalette ist warm und neutral: weiße Flächen, ein dezenter, kühler Grauton, dezente Rahmen und fast schwarzer Text. Die Dichte bleibt mit 12 Pixel breiten Abständen kompakt, doch die Hero- und Kategorieleisten wirken dank eines großzügigen vertikalen Abstands von 64–80 Pixeln luftig, wodurch sich das Einkaufserlebnis eher wie Stöbern als wie ein Katalog anfühlt.
Die maximale Breite beträgt 1200 Pixel und ist auf einem transparenten Canvas (#f2f4f5) zentriert. Links befindet sich eine permanente, 64 Pixel breite Seitenleiste mit Navigationssymbolen. Das Hauptelement ist ein vollflächiger Streifen mit Produktkarten über einem zentrierten, violetten „Shop“-Logo und einer pillenförmigen Suchleiste direkt darunter. Die Kategorien sind in einer zentrierten Zeile unterhalb der Suchleiste angeordnet. Die Inhaltsbereiche (Damen, Herren, Beauty, Wohnen, Baby & Kinder) folgen als separate Streifen. Jeder Streifen enthält entweder ein vierspaltiges Raster mit Produktbildern oder eine zweispaltige Anordnung aus Hauptelement und Raster. Der vertikale Abstand zwischen den Hauptbereichen ist großzügig: 64–80 Pixel. Die Fußzeile ist ein dunkler Streifen am unteren Seitenrand mit spaltenförmigen Linkgruppen. Karussellpfeile rechts neben den horizontalen Produktpanels weisen auf scrollbare Inhalte ohne Seitennavigation hin.
Fotografie ist das dominierende visuelle Element: Produktfotos im Vollbildmodus vor weißem Hintergrund, 1:1-Ausschnitt, und Lifestyle-Bilder in warmen Erdtönen (Beige, Terrakotta, Salbei, Elfenbein). Die Produktbilder haben jeweils ihre eigene Farbe – die Benutzeroberfläche bleibt farblos, wodurch die Farbtöne der Produkte für visuelle Vielfalt sorgen. Markenlogos erscheinen als Overlay-Text auf dunklen oder hellen Hauptbildern, nicht als einzelne Icons. In der Hauptkomposition sind die Produktkarten als schwebende, leicht überlappende Konstellation über dem Schriftzug positioniert. Die Icons sind minimalistisch und monochrom (schwarze Konturen), mit Ausnahme der Kategorie-Icons, die in einer einzigen Markenfarbe gehalten sind. Es gibt keine Illustrationen, 3D-Effekte oder Farbverläufe in den Produktbildern.
Palette
Marke
- Shop Violet
#5433eb— Der Senden-Button, das gepunktete Textzeichen und das Markenlogo sind die einzigen Akzente, die auf dem weißen Hintergrund die Aktion und Individualität hervorheben. - Violet Wash
#c0b5f3— Hinter dem violetten Sendeknopf befindet sich ein durchscheinender Heiligenschein, der seinen Glanz beibehält, ohne seinen Farbton zu verändern.
Neutral
- Canvas Mist
#f2f4f5— Seitenhintergrund und zusätzliche Oberflächenbehandlung hinter erhabenen Karten. - Pure White
#ffffff— Die Hauptfläche für Karten, Eingabefelder, schwebende Symbole und pillenförmige Schaltflächen. - Ink Black
#000000— Haupttext, Überschriften, Icons, Navigationssymbole und Produktkarten im Dunkelmodus. - Faint Border
#ebebeb— Dünne Trennlinien auf Karten, Umrisse von Eingabefeldern und pillenförmige Schaltflächenrahmen. - Muted Gray
#787574— Sekundärtext, Navigationsbezeichnungen, Symbolumrisse im inaktiven Zustand - Cool Stone
#cccccc— Platzhalter, deaktivierte Zustände und inaktive Symbolhintergründe
Typografie
von 11 auf 16 Pixel · 4 Schritte
- GT Standard — Ersatz: Inter · Umrisse 400 · Die primäre Schriftart in allen Größen – sowohl für Fließtext als auch für Überschriften. GTStandard-MRegular (16px/-0,031em) ist die primäre Schriftart für Fließtext, Schaltflächen und Beschriftungen. GTStandard-MSemibold (20px/-0,05em) wird für einige große Überschriften verwendet; GTStandard-MMedium (11–12px) für Kurzbeschreibungen. Jede Schriftvariante wird mit einer optischen Stärke von 400 dargestellt – die Schrifthierarchie wird durch subtile Farbverläufe und dichte negative Buchstabenabstände anstelle von Fettdruckkontrasten erzielt. Dies ist der charakteristische Stil: Shop setzt nicht auf auffällige Fettdrucke, sondern gestaltet den Text durch die Buchstabenabstände.
- Shopify Sans — Ersatz: Inter · Umrisse 400, 700 · Reserviert für Systemmeldungen wie App-Ladebanner und Cookie-Einwilligungstexte.
Intervalle und Form
| Zweck | Bedeutung |
|---|---|
| Dichte | Durchschnitt |
| Grundlegender Schritt | 12px |
| Radius der Schaltfläche | 9999px |
| Kartenradius | 28px |
| Schatten | weiche Schatten |
| Zwischen den Abschnitten | 64px |
| Seitenbreite | 1200px |
KI erstellt Ihre Website im Shop -Stil und füllt sie aus.
- Teile deine Produkte und Beiträge über den Link – Instagram, TikTok, Facebook.
- Übertragen Sie Inhalte von Ihrer alten Website – geben Sie einfach die Adresse an.
- Modernes Design auf der besten Plattform: React ( Next.js) mit serverseitigem Rendering und SEO-Optimierung direkt nach der Installation.
- Vollautomatisierte SEO-Optimierung für Suchergebnisse und Empfehlungen durch neuronale Netze.
Ähnliche Stile
- Cursor — Eine gemütliche Pergamentwerkstatt, erleuchtet von glimmenden Kohlen
- Slush — aufblasbares Universum aus Aufklebern auf Pastellpapier
- MindMarket — Ein gemütliches Märchenbuch auf cremefarbenem Papier – eine freundliche redaktionelle Leinwand, auf der große Inter-Schlagzeilen und ausgeschnittene Papierfiguren auf einer sonnendurchfluteten, aufkleberweichen Oberfläche koexistieren.
- Airbnb — Eine schlichte weiße Bilderwand mit einem einzelnen korallenroten Lesezeichen
- Superr — Ein warmes Schulheft im sanften Nachmittagslicht. Eine cremefarbene Seite, ein orangefarbener Filzstift ohne Kappe und ein Stapel laminierter Namensaufkleber, die darauf warten, abgelöst zu werden.
- Apple (España) — Die Museumsgalerie präsentiert sich im sanften Tageslicht als ein einziger, faszinierender, schwereloser weißer Raum, in dem jedes Exponat von einem Scheinwerfer vor einer leicht getönten Wand beleuchtet wird.
- Lamborghini — Schwarze Karosseriefarbe im Ausstellungsraum, unter den Scheinwerfern – ein gelbes Auto
- Amplemarket — Ein sonnendurchfluteter Arbeitsplatz, übersät mit Konfetti
- Getharvest — Ein Schreibtisch in der goldenen Stunde – eine warme, cremefarbene Leinwand, weiße Postkarten daran und eine einzelne, hellorange Flamme
- Agence Foudre — Das Titelbild des Magazins ist in einem zarten Rosa gehalten, das an Lippenstift erinnert.
- Drive Capital — Retro-Roadtrip-Poster auf warmem Papier
- Apple (España) — weiße Galerievitrine