Создание интернет-магазина сувенирной продукции компании "Wellton"

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

Задача: показать путь от каталога к составу заказа

Подборка раскрывает несколько уровней работы с ассортиментом. Сначала показан перечень товарных групп, затем список ручек с параметрами отбора, подробная страница одной модели и таблица выбранных позиций. Эти экраны различаются по плотности информации: обзор состоит преимущественно из ссылок, товарная часть содержит изображения и характеристики, а заказ собран в таблицу.

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

Справа на светло-сером фоне расположен логотип Wellton, под ним контактная строка и ссылки о компании. Ниже находится поле поиска. В основной части под верхним меню видна цепочка разделов: она показывает положение текущей страницы внутри каталога. На изображениях эта строка меняется вместе с глубиной раздела, тогда как верхняя навигация сохраняется.

Каталог сувениров в трёх колонках

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

Над перечнем расположены два варианта представления: «по категории» и «по алфавиту». В показанном состоянии выделен первый. Здесь нет фотографической сетки товаров: содержание организовано через названия групп и вложенных позиций. Крупные интервалы между группами отделяют один список от другого, а общий белый фон сохраняет лёгкую структуру страницы.

В правой колонке этого макета показан голубой блок «Мой заказ» с сообщением об отсутствии выбранных товаров. Ниже размещена ссылка на правила оформления. Таким образом, обзор каталога и краткий состав заказа визуально разделены: основная площадь отведена ассортименту, узкая колонка содержит сопутствующую информацию.

Список ручек: фильтры и повторяющиеся товарные блоки

Страница «Ручки» начинается с серой панели фильтров. На ней видны выпадающие поля для цвета и бренда, группы отметок для ценовой категории и материала, а также кнопка «Выбрать». Ниже расположены элементы сортировки, номера страниц и обозначение количества позиций на странице. Панель параметров отделена от самих товаров, а навигационные элементы собраны в узкую строку.

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

На макете видны три таких блока с разными изображениями ручек. Их оформление повторяется, поэтому название, параметры, цветовые образцы и цена находятся в сопоставимых местах. Пространство под вытянутым изображением используется для палитры, а компактный текст остаётся в левой части. Такой формат отличается от каталога категорий: вместо нескольких списков здесь показаны отдельные изделия с одинаковым набором информационных зон.

Карточка товара и количество по цветам

В отдельной карточке сверху расположено крупное изображение красной ручки. Слева сохранён блок с названием, артикулом и краткими параметрами, под изображением находится текстовое описание. Ниже показаны шесть цветовых вариантов: каждый сопровождается названием цвета, небольшим образцом, кодом и отдельным полем количества.

Поля собраны в один горизонтальный ряд, а под ним размещена подсказка о выборе количества нужного цвета. Ещё ниже находится кнопка «добавить в заказ». Цена вынесена вправо на голубую плашку. В этой композиции количество связано не только с моделью в целом, но и с каждым показанным цветовым вариантом.

Правая колонка содержит ссылки раздела письменных принадлежностей, блок дополнительной информации и краткую таблицу «Мой заказ». В ней показаны артикулы, количество и суммы. Отдельное презентационное изображение на мониторе воспроизводит эту же структуру карточки: основное содержимое слева и узкая информационная колонка справа.

Страница заказа с таблицей и контактными полями

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

• Артикул и название определяют позицию внутри таблицы.
• Цвет обозначен подписью и небольшим цветным квадратом.
• Цена, количество и стоимость разнесены по отдельным столбцам.
• Для файла нанесения выделен собственный столбец с элементами загрузки или удаления.
• В начале строк расположены отметки выбора; под таблицей показаны кнопки удаления выбранного и пересчёта стоимости.

Ниже стоит итоговая строка с уточнением о стоимости нанесения. Затем размещены поля компании, имени, должности, телефона и электронной почты. Они распределены по двум сторонам формы, обязательные поля отмечены звёздочками. Кнопка «Отправить» находится внизу справа, ссылка на правила оформления слева. Таблица состава и контактная часть объединены общим фоном, но отделены друг от друга по вертикали.

Общие приёмы оформления

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

Галерея показывает устройство настольного интерфейса: расположение ссылок, изображений, параметров, полей и кнопок. Это позволяет проследить изменение структуры от общего каталога до отдельной позиции и подробного заказа. Работа фильтров, отправка данных и обработка файлов по самим изображениям не проверяются.

Другой подход к представлению категорий и товарной карточки можно сравнить в проекте дизайна сайта A-ikra, где основное внимание уделено крупным продуктовым изображениям и разным форматам каталожных блоков.