Студия Кирилла Ефимова

Разработка дизайна сайтов

Дизайн интернет-магазина

от 120 000 ₽

Проектируем дизайн интернет-магазина целиком: главную, каталог с фильтрами, карточку товара, корзину и оформление заказа — для десктопа и телефона. Рисуем не три красивых экрана, а весь путь покупки со всеми состояниями, чтобы покупатель дошёл до кнопки «Оформить», а разработчику не пришлось ничего додумывать.

Обсудить проект Написать в Telegram

Живая версия: можно нажимать и прокручивать внутри рамки.

Открыть в новой вкладке
novamarket.ru
Кобальтовая глазурь с лампой, заголовок «Касса под вашу точку — прямо с прилавка», шесть терминалов на столешнице и ценники под каждым; ценник Нова 7.3 подсвечен янтарём
Первый экран на телефоне: заголовок, кнопки, прилавок прокручивается по горизонтали, касса в центре подсвечена ценником

Открыть живую версию

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

Из работы «Нова.Маркет»

Кому подходит

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

Что делаем, сколько стоит и сколько длится

Цены — нижняя граница, сроки — ориентировочные, для понимания порядка. Точную сумму и график с датами этапов фиксируем в смете после брифа, до начала работы.

Интернет-магазинот 120 000 ₽от 4 недель
Каталог, карточки товаров и услуг, корзина, блог, гарантия и поддержка, собранные из одного UI-кита. Для Нова.Маркета это прилавок с ценниками, подбор кассы, каталог, карточка и корзина со всеми состояниями.
Редизайнот 60 000 ₽от 3 недель
Новый дизайн для работающего сайта: разбираем, где посетители теряются, и перерисовываем страницы, не ломая привычные сценарии клиентов.

Как мы это делаем

Главная продаёт товаром
Первый экран магазина должен показывать то, что вы продаёте, а не список преимуществ. В Нова.Маркете это прилавок: шесть касс стоят на столешнице под лампой, под каждой ценник с моделью, одной фразой «для чего» и ценой. Наведение переводит свет на кассу, клик открывает карточку. Линейка и есть каталог, а янтарный цвет на экране один — у ценника хита и кнопки «Подобрать кассу».
Каталог — рабочий инструмент
Фильтры, сортировка и поиск решают, найдёт ли человек товар. Проектируем фильтры, которые работают без перезагрузки, со счётчиками у каждого пункта и активными условиями в виде чипов с крестиком. Состояние фильтров живёт в адресе страницы, поэтому подборку можно переслать ссылкой. Пустая выдача объясняет, почему ничего не нашлось, и предлагает следующий шаг. Если товар сложный, добавляем подбор: в Нова.Маркете это шесть типов бизнеса и четыре требования.
Карточка товара отвечает на вопросы до покупки
Карточка — главная продающая страница магазина. В ней галерея, цена, варианты и комплекты с пояснением, для кого каждый, сравнение с соседними моделями, отзывы и вопросы. Кнопка «В корзину» показывает, что товар добавлен, и предлагает оформить заказ. На телефоне панель с ценой и кнопкой закрепляется внизу, когда основной блок покупки уходит из экрана. Одну карточку проектируем как шаблон на весь ассортимент и проверяем на неудобных примерах.
Оформление без тупиков
Корзину и оформление рисуем со всеми состояниями: пустая корзина, промокод верный и неверный, ошибки в полях со сводкой и подсказкой, что исправить, экран успеха с номером заказа и тем, что будет дальше. Шаги пронумерованы, если порядок важен: контакты, получение, оплата. Поля меняются под способ доставки, для юрлица появляется ИНН. На телефоне всё в одну колонку, поля не меньше 16 px.

Как это было в проекте Нова.Маркет

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

  1. Сделали первым экраном прилавок с шестью кассами и ценниками: магазин сразу показывает, что продаёт и почём.
  2. Добавили подбор под тип точки: шесть типов бизнеса, четыре требования, рекомендация пересчитывается на лету и честно говорит, если идеальной кассы нет.
  3. Перестроили карточку товара вокруг комплектов: без ФН, ФН 15, ФН 36 и «Под ключ» с регистрацией, цена пересчитывается сразу.
  4. Нарисовали корзину и оформление со всеми состояниями: ошибки, промокод, успех, пустая корзина.
  5. Итог: 4 страницы, единый шаблон карточки для 14 товаров и отдельно собранная мобильная версия.

