Telegram, WhatsApp+380637610482
Valeri Danjuk
Valeri DanjukkehittäjäTekoälytyökalujen kehittäminen yrityksille. Korkealaatuinen. Edullinen.Kirjoita Telegramissa
Bang & Olufsen — esikatselu sivustosta tässä tyylissä

Bang & Olufsen

Skandinaavista posliinigalleriaa. Kun B&O-sivu on tumma, teos on valaistu kuin veistos keskiyön alkovissa; valaistuna teos näyttää kelluvan valkoisella silkillä, eikä mikään muu häiritse sen huomiota.

Bang & Olufsen toimii galleria-museoperiaatteella: lähes valkoisilla posliinikankailla tuotteet kelluvat kuin veistokselliset esineet, joita satunnaiset kromaattiset lisäykset, jotka ulottuvat koko näytön leveydelle – syvä ultramariinin violetti, joka täyttää koko näytön, joskus rikas terrakotanpunainen – keskeyttävät emotionaalisia aksentteja varten. Typografia on yksi, mittatilaustyönä suunniteltu neogroteski kirjasintyyppi (BeoSupreme), joka puhuu puolestaan: tuskin havaittavissa suurilla näytöillä, runsaasti täytettyjä isoja kirjaimia mikrotarroissa, muita kirjasintyyppejä ei tarvita. Komponentit on minimoitu: läpikuultavat pillerinmuotoiset säätimet, ohuet reunukset, ei koristeellisia varjoja, ei liukuvärjäyspainikkeita, ei kuvakkeita. Ruudukko on runsas, negatiivinen tila on ylellisyyttä. Jokaisella tuotteella on oma kelluva jalustansa; ympäröivä valkoinen on tilaa. Väri jakautuu kuin arvokas materiaali – kun se ilmestyy, se täyttää koko ruudun.

1440 pikselin enimmäisleveydeltään oleva säilö on keskitetty ja sen reunoilla on 25 pikselin vaakasuorat marginaalit. Pääelementti vie koko sivun leveyden (katkaisten säilön), ja ultramariinikamera ulottuu reunasta reunaan. Tuoteruudukot on aseteltu tasaisesti 4–5 sarakkeeseen 25 pikselin väleillä ja vieritetään vaakasuunnassa mobiililaitteilla. Osiot vuorottelevat valkoisen taustan ja täysleveiden värikameroiden välillä – rytmi on seuraava: valkoinen tuoteruudukko → ultramariinipääelementti → valkoinen tuoteruudukko → syvänpunainen toimituksellinen banneri → valkoinen tuoteruudukko → ultramariinialatunniste. Navigointi on minimalistinen yläpalkki, joka kelluu valkoisten ja värillisten osioiden yläpuolella (teksti on käännetty valkoiseksi tummalla taustalla). Sivu "hengittää" – osioiden väliset raot ovat 60–80 pikseliä, yksittäisillä tuotteilla on oma tilansa solujen sisällä, eikä informaatiotiheyttä ole.

Tuotevalokuvaus on ainoa visuaalinen elementti: ei lifestyle-kuvia, malleja tai ympäristökontekstia. Tuotteet kuvataan täysin neutraaleja taustoja (valkoinen, musta ja liukuvärjätty tummansininen) vasten kontrolloidulla studiovalaistuksella, joka korostaa materiaaleja: mattapintaista alumiinia, nahkatekstuuria, anodisoitua kuparia ja mattapintaista silikonia. Rajaus on tiivis, keskitetty ja pääkohde korostuu. Värintoisto on hillitty ja materiaaliin sopiva: kupari koetaan kuparina, ei "kultaisena tunnina". Toissijaisia visuaalisia motiiveja ovat harvat, koko näytön kokoiset tuotesiluetit rikkaita, yksivärisiä tasoja (ultramariini, terrakotanpunainen) vasten dramaattisia toimituksellisia hetkiä varten. Ikonografia: ohut 1px:n viiva, yksivärinen musta valkoisella pohjalla tai valkoinen tummalla pohjalla, geometrinen, ei täyttöä, ei moniväristä.

Paletti

Merkki

  • Ultramarine Velvet #060daa — Sivujen ylä- ja alareunassa olevat taustakuvat, koko sivun leveydelle ulottuvat dramaattiset osiot ja alatunnisteen täyttö – rikas, lähes mustansinivioletti väri, jota käytetään peittämään kokonaisia kehyksiä ja antamaan teatraalinen tunnelma yksittäiselle tuotteelle.

