Telegram, WhatsApp  +380637610482
Valery Danyuk
Valery DanyukEntwicklerEntwicklung von KI-Tools für Unternehmen. Hohe Qualität. Erschwinglich.In Telegram schreiben
Le Puzz — eine Vorschau einer Website in diesem Stil

Le Puzz

Sunny Sunday Circular ist eine Boulevardzeitung voller Geheimnisse.

Le Puzz ist ein maximalistisches E-Commerce-System für Boutiquen, das auf einer zweifarbigen Gestaltung basiert: ein sattes, wabenartiges Gelb trifft auf reines Schwarz vor einem kühlen, perlgrauen Hintergrund. Der Stil ist eine Mischung aus Vintage-Zeitung und Puzzle: Der Fließtext ist in der Serifenschrift Times, die Überschriften in der eigens entwickelten Schriftart Times Now gesetzt – ein bewusster Bruch mit den traditionellen E-Commerce-Konventionen, die auf serifenlose Schriften setzen. Die Benutzeroberfläche selbst ist schlicht und rasterbasiert gehalten, wodurch die visuelle Wirkung durch die Produktverpackungen (dichte, illustrierte Kompositionen voller Spielzeug) optimal zur Geltung kommt. Die Bedienelemente sind robust: Schaltflächen mit schwarzem Rand auf gelbem Hintergrund, pillenförmige Symbole, Karten mit einem Radius von 12 Pixeln und großzügiger Zeilenabstand für Kapitälchen, was selbst der Schaltfläche „SCHNELL HINZUFÜGEN“ einen redaktionellen Touch verleiht.

Ein klassisches E-Commerce-Grid mit unverwechselbarem Editorial-Design. Der Header besteht aus einem gelben Wabenstreifen mit einem einzeiligen schwarzen Rand, der ein zentriertes Logo und eine zusätzliche Navigationsleiste enthält. Darunter, oberhalb eines dreispaltigen Produkt-Grids auf grauem Hintergrund, befindet sich ein zentrierter Begrüßungs-Header in der Schriftart Times Now. Das Hauptelement ist ein zentrierter Fotoblock mit abgerundeten Ecken (40), flankiert von zwei Produktkarten. Der Rhythmus der Abschnitte bleibt erhalten: großzügiger vertikaler Abstand (30), abwechselnd gelbe und graue Flächen und eine maximale Breite von ca. 4,5 cm, zentriert auf der Seite. Die Produktkarten sind gleich groß und in einem übersichtlichen dreispaltigen Grid mit 5 cm Abstand angeordnet. Das Layout ist symmetrisch und an das Grid gebunden – keine asymmetrischen Kompositionen oder überlappenden Elemente.

Das visuelle Element ist die Produktfotografie. Die Puzzleboxen werden frontal vor einem weißen/neutralen Hintergrund fotografiert und anschließend vor einem warmen blauen oder natürlichen Studiohintergrund platziert. Das Hauptbild zeigt eine Person mit mehreren Puzzleboxen – ein Lifestyle-Produkt, eingefangen mit lässiger Energie. Die Verpackung selbst ist aufwendig, illustrativ und maximalistisch: eine Vielzahl von Spielzeugen, Lebensmitteln und Figuren in leuchtenden Primärfarben mit dicken schwarzen Konturen, gestaltet wie eine Kinderbuchillustration, die über ein 500-teiliges Puzzle verteilt ist. Keine abstrakten Grafiken, keine 3D-Renderings, keine Ikonografie außer einer einzelnen Lupe – die Puzzles selbst sprechen die visuelle Sprache.

Palette

Marke

  • Honeycomb Yellow #ffd931 — Die primäre Markenfarbe, die Titelleiste, die primären Aktionsschaltflächen, der aktive Status der Navigation, die Farbe der Linkunterstreichung, die Akzentfüllung – der eine Farbton, um den sich alles andere dreht.

