FRANKY'S
Ein Retro-Gaming-Kiosk auf der Theke eines Skateshops
Frankys visuelle Sprache ist eine Mischung aus Retro-Spielhalle und Skateboard-Shop: ein warmer cremefarbener Hintergrund (#f3e5df), eingefasst von klaren Pixelrändern, ein allgegenwärtiges schwarz-weißes Schachbrettmuster und die einfarbige Schriftart Arcade, die für jedes Wort auf der Website verwendet wird. Die Farbpalette ist bewusst reduziert – es bleiben nur zwei Farben übrig (Signalorange #faa21f für das Schild und sattes Grün #128e44 für den Kaufbutton). Die gesamte Hierarchie wird durch die Erhöhung der Schriftstärke von Arcade von 400 auf 700 und die Verwendung von Schwarz auf dem cremefarbenen Hintergrund ausgedrückt. Die Oberflächen bleiben flach und monolithisch; Tiefe entsteht lediglich durch die eingefügte 1-Pixel-Linie in Creme auf den Buttons und das tonale Spiel des Schachbrettmusters. Die Elemente erinnern an die Grafiken von Online-Shops der 1990er-Jahre: dicke schwarze Ränder, enge Eckenradien von 6–12 Pixeln, ein kompakter Innenabstand von 4–8 Pixeln und 3D/AR-Schalter, die eher wie pixelige Icons als wie Chrome-Elemente wirken. Die neuen Seiten sollen die Arcade-Atmosphäre beibehalten: keine Farbverläufe außer einem orangefarbenen Lauftext, keine weichen Schatten, keine dekorative Typografie – nur cremefarbenes Papier, schwarze Pixellinien und ein einziger warmer Orangeton.
Auf Desktop-Computern wird die Produktseite in voller Breite und zentriert mit einer maximalen Breite von 1200 Pixeln angezeigt. Der Aufbau von oben nach unten ist wie folgt: orangefarbener Lauftext → cremefarbene Kopfzeile mit schwarzer Linie → zweispaltige Aufteilung (55 % Schachbrettmuster auf der Startseite / 45 % zweispaltiges Raster der Produktkarten) → cremefarbener Streifen in der Fußzeile. Auf Mobilgeräten wird die Startseite in ein Schachbrettmuster in voller Breite reduziert, und das Raster wird zu einem einspaltigen Layout. Die Produktkarten sind gleichmäßig in einem zweispaltigen Raster angeordnet, getrennt durch graue Pixel (#e5e7eb). Der Abstand zwischen den Abschnitten ist minimal (43–61 Pixel), und die Benutzeroberfläche verwendet niemals dunkle Streifen, die sich über die gesamte Seitenbreite erstrecken – die cremefarbene Oberfläche wird ohne Unterbrechung angezeigt.
Ein Foto von Kappen vor einem cremefarbenen Hintergrund, zentriert und eng beschnitten, mit einem weichen, anthrazitfarbenen Schatten darunter. Kein Lifestyle, keine Models, kein Kontext – die Kappe steht im Mittelpunkt. Ein Schachbrettmuster hinter dem Hauptmotiv dient als grafische Oberfläche. Keine Illustrationen, keine 3D-Renderings außer dem Augmented-Reality-Schalter, keine dekorativen Symbole außer dem pixeligen Kreuz im Logo.
Palette
Marke
- Marquee Orange
#faa21f— Benachrichtigungsleiste am oberen Bildschirmrand, Akzentelemente, Branding. - Buy Green
#128e44— Der Button „IN DEN WARENKORB“ ist ausgefüllt – die einzige Kaufaktion, die grün markiert ist.
Neutral
- Arcade Cream
#f3e5df— Seitenhintergrund, Produktkartenoberflächen, Schaltflächeneinsätze. - Ink Black
#000000— Haupttext, Schachbrettmuster, alle UI-Rahmen, Kartenumrisse, Symbolrahmen. - Pixel Gray
#e5e7eb— Dünne Ränder, Kartentrenner, Strukturregeln zwischen den Rasterzellen. - Charcoal
#333333— Sekundärer Oberflächenton, schachbrettartige Schattenquadrate, Schattenfarbe - Carbon
#151515— Satte, neutrale Farbtöne zum Ausfüllen von Illustrationen und die dichtesten Schachbrettmuster. - Muted Gray
#737373— Deaktivierter/stummgeschalteter Text auf Schaltflächen und im Fließtext
Typografie
von 10 bis 18 Pixel · 4 Schritte
- Arcade — Ersatz: VT323 · Umrisse 400, 700 · Für die gesamte Benutzeroberfläche wird eine einzige Schriftart verwendet – alle Überschriften, Beschriftungen, Preise, Schaltflächen, Fließtexte und Symbole sind in Arcade. Der Übergang von 400 zu 700 ist das einzige Mittel zur Erzeugung einer Hierarchie; die Verwendung einer zweiten Schriftart würde die Illusion eines Kiosks zerstören.
Intervalle und Form
| Zweck | Bedeutung |
|---|---|
| Dichte | dicht |
| Grundlegender Schritt | 4-8px |
| Radius der Schaltfläche | 6px |
| Kartenradius | 12px |
| Schatten | Nein – Ränder statt Schatten |
| Zwischen den Abschnitten | 43-61px |
| Seitenbreite | 1200px |
KI erstellt Ihre Website im FRANKY'S -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
- 099 SUPPLY — Eine Galeriewand voller schwarz-weißer Objekte
- teenage engineering — Industriekatalog für Studiobeleuchtung – das Produkt ist das einzige wichtige Objekt auf der Seite, alles andere wird darum herum besprochen.
- Custo — Eine Galerie in Anthrazit mit einer monolithischen Schriftart. Ein Ausstellungsraum in gedeckten Graugrüntönen, in dem ein einzelnes dunkles Objekt und eine 57-Pixel-Schrift für sich sprechen.
- Walden — Die Stille des Waldbodens – jedes Produkt ist ein Stein, jedes Pixel ist Moos und Stille.
- Fiverr — Der Blickfang des digitalen Basars ist ein leuchtend grünes Pulsieren vor dem Hintergrund dunkler Theaterbühnen. Ein einzelner neongrüner Punkt dient als Ankerpunkt für das Logo; der Rest ist monochrom gehalten und soll die Attraktivität der angebotenen Dienstleistungen hervorheben.
- Peloton — Ein rotes Leuchtfeuer auf einer pechschwarzen Startbahn. Ein Fitness-Showroom, in dem ein einzelnes leuchtend rotes CTA-Schild den riesigen, dunklen Ausstellungsraum durchschneidet und zu hellen, weißen Produkträumen führt.
- HOUSEPLANT — eine Buchhandlung mit Nüssen auf Leinenpapier
- Adam Lippes — Ein monochromer Editorial-Studio-Auftritt auf cremefarbenem Papier – eine Vogue-Doppelseite, bei der die einzige Dekoration das Layout-Raster und nicht die Farbpalette ist.
- Elektron — Das Bedienfeld der Anlage ist um Mitternacht eine nahezu schwarze Leinwand, auf der Produktfotos glänzen, während die Benutzeroberfläche praktisch unsichtbar bleibt.
- Sigmaphoto — Die Monochrome Galerie der Präzisionsinstrumente ist ein ruhiger, weißer Raum, in dem die einzige Farbe zählt, die zum Handeln auffordert.
- Channel Studio — Ein Fotostudio mit einem Korallenlampenschirm
- Specht Studio — Eine Galeriewand voller subtiler Kuriositäten. Die hauseigene Chromoberfläche des Studios besteht aus weißer Farbe und schwarzer Schrift; das visuelle Feuerwerk konzentriert sich vollständig auf die Fliesenarbeiten des Projekts.