Glossier

Косметика для реальной жизни

glossier.com ↗

E-commerceВеб-сайт8 экранов

landing card-grid search checkout navbar profile

Glossier — About, CTA Section, скриншот 1/8

Glossier — Social Proof, Store, скриншот 2/8

Glossier — CTA Section, Footer Section, скриншот 4/8

Какие UI-решения показаны в Glossier?

В каталоге DesignShots собрано 8 скриншотов интерфейса Glossier. Это веб-сайт из категории E-commerce; категория охватывает электронная коммерция и маркетплейсы. Разметка кадров фиксирует 10 типов экранов; среди задокументированных элементов — CTA Section, Footer Section, Hero Section, Navigation Section и Newsletter. На уровне композиции отмечено 6 UI-паттернов: Посадочная страница продукта, Сетка карточек с контентом, Поиск с фильтрами и результатами, Оформление заказа и оплата и Навигационная панель и меню. Основная палитра построена на светлых тонах; на странице приведены извлечённые HEX-значения. Для анализа сначала сравните повторяющиеся типы экранов внутри Glossier, затем откройте связанные паттерны и проекты категории E-commerce. Так можно отделить устойчивое интерфейсное решение от приёма, характерного только для одного продукта. Все числа рассчитаны по опубликованной коллекции; кадры прежних версий, вынесенные отдельно, в текущий счётчик не входят.

Подробнее о Glossier

Дизайн интерфейса Glossier

Glossier — веб-сайт из категории E-commerce. Электронная коммерция и маркетплейсы. Косметика для реальной жизни. В интерфейсе отмечено 6 UI-паттернов: Посадочная страница продукта, Сетка карточек с контентом, Поиск с фильтрами и результатами, Оформление заказа и оплата, Навигационная панель и меню, Профиль пользователя и аккаунт. Цветовая палитра построена на светлых тонах.

UI-паттерны в Glossier

landing: Посадочная страница продукта
card-grid: Сетка карточек с контентом
search: Поиск с фильтрами и результатами
checkout: Оформление заказа и оплата
navbar: Навигационная панель и меню
profile: Профиль пользователя и аккаунт

Что показано на экранах Glossier

В подборке 10 типов экранов — по ним видно, какие части продукта задокументированы.

Вопросы и ответы

Сколько скриншотов Glossier в коллекции?

В коллекции 8 скриншотов интерфейса Glossier, охватывающих ключевые экраны продукта.

К какой категории относится Glossier?

Glossier — веб-сайт из категории E-commerce.

Как использовать скриншоты как референс?

Изучайте решения UI/UX дизайна для вдохновения при проектировании E-commerce-продуктов.

Все скриншоты сделаны с реального продукта и показывают интерфейс таким, каким он был на момент съёмки.