Bang & Olufsen
Galerie scandinave sur porcelaine. Lorsque la page B&O est sombre, la pièce est illuminée, telle une sculpture dans une alcôve nocturne; éclairée, elle semble flotter sur de la soie blanche, sans aucun élément extérieur pour détourner le regard.
Bang & Olufsen fonctionne selon un principe de galerie-musée: des toiles de porcelaine quasi blanches sur lesquelles flottent les produits tels des objets sculpturaux, ponctuées d’inserts chromatiques ponctuels qui s’étendent sur toute la largeur de l’écran – un violet outremer profond qui l’absorbe entièrement, parfois un rouge terracotta intense – pour des accents émotionnels. La typographie est une unique police néo-grotesque conçue sur mesure (BeoSupreme) qui se suffit à elle-même: à peine perceptible sur les grands écrans, des majuscules généreusement remplies sur les micro-étiquettes, aucune autre police n’est nécessaire. Les composants sont réduits à l’essentiel: commandes translucides en forme de pilule, bordures fines, pas d’ombres décoratives, pas de boutons à dégradé, pas d’icônes. La grille est généreuse, l’espace négatif est un luxe. Chaque produit possède son propre socle flottant; le blanc environnant est l’espace. La couleur est distribuée comme une matière précieuse: lorsqu’elle apparaît, elle occupe tout le cadre.
Le conteneur d'une largeur maximale de 1440 px est centré et possède des marges horizontales de 25 px. L'élément principal occupe toute la largeur de la page (débordant du conteneur), et l'image de l'appareil photo bleu outremer s'étend d'un bord à l'autre. Les grilles de produits sont disposées uniformément sur 4 à 5 colonnes, espacées de 25 px, et défilent horizontalement sur les appareils mobiles. Les sections alternent entre un fond blanc et des images de l'appareil photo en couleur pleine largeur: grille de produits blanche → élément principal bleu outremer → grille de produits blanche → bannière éditoriale rouge vif → grille de produits blanche → pied de page bleu outremer. La navigation est assurée par une barre supérieure minimaliste qui flotte au-dessus des sections blanches et colorées (le texte est inversé en blanc sur fond sombre). La page est aérée: les espaces entre les sections sont de 60 à 80 px, chaque produit dispose de son propre espace dans sa cellule, et la mise en page est aérée.
La photographie de produit est le seul élément visuel: aucune image de style de vie, aucun mannequin ni contexte environnemental. Les produits sont photographiés sur des fonds neutres (blanc, noir et dégradé bleu foncé) avec un éclairage studio contrôlé qui met en valeur les matériaux: aluminium mat, texture cuir, cuivre anodisé et silicone mat. Le cadrage est serré et centré, et le sujet principal est mis en avant. Le rendu des couleurs est discret et adapté au matériau: le cuivre est perçu comme du cuivre, et non comme une teinte dorée. Des motifs visuels secondaires incluent des silhouettes de produits éparses, occupant tout l’écran, sur des aplats monochromes riches (outremer, rouge terre cuite) pour des mises en scène saisissantes. Iconographie: trait fin de 1 px, monochrome noir sur blanc ou blanc sur fond foncé, formes géométriques, sans remplissage ni multicolore.
Palette
Marque
- Ultramarine Velvet
#060daa— Des images de fond en haut et en bas des pages, des sections spectaculaires qui s'étendent sur toute la largeur de la page et des fonds de page — une couleur riche, presque noir-bleu-violet, utilisée pour recouvrir des cadres entiers et donner une allure théâtrale à un seul produit.
Neutre
- Porcelain Canvas
#ffffff— Les images d'arrière-plan des pages, le design des fiches produits et les barres de navigation constituent les fondements sur lesquels repose chaque produit. - Bone
#fcfaee— Une surface secondaire pour des blocs aux tons neutres chauds, du texte de bouton sur un fond sombre, une toile alternative lorsque le blanc paraît stérile. - Obsidian
#191817— Le texte principal et la description du produit sont d'une couleur chaude, presque noire, qui paraît plus douce que le noir pur #000000 sur fond blanc. - Pure Ink
#000000— Contours d'icônes, micro-tags, bordures subtiles et contrastes de texte ultra-nettes. - Graphite
#555555— Texte secondaire, métadonnées, étiquettes de prix, texte auxiliaire silencieux - Mist
#e5e5e5— Des limites de données d'entrée fines et le seul séparateur structurel du système.
Typographie
de 12 à 36 px · 5 étapes
- BeoSupreme — remplacement: Neue Haas Grotesk Display Pro (closest) · grandes lignes 400, 500, 700 · Une police unique reflétant l'identité visuelle complète de la marque. Pour les titres et les en-têtes: graisse 500–700, taille 24–36 px avec un espacement réduit (-0,056 em → -0,014 em) pour des titres concis et percutants. Pour le corps du texte et l'interface utilisateur: graisse 400, taille 14–16 px, espacement normal, interligne 1,5–1,7. Micro-étiquettes (navigation, icônes, slogan « Fondée en 1925»): graisse 500, taille 9–12 px avec un espacement large jusqu'à +0,143 em, affichées en majuscules pour une utilisation discrète comme annotations architecturales. Aucune autre police n'est utilisée.
- object-fit: cover; object-position: center; — remplacement: Inter · grandes lignes 400 · object-fit: cover; object-position: center; - trouvé dans les données extraites mais non décrit par l'IA.
Intervalles et forme
| But | Signification |
|---|---|
| Densité | dense |
| Étape de base | 8-16px |
| Rayon du bouton | 40px |
| Rayon de la carte | 0px |
| Ombres | non - des bordures à la place des ombres |
| Entre les sections | 60-80px |
| Largeur de la page | 1440px |
L'IA construira votre site web dans le style Bang & Olufsen et le remplira.
- Partagez vos produits et publications via le lien - Instagram, TikTok, Facebook.
- Transférez le contenu de votre ancien site: il vous suffit de préciser l’adresse.
- Conception moderne sur le meilleur moteur: React ( Next.js) avec rendu côté serveur et optimisation SEO intégrée.
- Optimisation SEO entièrement automatisée pour les résultats de recherche et recommandations de réseaux neuronaux.
Styles similaires
- Structured — Galerie Renaissance sur papier imitant la pâte à modeler
- Apple (España) — La galerie du musée, baignée d'une douce lumière naturelle, est un espace blanc unique, captivant et immatériel, où chaque œuvre est éclairée par un projecteur sur un mur légèrement teinté.
- Apple (España) — La vitrine de la galerie Obsidian est une salle d'exposition obscure où un unique objet en titane brille sur un fond d'un noir absolu.
- 099 SUPPLY — Un mur de galerie rempli d'objets en noir et blanc
- Custo — Une galerie couleur canon de fusil avec une police de caractères monolithique. Un showroom aux tons gris-vert feutrés, où un unique objet sombre et une police de 57 px se suffisent à eux-mêmes.
- Apple (España) — La galerie du White Museum à midi
- VITURE — Présentation de produit au néon derrière une vitre opaque – un showroom plongé dans l'obscurité où un unique faisceau orange perce les ténèbres, illuminant une paire de lunettes sur un présentoir
- HNST Studio — Un studio chaleureux aux tissus de lin tachés de rouille abrite une galerie de mode éthique où une simple touche d'orange brûlé réchauffe l'intérieur par ailleurs monastique, aux tons crème et anthracite.
- OFFFICE : — une galerie noire engloutie par une police monolithique
- ARTU — Mur de galerie sur papier blanc. ARTU traite l'espace d'exposition comme une double page de musée: photos de produits grand format, marquages subtils et une simple touche de citron vert en bas qui complète la composition.
- Specht Studio — Un mur de galerie empreint d'une curiosité discrète. La finition chromée propre au studio se compose d'une surface blanche et de lettres noires; le feu d'artifice visuel se concentre entièrement dans le carrelage du projet.
- MindMarket — Un livre de contes de fées douillet sur papier crème – une toile éditoriale conviviale où de grands titres d'Inter et des personnages en papier découpé coexistent sur une surface douce comme un autocollant, baignée de soleil.