Обновление сайта · Электросталь и Орехово-Зуево
МКМ ПлиткаСайт, который выглядит как сам салон
Два салона плитки и керамогранита, 26 тысяч товаров, 237 брендов и собственное изготовление изделий из керамогранита. Команда студии вдумчиво пересобрала сайт целиком — от фирменного языка и первого экрана до страниц услуг, каталога и окон заявок. Получился серьёзный современный проект, в котором материалы показаны так, как их видят в шоуруме.
- 24 страницы
- разобрали на аудите — на компьютере и телефоне
- 23 вида
- страниц и окон в новом оформлении
- 9 разделов
- каталога — одной серией в золотом свете
- 8 услуг
- изготовления — каждая со своей страницей
Было и стало
Тот же салон —
при другом свете
Прежний сайт работал на стандартной теме: меню заглавными буквами переносилось в две строки, разделы каталога шли одинаковыми карточками, а собственное изготовление изделий терялось среди них. Тяните линию — слева прежний сайт, справа новый. Сравните главную, каталог, раздел, изделия на заказ, товар и контакты.
- Меню в две строки11 пунктов заглавными буквами, «3Д дизайн» и «О нас» переносились.
- Девять одинаковых карточекРазделы каталога — одной сеткой, фото из разных миров.
- Изделия — мелкой плиткойСтупени и столешницы на заказ — одна карточка среди прочих.
- Светлый подвалВ меню каталога — шесть разделов из девяти.
Фирменный язык
Ромб из логотипа —
язык всего сайта
Логотип салона — золотой ромб в духе ар-деко. Мы не стали придумывать новую графику, а развернули эту геометрию на весь сайт: решётка материалов на первом экране, ромб-превью в каталоге, ромбы-маркеры в списках и шагах, золотые лучи из угла. Шрифты — Prata для заголовков, как гравировка на витрине, и Golos Text для текста.
- Чёрный бархат#0e0d0b · шапка, первый экран, подвал
- Золото#d6a23a · кнопки и акценты
- Светлое золото#f1d48d · заголовки на тёмном
- Слоновая кость#f6f2ea · фон страниц
- Камень#ebe4d6 · спокойные блоки
Главная
Главная —
как прогулка по салону
Девять глав от первого экрана до вопросов. Каждая отвечает на свой вопрос покупателя: что есть, сколько стоит, можно ли сделать по размеру, как это будет выглядеть, куда приехать. Выберите главу — окно сайта прокрутится к ней.
Каталог
Каталог-оглавление —
с ромбом за курсором
Вместо девяти одинаковых карточек — оглавление крупным шрифтом, как в каталоге выставки. Строка темнеет под курсором, а рядом плывёт ромб с картинкой раздела. На телефоне ромбы стоят в строках. Попробуйте здесь — это повтор живого блока главной.
Фото разделов
Девять разделов —
одна серия
Прежние фото разделов были из разных миров: светлый интерьер, тёмная лестница, плоский рендер. Новую серию собрали в одном свете — тёмный шоурум и мягкий золотой блик по фактуре. Это иллюстрации, созданные нейросетью по нашему описанию, а не фото салона. Карточки переворачиваются при появлении, наведите — увидите, как было.
Было
Было
Было
Было
Было
Было
Было
Было
БылоИзделия из керамогранита
Своё производство —
отдельная витрина
Салон сам изготавливает ступени, подоконники, столешницы, раковины, барные стойки и облицовку лестниц и каминов — из того же керамогранита, что продаёт. Раньше это была одна страница, свёрстанная внутри текста. Теперь — раздел-витрина на настоящих фото работ и восемь страниц услуг, где рядом с текстом всегда видна карточка «Что нужно для расчёта».
- Коллаж настоящих работ этой услуги
- Расчёт и телефон — на первом экране
- Все восемь изделий — в один клик
Акции
Акция —
вместе с товарами
Акции стоят сразу под первым экраном главной. У каждой — своя страница: крупная обложка, оглавление сбоку, условия и лента именно тех товаров, к которым она относится. На акции Arcadia Ceramica первым идёт керамогранит Onyx Royal из её текста, дальше — популярные позиции бренда.
- Оглавление подсвечивает текущий раздел
- Связанные статьи — карточками
- Призыв по смыслу: «Успейте по акции»
Живой сайт
Двенадцать страниц —
одним языком
У внутренних страниц тёмная шапка с крупным заголовком, а дальше — своя подача: витрина услуг, таблица цен, карты салонов, оглавление статьи. Наведите на окно — страница прокрутится.
На телефоне
Салон —
в кармане
Тёмная шапка с поиском и золотой кнопкой звонка, внизу — каталог, избранное, сравнение, корзина и звонок. Оглавление каталога превращается в строки с ромбами, услуги — в ленту. Нажмите на телефон, чтобы остановить прокрутку.
Как шла работа
Восемь этапов —
одна команда
Над проектом работала команда студии: разбор старого сайта, концепция, дизайн-система, страницы и приёмка с проверкой каждого экрана на компьютере и телефоне. Обновление шло на работающем сайте — салоны продолжали принимать заказы, а прежний вид сохранён снимками до первой правки.
- 01АудитСняли 24 страницы на компьютере и телефоне, сохранили тексты, данные и исходные фото разделов, чтобы ничего не потерять и было с чем сравнить.
- 02КонцепцияСайт как шоурум: чёрный бархат, золотой свет и ромб ар-деко из логотипа. В центре — материалы и собственное изготовление изделий.
- 03Дизайн-системаПалитра, шрифты, кнопки, карточки и сетка — один язык для главной, внутренних страниц, каталога и окон заявок.
- 04Главная, шапка, подвалРешётка материалов на первом экране, акции, каталог-оглавление, изделия, 3D-дизайн, салоны; закреплённая шапка с меню каталога.
- 05Изделия из керамогранитаРаздел-витрина и восемь страниц услуг: коллажи работ, переключатель, таблица цен, карточка расчёта.
- 06Каталог и товарНовый вид каталога, коллекций, карточки товара и брендов поверх прежнего кода магазина.
- 07Страницы и записи3D-дизайн, проекты, акции с товарами, блог, статьи с оглавлением, контакты с картами, страница для партнёров.
- 08Приёмка и доводкаКаждую страницу проверили на компьютере и телефоне и довели по замечаниям — от выравнивания таблиц до привязки товаров к акциям.
Довели на приёмке
- Миниатюры фото коллекции отодвинули от большого кадра
- Таблицу характеристик выровняли по строкам
- Номера страниц и стрелки сделали одинаковыми круглыми кнопками
- В поиске брендов значок встал ровно по центру
- Страницу «Сотрудничество» пересобрали без лишних иконок
- Запись об акции на ступени — светлая, текст читается
- К акциям привязали именно те товары, о которых они
- Исправили ошибку на странице акции
Не трогали — работает как раньше
- Каталог и цены
- Фильтры
- Корзина и оформление заказа
- Калькулятор упаковок
- Адреса страниц
- Тексты для поиска
Итог
Витрина салона —
теперь и онлайн
Главная, шапка, подвал, меню каталога, каталог, разделы, коллекции, карточка товара, бренды, изделия на заказ и восемь страниц услуг, 3D-дизайн, проекты, акции, блог, статьи, о салоне, доставка, контакты, страница для партнёров и окна заявок — единым языком, без остановки продаж. Сайт выглядит так же дорого, как материалы в салонах.