Разработка сайта · Москва, у МКАД
КерамикаТорСайт, который вырос из логотипа
Магазин плитки и керамогранита у МКАД: 36 000 товаров, 7 600 коллекций и 345 брендов. У магазина был логотип — четыре цветные плитки и светлый ромб между ними. Команда студии построила на нём весь новый сайт. Смотрите: его кладут плиткой, ряд за рядом, — а если плитка выпадет, она встанет на место. Щёлкните по любой.
Задача
Современно, дорого —
и от логотипа
Магазин хотел сайт, который выглядит современно и дорого, с эффектами и анимацией, — и чтобы он был новым на каждой странице, а не только на главной. Мы не стали придумывать стиль со стороны: всё, что есть на сайте, выросло из знака, который покупатели уже видят на вывеске.
- 36 000+
- товаров каталога — в новом оформлении
- 7 600
- коллекций фабрик со своими страницами
- 345
- брендов России и мира
- 20 видов
- страниц и окон — одним языком
Фирменный язык
Четыре плитки —
четыре роли
У каждого цвета логотипа на сайте своя работа, поэтому четыре ярких цвета не спорят друг с другом. Всё остальное — графит и тёплая бумага, как стена и пол шоурума. Заголовки набраны широким Unbounded, текст — спокойным Manrope. Наведите на плитку.
Первый экран
Фото, которое
укладывают плиткой
На первом экране главной фото интерьера не просто появляется — его выкладывают: плитки переворачиваются волной, сначала цветной стороной логотипа, потом картинкой. Под курсором плитки наклоняются, а иногда одна сама переворачивается и показывает ромб. Попробуйте здесь — и выберите, как пойдёт волна.
- 48 плитоккаждая держит свой кусок одного фото
- Цветная изнанкана обороте — цвета логотипа и ромб
- Наклон за курсоромплитки рядом с курсором приподнимаются
- Без видеовсё собрано в коде и работает на телефоне
Разделы каталога
Карточка, которая
раскалывается на четыре
Семь разделов каталога стоят на главной карточками. При наведении картинка раздела раскалывается по швам на четыре плитки — как знак магазина, — а в центре загорается ромб цвета раздела. Это настоящие разделы и картинки сайта, наведите на любую.
Сервис на главной
Сколько плитки
нужно купить
Плитку выбирают под конкретную комнату, поэтому на главной есть подбор по помещению и калькулятор. Калькулятор считает площадь с запасом на подрезку и число плиток, а рядом выкладывает план пола выбранным форматом. Ниже — он сам, с теми же форматами и запасом, что на сайте.
Главная
Главная —
двенадцать глав
Главная ведёт покупателя от «посмотреть» к «приехать»: разделы, подбор под комнату, коллекции, расчёт, популярные товары, бренды, магазин с картой, шаги заказа, вопросы и статьи. Выберите главу — окно сайта прокрутится к ней.
Внутренние страницы
У каждой страницы —
своя вспышка
Внутренние страницы открываются общей шапкой: графит, знак магазина и сетка плиток, по которой вспыхивают цвета логотипа. Дальше у каждой страницы своя подача — фото магазина в «О нас», карта и часы в контактах, оглавление в статьях. Переключите страницу.
Страница 404
«Эта плитка выпала из раскладки»
Даже на ошибке магазин остаётся собой: цифры 404 выложены плитками, а одна выпадает из раскладки и лежит внизу. Под заголовком — поиск по каталогу и кнопки в каталог и на главную, чтобы покупатель не ушёл.
Магазин
От раздела до заказа —
в одном стиле
В каталоге покупатель проводит больше всего времени, поэтому каталог, раздел, коллекция, товар и оформление заказа получили новое оформление: шапки разделов, цветные метки, крупные фото и красные кнопки покупки. Логику каталога, фильтров и заказа не трогали — всё работает как раньше.
Разделы каталога крупными карточками, подборки и популярные товары — в цветах логотипа.
Открыть на сайте ↗Детали
Мелочи,
которые замечают
Кнопка «Каталог» в шапке — тоже знак из четырёх плиток, а меню раскрывается разделами с картинками и карточкой «Подбор в магазине». Корзина выезжает сбоку поверх шапки. Окно звонка — с цветной полосой логотипа и телефонами магазина. А в подвале огромная надпись KERAMIKATOR загорается волной, буква за буквой.
Живой сайт
Двенадцать страниц —
одним языком
Все страницы собраны из одних деталей: графит, бумага, знак, четыре цвета и швы между плитками. Наведите на окно — страница прокрутится, нажмите — откроется на сайте магазина.
На телефоне
Знак —
в кармане
На телефоне — компактная шапка с меню и поиском, внизу — каталог, избранное, корзина и звонок. Фото первого экрана выкладывается плитками и здесь, разделы стоят сеткой, калькулятор помещается в один экран. Нажмите на телефон, чтобы остановить прокрутку.
Как шла работа
Восемь этапов —
одна команда
Над сайтом работала команда студии: разбор, идея, дизайн-система, страницы и приёмка с проверкой каждого экрана на компьютере и телефоне. Новый сайт включили на работающем магазине — заказы принимались, а каталог, цены и адреса страниц остались прежними.
- 01РазборСняли все страницы прежнего сайта на компьютере и телефоне, выгрузили разделы, тексты и настройки — чтобы при разработке ничего не потерять.
- 02ИдеяВзяли за основу логотип: четыре плитки и светлый ромб. Из них выросли цвета, ритм, эффекты и даже страница «не найдено».
- 03Дизайн-системаГрафит и тёплая бумага, четыре цвета логотипа с понятными ролями, шрифты Unbounded и Manrope, знак и надпись логотипа нарисованы заново чётко.
- 04ГлавнаяФото из плиток, разделы, подбор по помещению, коллекции, калькулятор, товары, бренды, магазин с картой, шаги заказа, вопросы и статьи.
- 05Шапка и подвалСтрока с адресом и часами, закреплённая шапка с каталогом и поиском, полоса прокрутки в четыре цвета, подвал с надписью KERAMIKATOR.
- 06Внутренние страницыОбщая шапка со вспыхивающей сеткой, «О нас», «Доставка», контакты, новости и статьи, страница 404.
- 07Каталог и заказКаталог, разделы, коллекции, товар, бренды, поиск, выезжающая корзина и оформление заказа — новым оформлением поверх прежнего магазина.
- 08Приёмка и доводкаКаждую страницу проверили на компьютере и телефоне и довели по замечаниям магазина.
Довели на приёмке
- Строку брендов по алфавиту убрали из шапки — шапка стала спокойнее
- Выезжающая корзина открывается поверх закреплённой шапки
- В корзине — без лишней белой подложки, счётчики количества по центру
- Логотип в шапке не сжимается на узких экранах
- В статьях боковая колонка с оглавлением остаётся на месте при прокрутке
Работает как раньше
- Каталог и цены
- Фильтры
- Корзина и оформление заказа
- Адреса страниц
- Тексты в админке
- Настройки магазина
Итог
Магазин плитки,
у которого есть свой язык
Главная, шапка, подвал, меню каталога, каталог, разделы, коллекции, товар, бренды, поиск, корзина и оформление заказа, окно звонка, «О нас», «Доставка», контакты, новости, статьи и даже страница 404 — всё выросло из четырёх плиток и ромба логотипа. Покупатель узнаёт магазин на любой странице, как узнаёт вывеску у МКАД.