Тэлеграм, WhatsApp  +380637610482
Валерый Данюк
Валерый ДанюкраспрацоўшчыкРаспрацоўка ІІ-інструментаў для бізнесу. Якасна. Нядорага.Напісаць у Telegram
Glossier - папярэдні прагляд сайта ў гэтым стылі

Glossier

Фотасесія ў стылі «Сонечнае святло» - белы колер паперы, чорныя чарнілы, адзін яркі жоўты акцэнт

Glossier функцыянуе як лічбавы часопіс аб прыгажосці: амаль манахромнае палатно з белага і чорнага колераў, якое перарываецца адным яркім жоўтым акцэнтам, які адначасова з'яўляецца лагатыпам брэнда і адзіным заклікам да дзеяння. Сістэма адрозніваецца стрыманасцю ў рэдакцыйным плане - велізарныя загалоўкі Apercu, дастатковая прастора для тэксту, фатаграфіі ў стылі лайфстайл на ўсю старонку, якія нясуць на сабе асноўную эмацыйную нагрузку, - і ўтылітарнасцю ў выкананні: плоскія карткі з прадуктамі, тонкія рамкі і поўная адсутнасць дэкаратыўных элементаў. Жоўты - гэта не другарадны колер брэнда; гэта І ЁСЦЬ брэнд, які выкарыстоўваецца эканомна, так што кожнае яго з'яўленне адчуваецца як ўспышка фотаапарата. Усё астатняе павінна адступіць на другі план: нейтральныя адценні - гэта цёплыя шэрыя з лёгкім румяным падтонам, рамкі ледзь прыкметныя, шрыфт шчыльны і сціснуты. У выніку атрымліваецца вітрына, якая выглядае ўпэўненай, стрыманай і бескампрамісна сучаснай.

Старонка ўяўляе сабой вертыкальна размешчаную серыю поўнаэкранных частак, кожны з якіх аформлены як самастойны рэдакцыйны разварот. Галоўная частка - гэта фатаграфія ва ўсю шырыню старонкі з якая плавае белай накладкай (уверсе злева) і масіўным жоўтым лагатыпам, які займае ўсю ніжнюю частку старонкі. Пад галоўнай часткай раздзелы чаргуюцца паміж поўнаэкраннымі выявамі і сеткамі з асобных картак. Падзел катэгорый (догляд за скурай / макіяж) на дзве калонкі з роўнымі суадносінамі малюнкаў (50/50) адбываецца без бачнай мяжы - іх падзяляе толькі лінія, якая злучае выявы. Каталог прадукцыі выкарыстоўвае 4-калонкавую сетку з квадратных картак на палатне #f7f7f7. Навігацыя ўяўляе сабой мінімалістычную верхнюю панэль з дапаможнай паласой аб'яваў над ёй. Прамежкі паміж часткамі досыць вялікія (64px), але пераходы паміж часткамі плыўныя - без падзельнікаў, без якія чаргуюцца колераў фону, за выключэннем цёплага ніжняга калантытула. Агульны рытм: фатаграфія, тэкст, фатаграфія, сетка, фатаграфія - як гартаць модны часопіс.

Фатаграфія з'яўляецца дамінантнай візуальнай мовай. Уся вобласць прагляду запоўнена выявамі ў стылі лайфстайл і партрэтамі - цёплае падсвятленне "залатой гадзіны", мяккія буйныя планы скуры, рукі, якія трымаюць флаконы з прадукцыяй на фоне сонечных блікаў. Каляровая палітра ў фатаграфіях цёплая і ненасычаная: персікавае неба, тэракотавыя адценні скуры, глыбокі акіянскі сіні. Выявы заўсёды займаюць усю паверхню старонкі, без закругленых кутоў, рамак і накладанняў, за выключэннем белых тэкставых картак або жоўтага лагатыпа. Фатаграфіі прадукцыі на картках для каталогаў здымаюцца на чыста белым бясшвоўным фоне з плоскім, раўнамерным асвятленнем. Суадносіны малюнка і тэксту складае прыблізна 70/30 - выявы перадаюць эмоцыі, тэкст - функцыю. Ніякіх ілюстрацый, ніякай абстрактнай графікі, ніякіх 3D-рэндэраў.

Палітра

Брэнд

  • Glossier Yellow #fff116 — Жоўты колер выкарыстоўваецца ў якасці дапаможнага акцэнту для дэкаратыўных дэталяў і акцэнтаванні ўвагі на нячастых запытах. Не варта вылучаць яго як асноўны колер закліку да дзеяння.

Нейтральныя

  • Ink #000000 — Асноўны тэкст, навігацыйныя спасылкі, асноўны тэкст, тэкст ніжняга калантытула, абводка абразкоў, тонкія межы; дамінуючы друкарскі і структурны колер.
  • Paper #ffffff — Паверхні картак з таварамі, залівальныя палі, прыўзнятыя панэлі; самы яркі ўзровень паверхні ў чарцы.
  • Fog #f7f7f7 — Палатно старонкі, фоны раздзелаў, пераходы паміж выявамі на старонцы; базавая паверхня, на якой размяшчаецца ўвесь сайт.
  • Blush #faf2f4 — Фон ніжняга калантытула, мяккія цёплыя падзельнікі раздзелаў; ледзь прыкметнае ружавата-белае адценне, які дадае цяпла ніжняй частцы старонак.
  • Mist #f0f0f0 — Лёгкая апорная паверхня для стварэння ненадакучлівага фону і падзелу раздзелаў. Не варта вылучаць яе як асноўны колер закліку да дзеяння.
  • Ash #e8e8e8 — Межы палёў уводу, фон для значкоў, тонкія раздзяляльныя лініі; структурны колер межаў для картак і элементаў формаў.

