Разработка сайта · Ростов-на-Дону и Аксай
Мир плиткиНочной шоурум, где свет включают цепочкой
Четыре салона плитки и сантехники в Ростове-на-Дону и Аксае. На логотипе — чёрная пантера с золотой цепью, и новый сайт стал ночным шоурумом: тёмный мрамор, золото и свет, который идёт за посетителем. Потяните цепочку — и в шоуруме станет светло.
Идея
Сайт вырос из логотипа
Пантера, золотая цепь, тонкая линия и разреженная надпись — в логотипе уже было всё, что нужно дорогому салону. Мы разобрали знак на части и сделали из каждой правило для всего сайта.
Днём пантера лежит в светлых блоках: в рассказе о салоне на главной, рядом со статьями и страницами.
- 01Пантера
Герой сайта. Ночная пантера с золотым контуром лежит в тёмных блоках, дневная — в светлых, а на странице 404 она отдыхает прямо на цифрах.
- 02Золотая цепь
Отсюда золото сайта: тонкие рамки, линии под заголовками, градиент кнопок и золотая пыль в луче света на первом экране.
- 03Тонкая линия
Пантера лежит на линии — и весь сайт собран на тонких линиях: прямые углы, разреженные заглавные, как надпись «Мир плитки».
Примерочная
Примерьте плитку к комнате
Плитку выбирают глазами, а представить её на полу трудно. Поэтому на главной есть примерочная: комната, в которой пол и стены перекладываются плиткой выбранного товара. Здесь — те же шестнадцать товаров, что и на сайте. Выберите пол и стены.
Пол
Стены
Текст, который загорается
Так на главной звучит рассказ о салоне: слова зажигаются одно за другим, пока страницу листают. Листайте — здесь так же.
Больше десяти лет мы привозим в Ростов плитку, которую выбирают сердцем, а покупают головой. Прямые поставки фабрик, свои склады на сто тысяч позиций, 3D-проект без доплаты и образцы прямо на объект — чтобы ваш интерьер получился ровно таким, каким вы его задумали.
Каталог
Восемь разделов — восемь залов
Каталог на главной и в меню показан как залы шоурума. Для каждого раздела нарисована своя картинка в одном стиле — тёмный мрамор и тёплый свет (иллюстрации сделаны с помощью нейросети). Число товаров под названием сайт считает сам. Наведите на зал.
01
Керамическая плитка5 454 товара
02
Керамогранит11 308 товаров
03
Мозаика549 товаров
04
Клинкерная плитка89 товаров
05
Сантехника2 115 товаров
06
Укладка плиткиВсё для укладки
07
Ламинат83 товара
08
Плитка ПВХ59 товаров
Живые приёмы
Девять мест, где сайт оживает
Анимация на сайте не ради эффекта: свет ведёт взгляд к товару, комната помогает представить плитку, карта — выбрать ближайший салон. Выберите приём — покажем, где он на сайте.
Пантера в мраморной ванной почти в темноте. Яркая картинка видна только в луче света, который идёт за курсором, а в луче кружится золотая пыль. На телефоне луч бродит сам.
Главная
Главная — двенадцать глав
Главная ведёт как консультант в салоне: сначала впечатление, потом залы, примерка, коллекции и бесплатный 3D-проект, а в конце — адреса и приглашение прислать план. Листайте — главная прокрутится вместе с кейсом, или нажмите на главу.
Салоны
Четыре салона — одна карта
Плитку хотят увидеть вживую, поэтому адреса салонов есть в верхней строке каждой страницы, на главной, в подвале и в контактах. На сайте все салоны стоят на одной карте, а карточка салона приближает карту к нему. Ниже — схема по тем же точкам.
- Ежедневно 09:00–19:00
Магазин
От зала — до заказа
В каталоге больше 19 тысяч товаров, и магазин получил тот же характер, что и главная: золото, тонкие линии, ровные карточки одной высоты, характеристики одной белой карточкой и расчёт плитки на странице товара. Логику магазина не трогали. Наведите на окно — страница прокрутится.
Страницы
Каждая страница — тоже зал
У внутренних страниц своя шапка: золотые прожилки, свет за курсором и пантера на линии. Страница 3D-дизайна объясняет бесплатный проект, «Дизайнерам» — условия для профессионалов, у статей есть оглавление.
На телефоне
Шоурум в кармане
На телефоне луч света бродит по первому экрану сам, залы встают в две колонки, а меню открывается картинками разделов. Позвонить можно из шапки одним касанием. Нажмите на телефон, чтобы остановить прокрутку.
Как шла работа
Восемь этапов — одна линия
Над сайтом работала команда студии: разбор, идея из логотипа, дизайн-система и иллюстрации, страницы и приёмка с проверкой каждого экрана на компьютере и телефоне. Каталог, цены и адреса страниц остались прежними.
- 1РазборИзучили прежний сайт, каталог из 19 тысяч товаров, салоны и то, что продавцы говорят покупателю в зале.
- 2ИдеяЛоготип — пантера с золотой цепью на тонкой линии. Из него вырос «ночной шоурум»: тёмный мрамор, золото и свет.
- 3Дизайн-системаОникс, слоновая кость и золото; тонкие заглавные Jost, как надпись логотипа, и курсив Cormorant для акцентов.
- 4ИллюстрацииПантера ночью и днём, первый экран и восемь залов каталога — в одном стиле, с помощью нейросети.
- 5ГлавнаяНочной шоурум, залы, манифест, примерочная, коллекции, 3D-студия, салоны, вопросы и журнал.
- 6Шапка и подвалМеню каталога с картинками залов, поиск, четыре салона в верхней строке, подвал с пантерой.
- 7Магазин и страницыКаталог, раздел, коллекция, товар, корзина, оформление, поиск, бренды, 3D-дизайн, доставка, контакты, статьи, 404.
- 8ПриёмкаКаждую страницу проверили на компьютере и телефоне и довели по замечаниям.
Итог
Салон, в который хочется зайти
Главная, шапка и подвал, меню каталога, каталог, раздел, коллекция, товар, корзина и оформление, поиск, бренды, 3D-дизайн, «О компании», доставка, контакты, страница для дизайнеров, журнал и страница 404 — всё собрано из одного логотипа: пантеры, золотой цепи и тонкой линии. Проведите курсором по надписи — как в подвале сайта.