Обновление сайта · Раменское
КерамаМиксСайт из собственных сот
Салон плитки, керамогранита и обоев в Раменском: шоурум 700 м², больше 16 тысяч товаров и 227 фабрик. Команда студии вдумчиво пересобрала сайт целиком — от фирменного языка и первого экрана до каталога, карточки товара и окон заявок. Знак нашли в самом салоне: красные шестигранники, которые раньше были картинкой в шапке, стали живой стеной, отвечающей на движение курсора.
Керамическая плитка
Керамогранит
Мозаика
Ламинат
Кварц винил
Обои
- 27 страниц
- разобрали на аудите — на компьютере и телефоне
- 22 вида
- страниц и окон в новом оформлении
- 8 разделов
- каталога — одной серией фото
- 16 000+
- товаров — каталог и цены работают как раньше
Было и стало
Тот же салон —
другой сайт
Прежний сайт стоял на стандартной теме: красная полоса с картинкой в шапке, светло-серое меню заглавными буквами, а главная была собрана из текстовых блоков со своими стилями. Тяните линию — слева прежний сайт, справа новый. Сравните главную, раздел каталога, товар, 3D-дизайн, страницу о салоне и контакты.
- Шапка-картинкаСоты были фоном одной полосы, а меню ниже — серым и заглавными буквами.
- Главная из текстаПлашки, карточки и блоки были свёрстаны прямо в тексте раздела со своими стилями.
- Каталог триждыКарточки разделов, слайдер разделов и «Популярные разделы» повторяли друг друга.
- Серый подвалСтандартный подвал темы, без адреса и приглашения в шоурум.
Фирменный язык
Картинка из шапки —
живая стена
У салона уже был свой образ: объёмные красные шестигранники с бликом сверху стояли фоном в шапке. Мы не стали придумывать новую графику — мы её оживили. Стена теперь рисуется в браузере: свет идёт за курсором, плитки под ним приподнимаются, а иногда одна вспыхивает жёлтым из логотипа. Она встречает на главной, стоит в шапке каждой страницы и в подвале. Поводите курсором по стене справа.
- Винный#5c0a10 · шапка, первый экран, подвал
- Красный#d2161e · кнопки магазина и акценты
- Жёлтый логотипа#ffe600 · главные кнопки и «Каталог»
- Тёплый светлый#fbf7f2 · фон страниц
- Почти чёрный#170607 · текст и меню каталога
Главная
Главная —
одиннадцать ответов
Каждая глава отвечает на вопрос покупателя: что есть, как это выглядит вживую, можно ли увидеть ремонт до покупки, что выбирают другие, кто производитель, куда привезут и как доехать. Выберите главу — окно сайта прокрутится к ней.
Фото разделов
Восемь разделов —
в одном свете
Прежние фото разделов уже были в одном духе — белые интерьеры с красными акцентами. Новую серию сделали теплее и спокойнее: мягкий свет сверху, как в шоуруме, светлые материалы и один-два глубоких красных предмета в кадре. Это иллюстрации, созданные нейросетью по нашему описанию, а не фото салона. Соты переворачиваются при появлении, наведите — увидите, как было.
Было
Было
Было
Было
Было
Было
Было
Было
Внутренние страницы
Тексты остались —
шапка новая
Страницы «3D-дизайн», «Проекты», «О салоне», «Доставка» и страницы городов менеджеры салона собирали сами — как лендинги прямо в тексте раздела, с первым экраном, кнопками и фото. Переписывать их не стали. Новый шаблон сам находит первый экран лендинга и переносит заголовок, текст, кнопку и фото в шапку страницы на живой стене, а всё остальное перекрашивает в новый стиль. Менеджеры правят тексты в админке, как привыкли.
- Заголовок, текст и кнопка — в шапке страницы
- Фото первого экрана — в шестиграннике
- Кнопки, карточки и заголовки текста — в новом стиле
- Ни одного переписанного слова в админке
Шапка и меню
Всё важное —
в одной строке
Сверху — адрес, режим работы, меню и соцсети. Ниже закреплённая строка на сотах: логотип, жёлтая кнопка «Каталог», поиск, 3D-дизайн, телефон с «Заказать звонок», кабинет, сравнение, избранное и корзина. Меню каталога раскрывается при наведении: восемь разделов в шестигранниках со счётчиками товаров, быстрый подбор и 3D-визуализация.
Живой сайт
Двенадцать страниц —
одним языком
Каталог, коллекции, товар и фабрики работают на прежнем коде магазина — изменился только вид. У текстовых страниц шапка на живой стене, у статей — оглавление, у контактов — карточки и карта. Наведите на окно — страница прокрутится.
На телефоне
Шоурум —
в кармане
Шапка на сотах с поиском и жёлтой кнопкой звонка, внизу — каталог, избранное, сравнение, корзина и звонок. Соты разделов на первом экране складываются в аккуратную гроздь, мозаика каталога — в две колонки. Нажмите на телефон, чтобы остановить прокрутку.
Как шла работа
Восемь этапов —
одна команда
Над проектом работала команда студии: разбор прежнего сайта, концепция, дизайн-система, страницы и приёмка с проверкой каждого экрана на компьютере и телефоне. Обновление шло на работающем сайте — салон продолжал принимать заказы, а прежний вид сохранён снимками до первой правки.
- 01АудитСняли 27 страниц на компьютере и телефоне, выгрузили данные сайта, тексты главной и исходные фото разделов, чтобы ничего не потерять и было с чем сравнить.
- 02КонцепцияНашли язык в самом салоне: картинка из красных шестигранников в шапке стала основой сайта, жёлтый и белый взяли из логотипа.
- 03Дизайн-системаПалитра, шрифты, кнопки-«таблетки», шестигранник как знак — одни правила для главной, внутренних страниц, каталога и окон.
- 04Главная, шапка, подвалЖивая стена и соты из разделов, каталог-мозаика, шоурум с видеообзором, 3D-визуализация, коллекции, отзывы, карта; шапка с меню каталога.
- 05Серия фото разделовВосемь иллюстраций в одном свете: тёплый светлый интерьер и глубокий красный акцент — как в салоне.
- 06Внутренние страницыШапка страницы на той же стене; первые экраны лендингов из админки переехали в неё, сами тексты остались нетронутыми.
- 07Каталог и товарНовый вид разделов, коллекций, карточки товара, фабрик и корзины поверх прежнего кода магазина.
- 08Приёмка и доводкаПроверили каждую страницу на компьютере и телефоне и довели всё, что мешало: от переноса заголовка до скорости отрисовки.
Довели на приёмке
- Заголовок первого экрана на телефоне перестал выходить за край
- В ленте популярных товаров вернулись картинки
- Живая стена стала лёгкой: страница прорисовывается сразу даже на слабых устройствах
- Фото в шапках страниц — лёгкие превью вместо тяжёлых исходников
- Текст «О салоне» на телефоне получил поля
- Корзина в шапке снова видна на тёмно-красном фоне
Не трогали — работает как раньше
- Каталог и цены
- Фильтры
- Корзина и оформление заказа
- Калькулятор плитки
- Адреса страниц
- Тексты страниц в админке
Итог
Салон из сот —
теперь и онлайн
Главная, шапка, подвал, меню каталога, каталог, разделы, коллекции, карточка товара, фабрики, доставка, о салоне, 3D-дизайн, проекты, новости и статьи, контакты, сертификаты, страницы городов, корзина и окно звонка — единым языком, без остановки продаж. Сайт выглядит как сам салон: тепло, ярко и с характером.