Телеграм, WhatsApp+380637610482
Валерий Данюк
Валерий ДанюкхөгжүүлэгчБизнест зориулсан хиймэл оюун ухааны хэрэгслүүдийг хөгжүүлэх. Өндөр чанартай. Боломжийн үнэтэй.Telegram руу бичих
Bang & Olufsen — энэ хэв маягтай сайтын урьдчилсан харагдац

Bang & Olufsen

Шаазан дээрх Скандинавын галерей. B&O хуудас харанхуй байхад бүтээл нь шөнө дундын хонгилд байдаг баримал шиг гэрэлтдэг; гэрэлтэхэд бүтээл нь цагаан торгон дээр хөвж байгаа мэт харагдах бөгөөд анхаарлыг нь сарниулах өөр зүйл байхгүй.

Bang & Olufsen нь галерей-музейн зарчмаар ажилладаг: бараг цагаан өнгийн шаазан зотон даавуун дээр баримлын объект шиг хөвдөг бүтээгдэхүүнүүд байдаг бөгөөд дэлгэцийн бүх өргөнийг хамарсан хааяа нэг хроматик оруулгуудаар тасалддаг - сэтгэл хөдлөлийн өргөлтийг бий болгохын тулд дэлгэцийг бүхэлд нь хамарсан гүн хэт ягаан туяа, заримдаа баялаг терракотта улаан өнгө. Типографи нь өөрөө ярьдаг ганц, захиалгаар хийгдсэн нео-гротеск фонт (BeoSupreme) юм: том дэлгэц дээр бараг анзаарагдахгүй, бичил шошгон дээр том үсгээр дүүрэн, өөр фонт шаардлагагүй. Бүрэлдэхүүн хэсгүүдийг хамгийн бага хэмжээнд хүртэл багасгасан: тунгалаг эм хэлбэртэй удирдлага, нимгэн хүрээ, гоёл чимэглэлийн сүүдэргүй, градиент товчлуургүй, дүрсгүй. Тор нь өгөөмөр, сөрөг зай бол тансаг хэрэглээ юм. Бүтээгдэхүүн бүр өөрийн гэсэн хөвөгч суурьтай; эргэн тойрон дахь цагаан өнгө нь орон зай юм. Өнгө нь үнэт материал шиг тархсан байдаг - гарч ирэхэд энэ нь бүхэл бүтэн хүрээг эзэлдэг.

1440 пикселийн хамгийн их өргөнтэй контейнер нь төвд байрладаг бөгөөд ирмэгүүд дээрээ 25 пикселийн хэвтээ захтай. Баатар элемент нь хуудасны бүх өргөнийг эзэлдэг (контейнерыг эвдэж), хэт далай тэнгисийн камер нь ирмэгээс ирмэг хүртэл үргэлжилдэг. Бүтээгдэхүүний торыг 25 пикселийн зайтай 4-5 баганад жигд байрлуулж, гар утасны төхөөрөмж дээр хэвтээ чиглэлд гүйлгэдэг. Хэсгүүд нь цагаан дэвсгэр болон бүрэн өргөнтэй өнгөт камеруудын хооронд ээлжлэн байрладаг - хэмнэл нь дараах байдалтай байна: цагаан бүтээгдэхүүний тор → хэт далай тэнгисийн баатар элемент → цагаан бүтээгдэхүүний тор → баялаг улаан редакцийн баннер → цагаан бүтээгдэхүүний тор → хэт далай тэнгисийн хөл. Навигаци нь цагаан болон өнгөт хэсгүүдийн дээгүүр хөвдөг минималист дээд самбар юм (бараан дэвсгэр дээр текстийг цагаан болгож хувиргасан). Хуудас "амьсгалдаг" - хэсгүүдийн хоорондох зай 60-80 пиксел, бүтээгдэхүүн тус бүр нь нүднүүдийн дотор өөрийн гэсэн зайтай бөгөөд мэдээллийн нягтрал байхгүй.

