Обзор проекта
В сайте Chroma Dewy на Shopyy мы связали образы макияжа с цветной товарной витриной. Крупные планы глаз и тематический текст формируют баннер; палетки и изображения категорий ниже ведут к покупкам. Оранжевая айдентика, светлый фон и насыщенные фотографии связывают тему, сравнение каталога и отдельный товар.
| Услуги | Отрасль | Платформа |
| Дизайн и разработка сайтов Shopyy | Красота и уход за собой | Shopyy |
| Задачи проекта | Целевой рынок | Стиль дизайна |
| Образы макияжа и цветная товарная витрина | Английский интерфейс, цены в долларах США | Оранжевая айдентика, светлый фон и насыщенные фотографии макияжа |
| Стоимость проекта | Состав работ | Срок выполнения |
| CNY 4,500 | Главная, структура категорий, карточки товаров и адаптивный дизайн | 7 дней |
Задача дизайна
Косметический сайт должен передавать эффект макияжа и облегчать сравнение цветов и инструментов. Портретные планы выражают тему, а ровные сетки показывают палетки, кисти и упаковку, не смешивая эти задачи.
Стратегия: образы макияжа и цветная витрина
Планы глаз и тематический текст образуют баннер, палетки и категории ниже ведут в каталог. Главная направляет, категории сравнивают, товары раскрывают внешний вид и параметры. Меню и ссылки соединяют уровни.
Josefin Sans организует заголовки, меню и текст. Размер, насыщенность и ширина абзацев определяют иерархию. Оранжевый, светлый фон и насыщенные фотографии повторяются на основных страницах. Внутри групп информация компактна, между разделами оставлено место для отделения изображений, пояснений и действий.
Анимация и функции: поддержка текущего выбора
Баннер сохраняет стрелки влево и вправо; изображения категорий ниже ведут в каталоги. Количество, изображения и описания группируются вокруг конкретного товара. На телефоне навигация сворачивается в ясный вход меню, сохраняя непрерывность просмотра.
Баннер главной: макияж глаз как первый акцент
Два крупных плана глаз находятся справа, тематический текст слева, оранжевый логотип Chroma Dewy — в простой шапке. Близкие планы показывают цвет и фактуру; стрелки открывают другие темы.
Лёгкая Josefin Sans объединяет меню и товарный текст. Светлый фон оставляет пространство насыщенному макияжу. Изображение и текст разделены, поэтому первый экран не перегружен полным описанием.
Новинки: сравнение цветов в регулярной сетке
New Arrivals организованы многоколоночными карточками палеток: оттенки легко сравнить на светлом фоне. Названия и цены короткие, следующий раздел показывает категории Brushes, Eyes и Lips.
Равные размеры палеток и ширина карточек создают порядок; интервалы между категориями одинаковые. Оранжевый лишь локально обозначает бренд, основные цвета дают сами товары.
Кисти: чёткая форма и состав набора
Отдельные кисти и наборы размещены в одной сетке под Makeup Brushes. Фотографии сначала показывают ворс, ручки и количество в комплекте, затем идут названия и цены.
Белый фон и широкие интервалы уменьшают тесноту. Тонкое меню и центрированный заголовок сохраняют лёгкость. Инструменты каталога отделены и не прерывают сравнение.
Товар: тематическая упаковка вводит в детали
На странице The Volturi красно-чёрная упаковка занимает левую часть; справа — название, цена, количество и краткое описание. Изображение сначала раскрывает визуальную особенность, текст продолжает конкретное изучение.
Красный фон фотографии чётко отделён от светлой страницы. Тонкие рамки и компактные интервалы организуют действия. Воздух между изображением и текстом сохраняет читаемость тёмной темы в лёгком интерфейсе.
Продолжение деталей: пояснения отдельно от рекомендаций
Ниже сохранены миниатюры, отзывы и You May Also Like. Интервалы соединяют блоки, но различают сведения о текущем товаре и продолжение выбора.
Рекомендации имеют одинаковую ширину колонок. Люди, упаковка и инструменты по-прежнему показаны на светлом фоне. Подзаголовки и вертикальные интервалы разделяют группы и помогают искать другие интересные товары.
Мобильная главная: свернуть меню, сохранить тему и новинки
Горизонтальная навигация собрана в красный MENU; логотип и поиск расположены вертикально выше. После баннера идут New Arrivals: сначала впечатление от макияжа, затем товары.
На узком экране изображения получают больше площади, названия и цены идут вниз. Красная полоса отделена от светлого содержания, позволяя вернуться к категориям во время просмотра.
Мобильный товар: изображение и описание по порядку
Сначала идут навигационная цепочка и большая упаковка, затем название, цена и количество. Тема сохранена целиком, а две колонки становятся последовательным чтением.
Заголовки слева естественно переносятся по ширине; между ценой и действиями есть отступ. Светлый фон, тонкие рамки и фирменный цвет связывают страницу с остальным сайтом.
Итоги дизайна: связь темы и конкретной информации
В Chroma Dewy макияж и цветная витрина объединяют оранжевую айдентику, светлый фон и насыщенные фотографии главной, категорий и товаров. Изображения выражают тему, текст объясняет детали, каталог и параметры поддерживают следующий шаг. Телефон сохраняет порядок для последовательного опыта.
Спланируйте понятный сайт Shopyy для своего бренда
Пришлите адрес сайта, материалы бренда и список нужных страниц. С учётом товаров, целевого рынка и приоритетов контента вместе определим подходящие страницы, оформление и функции.
