Каталог товаров для поставщика кулинарии собственного производства

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

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

Общая структура и место каталога

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

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

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

Сетка товаров и повторяемая карточка

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

Внутри сетки преобладают фотографии упаковок, снятых на светлом фоне. Там, где товар имеет другую форму, изображение всё равно остаётся в том же отведённом поле.

Между карточками оставлены узкие светлые промежутки. Небольшие скругления рамок смягчают геометрию, но не меняют регулярного расположения рядов. Фотография занимает основную площадь каждой ячейки, подпись — значительно меньшую. Поэтому товарный образ и его название разделены по функциям и не конкурируют внутри одного поля.

Подробный товарный блок

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

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

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

Категории и информационные секции

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

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

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

Единая система страницы и связанная работа

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

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

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