Открыть кейс «Нова.Маркет»

Работы

Что влияет на стоимость

Число шаблонов
Главная, каталог, карточка, корзина — базовый набор от 120 000 ₽. Блог, акции, сравнение, личный кабинет покупателя добавляют макеты.
Сложность выбора
Подбор по параметрам, комплекты, калькуляторы и конфигураторы — отдельная логика со своими состояниями.
Ассортимент и фильтры
Сотня товаров в пяти разделах и тысячи позиций с десятками характеристик требуют разной проработки каталога.
Графика товаров
Готовые фото поставщика быстрее. Рендеры и иллюстрации в одном стиле дают магазину собственное лицо, но добавляют работы.
Новый магазин или редизайн
Редизайн работающего магазина — от 60 000 ₽: сохраняем привычные сценарии и перерисовываем шаги, где теряются покупатели.

Что вы получите

Как идёт работа

  1. 01

    Бриф и смета

    Созваниваемся или переписываемся: цель, клиенты, конкуренты, примеры, которые нравятся, и сроки. После этого присылаем смету: состав работ, этапы, стоимость и даты.

  2. 02

    Структура и прототип

    Собираем структуру и прототип ключевых экранов: какие блоки, в каком порядке и что делает человек на каждом шаге. Согласуем логику до визуала, пока правки почти ничего не стоят.

  3. 03

    Дизайн

    Показываем концепцию на главном экране, после согласования рисуем остальные страницы и состояния для десктопа и телефона и собираем UI-кит. Правки — на каждом этапе, так переделки не копятся к концу.

  4. 04

    Передача и сопровождение

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

Вопросы

Сколько стоит дизайн интернет-магазина?

Дизайн интернет-магазина — от 120 000 ₽: главная, каталог, карточка товара, корзина и оформление с мобильной версией и UI-китом. Редизайн работающего магазина — от 60 000 ₽. Итог зависит от числа шаблонов, сложности фильтров и подбора; точную сумму называем после брифа и фиксируем в смете.

Сколько времени занимает дизайн магазина?

Ориентировочно от 4 недель на новый магазин и от 3 недель на редизайн. Это сроки на дизайн, без вёрстки, программирования и наполнения каталога. Точный график с датами этапов — структура, концепция главной, остальные страницы — фиксируем в смете после брифа; на него влияют число шаблонов и скорость согласований.

Нужно рисовать каждую карточку товара?

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

Подойдёт ли дизайн для Битрикса, InSales или Тильды?

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

Вы занимаетесь разработкой и наполнением?

Мы делаем дизайн: прототип, макеты, состояния, UI-кит и спецификации. Вёрстку, интеграции с учётной системой и наполнение каталога ведёт ваша команда или подрядчик. Во время сборки отвечаем на вопросы разработчиков и сверяем готовый магазин с макетами, включая мобильную версию и состояния ошибок.

Можно переделать только карточку или корзину?

Да, это частый случай редизайна: магазин работает, но покупатели теряются на одном шаге. Разбираем этот шаг, рисуем новую версию со всеми состояниями и сохраняем то, к чему покупатели привыкли. Объём и цену такой работы оцениваем после брифа; если неясно, где проблема, начинаем с UX-аудита.

Кто будет работать над проектом?

Команда студии под руководством Кирилла Ефимова, главного дизайнера «Школы 21» от Сбера. Кирилл ведёт каждый проект и отвечает за результат, дизайнеры студии работают над макетами.

Работаете только в Уфе?

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

Обсудить проект

Расскажите, что нужно сделать: ответим и предложим, с чего начать.

+7 917 411-66-22
Telegram @hell_sin
porisuimnetut@gmail.com

Смотрите также

Другие услуги