Друкарня

ад 12 да 32px · 5 прыступак

  • Apercu — замена: Inter · напісання 400, 500, 700 · Асноўны шрыфт выкарыстоўваецца ва ўсім карыстацкім інтэрфейсе - асноўны тэкст 16px/400, рух і подпісы 12-14px/500, падзагалоўкі 20px/500, загалоўкі рэдакцыйных артыкулаў 32px/700. Геаметрычная гуманістычная канструкцыя Apercu надае брэнду сціснуты, сучасны стыль; амаль нулявы міжлітарны інтэрвал (0,002-0.003em) робіць шрыфт кампактным і падобным на часопісны, а не паветраным ці прыязным. Напісанне 700 зарэзервавана для элементаў адлюстравання ў рэдакцыйных артыкулах, а не для элементаў інтэрфейсу.
  • Apercu Mono — замена: JetBrains Mono or IBM Plex Mono · напісання 400 · Мікра-утылітарная друкарка для метададзеных замовы, нумароў адсочвання і пазнак побач з кодам; монашырынны варыянт стварае тэхнічную тэкстуру на фоне прапарцыйнага асноўнага шрыфта.
  • GTStandard-M — замена: Inter · напісання 400 · GTStandard-M - знойдзены ў вынятых дадзеных, але не апісаны ІІ.

Інтэрвалы і форма

ПрызначэннеЗначэнне
Шчыльнасцьсярэдняя
Базавы крок8px
Радыус кнопак0px
Радыус картак0px
Ценіне - межы замест ценяў
Паміж секцыямі64px
Шырыня старонкі1440px

ІІ збярэ ваш сайт у стылі Glossier і напоўніць яго

  • Напоўніць таварамі і пастамі па спасылцы — Instagram, TikTok, Facebook.
  • Перанясе кантэнт са старога сайта - дастаткова пазначыць адрас.
  • Сучасны дызайн на лепшым рухавічку: React ( Next.js) з серверным рэндэрынгам і SEO-аптымізацыяй са скрынкі.
  • Поўная аўтаматычная SEO-аптымізацыя пад пошукавую выдачу і рэкамендацыі нейрасетак.

Падобныя стылі

  • Lightship — Кінематаграфічная дыярама адкрытай дарогі. Цёплыя крэмавыя сцены галерэі, упрыгожаныя буйнымі пейзажнымі фатаграфіямі, замацаванымі на невялікіх адлегласцях, тонкі чорны шрыфт, ледзь адрозны на рамках, і адзін ярка-аранжавы акцэнт, які парушае манахромнасць, нібы вогнішча на лузе
  • Faire ES — аптовы каталог цёплых вяршкоў
  • Adanola — Рэдакцыйны лукбук на белай паперы. Модная фотасесія, дзе друкарка і фатаграфія нібы дыхаюць на чыстых белых паверхнях, з чорным чарнілам для шрыфта і ледзь прыкметным фірмовым шрыфтам без засечак (Favorit), якія адлюстроўваюць увесь стыль брэнда
  • Oura Ring — Утульная майстэрня, дзе рыхтуюць аўсянку, пад мяккім дзённым святлом
  • Stykka — Скандынаўская майстэрня ў белым свеце — ціхая, створаная ўручную выставачная зала, дзе адзіным голасам з'яўляецца фатаграфія.
  • DJI — аэракасмічны чорны палатно з адзіным электрычным сінім штуршком
  • Altitude Beverages — Манахромны разварот для часопіса. Уявіце сабе разварот моднага часопіса, пазбаўлены ўсіх колераў, акрамя прадметнай фатаграфіі - тэкст і пустую прастору распавядаюць усю гісторыю
  • AATHER — Расчыненая далонь, адзіночнае полымя - ціхая раскоша, зняволеная ў нерухомасці
  • Cowboy — Бельгійская галерэя веласіпедаў у беласнежным фарфоравым выкананні. Шоурум, дзе матавыя паверхні, буйны шрыфт, які выкарыстоўваецца ў рэдакцыйных матэрыялах, і практычна поўная адсутнасць дэкору прымушаюць погляд засяродзіцца на ровары і яго зместу
  • Refero — Рэдакцыйная вёрстка на белым мармуры - старонка тавару, створаная друкарняй, дзе загаловак з засечкамі з'яўляецца візітнай карткай брэнда, а ўсё астатняе не адцягвае ўвагі
  • Face Formula — Скандынаўскі рэдакцыйны партрэт. Спакойная часопісная разваротная здымка, дзе погляд мадэлі і загаловак, напісаны сціснутым шрыфтам з засечкамі, гавораць самі за сябе на фоне прахалоднага туману
  • Shupatto — Музейная вітрына на белым мармуры