Neutral

  • Carbon Black #000000 — Der Haupttext, die dicken Rahmen, die Umrisse der Schaltflächen, die Umrisse der Symbole und der Navigationstext bilden die strukturelle Grundlage des gesamten Systems.
  • Ink Black #231f20 — Sekundärtext, Primärtext, Schaltflächenrahmen, Eingabefeldrahmen – eine etwas wärmere, fast schwarze Farbe für ein weicheres Erscheinungsbild.
  • Pearl Gray #c8cbcd — Seitenleinwand, Produktkartenhintergründe, eine eindrucksvolle Bühne, auf der gelbe und schwarze Farben erscheinen.
  • Fog Gray #a6a8aa — Gedämpfte Badge-Oberflächen, sekundäre Chip-Hintergründe und dezente Benutzeroberflächenfüllungen.
  • Smoke Line #d6d6d6 — Schmale Trennwände, unauffällige Tisch-/Kartentrennwände.

Typografie

von 11 auf 47 Pixel · 6 Schritte

  • Times Now — Ersatz: Playfair Display · Umrisse 100, 400 · Eine Serifenschrift für Überschriften und Unterüberschriften – verwendet für Hauptüberschriften, Produktnamen und Abschnittstitel. Die ultraleichte 100-Punkt-Schrift mit einem Zeilenabstand von 47 Pixeln erzeugt einen hohen, fast kompakten redaktionellen Eindruck; die schmalen Buchstabenformen (Zeilenhöhen von 0,87–0,90) ermöglichen es, große Überschriften nah am Fließtext zu platzieren und so ein gedrucktes Poster zu imitieren.
  • Times — Ersatz: Times New Roman · Umrisse 400 · Die Serifenschrift ist eine unerwartete Wahl für einen Onlineshop und verleiht der gesamten Website einen literarischen, katalogartigen Charakter. Der geringe Zeilenabstand (1,15) sorgt für kompakte und gut lesbare Absätze.
  • Helvetica Neue — Ersatz: Helvetica · Umrisse 100, 400 · Kleiner Text in der Benutzeroberfläche, Text auf Schaltflächen und Mikrotext sind in einer 11px-Schriftart mit großem Buchstabenabstand (0,0730em) gesetzt, wodurch das Gefühl entsteht, selbst bei angenehmer Körpertemperatur in Großbuchstaben zu schreiben.

Intervalle und Form

ZweckBedeutung
Dichtedicht
Grundlegender Schritt15px
Radius der Schaltfläche12px
Kartenradius12px
SchattenNein – Ränder statt Schatten
Zwischen den Abschnitten30-40px
Seitenbreite1200px

KI erstellt Ihre Website im Le Puzz -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

  • Agence Foudre — Das Titelbild des Magazins ist in einem zarten Rosa gehalten, das an Lippenstift erinnert.
  • INVERSA — Ein topografisches Feldterminal um Mitternacht. Ein dunkles Bedienfeld, auf dem riesige redaktionelle Schriftarten und eine einzelne Ebene neongrüner Markierungen über Satellitenbilder der Erde gelegt sind, jede Beschriftung monochrom, als würde sie Missionskoordinaten ablesen.
  • Acne Studios — Ein minimalistischer Galerieraum voller lebendiger Fotografien – eine auf Marmor ausgelegte Modezeitschrift.
  • GTE — Handelsterminal hinter der Galeriebeleuchtung
  • Diabla — Ein mediterraner Innenhof am Mittag – sonnengebleichte rosa Wände, eine leuchtend rote Markise und serifenbeschriftete Überschriften von Redaktionen, die sich über den Himmel erstrecken.
  • Subset — Editorial-Boutique aus Rohleinen
  • Cursor — Eine gemütliche Pergamentwerkstatt, erleuchtet von glimmenden Kohlen
  • 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.
  • 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
  • Drive Capital — Retro-Roadtrip-Poster auf warmem Papier