Новый сайт · Подольск
Плитка-ЛабСайт-лаборатория: каждую плитку — под лупу
Магазин керамической плитки и керамогранита в Подольске: больше 27 тысяч товаров, 5 300 коллекций и 235 брендов. Команда студии разработала для магазина новый сайт — от фирменного языка «лаборатории материалов» и главной со стеной-мозаикой до каталога, журнала, контактов и оформления заказа. Наведите лупу на чертёж — под ней уже готовый сайт.
- 27 300+
- товаров каталога — в новом оформлении
- 5 300+
- коллекций со своими страницами
- 235 брендов
- Италии, Испании, Индии и России
- 19 видов
- страниц и окон — одним языком
Протокол
Задача —
современно и с эффектом
Сайт должен был стать современным и дорогим, с эффектами и анимацией, которые хочется досмотреть, — и новым не только на первом экране, а на каждой странице: в каталоге, карточке товара, окнах, плашке cookie и новостях. Мы записали задачу как протокол — три правила, по которым собран каждый экран.
- Правило № 01Лаборатория, а не складПлитку на сайте изучают, как в хорошем шоуруме: каждый раздел — образец с номером, у первого экрана — линейки 60 и 120 см, фон — сетка швов.
- Правило № 02Красный — сигналФирменный красный из логотипа достаётся только главному: кнопкам, подписи образца, метке скидки и линии прогресса. Всё остальное — фарфор и графит.
- Правило № 03Ни одного типового экранаНовыми стали и стандартные части магазина: мегаменю, корзина, окно звонка, плашка cookie, страница «не найдено», бренды и тексты страниц из админки.
Фирменный язык
Палитра —
образцами на столе
Язык сайта собран из лаборатории материалов: фарфоровый фон, бумага и камень подложек, тёплая серая затирка, графит тёмных секций и один сигнальный красный. Заголовки — плотный Manrope, подписи образцов — моноширинный JetBrains Mono. Сквозные мотивы — сетка швов, подпись «№ 01» и линейки.
Первый экран
Стена, которую
перекладывают
Главный эффект сайта — стена из шестнадцати плиток. Картинка раздела перекладывается волной по диагонали, по стене проходит красная линия сканера, плитки рядом с курсором приподнимаются. Это не видео: стена собрана в коде и работает так же, как здесь, — выберите раздел или просто наведите.
- 16 плитоккаждая показывает свой кусок одной картинки
- Волна по диагоналиплитка переворачивается на 70 мс позже соседки
- Линия сканеракрасный луч проходит сверху вниз при смене
- Рельеф за курсоромплитки ближе к курсору поднимаются выше
Главная
Главная —
двенадцать глав
Каждая глава отвечает на вопрос покупателя: что есть в магазине, с чего начать выбор, как плитка выглядит в интерьере, как работает магазин и как до него доехать. Выберите главу — окно сайта прокрутится к ней.
Иллюстрации
Десять образцов —
одной серией
Для разделов каталога, подбора по помещению, первого экрана и дизайн-проекта мы сделали серию иллюстраций в одном свете: светлый интерьер, дневные тени, ровные швы и один красный предмет в кадре — как фирменная деталь. Это иллюстрации, созданные нейросетью по нашему описанию, а не фото магазина или объектов клиентов. Наведите — образец перевернётся подписью.
Образец № 01Керамогранитраздел · иллюстрация нейросети
Образец № 02Керамическая плиткараздел · иллюстрация нейросети
Образец № 03Мозаикараздел · иллюстрация нейросети
Образец № 04Клинкерная плиткараздел · иллюстрация нейросети
Образец № 05Ваннаяподбор · иллюстрация нейросети
Образец № 06Кухняподбор · иллюстрация нейросети
Образец № 07Полподбор · иллюстрация нейросети
Образец № 08Улицаподбор · иллюстрация нейросети
Образец № 09Стол образцовпервый экран · иллюстрация нейросети
Образец № 10Дизайн-проектуслуга · иллюстрация нейросети
Тексты из админки
Слова остались —
вид стал общим
«О компании» и «Дизайн-проект» магазин свёрстывал в админке сам — со своими блоками и цветами. Мы не переписывали тексты: первый блок страницы теперь уходит в шапку на сетке швов, а карточки, этапы, цены, вопросы и призывы получают единое оформление сайта. Если магазин поправит текст в админке, страница останется в общем стиле.
Магазин
От раздела до заказа —
одной сеткой
Покупатель проводит в каталоге больше всего времени, поэтому раздел, коллекция, товар, бренд и оформление заказа получили новое оформление: шапку на сетке швов, плашки подборок, красные метки скидок и кнопки покупки. Логику каталога, фильтров и заказа не трогали — всё работает как раньше.
Крупный заголовок на сетке швов, подборки плашками, фильтры в боковой колонке, карточки с ценой за м² и красной меткой скидки.
Открыть на сайте ↗Детали
Мелочи,
которые замечают
Мегаменю каталога раскрывается образцами разделов с подборками по помещению, фактуре и формату. Окно звонка — с сеткой швов и телефонами магазина. Плашка cookie — с маленькой красной «плиткой-печеньем». В подвале надпись «ПЛИТКА—ЛАБ» выложена плитками: они ложатся по одной и приподнимаются под курсором. А в верхней строке шапки — индикатор «Открыто до 19:00» по московскому времени.
Живой сайт
Двенадцать страниц —
одним языком
У внутренних страниц — общая шапка на сетке швов с подписью образца и крупным заголовком, а дальше своя подача: журнал с главной статьёй, статья с оглавлением и полосой прочтения, контакты со статусом «открыто» и способами связи плитками. Наведите на окно — страница прокрутится.
На телефоне
Лаборатория —
в кармане
На телефоне — компактная шапка с поиском, Телеграмом, MAX и кнопкой звонка, внизу — каталог, избранное, сравнение, корзина и звонок. Галерея образцов становится лентой со свайпом, стена-мозаика — на всю ширину. Нажмите на телефон, чтобы остановить прокрутку.
Как шла работа
Восемь этапов —
одна команда
Над сайтом работала команда студии: разбор, концепция, дизайн-система, страницы и приёмка с проверкой каждого экрана на компьютере и телефоне. Новый сайт включали на работающем магазине — заказы принимались, а каталог, цены и адреса страниц остались прежними.
- № 01РазборСняли страницы сайта на компьютере и телефоне, выгрузили данные каталога, подборки и тексты из админки — чтобы при разработке ничего не потерять.
- № 02КонцепцияСайт как лаборатория материалов: фарфоровый фон, сетка швов, подписи образцов и линейки — плитку здесь изучают, как в хорошем шоуруме.
- № 03Дизайн-системаФарфор, графит и фирменный красный из логотипа, шрифты Manrope и JetBrains Mono, сетка швов как фон — один язык для всех страниц.
- № 04Главная, шапка, подвалСтена-мозаика, галерея образцов, подбор по помещению, коллекции, проекты клиентов, этапы, бренды, вопросы, журнал и карта; шапка с мегаменю и подвал с надписью из плиток.
- № 05ИллюстрацииДесять иллюстраций одной серией — для разделов каталога, подбора по помещению, первого экрана и дизайн-проекта.
- № 06Каталог и товарРазделы, подборки, коллекции, карточка товара, бренды и корзина — новым оформлением поверх прежнего каталога и цен.
- № 07Страницы и журналСвои шаблоны для журнала, статьи, контактов и текстовых страниц; тексты из админки приведены к общему виду.
- № 08Приёмка и доводкаКаждую страницу проверили на компьютере и телефоне и довели по замечаниям магазина.
Довели на приёмке
- Шапка сжимается при прокрутке плавно и не вздрагивает на границе
- Страница бренда — по общей сетке каталога, без лишней подложки
- «О компании» и «Дизайн-проект» — в едином виде с остальными страницами
- Иконки Телеграма и MAX остались в мобильной шапке
- Надпись подвала на телефоне читается как «ПЛИТКА / ЛАБ»
- Плашка cookie на телефоне — компактной строкой над нижним меню
- Цифры первого экрана — в одну строку на любой ширине
Работает как раньше
- Каталог и цены
- Фильтры и подборки
- Корзина и оформление заказа
- Тексты страниц в админке
- Адреса страниц
- Галерея 3D-проектов
Итог
Магазин плитки —
как лаборатория материалов
Главная, шапка, подвал, мегаменю, каталог, разделы, подборки, коллекции, карточка товара, бренды, «О компании», «Дизайн-проект», доставка, контакты, журнал и статьи, корзина, окно звонка и плашка cookie — единым языком, без остановки продаж. Плитку на сайте хочется рассматривать, как образцы на столе: близко, с подписью и в хорошем свете.