Телеграм, 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) робить шрифт компактним та схожим на журнальний, а не повітряним чи доброзичливим. p align="justify"> Накреслення 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 — Музейна вітрина на білому мармурі