Новый сайт · Москва
МоскерамикСайт, отполированный как чёрный керамогранит
Салон керамической плитки и керамогранита в ТК «Каширский Двор» работает с 2005 года: больше 20 тысяч товаров и 221 фабрика. Команда студии разработала для салона новый сайт — от фирменного языка и первого экрана до каталога, карточки товара и оформления заказа. Чёрный фон на каждой странице, синий свет — на всём, что можно нажать.
- 20 394
- товара каталога — в новом оформлении
- 221 фабрика
- со своими страницами и коллекциями
- 12 разделов
- каталога — одной серией иллюстраций
- 18 видов
- страниц и окон — одним языком
Задача
Чёрный — везде,
синий — для действия
Салон попросил сайт в чёрно-синих тонах, и чтобы чёрный фон был на всех страницах — не только на главной, но и в каталоге, в карточке товара, на страницах фабрик и в корзине. Мы превратили это пожелание в правила, по которым собран каждый экран.
- 01Ни одного белого провалаТёмными стали не только наши страницы, но и стандартные экраны магазина: фильтры, корзина, страница фабрики, страница «не найдено» и всплывающие плашки.
- 02Синий — то, что нажимаютКнопки, цены, активные фильтры и выбранные пункты — синие. Всё остальное спокойное, поэтому глаз сразу находит действие.
- 03Плитка — в луче светаФото товаров и коллекций — крупно, на светлых карточках или в галерее; на чёрном фоне материал смотрится так же, как в зале салона под лампами.
Фирменный язык
Палитра —
плиткой на глянце
Язык сайта собран из ночного зала салона: чёрный полированный пол, тёмно-синие панели, кобальтовая подсветка и холодный голубой блик на кромке плитки. Заголовки — широкий Unbounded, текст — Onest. Сквозные мотивы — сетка плиточного пола в перспективе, мозаика из квадратов и мягкое синее свечение за кнопками.
Главная
Главная —
как вечер в салоне
Двенадцать глав от первого экрана до новостей. Каждая отвечает на вопрос покупателя: что есть в салоне, с чего начать выбор, как выглядит плитка в интерьере, как работает салон и как до него доехать. Выберите главу — окно сайта прокрутится к ней.
Иллюстрации разделов
Двенадцать разделов —
в одном свете
Для разделов и подборок каталога мы сделали серию из двенадцати иллюстраций в едином стиле: ночной интерьер, синяя подсветка и блик по фактуре материала. Это иллюстрации, созданные нейросетью по нашему описанию, а не фото салона. На сайте их приподняли по яркости, чтобы фактура плитки читалась на чёрном. Наведите — плитка подсветится.
Магазин
От раздела до заказа —
без белого экрана
Каталог салона огромный, и покупатель проводит в нём больше всего времени. Поэтому раздел, коллекция, товар, фабрика и оформление заказа получили собственную вёрстку, а стандартные части магазина — тёмные стили. Логику каталога, фильтров и заказа не трогали: всё работает как раньше.
Тёмная шапка раздела с плитками подборок, фильтры в боковой колонке, переключатель «Коллекции / Товары» и карточки с ценой за м².
Открыть на сайте ↗Детали
Мелочи,
которые замечают
Меню каталога открывается при наведении: четыре раздела с фото и числом товаров, рядом — популярные подборки. Пустая корзина не показывает пустую форму, а предлагает вернуться в каталог. В подвале надпись «МОСКЕРАМИК» растянута во всю ширину и разгорается, пока страница докручивается до конца.
Живой сайт
Двенадцать страниц —
одним языком
У внутренних страниц тёмная шапка с крупным заголовком и сеткой пола, а дальше — своя подача: витрина каталога, паспорт коллекции, карточка товара, настоящие фото салона на странице «О компании», карта на «Контактах». Наведите на окно — страница прокрутится.
На телефоне
Салон —
в кармане
На телефоне — компактная шапка с поиском и кнопкой звонка, внизу — каталог, избранное, сравнение, корзина и звонок. Фильтры раздела открываются отдельной панелью, покупка в карточке товара — под фото. Нажмите на телефон, чтобы остановить прокрутку.
Как шла работа
Восемь этапов —
одна команда
Над сайтом работала команда студии: разбор, концепция, дизайн-система, страницы и приёмка с проверкой каждого экрана на компьютере и телефоне. Новый сайт включали на работающем магазине — салон продолжал принимать заказы, а каталог, цены и адреса страниц остались прежними.
- 01РазборСняли 21 страницу сайта на компьютере и телефоне, выгрузили данные каталога и тексты из админки — чтобы при обновлении ничего не потерять.
- 02КонцепцияСайт как ночной зал салона: чёрный полированный пол, синяя подсветка и плитка в луче света. Чёрный фон — на каждой странице.
- 03Дизайн-системаЧёрный, тёмно-синие панели, кобальт и ледяной голубой, шрифты Unbounded и Onest, сетка пола в перспективе — один язык для всех страниц.
- 04Главная, шапка, подвалМозаика первого экрана, четыре мира отделки, подборки, коллекции, шаги, фабрики, карта; шапка с меню каталога и подвал с большой надписью.
- 05Иллюстрации разделовДвенадцать иллюстраций одной серией — в том же синем свете, что и весь сайт.
- 06Каталог и товарРазделы, подборки, коллекции, карточка товара, фабрики — новым оформлением поверх прежнего каталога и цен.
- 07Страницы и корзина«О компании», «Доставка», «Контакты», новости и статьи, оформление заказа, избранное и пустые состояния.
- 08Приёмка и доводкаКаждую страницу проверили на компьютере и телефоне и довели по замечаниям салона.
Довели на приёмке
- Фото разделов стали светлее — фактура плитки читается на чёрном
- Фото товара увеличивается по клику, а не при наведении
- Характеристики товара — ровной таблицей с отступами
- Фильтры каталога и поля цены хорошо видны на тёмном фоне
- Страницы коллекций и фабрик — точно в ширину сайта, без прокрутки вбок
- У галереи коллекции скруглены все углы
- Пустые корзина и избранное — со своим экраном и подсказкой, куда идти
- Надпись «МОСКЕРАМИК» в подвале — во всю ширину, со светом по мере прокрутки
- Цифры первого экрана целиком видны и на невысоких экранах
Работает как раньше
- Каталог и цены
- Фильтры и подборки
- Корзина и оформление заказа
- Калькулятор упаковок
- Тексты страниц в админке
- Адреса страниц
Итог
Салон плитки —
в синем свете
Главная, шапка, подвал, меню каталога, каталог, разделы, подборки, коллекции, карточка товара, фабрики, «О компании», доставка, контакты, новости и статьи, корзина, избранное и оформление заказа — единым языком, на чёрном фоне, без остановки продаж. Сайт выглядит так же, как плитка в зале салона вечером: глубоко, спокойно и с бликом.