Дизайн сайта футболок Shopyy: лиги и выбор моделей MMJerseys

Обзор проекта

Для MMJerseys на Shopyy мы организовали страницы вокруг лиг и выбора футбольных футболок. Навигация по лигам, входы в каталог и новинки находятся на разных уровнях, обслуживая поиск по команде и просмотр моделей. Белые сетки, красные акценты меню и чёрный текст соединяют тему, сравнение и отдельный товар.

Задача дизайна

На выбор одновременно влияют лига, команда, сезон и модель. Сначала требовалась ясная иерархия каталога, затем фотографии и параметры для конкретного решения, без скопления категорий и описаний на одном уровне.

Стратегия: каталоги лиг и выбор моделей

Лиги, входы в каталог и новинки разделены по уровням для поиска по команде и дизайну. Главная направляет, категории позволяют сравнивать, товарные страницы объясняют внешний вид и параметры. Уровни связаны меню и ссылками.

Arial и Helvetica организуют заголовки, меню и текст; узкий шрифт выделяет верхнюю рекламную полосу. Размер, насыщенность и ширина абзацев задают иерархию. Белые сетки, красный и чёрный повторяются на страницах: компактно внутри групп, свободнее между разделами.

Анимация и функции: поддержка текущего выбора

Меню каталога раскрываются при наведении; товары сохраняют вкладки и миниатюры моделей. В деталях последовательно идут размер, номер и дополнительные варианты. Ясное выделение выбора и интервалы между группами соединяют просмотр с решением, не отвлекая от формы лишней анимацией.

Товары на главной: сначала внешний вид, затем название

Вкладки New Arrivals и World Cup 2026 размещены над сеткой; на показанном экране — новинки. Карточка содержит вид спереди, название, цену и пояснение. Близкий масштаб изображений в строке облегчает сравнение цветов и рисунков.

Белый фон и тонкий чёрный текст оставляют главным яркие цвета команд. Вкладки отделены от товаров, карточки внутри компактны: можно просмотреть ряд, затем прочитать название.

Каталог лиг: команды сужают выбор

В Premier League названия команд образуют ссылки над сеткой. Заголовок страницы, подкатегории, Refine и Sort By имеют отдельные уровни, сохраняя порядок при большом объёме данных.

Красный используется только в навигации и метках новинок, товары остаются на светлом фоне. Крупные фотографии и одинаковая ширина карточек помогают сравнению. Подробные параметры оставлены товарной странице, чтобы не растягивать список.

Детали товара: фотография рядом с выбором

Большая фотография находится слева; справа — название, цена, акция и Similar Style. Сине-красная полосатая футболка занимает основную область, миниатюры показывают дополнительные ракурсы.

Короткие абзацы и свободное место группируют правую колонку. Жёлтая полоса акции даёт локальный акцент. Заданные ширины позволяют сверять внешний вид, продолжая выбор справа.

Параметры: модели и персонализация по группам

Фотография и миниатюры остаются слева. Справа плотные, но выровненные карточки показывают похожие модели, ниже идут размеры и персонализация. Решения разделены на шаги, а не объединены в длинный выпадающий список.

Маленькие изображения имеют постоянные интервалы; светлые рамки и отступы группируют текстовые варианты. Сетка организует множество моделей. Размеры и номера рядом с товаром уменьшают поиск между областями.

О компании: короткие абзацы добавляют контекст

Центрированный заголовок и короткие абзацы представляют бизнес, сохраняя шапку и подвал магазина. Страница дополняет контекст; после чтения навигация возвращает к каталогу.

Чёткий шрифт без засечек, широкая межстрочная дистанция и интервалы облегчают чтение. Чёрное на белом без дополнительных баннеров создаёт другой ритм, чем страницы выбора.

Контакты: заметное место для сообщения

Инструкция размещена сверху, синяя круглая иллюстрация сообщения подчёркивает следующий вход. Email, подсказки и ссылка разделены группами, чтобы сначала понять каналы, затем выбрать способ связи.

Сохраняется простая белая область. Синий вход отличается от красного меню магазина. Страница направляет к общению; каталог и цены остаются на соответствующих страницах.

Мобильная главная: баннер и двухколоночные товары

На узком экране сохранены акция, тематический баннер и новинки, а сетка подстроена под телефон. Баннер задаёт тему, список сразу переходит к моделям.

Заголовки и названия переносятся по ширине карточек; изображения достаточно крупные. Вертикальные интервалы отделяют баннер, вкладки и товары, сохраняя порядок содержания.

Мобильный товар: крупное изображение представляет модель

Сначала показаны фотография и ракурсы, затем название, цена и акция. Две колонки превращаются в вертикальную последовательность с достаточной шириной для каждой группы.

Футболка остаётся заметной, текст выровнен влево с контролируемыми интервалами. Модели и параметры продолжаются вниз, сохраняя связь изображения, названия и выбора.

Итоги дизайна: связь темы и конкретной информации

В MMJerseys лиги и выбор формы объединяют белые сетки, красную навигацию и чёрный текст главной, категорий и товаров. Изображения выражают тему, текст уточняет детали, каталог и параметры поддерживают следующий шаг. Мобильная версия сохраняет порядок для последовательного визуального опыта и навигации.

Спланируйте понятный сайт Shopyy для своего бренда

Пришлите адрес сайта, материалы бренда и список нужных страниц. С учётом товаров, целевого рынка и приоритетов контента вместе определим подходящие страницы, оформление и функции.