Разбор кейса: два магазина электроники — светлая и тёмная тема

В нашем портфолио есть два интернет-магазина электроники, и они противоположны почти во всём. PhoneHub — тёмный, премиальный, построенный вокруг атмосферы флагманской техники. Premium Catalog — светлый, быстрый, со ставкой на удобный каталог и скорость выбора. Ниша одна, тип товара один, а продукты получились разными — и оба работают. В этом разборе показываем, какие решения мы принимали по позиционированию, каталогу и скорости, и какие выводы из этой пары кейсов стоит забрать каждому, кто запускает магазин в конкурентной нише.

Одна ниша — два позиционирования

Электроника — одна из самых конкурентных ниш в e-commerce. Покупатель уже видел маркетплейсы, федеральные сети и десятки нишевых магазинов. Если новый магазин выглядит «как все», единственным аргументом остаётся цена — а ценовую войну с маркетплейсами небольшой магазин не выиграет.

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

PhoneHub отвечает на этот вопрос атмосферой. Это премиальный магазин: флагманские смартфоны, аксессуары, ощущение витрины бренда, а не прайс-листа. Человек приходит не «купить телефон подешевле», а купить конкретную дорогую вещь — и интерфейс должен подтверждать, что он в правильном месте.

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

Позиционирование — это не слоган на главной. Это сумма решений в интерфейсе: что человек видит первым, сколько шагов до корзины, как устроена карточка товара и что магазин показывает без клика.

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

PhoneHub: тёмная тема как инструмент, а не украшение

Тёмная тема в e-commerce — решение, которое принимают редко: считается, что светлые магазины «продают лучше». В кейсе PhoneHub мы пошли на тёмный интерфейс осознанно, по трём причинам.

• Товар выигрывает на тёмном фоне. Смартфоны и аксессуары — это стекло, металл, тёмные корпуса. На тёмном фоне фотографии выглядят как постеры бренда: блики и подсветка работают на восприятие ценности.
• Ассоциация с премиум-сегментом. Тёмные интерфейсы устойчиво читаются как «дорого»: презентации флагманов, сайты автомобильных брендов, промостраницы производителей техники. Мы используем готовый культурный код, а не изобретаем его с нуля.
• Отстройка от конкурентов. Среди светлых каталогов тёмный магазин запоминается сам по себе — ещё до того, как человек изучил ассортимент и цены.

Цена тёмной темы

За эффект приходится платить дисциплиной. Тёмный интерфейс сложнее в проработке, и вот что пришлось решать в проекте:

• Контраст. Серый текст на тёмном фоне быстро становится нечитаемым. Мы проверяли контраст всех текстовых состояний, а не только основных абзацев: подписи, цены, статусы наличия, плейсхолдеры в полях форм.
• Фотографии. Товар, снятый на светлом фоне, на тёмной подложке выглядит неаккуратно. Формат и обработка фото — часть дизайн-системы, а не «загрузим как есть».
• Состояния элементов. Наведение, нажатие, недоступная кнопка — на тёмном фоне разница между состояниями должна быть заметнее, чем на светлом, иначе интерфейс кажется сломанным.

Скорость как часть премиальности

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

Premium Catalog: светлая тема и ставка на каталог

Кейс Premium Catalog — противоположный полюс. Светлый интерфейс, нейтральный фон, главный герой — не бренд, а товар и его характеристики.

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

Решения по каталогу

Каталог — место, где магазины электроники теряют больше всего покупателей. Что мы сделали в Premium Catalog:

1. Фильтры по реальным критериям выбора. Не все характеристики из выгрузки поставщика, а те, по которым человек действительно выбирает технику.
2. Характеристики в карточке — сразу. Ключевые параметры видны без прокрутки и кликов по табам. Спрятанные характеристики — лишний клик, а каждый лишний клик — потерянные заказы.
3. Понятная структура категорий. Покупатель должен за один взгляд понять, куда идти. Глубокая вложенность ради «правильной» иерархии проигрывает плоской структуре, собранной под реальный спрос.
4. Проработанные состояния. Пустая выдача фильтра, товар не в наличии, загрузка списка — каждое состояние спроектировано, а не оставлено на волю движка.

Скорость как функция каталога

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

Что общего под капотом

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

Обе витрины стоят на одном фундаменте:

• чистый код без конструкторов, который полностью передаётся заказчику;
• адаптив: мобильную версию проектируем первой, потому что большая часть трафика в электронике идёт со смартфонов;
• SEO-структура: человекопонятные URL, корректные заголовки, микроразметка товаров;
• быстрая загрузка на реальных устройствах, а не только в синтетических тестах.

По деньгам ориентиры такие: интернет-магазин мы делаем от 76 000 ₽, онлайн-оплата +10 000 ₽, расширенная админка +12 000 ₽, личный кабинет покупателя +20 000 ₽, интеграция с CRM +10 000 ₽. Срок — 3–6 недель в зависимости от объёма каталога и интеграций. Тёмная тема сама по себе не делает проект дороже: дороже делает недодуманное ТЗ, когда позиционирование меняется в середине работы.

Как понять, какой подход нужен вам

Если вы запускаете магазин электроники и выбираете между «атмосферным» и «каталожным» сценарием, ответьте на три вопроса.

Первый: какой у вас средний чек и ширина ассортимента. Узкая линейка дорогих товаров — аргумент в пользу подхода PhoneHub: каждую позицию можно подать как отдельный продукт с историей. Сотни позиций разных брендов и ценовых сегментов — территория Premium Catalog: здесь продаёт удобство выбора, а не подача.

Второй: откуда придёт трафик. Если основной канал — контекстная реклама по конкретным моделям, человек приземляется сразу в карточку, и она должна закрывать сделку сама. Если ставка на SEO и категорийные запросы — критичны структура каталога и скорость листинга.

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

Честный ответ на эти вопросы экономит недели переделок. Мы проходим их с заказчиком до начала дизайна — именно поэтому оба магазина вышли разными, хотя ниша одна.

Выводы для e-commerce

Пара PhoneHub / Premium Catalog хорошо показывает: в одной нише нет «правильного» дизайна — есть дизайн, соответствующий покупателю.

1. Сначала позиционирование, потом макет. Ответ на вопрос «почему купят у нас, а не на маркетплейсе» определяет и тему, и структуру каталога, и тон текстов.
2. Тёмная тема — инструмент с условиями. Она работает для премиального товара с качественными фото и дисциплиной по контрасту. Для широкого ассортимента с разнородными фотографиями безопаснее светлая.
3. Каталог важнее главной страницы. Большинство покупателей приходит из поиска и рекламы сразу в категории и карточки. Вкладывайте часы проектирования туда, где принимается решение о покупке.
4. Скорость — это конверсия, а не бейдж. Медленный премиальный магазин перестаёт быть премиальным, медленный каталог перестаёт быть удобным. Скорость обслуживает позиционирование в обоих случаях.
5. Не копируйте лидеров вслепую. У маркетплейса другие задачи и другой бюджет. Малому магазину отстройка даёт больше, чем мимикрия под гигантов.

Чек-лист перед запуском магазина электроники

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

Оба проекта можно посмотреть в портфолио, а состав работ, цены и этапы для этой ниши мы собрали на странице интернет-магазина электроники. После запуска витрину нужно наполнять трафиком — как это устроено, разбираем в материале про SEO для интернет-магазина. Обсудить свой проект можно в Telegram: @dev_core_web.