Новый сайт · салон плитки
Фавор КерамикаСайт, собранный из мозаики
«Фавор Керамика» — салон и интернет-магазин в Ростове-на-Дону: керамогранит, плитка, клинкер, мозаика, ламинат, кварцвинил и инженерная доска. Команда студии разработала ему новый сайт, в котором всё складывается из плиток знака: картинки собираются из мозаики, за курсором рассыпаются плитки, а каталог на шестнадцать тысяч товаров открывается в два движения. Смотрите, как первый экран собирается из 25 плиток логотипа.
- 16 252
- товара в каталоге — плитка, полы и мозаика
- 132
- бренда из разных стран
- 3 692
- коллекции со своими страницами
- 25 плиток
- знака логотипа — из них собран весь сайт
Задача
Дорого, живо —
и в два движения
Салону нужен был современный дорогой сайт с эффектами и анимацией, и не одна красивая главная, а все типовые страницы: каталог, товар, корзина, оформление заказа, окна, новости и остальные. При этом каталог огромный — больше шестнадцати тысяч товаров, 132 бренда и почти 3,7 тысячи коллекций, — и покупателю нельзя в нём теряться. Мы свели задачу к трём правилам.
- Правило 01Мозаика — из логотипаЗнак из 25 плиток стал языком всего сайта: картинки складываются из плиток, знак собирается при загрузке, за курсором рассыпается мозаика. Эффекты не наклеены сверху — они из самого знака.
- Правило 0216 тысяч товаров — в два движенияМегаменю с разделами и брендами в шапке, полоса разделов с обложками над каталогом, карточки с ценой за квадратный метр, наличием, избранным и сравнением.
- Правило 03Салон — рядом с каталогомАдрес, режим работы и телефоны на главной и в подвале, 3D-дизайн-проект при покупке, кнопка «Подобрать» в шапке открывает заявку на звонок с любой страницы.
Фирменный язык
Двадцать пять плиток —
и одна буква
Знак «Фавор Керамики» — сетка 5×5 скруглённых плиток: сиреневые, белые и малиновые, а малиновые складываются в букву «К». Мы нарисовали знак кодом, а не картинкой, — поэтому он собирается плитка за плиткой при загрузке, а надпись рядом набрана шрифтом. Цвета знака стали палитрой сайта, плитка со скруглением — формой кнопок, меток и карточек. Заголовки — широкий Unbounded, текст — Onest.
Анимация
Мозаика —
в каждом движении
Анимация на сайте не ради эффекта: каждое движение — та же плитка знака. Картинки собираются из плиток, когда до них доходит страница, за курсором на первом экране рассыпается мозаика, над коллекциями курсор становится плиткой, главные кнопки тянутся навстречу. Выберите приём и проведите курсором по картинке — или просто посмотрите.
Мозаика · обложка раздела
Главная
Главная —
двенадцать глав
Главная проводит покупателя от интерьера мечты к салону: семь разделов материалов, бренды, 3D-дизайн-проект, коллекции, что выбирают сейчас, ассортимент, шаги работы, адрес салона и отзывы. Тексты — в шаблоне, а цифры, разделы, бренды, коллекции и товары подтягиваются из каталога сами и всегда свежие. Выберите главу — окно сайта прокрутится к ней.
Разделы
Семь разделов —
одна серия
Для семи разделов каталога и первого экрана сделали обложки одной серией: светлые интерьеры с материалом раздела, тёмно-синий и малиновый акцент — как в знаке. Это иллюстрации нейросети по нашему описанию, а не фото салона или объектов. На сайте каждая обложка собирается из плиток, когда до неё доходит страница, — как здесь.
Магазин
От каталога —
до корзины
Магазин — это не только главная. Каталог, раздел, коллекция, товар, бренд, корзина и оформление заказа получили тот же язык: тёмно-синие плитки, сиреневые метки, малиновая главная кнопка. Вся логика магазина — наличие, цены, корзина, избранное, сравнение, фильтры — работает как раньше, поменялся вид.
Полоса разделов с обложками и числом товаров, под ней — весь каталог с фильтрами. Карточка товара показывает цену за квадратный метр, наличие, избранное и сравнение.
Открыть на сайте ↗3D-дизайн-проект
Увидеть интерьер —
до ремонта
Главная услуга салона — 3D-дизайн-проект при покупке: подбор материалов, модель помещений, точный расчёт плитки и раскладка для мастеров. Мы дали ей отдельную главу на главной и свою страницу: шаги, сравнение «модель → визуализация» и галерея. Потяните ползунок — модель превратится в готовый интерьер.
Модель и визуализация в сравнении — иллюстрации нейросети для сайта.
Детали
Мелочи —
тоже из плиток
Мегаменю каталога показывает разделы с числом товаров и бренды. Поиск открывается поверх страницы. Окно заказа звонка встречает знаком, плашка cookie — аккуратная плитка внизу экрана, а на странице 404 «плитка выпала из раскладки» — с поиском и разделами каталога рядом. В подвале — призыв «Соберём интерьер», контакты салона и знак.
Живой сайт
Двенадцать страниц —
одна мозаика
У внутренних страниц общая шапка страницы с путём по разделам, а дальше своя подача: доставка — условиями-карточками, «О нас» — цифрами салона, контакты — адресом, режимом и картой, 3D-проект — шагами и галереей. Наведите на окно — страница прокрутится.
На телефоне
Магазин —
под большим пальцем
На телефоне меню открывается на весь экран с разделами каталога и контактами, а внизу всегда под рукой панель магазина: главная, каталог, избранное, корзина и звонок. Сетки разделов и карточек складываются в удобные колонки без горизонтальной прокрутки. Нажмите на телефон, чтобы остановить прокрутку.
Как шла работа
Восемь этапов —
плитка к плитке
Над сайтом работала команда студии: разбор задачи, концепция, дизайн-система, главная, каталог и магазин, картинки, страницы и окна, проверка каждого экрана. Сайт работает на платформе SkeekS по тарифу «Всё включено»: товары, разделы, тексты и картинки салон правит сам.
- 01Разбор сайта и задачиПрошли сайт и каталог целиком и записали задачу: современный, дорогой сайт с эффектами и анимацией, переделать все типовые страницы.
- 02КонцепцияМозаика из знака: 25 скруглённых плиток логотипа, малиновые складываются в букву «К». Всё на сайте собирается из таких плиток.
- 03Дизайн-системаТёмно-синий, сиреневый и малиновый логотипа, Unbounded для заголовков и Onest для текста, скругления плиток, пять приёмов анимации.
- 04Главная, шапка, подвалДвенадцать глав главной, прозрачная шапка поверх первого экрана, мегаменю с разделами и брендами, подвал со знаком.
- 05Каталог и магазинПолоса разделов, карточки товара и коллекции, фильтры, страница товара, бренды, корзина и оформление заказа — в одном языке.
- 06КартинкиПервый экран и семь обложек разделов — иллюстрации нейросети одной серией: светлые интерьеры, тёмно-синий и малиновый акцент.
- 07Страницы и окна3D-дизайн-проект, доставка, о нас, новости, контакты, страница 404, окно заказа звонка, плашка cookie, меню на телефоне.
- 08ПроверкаКаждую типовую страницу проверили на компьютере и телефоне: вид, ошибки в браузере, ширина без горизонтальной прокрутки.
Проверили
- Каждая типовая страница — на компьютере и телефоне
- Ни одной горизонтальной прокрутки на телефоне
- Без ошибок в консоли браузера
- В адресе почты сайта нашлась русская «с» среди латинских букв — исправили
- Анимация бережно выключается, если в системе включено «уменьшить движение»
Сохранили
- Все товары каталога
- Разделы и бренды
- Коллекции
- Фильтры каталога
- Адреса страниц
- Корзина и оформление заказа
Итог
Салон плитки —
собран из мозаики
Главная, шапка с мегаменю, подвал, каталог, разделы, коллекции, товар, бренды, корзина и оформление заказа, 3D-дизайн-проект, доставка, о нас, новости, контакты, 404, окно звонка и плашка cookie — одним языком из 25 плиток знака. Сайт, в котором шестнадцать тысяч товаров выглядят как один салон.