Для бренда товаров для праздника «Мишины Шарики» мы разработали дизайн интернет-магазина и перенесли его на InSales. На главной использовали воздушные шары, ленты и яркие цветовые акценты. Каталог и карточку товара сделали спокойнее, чтобы покупатель мог рассмотреть ассортимент и выбрать оформление для своего события.
«Мишины Шарики» продают воздушные шары, наборы для фотозон, праздничную посуду, свечи и аксессуары. С товарами бренда можно самостоятельно украсить день рождения, домашнее торжество или другое событие. Команда планировала магазин для розничных и оптовых покупателей и пришла к нам с начатым проектом на Tilda. Для дальнейшей работы выбрали InSales.
Задали характер будущего магазина
В брифе Александра, заказчица проекта, обозначила пожелания к оформлению: цвета из логотипа, мягкие формы кнопок, объёмные изображения и рисованные детали. Ей хотелось сохранить характер бренда и передать ощущение праздника. При этом главную она видела яркой, а каталог более спокойным.
Этот ориентир определил оформление страниц. На главной декор знакомит с брендом и привлекает внимание к ассортименту. В каталоге на первый план выходят фотографии, названия и цены. Фиолетовые акценты, светлый фон и скругления связывают эти части магазина между собой.
Главная приглашает к подготовке праздника
Первый экран собрали вокруг предложения украсить событие. Крупный заголовок расположен в центре, под ним короткое пояснение и кнопка перехода в каталог. По краям разместили композиции из шаров, подарок и торт с цифрой. Эти предметы сразу показывают, для чего нужен ассортимент магазина.
Светло-сиреневый фон дополнили лентами и конфетти. Декор обрамляет текст, а яркая розовая кнопка выделяет следующий шаг. При переносе на InSales к баннеру добавили анимацию, которую отдельно показали и согласовали с Александрой.
Из праздничной композиции в нужный раздел
Сразу после первого экрана расположили категории: латексные и фольгированные шары, фотозоны, посуду, свечи и аксессуары. У каждой плитки есть название и изображение характерного товара. Покупатель может узнать нужный раздел по фотографии, а затем уточнить выбор по подписи.
Белые плитки собраны на общем сиреневом фоне. Картинки выходят к краям карточек и продолжают оформление первого экрана. Ниже начинается подборка хитов продаж: знакомство с видами товаров переходит к конкретным позициям с ценами.
Состав главной обсуждали вместе с заказчицей. Например, блок видеоинструкций решили убрать с этой страницы, сохранив отдельный раздел с инструкциями. На главной остались категории и товары, к которым посетитель может перейти сразу.
Спокойный каталог для выбора товаров
В каталоге крупные декоративные композиции уступают место товарной сетке. Оставили светлый фон, белые карточки и фиолетовые кнопки. Фотографии самих товаров уже дают достаточно цвета, поэтому вокруг них не понадобился дополнительный декор.
В настольном макете фильтры и сортировку расположили слева, товары справа, в три колонки. Над списком разместили компактные ссылки на категории. Посетитель может перейти в соседний раздел или сузить текущую подборку, оставаясь рядом с товарами.
Внутри каждой карточки предусмотрели фотографию, название, артикул, цену и действие для заказа. Метки новинки и скидки находятся на изображении. Кнопки добавления в корзину и состояние уже добавленного товара показали отдельно: после добавления рядом появляется управление количеством.
Карточка показывает набор и его состав
Для праздничного набора важно увидеть, как выглядит готовая композиция, и разобраться, что входит в покупку. Поэтому в карточке крупную фотографию разместили рядом с ценой и кратким описанием. Миниатюры собрали в отдельную колонку, чтобы можно было просматривать дополнительные изображения.
Под основными сведениями расположили количество и действия для заказа. В макете предусмотрели состояние предзаказа и кнопку, через которую покупатель может уточнить вопрос о товаре в Telegram. Подробности разделили на описание, характеристики и отзывы. В показанном примере характеристик есть количество предметов в упаковке, материал и высота.
Ниже разместили две подборки: товары, которые покупают вместе с выбранным, и аналогичные позиции. Первая помогает дополнить набор, вторая позволяет продолжить выбор среди похожих предложений.
Корзина и оформление продолжают общий стиль
В корзине список покупок занимает основную часть экрана, а итог и переход к оформлению вынесены в отдельный блок справа. У каждой позиции есть фотография, название, цена и управление количеством. Поле промокода находится рядом с итогом, чтобы покупатель видел, где применить скидку.
На странице оформления данные разделены на контактную информацию, доставку и оплату. Состав заказа остаётся рядом с формой. Предусмотрели выбор между физическим лицом и организацией, поскольку магазин рассчитан и на частных покупателей, и на бизнес.
Для этих страниц сохранили светлый фон, скруглённые поля и фиолетовые кнопки. Крупный декор остался на главной, а при оформлении основное место занимают данные покупателя и выбранные товары.
Праздничное оформление на небольшом экране
Для мобильной версии подготовили отдельные макеты. На главной заголовок и кнопка выстроены по центру, декоративные элементы обрамляют более узкий баннер. Категории и товары расположены по две карточки в ряд.
Длинное настольное меню заменили компактной шапкой с кнопкой меню, корзиной и личным кабинетом. Так на телефоне сохраняются основные переходы, а фотографии и названия товаров получают достаточно места.
Мобильные версии подготовили и для внутренних страниц. Общие цвета и формы продолжаются от знакомства с ассортиментом до оформления заказа.
Перенесли дизайн на InSales
После согласования дизайна перешли к адаптивной вёрстке и переносу на платформу. Помимо главной, каталога и карточки, в работу вошли корзина, оформление заказа, поиск, избранное, сравнение, личный кабинет, текстовые страницы, раздел видеоинструкций и страница ошибки.
Страницы собрали на виджетах InSales, то есть на блоках с настройками в редакторе магазина. Например, категории на главной можно добавлять через настройки соответствующего блока, а содержание текстовых страниц менять в панели управления.
По мере подготовки магазина помогали команде работать с наполнением: загрузили часть товаров из файла, объяснили распределение по категориям и передали доступ к инструкциям по управлению каталогом.
Результат
Для «Мишиных Шариков» подготовили настольный и мобильный дизайн магазина и перенесли его на InSales. Главная передаёт настроение праздника через цвет, композиции из шаров и декоративные детали. Каталог, карточка, корзина и оформление используют ту же палитру, оставляя основное пространство товарам и действиям покупателя.
Команда получила оформление основных покупательских и служебных страниц, а также возможность менять категории и контент через инструменты платформы.
Планируете магазин для своего бренда? Подробнее о нашей работе: Дизайн и разработка интернет-магазинов на InSales.
