Интернет-магазин • Дизайн и разработка

LugaMarket — каталог дронов без перегрузки

Собрали дроны и комплектующие в одном интерфейсе: от выбора категории и поиска до характеристик товара и информации о доставке. Фиолетовые акценты выделяют навигацию и основные действия.

С AI-инструментами
Тип проектаИнтернет-магазин
ТематикаДроны и комплектующие
Что сделалиСтруктура, дизайн, каталог, адаптив
Основной сценарийПоиск техники и выбор товара

Десктопная версия

Сайт на компьютере

Выберите снимок и откройте его целиком — внутри можно прокручивать его по высоте.

Задача и решение

От большого каталога — к нужной модели

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

Задача

Объединить разные категории товаров в понятной структуре и сделать основные действия заметными на большом и маленьком экране.

Решение

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

Мобильная версия

Удобно со смартфона

Выберите снимок и откройте его целиком — внутри можно прокручивать его по высоте.

Результат

Единая подача техники и комплектующих

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

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

Следующий проект

Покажем направление для вашего сайта

Расскажите о бизнесе и задачах. Обсудим структуру, нужные страницы и удобный путь для посетителя.

Практика и разборы

Полезное по теме

Все статьи ↗
Сгенерированная иллюстрация к статье «Как показать доставку и оплату до того, как об этом спросят»

Как показать доставку и оплату до того, как об этом спросят

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

Читать статью
Сгенерированная иллюстрация к статье «Корзина не равна заказу: разбираем последний шаг покупки»

Корзина не равна заказу: разбираем последний шаг покупки

Проверяем итоговую сумму, данные, подтверждение и повторную отправку на последнем шаге покупки.

Читать статью
Сгенерированная иллюстрация к статье «Поиск по сайту ничего не нашёл: что показать вместо пустоты»

Поиск по сайту ничего не нашёл: что показать вместо пустоты

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

Читать статью
Сгенерированная иллюстрация к статье «Фильтры каталога: начинайте с выбора клиента, а не со списка свойств»

Фильтры каталога: начинайте с выбора клиента, а не со списка свойств

Почему настройка фильтров начинается с вопросов покупателя и качества данных, а не с количества технических характеристик.

Читать статью
Сгенерированная иллюстрация к статье «Нет товара в наличии: как не заводить покупателя в тупик»

Нет товара в наличии: как не заводить покупателя в тупик

Как честно сообщить об отсутствии, предложить подходящую альтернативу и не обещать неподтверждённое поступление.

Читать статью
Сгенерированная иллюстрация к статье «Карточка товара: какие вопросы нужно закрыть до кнопки заказа»

Карточка товара: какие вопросы нужно закрыть до кнопки заказа

Что показать в карточке, чтобы покупатель понял назначение, вариант, комплектность и условия следующего шага.

Читать статью
Сгенерированная иллюстрация к статье «Каталог или интернет-магазин: нужен ли вам заказ без менеджера»

Каталог или интернет-магазин: нужен ли вам заказ без менеджера

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

Читать статью
Сгенерированная иллюстрация к статье «Слишком много полей: какие вопросы оставить в заявке»

Слишком много полей: какие вопросы оставить в заявке

Разбираем поля по назначению: что спросить сразу, что перенести на разговор и как оставить место для ответа «не знаю».

Читать статью
Сгенерированная иллюстрация к статье «Форма заявки, которую удобно заполнить с телефона»

Форма заявки, которую удобно заполнить с телефона

Проверяем поля, клавиатуру, ошибки и получение заявки: что делает мобильную форму удобной в реальном использовании.

Читать статью