Glossier

Фотосессия в стиле «Солнечный свет» — белый цвет бумаги, чёрные чернила, один яркий жёлтый акцент

Glossier функционирует как цифровой журнал о красоте: почти монохромное полотно из белого и черного цветов, прерываемое одним ярким желтым акцентом, который одновременно является логотипом бренда и единственным призывом к действию. Система отличается сдержанностью в редакционном плане — огромные заголовки Apercu, достаточное пространство для текста, фотографии в стиле лайфстайл на всю страницу, несущие на себе основную эмоциональную нагрузку, — и утилитарностью в исполнении: плоские карточки с продуктами, тонкие рамки и полное отсутствие декоративных элементов. Желтый — это не второстепенный цвет бренда; это И ЕСТЬ бренд, используемый экономно, так что каждое его появление ощущается как вспышка фотоаппарата. Все остальное должно отступить на второй план: нейтральные оттенки — это теплые серые с легким румяным подтоном, рамки едва заметны, шрифт плотный и сжатый. В результате получается витрина, которая выглядит уверенной, сдержанной и бескомпромиссно современной.

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

Фотография является доминирующим визуальным языком. Вся область просмотра заполнена изображениями в стиле лайфстайл и портретами — тёплая подсветка «золотого часа», мягкие крупные планы кожи, руки, держащие флаконы с продукцией на фоне солнечных бликов. Цветовая палитра в фотографиях тёплая и ненасыщенная: персиковое небо, терракотовые оттенки кожи, глубокий океанский синий. Изображения всегда занимают всю поверхность страницы, без закругленных углов, рамок и наложений, за исключением белых текстовых карточек или жёлтого логотипа. Фотографии продукции на карточках для каталогов снимаются на чисто белом бесшовном фоне с плоским, равномерным освещением. Соотношение изображения и текста составляет приблизительно 70/30 — изображения передают эмоции, текст — функцию. Никаких иллюстраций, никакой абстрактной графики, никаких 3D-рендеров.

Интернет-магазин Минимализм Редакционный Монохром

https://glossier.com

Палитра

Бренд

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-оптимизация под поисковую выдачу и рекомендации нейросетей.

Создать сайт в этом стиле

Glossier

Палитра

Типографика

Интервалы и форма

ИИ соберёт ваш сайт в стиле Glossier и наполнит его

Похожие стили