Заказчик: Стекломаркет, компания из Новосибирска, которая продаёт зеркала и оказывает услуги по обработке стекла и зеркал: от резки и сверления до изготовления изделий и монтажа.
У компании уже был магазин на InSales со старым дизайном. Мы спроектировали новое оформление, подготовили прототипы и перенесли утверждённый дизайн на существующий сайт. В проекте связали каталог готовых зеркал, страницы услуг и отдельную подачу зеркал с подсветкой.
Задача
Разработать новый дизайн существующего магазина и перенести его на InSales: пересмотреть структуру страниц, оформить каталог и услуги, связать основные пользовательские сценарии общей навигацией и визуальным стилем.
Эти сценарии требуют разной информации. При покупке готовой модели важны форма, размер, цвет рамы и цена. При выборе услуги нужно понять, какие работы выполняет компания, посмотреть примеры и обсудить свой заказ. Предстояло спроектировать оба маршрута, разработать оформление страниц и реализовать их на InSales.
Сначала структура, затем визуальный дизайн
Работу начали с брифа: разобрали задачи магазина и состав его разделов. Готовые зеркала выделили в каталог, а услуги получили собственные страницы с описаниями и возможностью обратиться в компанию.
Следующим шагом стал прототип. На нём определили, какие блоки нужны каждой странице, в каком порядке их показывать и куда посетитель сможет перейти дальше. Например, главная должна была знакомить с ассортиментом и одновременно давать вход в услуги, а страница отдельного направления должна была подводить к заявке через объяснение и примеры.
На этом этапе обсуждали структуру: меняли расположение элементов, уточняли содержание и последовательность блоков. После утверждения прототипа дизайнер перешла к визуальному оформлению: шрифтам, цветам, отступам, кнопкам и работе с изображениями.
Дизайн передали на проверку, внесли несколько небольших корректировок и после утверждения приступили к разработке.
Светлая витрина и тёмные страницы
Основную часть магазина оформили на светлом фоне. В каталоге он служит спокойной основой для фотографий, названий и цен. На страницах услуг и в блоге поддерживает чтение длинных описаний. Зелёный цвет использовали для основных кнопок, активных пунктов и акцентов в тексте.
Для отдельных страниц выбрали тёмное оформление. Прежде всего это направление зеркал с подсветкой: на графитовом фоне хорошо видны светящийся контур и разница между вариантами света. Крупные интерьерные фотографии помогают представить, как зеркало будет выглядеть в помещении.
В исходном дизайне тёмную стилистику получила и страница «Заказ и оплата». Здесь она объединяла текстовые инструкции с фотографиями зеркал в интерьерах.
При смене фона магазин сохраняет узнаваемость. На страницах повторяются логотип, типографика, зелёные акценты, скруглённые изображения и общая структура навигации. Посетитель может перейти из каталога в отдельное направление и продолжить знакомство с той же компанией.
Главная: от первого знакомства к товару или услуге
На первом экране разместили предложение магазина, кнопку перехода в каталог и крупные изображения зеркал в интерьерах. Для такого товара важно показать и само изделие, и его окружение: зеркало выбирают под ванную, прихожую или другую комнату. Изображения справа получили небольшой эффект увеличения при наведении.
Далее расположили блок категорий. Круглые, прямоугольные, овальные зеркала и модели необычной формы представлены отдельными плитками с фотографиями. Здесь же предусмотрены переходы к акциям и новинкам. Такой вход подходит посетителю, который ещё не выбрал конкретную модель, но уже представляет нужную форму или хочет посмотреть предложения магазина.
Следующий блок, хиты продаж, переводит знакомство с ассортиментом к конкретным товарам. На карточках видны изображение, название, цена и кнопка добавления в корзину. Посетитель может сразу заинтересоваться моделью и продолжить покупку.
Для услуг сделали самостоятельный тёмный блок с плитками направлений. В нём можно найти резку, обработку, монтаж и другие работы. Это отдельный маршрут с главной для человека, которому требуется помощь с собственным изделием или проектом.
Ниже предусмотрели галерею работ и видео с зеркалами в интерьерах. Фотографии позволяют рассмотреть расположение и форму изделия, а видео добавляет возможность увидеть его в движении и с разных ракурсов.
Завершает содержательную часть блок преимуществ: информация о производстве, доставке, опыте компании и переход к отзывам покупателей. Главная последовательно отвечает на несколько вопросов: что здесь можно купить, какие работы заказать, как могут выглядеть изделия и где подробнее узнать о компании.
Каталог: сузить выбор до подходящего зеркала
Каталог построили вокруг признаков, по которым можно сравнивать зеркала. В верхней части разместили категории по форме и отдельные входы в акции и новинки. Они помогают начать выбор с понятного направления.
Слева расположили фильтры. Диапазон цены можно задать ползунком или через поля значений. Цвет рамы выбирается из списка: чёрный, бронзовый, золотой, серебряный. В макете также предусмотрен фильтр по бренду.
Сценарий состоит из нескольких действий: посетитель открывает нужную категорию, задаёт бюджет, отмечает цвет рамы и применяет условия. Затем рассматривает подходящие товары. Сортировка позволяет изменить порядок выдачи и продолжить сравнение в выбранной последовательности.
Основную площадь страницы занимают фотографии. Зеркала показаны в интерьере, поэтому при просмотре можно оценивать и форму изделия, и сочетание рамы с обстановкой. Под изображением расположены название с размером и цена. Для акционных предложений рядом показана прежняя стоимость.
Размер вынесли в название товара: он виден ещё в списке, до открытия подробной страницы. Это существенно для зеркал, поскольку внешне похожие модели могут заметно различаться по габаритам.
Для продолжения просмотра предусмотрели кнопку «Показать ещё» и постраничную навигацию. Посетитель может последовательно расширять список или перейти к другой странице каталога.
Услуги: выбранное направление меняет содержание страницы
У «Стекломаркета» много направлений работы. Для их представления разработали компактное меню в верхней части страницы: резка и сверление, гравировка, пескоструйная обработка, монтаж и другие услуги.
Активный пункт выделяется зелёным. При выборе направления меняются текст и содержимое страницы. Посетитель видит описание нужной работы в общей структуре раздела, а меню услуг остаётся его ориентиром.
Этот сценарий потребовал доработки функционала. Меню реализовали на виджетах и связали выбор направления с выводом соответствующего содержимого. На одном макете можно увидеть оформление активного состояния, а переключение раскрывает уже работу страницы.
Описание услуги собрали из блоков текста и фотографий. Например, на странице резки и сверления текст объясняет виды обработки и технические возможности, а изображения сопровождают рассказ о работе со стеклом. Чередование блоков делит информацию на части, которые можно последовательно прочитать.
Внизу расположили форму с именем, телефоном и электронной почтой. Путь посетителя проходит от выбора конкретной услуги к её описанию и затем к обращению. При таком устройстве раздела не приходится помещать полные описания всех направлений в одну длинную страницу.
Зеркала с подсветкой: показать варианты и привести к заявке
Для зеркал с подсветкой разработали отдельную страницу с тёмным фоном и большим количеством интерьерных изображений. Здесь выбор зависит сразу от нескольких характеристик: формы, размера и характера света. Поэтому страницу выстроили как последовательное знакомство с направлением.
Во вступительной части разместили крупные фотографии и описание. Они задают представление о продукте до перехода к отдельным вариантам. На тёмной основе световой контур зеркала становится заметным элементом композиции.
Далее в дизайне предусмотрели подборки круглых, овальных и фигурных зеркал. Отдельными блоками показали тёплую, холодную и RGB-подсветку. Такая группировка позволяет сначала рассмотреть форму, затем сравнить визуальный характер освещения.
Подборки оформили рядами изображений с элементами перелистывания. В каждом блоке сохраняется свой признак выбора, поэтому формы и варианты света не смешиваются в общей галерее.
После вариантов расположили примеры работ. Это следующий шаг знакомства: посетитель уже понимает, какие зеркала бывают, и может посмотреть, как они выглядят в готовом интерьере.
Завершили страницу переходом к заявке через квиз. На первом шаге формы предложен выбор размера. Человек начинает с конкретного параметра будущего зеркала и затем продолжает заполнение. Вся последовательность ведёт от впечатления о продукте к обсуждению своего изделия.
«Заказ и оплата»: объяснить процесс покупки
Для организационных вопросов подготовили отдельную информационную страницу. Её разделили на две основные части: процесс заказа и способы оплаты.
В первой части последовательность покупки оформлена нумерованным списком. Рядом расположены фотографии зеркал. Во второй части описание способов оплаты сочетается с другим блоком интерьерных изображений. Чередование текста и фотографий сохраняет ритм длинной страницы и помогает различать её части.
Тёмное оформление этой версии продолжает визуальную линию отдельных направлений магазина. При этом структура остаётся практичной: посетитель может заранее прочитать, как проходит заказ, и найти нужную информацию об оплате.
Страница дополняет покупательский сценарий объяснениями. Сам выбор доставки, ввод данных и переход к оплате происходят при оформлении заказа.
Личный кабинет: вернуться и проверить заказ
В личном кабинете центральное место отдали истории заказов. Для каждой записи в таблице предусмотрели дату оформления, номер, статус, состояние оплаты и сумму.
Выполнение и оплата показаны в разных колонках. Это позволяет отдельно увидеть, на каком этапе находится заказ и прошёл ли платёж. Номер и дата помогают найти нужную покупку среди остальных записей.
Слева расположили меню кабинета: история заказов, адреса доставки, скидки и бонусы, контактные данные. В структуре интерфейса эти разделы собраны рядом, чтобы покупатель мог возвращаться к сведениям о покупках и своим данным из одного места.
Сценарий начинается уже после оформления: человек входит в кабинет, находит заказ и проверяет его состояние. Для этого таблица остаётся главным элементом страницы, а навигация вынесена в отдельную колонку.
Блог: от выбора материала к подробному чтению
Для блога спроектировали список публикаций и отдельный шаблон статьи. В списке предусмотрели три рубрики: полезные статьи, кейсы и события компании.
Каждая публикация представлена изображением, датой, заголовком и коротким описанием. Такой набор даёт представление о теме до открытия материала. Посетитель может просмотреть несколько записей и выбрать ту, которая отвечает на его вопрос.
Шаблон статьи рассчитали на подробный текст. Вверху разместили заголовок, крупную иллюстрацию и оглавление. Содержание помогает увидеть состав материала и найти интересующую тему.
Основной текст собрали в более узкую колонку. Подзаголовки выделили зелёным, списки отделили от обычных абзацев, а большие изображения вынесли в самостоятельные блоки. Так длинная статья получает несколько уровней: общий план в начале, тематические части внутри и иллюстрации между ними.
Этот формат подготовлен для объяснений, которые сложно уместить в карточке товара: особенностей выбора зеркала, размещения в интерьере и ухода. Он позволяет развивать информационную часть магазина в том же визуальном стиле.
Перенос нового дизайна на существующий магазин
После утверждения дизайна перенесли его на существующий магазин InSales и связали новые страницы с его содержимым и функциями: каталогом, товарами, услугами, личным кабинетом и оформлением заказа.
Информацию о товарах и материалы страниц вывели из административной панели. Наполнение могло идти параллельно с разработкой: команда «Стекломаркета» готовила описания, фотографии и видео, которые затем появлялись в предусмотренных для них блоках.
При переносе проверяли страницы уже в браузере. В частности, скорректировали масштаб элементов первого экрана, чтобы композиция соответствовала реальному просмотру на мониторах. Подготовили мобильную версию и исправили замечания по расположению блоков, изображениям и ссылкам.
После переноса дизайна команда «Стекломаркета» посмотрела на страницы в работе и предложила дополнительные изменения. По обратной связи обновили меню, упростили страницу зеркал с подсветкой, сохранив квиз, и перевели страницу «Заказ и оплата» на светлый фон. Эти корректировки уточнили новый дизайн под текущие задачи компании.
Результат
Для существующего магазина «Стекломаркет» спроектировали структуру страниц, разработали светлое и тёмное оформление и перенесли утверждённый дизайн на InSales. Оформили каталог с категориями, фильтрами и сортировкой, реализовали переключение содержимого в услугах, подготовили отдельную подачу зеркал с подсветкой и переход к заявке. В общем стиле оформили информационные страницы, личный кабинет и шаблоны блога.
Компания получила обновлённый магазин, в котором покупка готового зеркала и обращение за индивидуальной работой связаны общей структурой и оформлением. Каталог, услуги и примеры работ стали частями одного визуального решения, которое можно развивать по мере появления новых задач.
