Обновление сайта · Рязань
КС-ИнтерьерСайт, который раскрывается веером образцов
Шоурум плитки, керамогранита, мозаики, клинкера и ламината в Рязани: больше 10 тысяч товаров и 136 брендов. Команда студии вдумчиво пересобрала сайт целиком — от фирменного языка и первого экрана до каталога, журнала и оформления заказа. Сайт стал похож на сам шоурум: тёмная галерея, стекло и тёплый свет над материалами.
- 20 страниц
- разобрали на аудите — на компьютере и телефоне
- 17 видов
- страниц и окон в новом оформлении
- 5 разделов
- каталога — одной серией иллюстраций
- 27 статей
- журнала — на одном новом шаблоне
Было и стало
Те же страницы —
под стеклом
Прежний сайт работал на стандартной теме: строка букв брендов под меню, шрифт Montserrat, первый экран и почти вся главная — HTML-вставками в тексте раздела. Ведите стеклянную пластину — слева прежний сайт, справа новый. Сравните главную, каталог, товар, «О компании», статью и контакты.
- Строка букв брендовАлфавит A–Ш под меню на каждой странице занимал целую строку.
- Главная из вставокПервый экран и девять блоков — HTML со своими стилями внутри текста раздела.
- Фото из разных мировУ разделов каталога — снимки в разном свете и стиле.
- Статьи по-разномуКаждая из 27 статей журнала — со своим набором стилей.
Фирменный язык
Палитра —
веером образцов
Логотип салона — чёрная надпись в рамке-двери. Его оставили как есть, а язык сайта собрали из самого шоурума: графит тёмного зала, слоновая кость светлых плит, тёплый песок света над витриной и шалфей зелени. Заголовки — широкий Unbounded, текст — Onest. Главный материал интерфейса — стекло: размытие, тонкая светлая кромка и блик.
Главная
Главная —
как прогулка по шоуруму
Одиннадцать глав от первого экрана до карты. Каждая отвечает на вопрос покупателя: что есть, с чего начать, как выглядит, как работает салон, куда приехать. Выберите главу — окно сайта прокрутится к ней.
Фото разделов
Пять разделов —
в одном свете
Прежние фото разделов были из разных миров: светлая ванная, улица, рендер. Новую серию собрали в одном свете — тёмная галерея, стекло и тёплый блик по фактуре материала. Это иллюстрации, созданные нейросетью по нашему описанию, а не фото салона. Пластины переворачиваются при появлении, наведите — увидите, как было.
Было
Было
Было
Было
Было
Тексты из админки
Слова остались —
страницы новые
Тексты «О компании», «Доставки» и статей журнала салон писал и правит сам — мы их не переписывали. Сайт выводит те же блоки из админки в новом оформлении: первый экран текста уходит в тёмную шапку страницы, карточки, заметки и вопросы получают единый вид. Правка в админке сразу видна на новой странице.
Блоки из админки — направления, преимущества, карта, отзывы и вопросы — стали стеклянными карточками, первый экран ушёл в тёмную шапку с фото салона.
Блоки статей — один словарь
- Вводный абзац
- Заметка
- Цитата
- Карточки
- Ошибки по номерам
- Чек-лист
- Таблица
- Вопросы
- Оглавление
- Время чтения
Покупка
Меню, заявка, заказ —
тем же языком
Каталог открывается стеклянной панелью с фото пяти разделов и быстрыми подборками. Окно заявки — светлое, с телефонами салона внизу. На странице заказа шаги формы стали карточками, способы доставки и оплаты — переключателями, а состав заказа с итогом едет рядом тёмной карточкой. Логику оформления заказа не трогали.
Живой сайт
Двенадцать страниц —
одним языком
У внутренних страниц тёмная шапка с крупным заголовком, а дальше — своя подача: витрина каталога, карточка товара, карта, журнал, оформление заказа. Наведите на окно — страница прокрутится.
На телефоне
Шоурум —
в кармане
Стеклянная шапка с поиском и кнопкой звонка, внизу — каталог, избранное, сравнение, корзина и звонок. Веер разделов на первом экране, плитки каталога столбиком, оглавление статьи — под текстом. Нажмите на телефон, чтобы остановить прокрутку.
Как шла работа
Восемь этапов —
одна команда
Над проектом работала команда студии: разбор старого сайта, концепция, дизайн-система, страницы и приёмка с проверкой каждого экрана на компьютере и телефоне. Обновление шло на работающем сайте — салон продолжал принимать заказы, а прежний вид сохранён снимками до первой правки.
- 01АудитСняли 20 страниц на компьютере и телефоне, выгрузили данные сайта, сохранили тексты главной и исходные фото разделов — чтобы ничего не потерять и было с чем сравнить.
- 02КонцепцияСайт как сам шоурум: тёмная галерея, стекло и тёплый свет. Главный жест — веер образцов, который держат в руках у витрины.
- 03Дизайн-системаГрафит, слоновая кость, песок и шалфей, шрифты Unbounded и Onest, стеклянные панели, кнопки-«пилюли» — один язык для всех страниц.
- 04Главная, шапка, подвалПервый экран с веером разделов, быстрый подбор по задаче, коллекции, шаги работы, бренды, вопросы, карта; шапка с меню каталога и подвал с большой надписью.
- 05Фото разделовПять новых иллюстраций одной серией — в том же свете, что и весь сайт.
- 06Каталог и товарКаталог, разделы, подборки, коллекции, карточка товара и бренды — новым оформлением поверх прежнего кода магазина.
- 07Страницы, журнал, корзина«О компании», «Доставка», «Контакты», журнал и 27 статей на одном шаблоне, оформление заказа.
- 08Приёмка и доводкаКаждую страницу проверили на компьютере и телефоне и довели по замечаниям.
Довели на приёмке
- Карточки популярных товаров разошлись — между ними появился воздух
- Надпись «КС Интерьер» в подвале — ровными буквами, без линий внутри
- Белые поля на фото коллекций слились с фоном карточки
- Шапку разгрузили: каталог в кнопке, поиск шире
- Длинные характеристики товара переносятся ровно
- Галочка согласия в заказе — в одной строке с текстом
- Кнопка маршрута на тёмной карте снова видна
Не трогали — работает как раньше
- Каталог и цены
- Фильтры и подборки
- Корзина и оформление заказа
- Калькулятор упаковок
- Тексты страниц в админке
- Адреса страниц
Итог
Шоурум —
теперь и онлайн
Главная, шапка, подвал, меню каталога, каталог, разделы, подборки, коллекции, карточка товара, бренды, «О компании», доставка, контакты, журнал и 27 статей, оформление заказа и окна заявок — единым языком, без остановки продаж. Сайт выглядит так же спокойно и дорого, как материалы на витрине.