Bang & Olufsen
Скандинавська галерея на порцеляні. Коли сторінка B&O темніє, виріб підсвічується, ніби скульптура в опівнічній ніші; коли вона світиться, виріб ніби ширяє на білому шовку, і ніщо інше не відволікає на нього увагу
Bang & Olufsen працює за принципом галереї-музею: майже білі фарфорові полотна, на яких продукти ширяють, немов скульптурні об'єкти, що перериваються рідкісними хроматичними вставками, що займають всю ширину екрана - глибокий ультрамариновий фіолетовий, поглинаючий весь екран, іноді насичений. Друкарня - це єдиний, спеціально розроблений неогротескний шрифт (BeoSupreme), який говорить сам за себе: ледь помітний на великих екранах, щедро заповнені великі літери на мікро-етикетках, ніяких інших шрифтів не потрібно. Компоненти зведені до мінімуму: напівпрозорі елементи керування у формі пігулок, тонкі межі, жодних декоративних тіней, жодних градієнтних кнопок, жодних іконок. Сітка щедра, негативний простір – це розкіш. Кожен продукт отримує свій власний постачаючий постамент; навколишній білий колір - це простір. Колір розподіляється як дорогоцінний матеріал — коли він з'являється, він займає всю рамку.
Контейнер максимальної ширини 1440px центрований та має 25px горизонтальні відступи по краях. Геройський елемент займає всю ширину сторінки (розриває контейнер), ультрамаринова камера тягнеться від краю до краю. Сітки товарів мають рівне компонування в 4-5 стовпців з 25px проміжками, прокручуються горизонтально на мобільних пристроях. Розділи чергуються між білим фоном і кольоровими камерами, що займають всю ширину сторінки — такий ритм: біла сітка товарів → ультрамариновий геройський елемент → біла сітка товарів → насичений червоний редакційний банер → біла сітка товарів → нижній ультрамариновий колонтитул. Навігація є мінімалістичною верхньою панеллю, яка плаває над білими і кольоровими розділами (текст інвертується в білий колір на темному тлі). Сторінка "дихає" - проміжки між розділами становлять 60-80px, окремі товари мають власний простір всередині осередків, відсутня інформаційна щільність.
Предметна фотозйомка – єдиний візуальний елемент: жодних стилів життя, моделей, контексту навколишнього середовища. Продукти знімаються на чисто нейтральних фонах (білий, чорний, темно-синій градієнт) з контрольованим студійним освітленням, яке підкреслює матеріал: матовий алюміній, текстура шкіри, анодована мідь, матовий силікон. Кадрування - щільне обрізання, центрування, виділення головного об'єкта. Передача кольорів — приглушена і відповідає матеріалу: мідь сприймається як мідь, а не як «золота година». Вторинний візуальний мотив: рідкісні повноекранні силуети продуктів на тлі насичених одноколірних площин (ультрамарин, теракотово-червоний) для створення ефектних моментів у редакційній фотографії. Іконографія: тонка лінія 1px, монохромний чорний на білому або білий на темному, геометричний, без заливки, без кольору.
Палітра
Бренд
- Ultramarine Velvet
#060daa— Фонові зображення на початку і в кінці сторінок, ефектні розділи, що займають всю ширину сторінки, заливка нижніх колонтитулів — насичений, майже чорно-синьо-фіолетовий колір, що використовується для того, щоб поглинути цілі кадри і надати одному продукту театрального вигляду.
Нейтральні
- Porcelain Canvas
#ffffff— Фонові зображення сторінок, оформлення карток товарів, навігаційна панель — основна основа, на якій будується кожен продукт. - Bone
#fcfaee— Вторинна поверхня для блоків теплих нейтральних тонів, текст кнопок на темному тлі, альтернативне полотно, коли білий колір здається стерильним. - Obsidian
#191817— Основний текст і опис товару — теплий, майже чорний колір, який виглядає м'якше, ніж чистий #000000 на білому тлі. - Pure Ink
#000000— Обведення іконок, мікротеги, тонкі межі та різкі контрасти тексту. - Graphite
#555555— Другий текст, метадані, цінники, допоміжний текст без звуку - Mist
#e5e5e5— Тонкі межі вхідних даних та єдиний структурний роздільник у системі.
Друкарня
від 12 до 36px · 5 ступенів
- BeoSupreme — заміна: Neue Haas Grotesk Display Pro (closest) · зображення 400, 500, 700 · Єдиний шрифт, який відбиває весь фірмовий стиль. Для заголовків та заголовків: товщина 500-700, 24-36px з вузькою міжлітерною відстанню (-0.056em → -0.014em) для впевнених, лаконічних заголовків. Для основного тексту і інтерфейсу користувача: товщина 400, 14-16px, нормальна міжлітерна відстань, міжрядковий інтервал 1,5-1,7. Мікро-мітки (навігація, значки, слоган «Засновано в 1925 році»): товщина 500, 9-12px з широкою міжлітерною відстанню до +0.143em, відображаються великими літерами для використання як ненав'язливі архітектурні анотації. Другого шрифту-конкурента немає.
- object-fit: cover; object-position: center; — заміна: Inter · зображення 400 · object-fit: cover; object-position: center; - Виявлено у вилучених даних, але не описано ІІ.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | щільна |
| Базовий крок | 8-16px |
| Радіус кнопок | 40px |
| Радіус карток | 0px |
| Тіні | ні — межі замість тіней |
| Між секціями | 60-80px |
| Ширина сторінки | 1440px |
ІІ збере ваш сайт у стилі Bang & Olufsen і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- Structured — Галерея епохи Відродження на папері, що нагадує пластилін
- Apple (España) — Музейна галерея в м'якому денному світлі - це єдине, захоплююче, невагоме біле приміщення, де кожен експонат підсвічений точковим променем на тлі злегка тонованої стіни.
- Apple (España) — Вітрина обсидіанової галереї — темна виставкова зала, де єдиний титановий об'єкт світиться на тлі абсолютно чорного кольору.
- 099 SUPPLY — Стіна галереї, заповнена чорно-білими об'єктами
- Custo — Галерея кольору збройової сталі із монолітним шрифтом. Виставковий зал у приглушених сіро-зелених тонах, де єдиний темний об'єкт та шрифт 57px говорять самі за себе
- Apple (España) — Біла музейна галерея опівдні
- VITURE — Неонова презентація продукції за північним склом — затемнений виставковий зал, де один помаранчевий промінь прорізає темряву, висвітлюючи пару очок на підставці
- HNST Studio — Затишна майстерня з елементами іржі на лляних тканинах — галерея повільної моди, де єдиний акцент у вигляді випаленого помаранчевого кольору зігріває в іншому чернечий інтер'єр кремового та вугільно-чорного кольору
- OFFFICE : — галерея нуар, поглинена монолітним шрифтом
- ARTU — Стіна галереї на білому папері. ARTU розглядає простір для перегляду як музейний розворот — масштабні фотографії товарів, тонкі лінії розмітки та один-єдиний штрих лайма біля нижнього краю, що завершує композицію
- Specht Studio — Галерейна стіна, наповнена стриманою цікавістю. Власне хромоване оздоблення студії – це біла площина та чорний шрифт; візуальний феєрверк повністю зосереджений усередині проектної плитки
- MindMarket — Затишна книжка-казка на кремовому папері — доброзичливе редакційне полотно, де великі заголовки Inter та вирізані з паперу персонажі сусідять на залитій сонцем, м'якій, як наклейки, поверхні