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 і выразаныя з паперы персанажы суседнічаюць на залітай сонцам, мяккай, як налепкі, паверхні