Bang & Olufsen
Galeriya ng Scandinavia na may porselana. Kapag madilim ang pahina ng B&O, ang piraso ay naliliwanagan, tulad ng isang eskultura sa isang hatinggabi na alkoba; kapag ito ay naliliwanagan, ang piraso ay tila lumulutang sa puting seda, na walang ibang makagagambala sa atensyon nito.
Ang Bang & Olufsen ay nagpapatakbo sa prinsipyo ng isang gallery-museum: mga canvas na halos puti na porselana kung saan ang mga produkto ay lumulutang na parang mga bagay na eskultura, na naputol ng paminsan-minsang mga chromatic insert na sumasaklaw sa buong lapad ng screen—isang malalim na ultramarine violet na kumukubkob sa buong screen, minsan ay isang matingkad na terracotta red—para sa mga emosyonal na accent. Ang tipograpiya ay isang iisang, custom-designed na neo-grotesque typeface (BeoSupreme) na nagsasalita para sa sarili nito: halos hindi mapapansin sa malalaking screen, maraming malalaking titik sa mga micro-label, hindi kinakailangan ng iba pang mga typeface. Ang mga bahagi ay nabawasan sa pinakamababa: translucent na mga kontrol na hugis-pill, manipis na mga border, walang pandekorasyon na mga anino, walang mga gradient button, walang mga icon. Malawak ang grid, ang negatibong espasyo ay isang luho. Ang bawat produkto ay binibigyan ng sarili nitong lumulutang na plinth; ang nakapalibot na puti ay espasyo. Ang kulay ay ipinamamahagi na parang isang mahalagang materyal—kapag lumitaw ito, sinasakop nito ang buong frame.
Ang lalagyan na may maximum-width na 1440px ay nasa gitna at may 25px na pahalang na margin sa mga gilid. Sinasakop ng hero element ang buong lapad ng pahina (na pumipigil sa lalagyan), at ang ultramarine camera ay umaabot mula sa gilid hanggang sa gilid. Ang mga grid ng produkto ay pantay na inilalatag sa 4-5 na column na may 25px na puwang at nag-i-scroll nang pahalang sa mga mobile device. Ang mga seksyon ay nagpapalitan sa pagitan ng puting background at full-width na colored camera—ang ritmo ay ang mga sumusunod: puting grid ng produkto → ultramarine hero element → puting grid ng produkto → mayamang pulang editorial banner → puting grid ng produkto → ultramarine footer. Ang nabigasyon ay isang minimalist na top bar na lumulutang sa ibabaw ng puti at may kulay na mga seksyon (ang teksto ay nakabaligtad sa puti sa isang madilim na background). Ang pahina ay "humihinga"—ang mga puwang sa pagitan ng mga seksyon ay 60-80px, ang mga indibidwal na produkto ay may sariling espasyo sa loob ng mga cell, at walang densidad ng impormasyon.
Ang potograpiya ng produkto ang tanging elementong biswal: walang mga larawan ng pamumuhay, modelo, o konteksto ng kapaligiran. Ang mga produkto ay kinunan laban sa purong neutral na backdrop (puti, itim, at gradient na maitim na asul) na may kontroladong ilaw sa studio na nagha-highlight sa mga materyales: matte aluminum, texture ng katad, anodized copper, at matte silicone. Ang pag-crop ay masikip, nakasentro, at ang pangunahing paksa ay binibigyang-diin. Ang pag-render ng kulay ay mute at naaangkop sa materyal: ang tanso ay nakikita bilang tanso, hindi bilang "ginintuang oras." Kabilang sa mga pangalawang biswal na motif ang mga sparse, full-screen na silhouette ng produkto laban sa matingkad at monochromatic na mga eroplano (ultramarine, terracotta red) para sa mga dramatikong sandali ng editoryal. Ikonograpiya: manipis na 1px na linya, monochrome na itim sa puti o puti sa madilim, geometric, walang laman, walang maraming kulay.
Paleta
Tatak
- Ultramarine Velvet
#060daa— Mga larawan sa background sa itaas at ibaba ng mga pahina, mga dramatikong seksyon na sumasaklaw sa buong lapad ng pahina, at mga punan sa footer—isang mayaman, halos itim-asul-lila na kulay na ginagamit upang bumalot sa buong frame at magbigay ng parang teatro sa isang produkto.
Neutral
- Porcelain Canvas
#ffffff— Ang mga larawan sa background ng pahina, disenyo ng product card, at mga navigation bar ang pangunahing pundasyon kung saan binubuo ang bawat produkto. - Bone
#fcfaee— Isang pangalawang ibabaw para sa mga bloke na may mainit at neutral na kulay, teksto ng mga butones sa madilim na background, isang alternatibong canvas kapag ang puti ay parang baog. - Obsidian
#191817— Ang pangunahing teksto at teksto ng paglalarawan ng produkto ay isang mainit, halos itim na kulay na mukhang mas malambot kaysa sa purong #000000 sa isang puting background. - Pure Ink
#000000— Mga balangkas ng icon, mga microtag, mga banayad na border, at ang pinakamatatalas na contrast ng teksto. - Graphite
#555555— Pangalawang teksto, metadata, mga tag ng presyo, tahimik na pantulong na teksto - Mist
#e5e5e5— Manipis na mga hangganan ng input data at ang tanging estruktural na separator sa sistema.
Tipograpiya
mula 12 hanggang 36px · 5 hakbang
- BeoSupreme — kapalit: Neue Haas Grotesk Display Pro (closest) · mga balangkas 400, 500, 700 · Isang font na sumasalamin sa buong pagkakakilanlan ng tatak. Para sa mga pamagat at heading: 500–700 na bigat, 24–36px na may masikip na espasyo sa pagitan ng mga letra (-0.056em → -0.014em) para sa kumpiyansa at maigsi na mga headline. Para sa body copy at UI: 400 na bigat, 14–16px, normal na espasyo sa pagitan ng mga letra, espasyo sa pagitan ng mga linya 1.5–1.7. Mga Microlabel (nabigasyon, mga icon, ang slogan na "Itinatag noong 1925"): 500 na bigat, 9–12px na may malawak na espasyo sa pagitan ng mga letra hanggang +0.143em, ipinapakita sa malalaking titik para magamit bilang hindi nakakahawang mga anotasyon sa arkitektura. Walang ibang kakumpitensyang font.
- object-fit: cover; object-position: center; — kapalit: Inter · mga balangkas 400 · object-fit: cover; object-position: center; - matatagpuan sa nakuha na datos ngunit hindi inilarawan ng AI.
Mga pagitan at anyo
| Layunin | Kahulugan |
|---|---|
| Densidad | siksik |
| Pangunahing hakbang | 8-16px |
| Radius ng buton | 40px |
| Radius ng card | 0px |
| Mga anino | walang - mga hangganan sa halip na mga anino |
| Sa pagitan ng mga seksyon | 60-80px |
| Lapad ng pahina | 1440px |
Gagawa ang AI ng website mo sa estilong Bang & Olufsen at pupunuin ito
- Punuin ng mga produkto at post gamit ang link - Instagram, TikTok, Facebook.
- Maglipat ng nilalaman mula sa iyong lumang site—tukuyin lamang ang address.
- Modernong disenyo gamit ang pinakamahusay na engine: React ( Next.js) na may kasamang server rendering at SEO optimization na agad-agad.
- Ganap na awtomatikong pag-optimize ng SEO para sa mga resulta ng paghahanap at mga rekomendasyon sa neural network.
Mga katulad na estilo
- Structured — Galeriya ng Renaissance sa papel na parang plasticine
- Apple (España) — Ang galeriya ng museo, sa banayad na liwanag ng araw, ay isang nag-iisa, nakakabighani, at magaan na puting espasyo, kung saan ang bawat eksibit ay naliliwanagan ng isang spotlight na nakasandal sa isang dingding na may bahagyang kulay.
- Apple (España) — Ang eksibisyon ng Obsidian Gallery ay isang madilim na bulwagan kung saan ang isang bagay na gawa sa titan ay kumikinang laban sa isang madilim na kapaligiran.
- 099 SUPPLY — Isang gallery wall na puno ng mga itim at puting bagay
- Custo — Isang gallery na kulay gunmetal na may monolitikong font. Isang showroom sa mahinang kulay abo-berde, kung saan ang isang madilim na bagay at 57px na font ay nagsasalita para sa kanilang sarili.
- Apple (España) — Ang White Museum Gallery sa tanghali
- VITURE — Isang presentasyon ng produktong neon sa likod ng salamin sa hatinggabi – isang madilim na showroom kung saan ang isang orange na sinag ay tumatagos sa dilim, na nagbibigay-liwanag sa isang pares ng salamin sa isang stand
- HNST Studio — Ang isang maaliwalas na studio na may mga telang linen na may mantsa ng kalawang ay isang slow fashion gallery kung saan ang isang natatanging kulay ng sinunog na kulay kahel ay nagpapainit sa kung saan man ay monastic na loob na gawa sa krema at uling.
- OFFFICE : — isang noir gallery na nababalot ng monolitikong font
- ARTU — Pader ng gallery na nasa puting papel. Tinatrato ng ARTU ang espasyo para sa panonood na parang isang malawak na koleksyon ng mga museo—malalaking larawan ng produkto, mga pinong marka, at isang hagod ng dayap sa ilalim na siyang kumukumpleto sa komposisyon.
- Specht Studio — Isang gallery wall na puno ng palihim na kuryosidad. Ang chrome finish ng studio ay puting ibabaw at itim na letra; ang mga visual na paputok ay ganap na nakatuon sa tilework ng proyekto.
- MindMarket — Isang maaliwalas na aklat ng mga kuwentong engkanto na nasa kremang papel - isang palakaibigang editoryal na canvas kung saan ang malalaking headline ng Inter at mga ginupit na karakter sa papel ay magkakasamang namamalagi sa isang ibabaw na nasisinagan ng araw at malambot na parang sticker.