Обзор проекта
В сайте Lash & Wigs на Shopyy мы связали образы волос и макияжа с деталями товаров. Коллажи моделей формируют впечатление о категории, затем пряди, ресницы и фотографии использования входят в единую витрину. Баннеры моделей, белые сетки и чёрный подвал соединяют тему, сравнение и отдельный товар.
| Услуги | Отрасль | Платформа |
| Дизайн и разработка сайтов Shopyy | Красота и уход за собой | Shopyy |
| Задачи проекта | Целевой рынок | Стиль дизайна |
| Связь образов волос и макияжа с деталями товаров | Английский интерфейс, цены в долларах США | Коллажи моделей, белые товарные сетки и чёрный подвал |
| Стоимость проекта | Состав работ | Срок выполнения |
| CNY 6,800 | Главная, структура категорий, карточки товаров, адаптивный дизайн, страницы бренда и контактов | 15 дней |
Задача дизайна
Парики и ресницы должны показывать общий результат и конкретную форму. Модели задают стиль, чёткие фотографии объясняют завиток, длину и упаковку, распределяя задачи между изображениями.
Стратегия: связь образа и деталей товара
Коллажи моделей представляют категорию, затем пряди, ресницы и результаты использования входят в общую витрину. Главная направляет, категории сравнивают, детали раскрывают вид и параметры. Меню и ссылки соединяют уровни.
Основной шрифт — Poppins, часть пояснений набрана Helvetica. Размер, насыщенность и ширина разделяют заголовки, меню и текст. Модельные баннеры, белые сетки и чёрный подвал повторяются на страницах. Внутри групп информация компактна, между разделами свободнее.
Анимация и функции: поддержка текущего выбора
Миниатюры ракурсов и варианты длины поддерживают выбор. На телефоне сохранены номера изображений и свёрнутое меню. Взаимодействия помогают рассмотреть товар и выбрать длину; основной ритм задают разделение фото и текста и чтение при прокрутке.
Главная: сначала образ, затем товары
Мы объединили нескольких моделей в горизонтальном баннере, обозначив категорию центральным LASH & WIGS. Сразу ниже Top Sellers соединяет кудрявые пряди, ресницы и фотографии использования.
Белый текст наложен на моделей, вокруг остаётся простая шапка. Изображение создаёт стиль, белый список ниже переходит к товарам: от образа к выбору.
Хиты продаж: место для разных форм товара
Пряди, наборы ресниц и фотографии использования стоят рядом в карточках одинаковой ширины. Названия и цены под изображением позволяют проверить товар после осмотра формы.
Белый список и равные отступы разделяют карточки. Тёмные локоны ясно очерчены на светлом фоне, цветная упаковка ресниц различима в той же сетке.
Ресницы: сравнение моделей в одинаковом формате
Результаты использования, упаковки наборов и отдельные формы собраны в ровную сетку. Название категории и инструменты выше определяют область перед сравнением.
Короткие названия и цены следуют за фотографиями. Внутри группы всё близко, между рядами больше места. Чёрно-белый текст и светлый фон выделяют контуры ресниц и цвета упаковки.
Пряди: завиток рядом с выбором длины
Слева расположена крупная фотография прядей с глубокими локонами; справа — название, цена, длина и действия. Форме отдана большая площадь, кнопки длины собраны вместе.
Крупный заголовок без засечек и светлые рамки различают длины. Жёлтая кнопка оплаты ниже создаёт локальный акцент, сохраняя отдельные области изображения и параметров.
Детали и пояснения: завиток и использование
Ниже остаются крупная фотография и разные ракурсы, справа короткие абзацы объясняют товар. Та же двухколоночная структура продолжается до отзывов.
Интервалы миниатюр постоянны, пояснения разделены подзаголовками и абзацами. Тёмные волосы чётко видны на белом, позволяя перейти от общей формы к подробностям.
О бренде: кратко о направлении бизнеса
Страница About Us несколькими абзацами представляет деятельность ExcitingFashion. Шапка совпадает с товарной, ниже чёрный подвал сообщества и навигации задаёт границы.
Лёгкий текст и свободные интервалы сохраняют простоту белой области. Страница добавляет контекст, не повторяя фотографии товаров, и ясно выполняет свою задачу.
Контакты: каналы связи вместе
Под заголовком собраны инструкции, WhatsApp и email в простой текстовой структуре. После чтения можно сразу выбрать подходящий канал.
Белая основная область отделена от чёрного подвала. Текст выровнен влево с ясными интервалами. Страница облегчает быстрый поиск и визуально спокойнее товарных.
Мобильная главная: тема баннера и порядок товаров
Сначала показан коллаж моделей, затем Top Sellers и большие фотографии. Тема компьютерной версии сохранена, чтобы на узком экране сначала понять направление волос и макияжа.
Меню превращается в значки, фотографии используют больше ширины. Вертикальные отступы разделяют баннер, заголовки и товары, давая каждому блоку собственное пространство.
Мобильные детали: сначала фактура волос
Крупная фотография прядей и номер изображения предшествуют названию, цене и длине. Завиткам и контурам дано достаточно площади для первой проверки формы.
Текст переносится по ширине экрана, название и цена разделены. Две колонки становятся вертикальными, сохраняя последовательность от изображения к параметрам.
Итоги дизайна: связь темы и конкретной информации
В Lash & Wigs связь образа и подробностей объединяет модельные баннеры, белые сетки и чёрный подвал главной, категорий и товаров. Изображения задают тему, текст объясняет детали, каталог и параметры поддерживают дальнейшие действия. Телефон сохраняет порядок для единого визуального опыта и навигации.
Спланируйте понятный сайт Shopyy для своего бренда
Пришлите адрес сайта, материалы бренда и список нужных страниц. С учётом товаров, целевого рынка и приоритетов контента вместе определим подходящие страницы, оформление и функции.