Neutraali

  • Porcelain Canvas #ffffff — Sivun taustakuvat, tuotekorttien suunnittelu ja navigointipalkit ovat perusta, jolle jokainen tuote rakennetaan.
  • Bone #fcfaee — Toissijainen pinta lämpimin neutraalin sävyisillä blokeilla, nappiteksti tummalla taustalla, vaihtoehtoinen kangas, kun valkoinen tuntuu steriililtä.
  • Obsidian #191817 — Pääteksti ja tuotekuvaus ovat lämpimän, lähes mustan värisiä, jotka näyttävät pehmeämmiltä kuin pelkkä #000000 valkoisella taustalla.
  • Pure Ink #000000 — Kuvakkeiden ääriviivat, mikrotunnisteet, hienovaraiset reunukset ja terävimmät tekstikontrastit.
  • Graphite #555555 — Toissijainen teksti, metatiedot, hintalaput, hiljainen aputeksti
  • Mist #e5e5e5 — Ohuet syöttödatarajat ja järjestelmän ainoa rakenteellinen erotin.

Typografia

12:sta 36 pikseliin · 5 vaihetta

  • BeoSupreme — korvaava: Neue Haas Grotesk Display Pro (closest) · ääriviivat 400, 500, 700 · Yksi fontti, joka heijastaa koko brändi-identiteettiä. Otsikot ja otsikot: 500–700 pikseliä, 24–36 pikseliä ja tiheä kirjainväli (-0,056em → -0,014em) luotettaviin ja ytimekkäisiin otsikoihin. Leipäteksti ja käyttöliittymä: 400 pikseliä, 14–16 pikseliä, normaali kirjainväli, riviväli 1,5–1,7. Mikrotekstit (navigointi, kuvakkeet, "Perustettu vuonna 1925" -iskulause): 500 pikseliä, 9–12 pikseliä ja leveä kirjainväli jopa +0,143em, näkyvät kokonaan isoilla kirjaimilla huomaamattomina arkkitehtonisina merkintöinä. Muita kilpailevia fontteja ei ole.
  • object-fit: cover; object-position: center; — korvaava: Inter · ääriviivat 400 · object-fit: cover; object-position: center; - löytyy poimitusta datasta, mutta tekoäly ei ole kuvannut sitä.

Intervallit ja muoto

TarkoitusMerkitys
Tiheystiheä
Perusvaihe8-16px
Painikkeen säde40px
Kortin säde0px
Varjotei - reunoja varjojen sijaan
Osioiden välillä60-80px
Sivun leveys1440px

Tekoäly rakentaa verkkosivustosi Bang & Olufsen -tyyliin ja täyttää sen

  • Täytä tuotteilla ja julkaisuilla linkin kautta - Instagram, TikTok, Facebook.
  • Siirrä sisältöä vanhalta sivustoltasi – määritä vain osoite.
  • Moderni design parhaalla hakukonemoottorilla: React ( Next.js) palvelinrenderöinnillä ja SEO-optimoinnilla suoraan paketista.
  • Täysin automatisoitu hakukoneoptimointi hakutuloksille ja neuroverkkosuosituksille.

Samankaltaisia tyylejä

  • Structured — Renessanssigalleria muovailuvahamaiselle paperille
  • Apple (España) — Museon galleria on pehmeässä päivänvalossa yksittäinen, lumoava, painoton valkoinen tila, jossa jokainen näyttelyesine valaistuu kohdevalolla kevyesti sävytettyä seinää vasten.
  • Apple (España) — Obsidian Galleryn vitriini on pimeä näyttelyhalli, jossa yksi titaani-esine hohtaa pikimustaa taustaa vasten.
  • 099 SUPPLY — Mustavalkoisilla esineillä täytetty gallerian seinä
  • Custo — Metallinvärinen galleria, jossa on monoliittinen fontti. Vaimennettujen harmaanvihreän sävyjen näyttelytila, jossa yksi tumma esine ja 57px:n fontti puhuvat puolestaan.
  • Apple (España) — Valkoisen museon galleria keskipäivällä
  • VITURE — Neonvalojen tuote-esittely yöttömän yön lasin takana – hämärässä näyttelytilassa, jossa yksi oranssi säde leikkaa pimeyden läpi valaisten telineellä olevat lasit
  • HNST Studio — Viihtyisä, ruosteentahraisilla pellavakankailla sisustettu studio on hitaan muodin galleria, jossa yksi ainoa poltetun oranssin sävy lämmittää muuten luostarimaista kerman ja hiilen sävyistä sisustusta.
  • OFFFICE : — monoliittiseen fonttiin upotettu noir-galleria
  • ARTU — Galleria-seinä valkoiselle paperille. ARTU käsittelee katselutilaa kuin museon aukiota – suurikokoisia tuotekuvia, hienovaraisia merkintöjä ja yksi limenvivahteinen sävy alareunassa täydentää sommittelun.
  • Specht Studio — Hienovaraista uteliaisuutta täynnä oleva gallerian seinä. Studion oma kromipinta on valkoinen pinta ja mustat kirjaimet; visuaalinen ilotulitus keskittyy kokonaan projektin laatoitukseen.
  • MindMarket — Viihtyisä satukirja kermanvärisellä paperilla – ystävällinen toimituksellinen pohja, jossa suuret Inter-otsikot ja leikatut paperihahmot esiintyvät rinnakkain auringon paahtamalla, tarranpehmeällä pinnalla.