Бүтээгдэхүүний гэрэл зураг нь цорын ганц харааны элемент юм: амьдралын хэв маягийн зураг, загвар өмсөгч, хүрээлэн буй орчны нөхцөл байдал байхгүй. Бүтээгдэхүүнийг цэвэр төвийг сахисан дэвсгэр дээр (цагаан, хар, градиент хар хөх) авсан бөгөөд материалыг тодруулсан хяналттай студийн гэрэлтүүлэгтэй: царцсан хөнгөн цагаан, арьсан бүтэц, аноджуулсан зэс, царцсан силикон. Тайралтыг нягт, төвлөрсөн, гол объектыг онцолсон. Өнгөний дүрслэлийг бүдэг ба материалд тохирсон: зэсийг "алтан цаг" гэж биш, харин зэс гэж үздэг. Хоёрдогч харааны мотивуудад драмын редакторын мөчүүдэд зориулж баялаг, монохроматик хавтгай (ультрамарин, терракотта улаан)-ын эсрэг сийрэг, бүтэн дэлгэцийн бүтээгдэхүүний дүрслэлүүд багтдаг. Иконографи: нимгэн 1px шугам, цагаан дээр монохром хар эсвэл бараан дээр цагаан, геометрийн, дүүргэлтгүй, олон өнгийн биш.

Палетт

Брэнд

  • Ultramarine Velvet #060daa — Хуудасны дээд ба доод хэсэгт байрлах дэвсгэр зураг, хуудасны бүхэл бүтэн өргөнийг хамарсан гайхалтай хэсгүүд болон доод хэсгийн дүүргэлтүүд нь бүхэл бүтэн жаазыг бүрхэж, ганц бүтээгдэхүүнд театрын мэдрэмж төрүүлэхэд ашигладаг баялаг, бараг хар-цэнхэр-ягаан өнгө юм.

Төвийг сахисан

  • Porcelain Canvas #ffffff — Хуудасны дэвсгэр зураг, бүтээгдэхүүний картын дизайн, навигацийн самбар нь бүтээгдэхүүн бүрийг бий болгох үндсэн суурь юм.
  • Bone #fcfaee — Дулаан, төвийг сахисан өнгийн блокуудад зориулсан хоёрдогч гадаргуу, бараан дэвсгэр дээр товчлуурын текст, цагаан өнгө ариутгасан мэт санагдах үед өөр нэг зотон даавуу.
  • Obsidian #191817 — Үндсэн текст болон бүтээгдэхүүний тайлбарын текст нь цагаан дэвсгэр дээр цэвэр #000000-аас илүү зөөлөн харагддаг дулаан, бараг хар өнгө юм.
  • Pure Ink #000000 — Дүрсний тойм, бичил шошго, нарийн хүрээ болон хамгийн тод текстийн ялгаатай байдал.
  • Graphite #555555 — Хоёрдогч текст, мета өгөгдөл, үнийн шошго, чимээгүй туслах текст
  • Mist #e5e5e5 — Оролтын өгөгдлийн хил хязгаарыг нарийн тодорхойлж, систем дэх цорын ганц бүтцийн тусгаарлагчийг ашигладаг.

Типографи

12-оос 36 пиксел хүртэл · 5 алхам

  • BeoSupreme — солих: Neue Haas Grotesk Display Pro (closest) · тоймууд 400, 500, 700 · Брэндийн бүхэл бүтэн онцлогийг тусгасан нэг фонт. Гарчиг болон гарчгийн хувьд: 500–700 зузаантай, 24–36 пикселийн нягт зайтай, өөртөө итгэлтэй, товч гарчгийн хувьд (-0.056em → -0.014em). Үндсэн текст болон хэрэглэгчийн интерфэйсийн хувьд: 400 зузаантай, 14–16 пикселийн ердийн үсгийн зайтай, мөрийн зай 1.5–1.7. Микро шошго (навигаци, дүрс, "1925 онд байгуулагдсан" уриа): 500 зузаантай, 9–12 пикселийн өргөн зайтай, +0.143em хүртэл, бүх үсгийн зайг том үсгээр харуулсан, архитектурын тэмдэглэл болгон ашиглахад хялбар. Өөр өрсөлдөгч фонт байхгүй.
  • object-fit: cover; object-position: center; — солих: Inter · тоймууд 400 · объект-тохирох: бүрхүүл; объект-байрлал: төв; - гаргаж авсан өгөгдөлд байгаа боловч хиймэл оюун ухаанаар тайлбарлагдаагүй болно.

