Новый сайт · салон плитки в Чебоксарах
Дом плиткиСайт, в котором светло
«Дом Плитки» продаёт керамическую плитку, керамогранит, сантехнику и напольные покрытия в Чебоксарах. Владелец попросил светлый и лёгкий сайт в прежних цветах — «но с изюминкой». Команда студии разработала его вокруг логотипа: три повёрнутые плитки, от кремовой к янтарной. Проведите курсором — по сайту пройдёт свет из окна салона.
- 15 638
- товаров в каталоге — от плитки до ванн
- 150
- фабрик и брендов со своими страницами
- 5 696
- коллекций — у каждой своя страница
- 3
- плитки логотипа — и весь язык сайта
08:00Задача
Три пожелания —
три плитки
Задачу владелец сформулировал коротко: сайт полностью новый, современный и «дорогой», с эффектами и анимацией, — но светлый и лёгкий, а цвета пусть останутся прежними, только с изюминкой. И не одна главная: шапка, подвал, каталог, товар, коллекция, корзина, окна, cookie, 404, блог. Мы разложили пожелание на три плитки — каждую принимали отдельно.
- 01 Светло Сайт салона, в котором светло: фон цвета слоновой кости и тёплого песка, много воздуха, мягкие тени — плитку на таком фоне видно так же, как на стенде у окна.
- 02 Гамма та же Цвета не придумывали заново — взяли из логотипа: коричневые буквы стали цветом текста, а кремовая, медовая и янтарная плитки — акцентами кнопок, меток и подсветки.
- 03 С изюминкой Изюминка — три повёрнутые плитки знака. Они живут на всём сайте: собираются в сцену на первом экране, стоят меткой у заголовков, в подвале падают над словом «Дом плитки».
10:00Знак
Изюминка была в логотипе
Знак «Дома Плитки» — коричневая надпись и три плитки, повёрнутые под разными углами: кремовая, медовая, янтарная. Мы собрали его кодом, а не картинкой, — поэтому плитки умеют двигаться. В шапке они чуть разворачиваются при наведении, у заголовков стоят меткой, в подвале падают сверху и ложатся над словом. Попробуйте: плитки можно рассыпать и уложить в ряд.
плитки
- Коричневый#5a4030буквы логотипа · текст и заголовки
- Крем#e9dcb4первая плитка знака · светлые подложки
- Мёд#f1cd72вторая плитка · метки и подсветка
- Янтарь#f0b41cтретья плитка · главные кнопки
- Слоновая кость#fbf8f2фон страниц
- Песок#f4eee2фон секций и карточек
12:00Первый экран
Сцена, которая смотрит на вас
На первом экране сайта — не баннер, а сцена из трёх больших плиток с картинками разделов. Каждая плитка стоит на своей глубине: когда курсор движется, ближние смещаются сильнее дальних, и сцена поворачивается за взглядом. Рядом всплывают подсказки «Образцы вживую в шоу-руме» и «Расчёт с запасом», а цифры каталога набегают до настоящих значений. Ниже — наша копия той же сцены: поводите по ней курсором.
13:00Главная
Главная — как прогулка по салону
Главная ведёт покупателя тем же путём, что и продавец в зале: показать разделы, подсказать готовые решения, открыть коллекции, напомнить о популярном, рассказать, как покупают, — и пригласить в салон. Цифры, разделы, коллекции, товары и фабрики берутся из каталога сами. Заголовки появляются по словам, одно слово в каждом — курсивом. Выберите главу — окно сайта прокрутится к ней.
14:00Каталог
Восемь разделов —
одна серия
Кнопка «Каталог» в шапке открывает мега-меню: слева разделы с маленькими обложками, справа — большая картинка раздела и кнопка «Смотреть все». Те же обложки стоят в каталоге, в меню телефона и на странице 404. Картинки для восьми разделов мы сделали одной серией — плитка, сантехника и полы в мягком утреннем свете, в кремовых и медовых тонах сайта. Это иллюстрации нейросети по нашему описанию, а не фото салона: настоящие фотографии товаров остались в карточках. Наведите на обложку — по ней пройдёт солнечный блик.
01Керамическая плитка
02Керамогранит
03Сантехника
04Мозаика
05Клинкерная плитка
06Ламинат
07Плитка ПВХ
08Инженерная доска
15:00Магазин
Магазин — в том же свете
Каталог на пятнадцать с половиной тысяч товаров работает на стандартном магазине платформы — с его фильтрами, корзиной и заказами. Мы не ломали то, что работает, а одели его в стиль сайта: карточки на слоновой кости, янтарные кнопки, мягкие тени, понятные шаги оформления. Переключайте страницы — окно можно прокрутить.
17:00Страницы
Страницы — под вечер
«О компании» и «Бесплатный дизайн-проект» получили свои страницы: факты салона, этапы, картинки и запись на проект, а текст из админки остался внизу в раскрывающемся блоке — его по-прежнему правят сами. Блог и акции — в журнальном макете. Контакты, доставка, каталог — в одной шапке и одном свете. Наведите на окно — страница прокрутится.
18:00Детали
Кажется, здесь не хватает плитки
Так начинается страница 404: цифры «404» лежат на стене из плиток, в которой не хватает одной, — янтарная плитка падает мимо своего места. Рядом поиск, кнопки в каталог и на главную и все разделы с обложками. Ошибка адреса превращается в маленькую шутку магазина плитки. Здесь можно сделать наоборот — вернуть плитку на место. А ещё в деталях: окно «Заказ звонка», аккуратная плашка cookie и подвал с огромной надписью «Дом плитки».
Кажется, здесь не хватает плитки
Стена ждёт последнюю плитку
19:00Телефон
Вечером — с дивана
Плитку часто выбирают вечером, с телефона, вместе с семьёй. Шапка у сайта одна — она сама перестраивается под маленький экран. Меню выезжает шторкой с разделами каталога и телефонами салона, а внизу всегда есть панель: каталог, избранное, сравнение, корзина и янтарная кнопка «Позвонить». Нажмите на телефон, чтобы остановить прокрутку.
20:00Работа
Как прошёл день
Над сайтом работала команда студии. Шли по порядку — от идеи к главной, от шапки к магазину, от страниц к проверке, — и каждый этап сразу показывали на настоящем сайте: на компьютере и на телефоне. Сайт работает на платформе SkeekS: товары, разделы, цены, тексты и картинки «Дом Плитки» правит сам.
- 01РазборПрошли старый сайт, каталог и пожелания владельца: светлый, лёгкий, в прежних цветах, но с изюминкой и живыми эффектами.
- 02Идея из знакаНашли изюминку в логотипе — три повёрнутые плитки от крема к янтарю — и сделали из неё язык всего сайта.
- 03ГлавнаяСцена из плиток на первом экране, разделы, решения, коллекции, популярное, этапы покупки, акции, фабрики и салон.
- 04Шапка и подвалОдна шапка для компьютера и телефона, мега-меню каталога с иллюстрациями, меню-шторка, подвал с большой надписью.
- 05Каталог и магазинРазделы и фильтры, товар, коллекция, корзина и оформление заказа, поиск, производители, избранное и сравнение.
- 06ИллюстрацииВосемь обложек разделов и картинки страниц — одной серией, в тёплом свете и цветах сайта.
- 07Страницы«О компании», «Бесплатный дизайн-проект», блог и акции в журнальном макете, окна заявок, cookie, 404.
- 08ПроверкаКаждую страницу проверили на компьютере и телефоне — отображение и ошибки — и довели по замечаниям.
Проверили
- Все типовые страницы — на компьютере и на телефоне
- Без горизонтальной прокрутки на телефоне
- Без ошибок в консоли браузера
- Анимации спокойно выключаются, если в системе выбран режим «меньше движения»
Сохранили
- Все товары и коллекции
- Разделы каталога
- Адреса страниц
- Тексты из админки
- Корзина и заказы
- Блог и акции
Итог
Светлый сайт — с изюминкой
Главная со сценой из плиток, шапка с мега-меню, меню-шторка и нижняя панель телефона, каталог с фильтрами, товар, коллекция, корзина и оформление заказа, поиск, производители, избранное и сравнение, блог и акции, «О компании», «Бесплатный дизайн-проект», окна, плашка cookie и 404 — в одном светлом стиле, собранном из трёх плиток логотипа.