«Стекломаркет» — новосибирская компания, которая занимается резкой и обработкой стекла, производством зеркал, монтажом и серийными товарами для маркетплейсов. На первый взгляд задача звучала привычно: сделать дизайн интернет-магазина и перенести его на InSales.

Ключевые факты

С чего начался проект

У клиента уже был сайт и понятное направление бизнеса, но будущий проект должен был стать шире обычной витрины.

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

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

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

Главная задача

Нужно было сделать современный интернет-магазин на InSales и одновременно сохранить управляемость сайта.

Это важный момент. В e-commerce дизайн часто рисуется как красивая картинка: вот баннер, вот карточки, вот блок услуг. Но после запуска начинается реальная жизнь: нужно поменять название услуги, добавить фотографии, обновить блок, вывести новую работу, поменять текст на посадочной странице.

Если все это жестко зашито в шаблоны, клиент быстро упирается в разработчика даже на мелочах. Для «Стекломаркета» такой вариант не подходил. У компании много направлений, контент будет меняться, сайт нужно развивать.

Поэтому мы сразу закладывали логику редактируемых страниц и виджетов InSales.

Что усложняло задачу

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

Отдельная сложность — услуги. У клиента их много: резка и обработка, лазерная обработка, фрезеровка, алмазная гравировка, пескоструйная обработка, пленка, УФ-склейка, закалка, доставка, монтаж. Каждое направление должно быть на своем месте, с правильной ссылкой и понятным маршрутом.

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

Дизайн: не витрина, а рабочий интерфейс

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

Мы проектировали дизайн вокруг реальных сценариев:

·        выбрать готовое зеркало;

·        перейти в каталог;

·        посмотреть услуги по стеклу и зеркалам;

·        изучить отдельное направление;

·        оставить заявку через квиз;

·        посмотреть выполненные работы;

·        перейти к покупке или контакту.

Такой подход помогает не превращать сайт в набор красивых блоков. Каждый экран должен отвечать на вопрос: что человеку здесь нужно сделать дальше?

Зеркала с подсветкой: отдельная страница с другим настроением

Один из самых интересных фрагментов проекта — страница зеркал с подсветкой.

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

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

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

Услуги: собрать много направлений в понятную систему

Со страницами услуг задача была другой. Здесь важнее не эмоция, а ясность.

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

Например, страница "резки стекла и зеркал" работает уже как самостоятельная посадочная страница внутри общей структуры. Такой подход удобнее, чем длинная «простыня» обо всех услугах сразу.

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

Виджеты InSales: чтобы сайт жил после запуска

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

Мы делали страницы так, чтобы клиент мог менять контент: названия, тексты, фото, видео, описания, блоки услуг и работы. Это особенно важно для разделов, которые будут обновляться: «Наши работы», материалы, услуги, посадочные страницы.

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

«Наши работы»: портфолио как аргумент доверия

Для раздела «Наши работы» мы заложили отдельную логику.

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

Мы реализовали раздел так, чтобы его можно было наполнять изображениями.

Перенос на InSales

После дизайна начался второй большой этап — перенос на InSales.

Мы сверстали и адаптировали основные шаблоны:

·        главную страницу;

·        каталог и категории;

·        карточку товара;

·        корзину;

·        оформление заказа;

·        страницы доставки и оплаты;

·        список статей и страницу статьи;

·        услуги;

·        страницу «Зеркала с подсветкой»;

·        личный кабинет;

·        избранное;

·        404;

·        «Наши работы»;

·        дополнительные контентные страницы.

На этом этапе всегда появляются нюансы, которые не видно в статичном макете. Например, в Figma размер шрифта может выглядеть нормально, а на живом сайте при реальной ширине меню его нужно корректировать. Где-то нужно проверить мобильную версию, где-то — поведение ссылок, где-то — как платформа выводит стандартные элементы.

Мы проходили эти детали уже на рабочем сайте: выравнивали меню, проверяли маршруты, исправляли отображение блоков, адаптировали страницы под desktop и mobile.

Результат

В итоге «Стекломаркет» получил не просто новый дизайн, а собранный сайт на InSales с рабочей структурой интернет-магазина и управляемыми контентными разделами.

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

Бизнес-метрики продаж и конверсии в кейсе не приводим. В этом проекте наша зона ответственности — дизайн, перенос, структура, шаблоны и техническая реализация на InSales. Для оценки маркетингового результата нужны отдельные данные после запуска, наполнения каталога и продвижения.

Что важно в этом проекте

Этот кейс хорошо показывает разницу между «нарисовать сайт» и «собрать e-commerce-инструмент».

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

В «Стекломаркете» мы сделали именно такую основу: сайт, который можно не только запустить, но и дальше наполнять, уточнять и развивать.

Финал

Если у вас уже есть магазин на InSales, но структура разрослась, страницы сложно редактировать, а каждое изменение требует разработчика, начинать стоит не с косметической правки. Сначала нужно разобрать сценарии, страницы и управляемость контента. А уже потом переносить это в дизайн, шаблоны и виджеты.