Bang & Olufsen
Skandinavische Galerie zum Thema Porzellan. Wenn die B&O-Seite dunkel ist, wird das Stück beleuchtet, wie eine Skulptur in einer nachtaktiven Nische; wenn es beleuchtet ist, scheint es auf weißer Seide zu schweben, ohne dass etwas anderes die Aufmerksamkeit ablenkt.
Bang & Olufsen arbeitet nach dem Prinzip einer Galerie oder eines Museums: Nahezu weiße Porzellanleinwände, auf denen die Produkte wie Skulpturen zu schweben scheinen, werden nur gelegentlich von farbigen Einsätzen unterbrochen, die sich über die gesamte Bildschirmbreite erstrecken – ein tiefes Ultramarinviolett, das den gesamten Bildschirm einnimmt, manchmal ein sattes Terrakottarot –, um emotionale Akzente zu setzen. Die Typografie besteht aus einer einzigen, eigens entworfenen neogrotesken Schriftart (BeoSupreme), die für sich selbst spricht: kaum wahrnehmbar auf großen Bildschirmen, großzügig gefüllte Großbuchstaben auf Mikrolabels, keine weiteren Schriftarten erforderlich. Die Komponenten sind auf ein Minimum reduziert: durchscheinende, pillenförmige Bedienelemente, dünne Ränder, keine dekorativen Schatten, keine Farbverlaufsbuttons, keine Icons. Das Raster ist großzügig, Negativraum ein Luxus. Jedes Produkt erhält seinen eigenen schwebenden Sockel; das umgebende Weiß ist Raum. Farbe wird wie ein kostbares Material eingesetzt – wenn sie erscheint, füllt sie den gesamten Rahmen aus.
Der Container mit einer maximalen Breite von 1440 Pixeln ist zentriert und hat horizontale Ränder von 25 Pixeln. Das Hero-Element füllt die gesamte Seitenbreite aus (und sprengt damit den Container), und die ultramarinblaue Kamera erstreckt sich über die gesamte Breite. Die Produktübersichten sind gleichmäßig in 4–5 Spalten mit 25 Pixeln Abstand angeordnet und lassen sich auf Mobilgeräten horizontal scrollen. Die Abschnitte wechseln zwischen weißem Hintergrund und farbigen Kameras in voller Breite – der Rhythmus ist wie folgt: weiße Produktübersicht → ultramarinblaues Hero-Element → weiße Produktübersicht → roter redaktioneller Banner → weiße Produktübersicht → ultramarinblaue Fußzeile. Die Navigation ist eine minimalistische obere Leiste, die über den weißen und farbigen Abschnitten schwebt (der Text ist auf dunklem Hintergrund weiß). Die Seite wirkt übersichtlich – die Abstände zwischen den Abschnitten betragen 60–80 Pixel, jedes Produkt hat seinen eigenen Platz innerhalb der Zellen, und es gibt keine Informationsdichte.
Produktfotografie ist das einzige visuelle Element: keine Lifestyle-Bilder, Models oder Umgebungsdarstellungen. Die Produkte werden vor rein neutralen Hintergründen (Weiß, Schwarz und Farbverlauf Dunkelblau) mit kontrollierter Studiobeleuchtung fotografiert, die die Materialien hervorhebt: mattes Aluminium, Lederstruktur, eloxiertes Kupfer und mattes Silikon. Der Bildausschnitt ist eng, zentriert und das Hauptmotiv betont. Die Farbwiedergabe ist dezent und dem Material angemessen: Kupfer wird als Kupfer wahrgenommen, nicht im „goldenen Licht“. Sekundäre visuelle Motive sind sparsame, bildschirmfüllende Produktsilhouetten vor satten, monochromen Flächen (Ultramarin, Terrakotta-Rot) für dramatische redaktionelle Momente. Bildsprache: dünne 1-Pixel-Linie, monochrom schwarz auf weiß oder weiß auf dunkel, geometrisch, ohne Füllung, ohne Mehrfarbigkeit.
Palette
Marke
- Ultramarine Velvet
#060daa— Hintergrundbilder am oberen und unteren Seitenrand, dramatische Abschnitte, die sich über die gesamte Seitenbreite erstrecken, und eine Fußzeilenfüllung – eine satte, fast schwarzblau-violette Farbe, die ganze Rahmen einhüllt und einem einzelnen Produkt eine theatralische Wirkung verleiht.
Neutral
- Porcelain Canvas
#ffffff— Hintergrundbilder für Seiten, Produktkartendesign und Navigationsleisten bilden das grundlegende Fundament, auf dem jedes Produkt aufgebaut ist. - Bone
#fcfaee— Eine zweite Oberfläche für warme, neutrale Farbblöcke, Schaltflächentext auf dunklem Hintergrund, eine alternative Leinwand, wenn Weiß steril wirkt. - Obsidian
#191817— Der Haupttext und der Produktbeschreibungstext sind in einem warmen, fast schwarzen Farbton gehalten, der auf weißem Hintergrund weicher wirkt als reines #000000 auf Schwarz. - Pure Ink
#000000— Icon-Umrisse, Mikrotags, dezente Ränder und schärfste Textkontraste. - Graphite
#555555— Sekundärtext, Metadaten, Preisschilder, stiller Hilfstext - Mist
#e5e5e5— Dünne Eingangsdatengrenzen und das einzige strukturelle Trennzeichen im System.
Typografie
von 12 auf 36 Pixel · 5 Schritte
- BeoSupreme — Ersatz: Neue Haas Grotesk Display Pro (closest) · Umrisse 400, 500, 700 · Eine einheitliche Schriftart, die die gesamte Markenidentität widerspiegelt. Für Titel und Überschriften: Schriftstärke 500–700, 24–36 px mit engem Buchstabenabstand (-0,056em → -0,014em) für prägnante und aussagekräftige Überschriften. Für Fließtext und Benutzeroberfläche: Schriftstärke 400, 14–16 px, normaler Buchstabenabstand, Zeilenabstand 1,5–1,7. Mikrolabels (Navigation, Icons, der Slogan „Gegründet 1925“): Schriftstärke 500, 9–12 px mit großem Buchstabenabstand bis zu +0,143em, in Großbuchstaben dargestellt, um als unaufdringliche architektonische Beschriftungen zu dienen. Es gibt keine andere Schriftart.
- object-fit: cover; object-position: center; — Ersatz: Inter · Umrisse 400 · object-fit: cover; object-position: center; - in den extrahierten Daten gefunden, aber von der KI nicht beschrieben.
Intervalle und Form
| Zweck | Bedeutung |
|---|---|
| Dichte | dicht |
| Grundlegender Schritt | 8-16px |
| Radius der Schaltfläche | 40px |
| Kartenradius | 0px |
| Schatten | Nein – Ränder statt Schatten |
| Zwischen den Abschnitten | 60-80px |
| Seitenbreite | 1440px |
KI erstellt Ihre Website im Bang & Olufsen -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
- Structured — Renaissance-Galerie auf plastilinartigem Papier
- 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.
- Apple (España) — Die Obsidian Gallery ist ein dunkler Ausstellungsraum, in dem ein einzelnes Titanobjekt vor pechschwarzem Hintergrund leuchtet.
- 099 SUPPLY — Eine Galeriewand voller schwarz-weißer Objekte
- 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.
- Apple (España) — Die Galerie des Weißen Museums um 12 Uhr
- VITURE — Eine Neon-Produktpräsentation hinter nachtschwarzem Glas – ein abgedunkelter Ausstellungsraum, in dem ein einzelner orangefarbener Strahl die Dunkelheit durchbricht und eine Brille auf einem Ständer beleuchtet.
- HNST Studio — Ein gemütliches Studio mit rostfarbenen Leinenstoffen ist eine Galerie für Slow Fashion, in der ein einzelner Akzent in gebranntem Orange das ansonsten klösterliche Interieur in Creme und Anthrazit auflockert.
- OFFFICE : — eine Noir-Galerie, die in monolithischer Schriftart gehüllt ist
- ARTU — Galeriewand auf weißem Papier. ARTU gestaltet den Betrachtungsraum wie eine Museumsausstellung – großformatige Produktfotos, dezente Markierungen und ein einzelner limettengrüner Akzent am unteren Rand, der die Komposition abrundet.
- 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.
- 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.