Новый сайт · магазин плитки
Плитка
КазаниСайт, который раскрывается из знака
«Плитка Казани» — магазин керамогранита, мозаики и сантехники с двумя салонами в Казани. Команда студии разработала ему новый сайт на идее логотипа: четыре плитки-ромба вокруг квадрата. Ромбы стали масками картинок, их цвета — кодом разделов, а центр знака раскрывается в интерьер. Смотрите, как это происходит на первом экране.
- 10 732
- товара в каталоге — плитка, мозаика, клинкер и сантехника
- 1 790
- коллекций со своими страницами
- 141
- фабрика из 15 стран
- 2 салона
- на проспекте Победы и Сибирском тракте
Задача
Дорого, живо —
и до звонка понятно
Магазину нужен был современный дорогой сайт с эффектами и анимацией — и не одна главная, а все типовые страницы: каталог, товар, коллекция, фабрики, окна, cookie, 404, новости. Каталог большой — больше десяти тысяч товаров, а рядом с плиткой ещё сантехника с двадцатью одним подразделом и направление для бизнеса. Мы свели задачу к трём правилам.
- Правило 01Ромб — из логотипаЧетыре плитки знака стали языком сайта: картинки живут в ромбах и раскрываются в квадрат, курсор — маленький ромб, фон — решётка из ромбов. Эффекты не наклеены сверху — они из самого знака.
- Правило 02Каталог — в два движенияМегаменю показывает разделы с подразделами и картинкой, полоса разделов стоит над каталогом, цвета знака отличают разделы друг от друга. Сантехника — двадцать один подраздел — открывается сразу.
- Правило 03Посчитать — до звонкаРаскладки с запасом на подрезку на главной и «Примерьте и посчитайте» на странице товара: покупатель видит плитку на полу своей комнаты и число упаковок. А дальше — «Рассчитать заказ» в шапке любой страницы.
Фирменный язык
Четыре плитки —
и квадрат в центре
Знак «Плитки Казани» — четыре скруглённых ромба: янтарный, красный, зелёный и оранжевый вокруг белого квадрата. Мы нарисовали его кодом, а не картинкой, — поэтому знак собирается при загрузке, поворачивается при наведении, а на странице 404 рассыпается. Цвета плиток стали кодом разделов каталога, ромб — формой масок и меток, квадрат в центре — окном, которое раскрывается в интерьер. Заголовки — плотный Manrope, текст — Golos Text.
Раскладки
Одна плитка —
пять характеров
На главной сайта есть живой блок раскладок: плитки на «полу» перестраиваются волной, а рядом меняется запас на подрезку. Покупатель ещё до звонка понимает, что ёлочка и диагональ требуют больше материала. Ромб знака здесь появляется сам собой — это диагональная раскладка. Переключайте:
Классика для любого формата: швы совпадают, рисунок спокойный, расход минимальный.
Главная
Главная —
двенадцать глав
Главная проводит покупателя от интерьера к салону: знак, раскрывающийся в интерьер, фабрики, разделы, раскладки, коллекции, витрина, быстрый выбор, шаги, бизнес, два салона и вопросы. Тексты главы — в шаблоне, вопросы и SEO-текст — из админки, а цифры, разделы, фабрики, коллекции и товары подтягиваются из каталога сами. Выберите главу — окно сайта прокрутится к ней.
Примерка и расчёт
Плитка на полу —
ещё до покупки
На странице каждого товара, который продаётся квадратными метрами, есть блок «Примерьте и посчитайте». Покупатель вводит размеры комнаты, выбирает раскладку — и видит эту плитку на полу, а рядом площадь с запасом, число упаковок и плиток и стоимость. Одна кнопка кладёт посчитанное в корзину. Попробуйте на настоящем товаре — керамограните Delacora «Муза» 120×60 см по 2 830 ₽ за м², в упаковке 1,44 м².
- Площадь с запасом
- —
- Упаковок
- —
- Плиток
- —
- Стоимость
- —
Разделы
Шесть разделов —
в ромбах
Для разделов каталога и первого экрана сделали обложки одной серией: тёмные тёплые интерьеры, на каждой — один цветной предмет из знака и ромб где-то в кадре. Это иллюстрации нейросети по нашему описанию, а не фото салонов или объектов. На сайте обложка живёт в ромбе с цветной рамкой и раскрывается в квадрат при наведении — как здесь.
Магазин
От каталога —
до фабрики
Магазин — это не только главная. Каталог, разделы, коллекция, товар, фабрики и страница фабрики получили тот же язык: тёмная шапка страницы, ромбы-маркеры, янтарные кнопки. Товар и коллекция получили свои шаблоны с эффектами, а логика магазина — наличие, цены, упаковки, корзина, «Купить в 1 клик», избранное, сравнение, фильтры — работает как раньше.
Полоса разделов с ромбовидными обложками и числом товаров, под ней — весь каталог с фильтрами. Карточка товара показывает формат, цену за квадратный метр, избранное и сравнение.
Открыть на сайте ↗Детали
Мелочи —
тоже из знака
Мегаменю каталога показывает раздел картинкой в ромбе и все его подразделы. В шапке — оба салона с телефонами и режимом работы. Окно «Рассчитаем заказ» встречает знаком, плашка cookie — четыре плитки, которые «откусывают» по одной, а на странице 404 знак рассыпается и собирается, когда к нему подносят курсор. В подвале — два салона и надпись, которая окрашивается буквами при прокрутке.
Живой сайт
Двенадцать страниц —
один знак
У внутренних страниц общая тёмная шапка с путём по разделам и знаком, а дальше своя подача: доставка — блоками и вопросами, «О компании» — цифрами каталога, статьи — с оглавлением и полосой прогресса чтения, контакты — двумя салонами на картах со статусом «открыто сейчас». Наведите на окно — страница прокрутится.
На телефоне
Магазин —
под большим пальцем
На телефоне меню раскрывается кругом на весь экран — с разделами каталога и двумя салонами, а внизу всегда под рукой панель магазина: каталог, избранное, сравнение, корзина и звонок. Сцены главной на телефоне не закрепляются, а листаются обычно, сетки складываются в колонки без горизонтальной прокрутки. Нажмите на телефон, чтобы остановить прокрутку.
Как шла работа
Восемь этапов —
плитка к плитке
Над сайтом работала команда студии: разбор задачи, концепция, дизайн-система, главная, каталог и магазин, картинки, страницы и окна, проверка и доводка каждого экрана по замечаниям заказчика. Сайт работает на платформе SkeekS по тарифу «Всё включено»: товары, разделы, тексты и картинки магазин правит сам.
- 01Разбор сайта и задачиПрошли сайт и каталог целиком и записали задачу: современный, дорогой сайт с эффектами и анимацией; переделать все типовые страницы.
- 02КонцепцияРомб из логотипа: четыре плитки вокруг квадрата. Центр знака раскрывается в интерьер, цвета плиток становятся кодом разделов.
- 03Дизайн-системаГрафит, лён и четыре цвета знака, Manrope для заголовков и Golos Text для текста, ромбовидные маски, курсор-ромб, решётка из ромбов.
- 04Главная, шапка, подвалДвенадцать глав главной, плавающая шапка с мегаменю и двумя салонами, подвал с надписью, которая окрашивается буквами.
- 05Каталог и магазинПолоса разделов, карточки, фильтры, товар с примеркой и калькулятором, коллекция, фабрики, корзина и «Купить в 1 клик».
- 06КартинкиПервый экран, четыре ромба-интерьера и шесть обложек разделов — иллюстрации нейросети одной серией.
- 07Страницы и окнаДоставка, о компании, новости и статьи с оглавлением, контакты с картами, 404, окно расчёта заказа, плашка cookie, меню на телефоне.
- 08Проверка и доводкаКаждую типовую страницу проверили на компьютере и телефоне и довели по замечаниям: меню, подвал, корзина, отступы, фабрики.
Проверили
- Каждая типовая страница — на компьютере и телефоне
- Ни одной горизонтальной прокрутки на телефоне
- Без ошибок в консоли браузера
- Расчёт упаковок сверили вручную: 6,5 × 3 м с запасом 7% — 15 упаковок по 1,44 м²
- Анимация бережно выключается, если в системе включено «уменьшить движение»
Сохранили
- Все товары каталога
- Разделы и фабрики
- Коллекции
- Фильтры каталога
- Адреса страниц
- Тексты из админки
- Корзина и оформление заказа
Итог
Магазин плитки —
в одном знаке
Главная, шапка с мегаменю и двумя салонами, подвал, каталог, разделы, коллекции, товар с примеркой и расчётом, фабрики, корзина и «Купить в 1 клик», доставка, о компании, новости и статьи, контакты, 404, окно расчёта заказа и плашка cookie — одним языком из четырёх ромбов знака. Сайт, в котором десять тысяч товаров и два салона выглядят как один магазин.