Bang & Olufsen
Skandynawska galeria porcelany. Gdy strona B&O jest ciemna, dzieło jest oświetlone, niczym rzeźba w północnej wnęce; gdy jest oświetlone, wydaje się unosić na białym jedwabiu, bez niczego, co mogłoby odciągnąć jego uwagę.
Bang & Olufsen działa na zasadzie galerii-muzeum: niemal białe porcelanowe płótna, na których produkty unoszą się niczym rzeźby, przerywane sporadycznymi chromatycznymi wstawkami, które rozciągają się na całą szerokość ekranu – głębokim ultramarynowym fioletem, który pochłania cały ekran, a czasem nasyconą terakotową czerwienią – dla emocjonalnych akcentów. Typografia to pojedynczy, zaprojektowany na zamówienie neogroteskowy krój pisma (BeoSupreme), który mówi sam za siebie: ledwo zauważalny na dużych ekranach, hojnie wypełnione wielkie litery na mikroetykietach, bez potrzeby stosowania innych krojów. Elementy składowe zredukowano do minimum: półprzezroczyste elementy sterujące w kształcie pigułek, cienkie obramowania, brak dekoracyjnych cieni, brak gradientowych przycisków, brak ikon. Siatka jest hojna, a przestrzeń ujemna to luksus. Każdy produkt ma swój własny, unoszący się w powietrzu cokół; otaczająca biel to przestrzeń. Kolor jest rozłożony jak cenny materiał – kiedy się pojawia, wypełnia całą ramkę.
Kontener o maksymalnej szerokości 1440 px jest wyśrodkowany i ma 25 px marginesów poziomych na krawędziach. Element „hero” zajmuje całą szerokość strony (przecinając kontener), a kamera „ultramarine” rozciąga się od krawędzi do krawędzi. Siatki produktów są równomiernie rozmieszczone w 4-5 kolumnach z odstępami 25 px i przewijają się poziomo na urządzeniach mobilnych. Sekcje naprzemiennie mają białe tło i pełnoekranowe kolorowe kamery – rytm jest następujący: biała siatka produktów → element „hero” ultramaryny → biała siatka produktów → intensywnie czerwony baner redakcyjny → biała siatka produktów → stopka ultramaryny. Nawigacja to minimalistyczny górny pasek, który unosi się nad białą i kolorową sekcją (tekst jest odwrócony do białego na ciemnym tle). Strona „oddycha” – odstępy między sekcjami wynoszą 60-80 px, poszczególne produkty mają własną przestrzeń w komórkach, a informacja nie jest zagęszczona.
Fotografia produktowa stanowi jedyny element wizualny: brak zdjęć lifestylowych, modeli ani kontekstu środowiskowego. Produkty są fotografowane na neutralnym tle (białym, czarnym i gradientowym granatowym) z kontrolowanym oświetleniem studyjnym, które podkreśla materiały: matowe aluminium, fakturę skóry, anodowaną miedź i matowy silikon. Kadrowanie jest ścisłe, wyśrodkowane, a główny obiekt jest zaakcentowany. Odwzorowanie kolorów jest stonowane i adekwatne do materiału: miedź jest postrzegana jako miedź, a nie jako „złota godzina”. Drugorzędne motywy wizualne obejmują rzadkie, pełnoekranowe sylwetki produktów na tle bogatych, monochromatycznych płaszczyzn (ultramaryna, terakotowa czerwień) w dramatycznych momentach redakcyjnych. Ikonografia: cienka linia o grubości 1 piksela, monochromatyczna czerń na białym tle lub biel na ciemnym tle, geometryczna, bez wypełnienia, bez wielokolorowości.
Paleta
Marka
- Ultramarine Velvet
#060daa— Obrazy tła na górze i dole stron, efektowne sekcje rozciągające się na całą szerokość strony oraz wypełnienia stopki — intensywny, niemal czarno-niebiesko-fioletowy kolor używany do zapełnienia całych ramek i nadania teatralnego charakteru pojedynczemu produktowi.
Neutralny
- Porcelain Canvas
#ffffff— Obrazy tła stron, projekt karty produktu i paski nawigacyjne stanowią fundament, na którym zbudowany jest każdy produkt. - Bone
#fcfaee— Druga powierzchnia dla ciepłych, neutralnych bloków, tekst na przycisku na ciemnym tle, alternatywne płótno, gdy biel wydaje się sterylna. - Obsidian
#191817— Tekst główny i opis produktu mają ciepły, prawie czarny kolor, który wygląda delikatniej niż czysty #000000 na białym tle. - Pure Ink
#000000— Kontury ikon, mikrotagi, subtelne obramowania i wyjątkowo wyraźne kontrasty tekstu. - Graphite
#555555— Tekst pomocniczy, metadane, metki cenowe, cichy tekst pomocniczy - Mist
#e5e5e5— Cienkie granice danych wejściowych i jedyny separator strukturalny w systemie.
Typografia
od 12 do 36px · 5 kroków
- BeoSupreme — wymiana: Neue Haas Grotesk Display Pro (closest) · wytyczne 400, 500, 700 · Pojedyncza czcionka odzwierciedlająca całą identyfikację marki. W tytułach i nagłówkach: grubość 500–700 px, 24–36 px z niewielkim odstępem między literami (-0,056 em → -0,014 em) dla pewnych siebie, zwięzłych nagłówków. W treści i interfejsie użytkownika: grubość 400 px, 14–16 px, normalny odstęp między literami, interlinia 1,5–1,7. Mikroetykiety (nawigacja, ikony, hasło „Założona w 1925 r.”): grubość 500 px, 9–12 px z dużym odstępem między literami do +0,143 em, wyświetlane wielkimi literami, jako dyskretne adnotacje architektoniczne. Nie ma innej konkurencyjnej czcionki.
- object-fit: cover; object-position: center; — wymiana: Inter · wytyczne 400 · dopasowanie obiektu: pokrycie; położenie obiektu: środek; - znaleziono w wyodrębnionych danych, ale nieopisane przez sztuczną inteligencję.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | gęsty |
| Podstawowy krok | 8-16px |
| Promień przycisku | 40px |
| Promień karty | 0px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 60-80px |
| Szerokość strony | 1440px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Bang & Olufsen i wypełni ją
- Uzupełnij produktami i postami za pomocą linku - Instagram, TikTok, Facebook.
- Przenieś zawartość ze starej witryny — wystarczy podać adres.
- Nowoczesny design na najlepszym silniku: React ( Next.js) z renderowaniem serwerowym i optymalizacją SEO od razu po wyjęciu z pudełka.
- W pełni zautomatyzowana optymalizacja SEO dla wyników wyszukiwania i rekomendacje sieci neuronowych.
Podobne style
- Structured — Galeria renesansowa na papierze plastelinowym
- Apple (España) — Galeria muzeum, w łagodnym świetle dziennym, stanowi pojedynczą, urzekającą, nieważką białą przestrzeń, w której każdy eksponat jest oświetlony reflektorem umieszczonym na lekko przyciemnionej ścianie.
- Apple (España) — Wystawa w Galerii Obsidian mieści się w ciemnej sali wystawowej, w której pojedynczy obiekt wykonany z tytanu świeci na tle czarnej smoły.
- 099 SUPPLY — Ściana galerii wypełniona czarno-białymi obiektami
- Custo — Galeria w kolorze stalowo-brązowym z monolityczną czcionką. Salon wystawowy w stonowanych szaro-zielonych odcieniach, gdzie pojedynczy ciemny obiekt i czcionka o szerokości 57 pikseli mówią same za siebie.
- Apple (España) — Galeria Białego Muzeum w południe
- VITURE — Prezentacja produktu neonowego za szkłem o północy – zaciemniony showroom, w którym pojedynczy pomarańczowy promień przecina ciemność, oświetlając parę okularów na stojaku
- HNST Studio — Przytulne studio z lnianymi tkaninami w kolorze rdzy to galeria mody slow fashion, w której pojedynczy akcent w kolorze spalonej pomarańczy ociepla skądinąd monastyczne wnętrze w odcieniach kremu i węgla drzewnego.
- OFFFICE : — galeria noir pochłonięta monolityczną czcionką
- ARTU — Ściana galerii na białym papierze. ARTU traktuje przestrzeń wystawienniczą jak rozkładówkę muzealną – wielkoformatowe zdjęcia produktów, subtelne oznaczenia i pojedynczy akcent limonki na dole, który dopełnia kompozycję.
- Specht Studio — Ściana galerii wypełniona dyskretną ciekawością. Chromowane wykończenie studia to biała powierzchnia i czarne napisy; wizualne fajerwerki skupiają się wyłącznie na płytkach projektu.
- MindMarket — Przytulna, bajkowa książka na kremowym papierze – przyjazne płótno redakcyjne, na którym duże nagłówki Interu i wycięte z papieru postacie współistnieją na nasłonecznionej, miękkiej jak naklejka powierzchni.