Создание сайта для компании по продаже икры "A-ikra"

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

Задача: показать ассортимент и структуру выбора

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

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

Первый экран: крупный текст и панорамное изображение

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

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

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

Категории каталога

Под заголовком «Выбери свое» расположены пять тёмных карточек. На них видны категории «Черная икра», «Красная икра», «Щучья икра», «Осетрина» и «Деликатесы». Белые подписи находятся в верхних углах, рядом со стрелками в небольших круглых плашках. Изображения продукции занимают нижнюю часть карточек и местами обрезаны их границами.

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

Товарный блок и отдельная карточка

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

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

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

Блог и страница акции

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

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

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

Единое оформление разных страниц

Серия A-ikra показывает несколько устойчивых приёмов:

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

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

Другой подход к оформлению каталога и внутренних страниц показан в проекте дизайна сайта ОСКАС.