Интервал ба хэлбэр

ЗорилгоУтга
Нягтралнягт
Үндсэн алхам8-16px
Товчлуурын радиус40px
Картын радиус0px
Сүүдэрсүүдрийн оронд хил хязгаар байхгүй
Хэсгүүдийн хооронд60-80px
Хуудасны өргөн1440px

Хиймэл оюун ухаан таны вэбсайтыг Bang & Olufsen хэв маягаар бүтээж, дүүргэх болно

  • Instagram, TikTok, Facebook холбоосоор дамжуулан бүтээгдэхүүн болон нийтлэлүүдээр дүүргээрэй.
  • Хуучин сайтаасаа контентыг шилжүүлэх - зүгээр л хаягийг нь зааж өгнө үү.
  • Шилдэг хөдөлгүүр дээрх орчин үеийн дизайн: Серверийн рендеринг болон SEO оновчлолыг хайрцагнаас нь гарган React ( Next.js).
  • Хайлтын үр дүн болон мэдрэлийн сүлжээний зөвлөмжид зориулсан бүрэн автомат SEO оновчлол.

Төстэй хэв маяг

  • Structured — Пластилин шиг цаасан дээрх Сэргэн мандалтын үеийн галерей
  • Apple (España) — Зөөлөн өдрийн гэрэлд музейн галерей нь ганцхан, сэтгэл татам, жингүй цагаан орон зай бөгөөд үзмэр бүрийг цайвар өнгийн хананы эсрэг прожектороор гэрэлтүүлдэг.
  • Apple (España) — Обсидиан галерейн үзэсгэлэн нь хар дэвсгэр дээр ганц титан объект гэрэлтэж буй харанхуй үзэсгэлэнгийн танхим юм.
  • 099 SUPPLY — Хар цагаан эд зүйлсээр дүүрсэн галерейн хана
  • Custo — Ган төмөр өнгөтэй, цул фонттой галерей. Бүдэг саарал ногоон өнгөтэй, ганц бараан объект болон 57 пикселийн фонт өөрөөрөө ярьдаг үзэсгэлэнгийн танхим.
  • Apple (España) — Цагаан музейн галерей үд дунд
  • VITURE — Шөнө дундын шилний ард неон бүтээгдэхүүний танилцуулга - харанхуй үзэсгэлэнгийн танхимд улбар шар туяа харанхуйг нэвтлэн, лангуун дээрх нүдний шилийг гэрэлтүүлж байна.
  • HNST Studio — Зэвэрсэн маалинган даавуугаар чимэглэсэн тухтай студи нь удаан загварын галерей бөгөөд шатсан жүржийн ганцхан өнгө нь цөцгий болон нүүрсний хийд мэт дотоод заслыг дулаацуулдаг.
  • OFFFICE : — цул фонтоор бүрхэгдсэн хар галерей
  • ARTU — Цагаан цаасан дээрх галерейн хана. ARTU нь үзвэрийн орон зайг музейн тавцан мэт харьцдаг - том хэмжээний бүтээгдэхүүний зургууд, нарийн тэмдэглэгээ, доод хэсэгт нь шохойн өнгөний нэг хүрэлт нь найрлагыг бүрэн гүйцэд болгодог.
  • Specht Studio — Нууцлаг сониуч зангаар дүүрэн галерейн хана. Студийн өөрийн хром өнгөлгөө нь цагаан гадаргуу, хар үсэгтэй; харааны салютууд нь төслийн плитаны ажилд бүхэлдээ төвлөрсөн байдаг.
  • MindMarket — Тослог цаасан дээр бичсэн тухтай үлгэрийн ном - нарны гэрэлд норсон, наалт шиг зөөлөн гадаргуу дээр том Интер гарчиг болон хайчилж авсан цаасан дүрүүд зэрэгцэн орших найрсаг редакцийн зураг.