GEO: Россия / Москва
Ниша: воздушные шары, праздничная продукция, оформление событий
Платформа: InSales
Тип работ: новый интернет-магазин, дизайн с нуля, перенос дизайна на InSales
Главная задача: сделать полноценный интернет-магазин вместо начатого сайта на Tilda и передать в дизайне характер бренда: яркость, праздник, детское настроение и день рождения
Результат: сайт сдан и принят, заказчик остался доволен
«Мишины Шарики» — бренд в нише воздушных шаров и праздничной продукции.
Клиент пришёл с уже начатым сайтом на Tilda. Но довольно быстро стало понятно, что для полноценного интернет-магазина этого мало. Нужен был нормальный магазин на InSales: с каталогом, карточками товаров, корзиной, оформлением заказа, личным кабинетом, поиском и дополнительными функциями.
Задача была понятная: сделать новый интернет-магазин, который не просто продаёт товары, а соответствует логике и настроению бренда.
В нише воздушных шаров человек покупает не только товар. Он покупает настроение: день рождения, детский праздник, сюрприз, оформление события, эмоцию. Поэтому сайт не мог быть сухим и шаблонным.
Нужно было сделать магазин ярким, живым и праздничным, но при этом сохранить нормальную e-commerce-структуру: чтобы пользователь мог выбрать товар, посмотреть карточку, добавить в корзину, оформить заказ, воспользоваться поиском и личным кабинетом.
Задача
Основная задача была сделать полноценный интернет-магазин на InSales.
Не лендинг, не простую витрину и не шаблонную страницу, а именно магазин с набором рабочих экранов и функций.
В работу вошли:
— главная страница;
— категория товара;
— карточка товара;
— корзина;
— результаты поиска;
— избранное;
— сравнение товаров;
— личный кабинет;
— оформление заказа;
— страница с произвольным контентом;
— страница 404;
— макет письма покупателю;
— страница видео.
Отдельно нужно было реализовать функционал:
— умный поиск;
— обратный звонок;
— маску номера телефона;
— мобильную панель;
— виджеты с товарами на главной;
— предзаказ;
— ссылку на Telegram в карточке товара;
— промокод в корзине;
— оформление заказа для физических и юридических лиц;
— вывод видео с Rutube в попапе.
То есть проект был не про “нарисовать красивую главную”. Нужно было собрать полноценный магазин, который можно запускать, наполнять и использовать в продажах.
Дизайн под бренд и настроение праздника
В этом проекте дизайн был особенно важен.
Для магазина воздушных шаров нельзя сделать холодный технический интерфейс. Пользователь должен с первых секунд почувствовать, что попал в пространство праздника.
Поэтому в дизайне мы держали три основных ощущения:
— яркость;
— праздничность;
— детское настроение.
Сайт должен был считываться как бренд про день рождения, радость, оформление праздников и эмоции. Но при этом важно было не переборщить.
Если сделать слишком много декоративных элементов, магазин становится неудобным: сложнее выбирать товары, читать карточки, смотреть цены и оформлять заказ.
Поэтому мы искали баланс: дизайн должен быть красивым, живым и брендированным, но не мешать покупке.
В итоге получилась визуальная система с яркими акцентами, анимациями и праздничным настроением, но с понятной структурой интернет-магазина.
Прототип: сначала логика, потом красота
Перед дизайном мы собрали прототип.
Это был важный этап, потому что на нём решалась не цветовая гамма, а структура будущего сайта: какие блоки нужны, как они стоят друг за другом, где каталог, где товары, где преимущества, где бренды, как устроен футер.
Первоначально главную видели так:
— шапка;
— слайдер;
— блок с каталогом товаров;
— хиты продаж;
— акции;
— преимущества компании;
— бренды;
— футер.
Отдельно обсуждали варианты подвала сайта. Для проекта сделали два варианта: компактный и расширенный. В расширенном варианте помещались контактная информация, меню и мессенджеры. Для интернет-магазина это важнее, потому что пользователь должен быстро найти, как связаться с магазином и где получить нужную информацию.
На этапе прототипа макеты были чёрно-белыми. Это нормальная рабочая логика: сначала согласовываем расположение элементов, блоки и функциональность, а уже потом переходим к финальному дизайну.
Дизайн: не шаблон, а характер бренда
После согласования прототипа дизайнер перешла к визуальной части.
Здесь важно было попасть в ДНК бренда. Клиент отдельно показывал примеры того, что им близко: не только шрифты, а фон, декоративные элементы, фирменные “фентиклюшки”, настроение.
Мы учли это в дизайне.
Сайт должен был быть не просто аккуратным, а узнаваемым: с ощущением праздника, детства, ярких событий и живого бренда.
Для таких проектов это критично. Если сайт по шарам выглядит как обычный универсальный шаблон, он не работает на эмоцию. А в этой нише эмоция — часть продукта.
Человек выбирает шарики не как канцелярский товар. Он представляет праздник, ребёнка, сюрприз, фотографию, оформление комнаты или зала. Поэтому дизайн должен помогать этому ощущению.
Главная страница
Главная страница стала точкой входа в бренд и каталог.
На ней нужно было показать:
— что это магазин воздушных шаров и праздничной продукции;
— какие товары можно купить;
— где посмотреть хиты и акции;
— как перейти в каталог;
— почему магазину можно доверять;
— с какими брендами работает компания;
— как связаться и оформить заказ.
Главная не должна была быть просто красивым экраном. Она должна была вести пользователя дальше: к категории, карточке товара, корзине и оформлению.
Поэтому мы собрали главную как полноценную витрину магазина, а не как лендинг “для красоты”.
Каталог и категории
Категории товаров сделали по логике интернет-магазина.
Здесь важно было показать товары понятно и аккуратно: карточки, плашки, скидки, метки, количество товаров на странице, фильтры.
В ТЗ отдельно было указано внимание к плашкам с метками и скидками. Для праздничной продукции это важно: акции, хиты, новинки и спецпредложения должны быстро считываться.
По умолчанию в категории выводится набор товаров, чтобы страница не выглядела пустой и при этом не перегружала пользователя.
Карточка товара
Карточка товара — один из ключевых экранов.
Пользователь должен быстро понять:
— как выглядит товар;
— сколько он стоит;
— можно ли купить сейчас;
— что делать, если товара нет в наличии;
— как связаться с магазином;
— можно ли перейти в Telegram.
В карточке реализовали кнопку покупки, предзаказ и опциональную ссылку на Telegram.
Предзаказ особенно важен для магазина с праздничной продукцией. Если товара нет в наличии, пользователь не должен просто упереться в тупик. Он может оставить заявку, а магазин дальше обработает обращение.
Корзина и оформление заказа
Корзина и оформление заказа тоже были частью работы.
В корзине нужно было реализовать список товаров, итоговую сумму, промокод и переход к оформлению заказа.
Промокод — отдельный важный элемент. Его нужно было не просто нарисовать, а корректно встроить в сценарий: пользователь вводит промокод, применяет его, сумма заказа обновляется.
Оформление заказа делали с двумя режимами: для физических и юридических лиц. Это важно, потому что магазин работает не только с обычными покупателями, но и может принимать заказы от компаний, организаций, мероприятий и других клиентов, которым нужны документы и реквизиты.
Личный кабинет, избранное и сравнение
В проект вошли и стандартные для полноценного магазина разделы:
— личный кабинет;
— избранное;
— сравнение товаров;
— результаты поиска.
Да, это не самые эффектные страницы с точки зрения дизайна. Но для нормального интернет-магазина они важны.
Если делать сайт только по принципу “красивая главная и карточка”, проект получается неполным. Пользователь всё равно попадает в личный кабинет, поиск, избранное, сравнение или служебные страницы.
Поэтому дизайн переносили на весь набор экранов, чтобы магазин ощущался цельным.
Умный поиск
Для магазина с большим ассортиментом поиск — один из рабочих инструментов.
Мы предусмотрели умный поиск с автодополнением и подсказками. Его можно реализовать через стандартные возможности InSales или кастомный JS.
Задача такого поиска — помочь пользователю быстрее найти нужный товар. Особенно когда он не хочет ходить по категориям, а уже примерно понимает, что ищет.
Обратный звонок и формы
На сайте реализовали обратный звонок.
При клике открывается форма, где пользователь может оставить номер. Для номера добавили маску в формате +7, чтобы данные вводились аккуратно и без хаоса.
Это небольшая деталь, но для магазина она важна. Чем проще пользователю оставить заявку, тем меньше шансов, что он уйдёт.
Мобильная версия
Сайт делали адаптивным для десктопа, планшетов и мобильных устройств.
Для мобильной версии предусмотрели мобильную панель с иконками меню, корзины и личного кабинета.
Для интернет-магазина это важно: значительная часть пользователей заходит с телефона, особенно когда речь про быстрые покупки к празднику.
Человек может выбирать шарики на ходу, обсуждать заказ в мессенджере, быстро смотреть каталог и оформлять покупку с телефона. Поэтому мобильная версия должна быть не “как получится”, а нормальной частью проекта.
Страница видео
Отдельно в проекте была страница видео.
Видео должны выводиться с Rutube. Ссылки и заголовки добавляются в виджет, а при клике видео открывается в попапе.
Для бренда в нише праздников это полезный формат. Видео может показывать оформление, атмосферу, готовые решения, процесс, примеры композиций. Такой контент помогает клиенту не просто читать описание, а увидеть настроение и результат.
Макет письма покупателю
В работу также вошёл макет письма покупателю.
Это часто забывают, но письмо — часть клиентского опыта. После заказа человек получает уведомление, и оно тоже должно выглядеть аккуратно, соответствовать стилю магазина и нормально открываться в почтовых клиентах.
Поэтому для письма сделали адаптивную верстку и оформили его в общей логике проекта.
Как шёл процесс
Проект шёл в обычной рабочей последовательности.
Сначала обсудили задачу, посмотрели исходные материалы и ТЗ. Клиент уже начал двигаться в сторону сайта на Tilda, но для полноценного магазина нужен был другой подход.
Дальше собрали прототип. На этом этапе согласовали структуру, блоки, логику страниц, варианты футера и основные сценарии.
После согласования прототипа перешли к дизайну. Дизайнер отработала визуальную часть так, чтобы сайт соответствовал бренду: яркий, праздничный, с детским настроением, анимациями и фирменными элементами.
После утверждения дизайна программист перенёс его на InSales и реализовал страницы и функционал из ТЗ.
Затем заказчик проверил сайт, мы прошли рабочие правки и сдали проект.
Результат
Сайт был полностью сдан и принят.
Заказчик остался доволен результатом. Правки были в обычном рабочем режиме, без сложной переделки концепции.
В итоге «Мишины Шарики» получили не просто новый сайт, а полноценный интернет-магазин на InSales:
— с дизайном под бренд;
— с яркой праздничной визуальной подачей;
— с анимациями;
— с каталогом и категориями;
— с карточками товаров;
— с корзиной и промокодами;
— с оформлением заказа для физлиц и юрлиц;
— с личным кабинетом;
— с избранным и сравнением;
— с умным поиском;
— с обратным звонком;
— с предзаказом;
— с мобильной панелью;
— со страницей видео;
— с макетом письма покупателю;
— с адаптивной версткой.
Результат проекта, клиент получил нормальный интернет-магазин вместо начатого сайта на Tilda, с дизайном, который соответствует бренду и нише.
Как мы совместили праздник и e-commerce
В этом проекте не нужно было усложнять историю.
Клиенту нужен был нормальный магазин. Мы его сделали.
Но “нормальный магазин” — это не только главная страница и каталог. Это весь путь пользователя: от первого экрана и эмоции бренда до карточки товара, корзины, оформления заказа, письма и мобильной версии.
Для «Мишиных Шариков» было важно соединить две вещи:
— праздничный, яркий, эмоциональный дизайн;
— полноценную e-commerce-логику InSales.
Если оставить только эмоцию — получится красивая витрина, но не магазин. Если оставить только магазин — потеряется настроение бренда.
Мы собрали оба слоя: сайт выглядит как бренд про праздник, день рождения и радость, но при этом работает как интернет-магазин.
Финал
Проекты в нише праздников нельзя делать слишком сухими.
Здесь дизайн должен продавать не только товар, но и настроение. Но при этом сайт всё равно должен оставаться удобным магазином: с каталогом, карточкой, корзиной, поиском, предзаказом, личным кабинетом и нормальным оформлением заказа.
В «Мишиных Шариках» мы сделали именно это: разработали яркий дизайн под бренд, перенесли его на InSales и собрали полноценный интернет-магазин для продажи праздничной продукции.
