
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 — Музейная вітрына на белым мармуры