Светло и воздушно
Белый фон и тёплый песок, много воздуха, спокойная иерархия и крупные фото — плитку видно, а не интерфейс.
← Портфолио
Разработка сайта · Ставрополь
Новая Керамика Сайт салона плитки, устроенный как сам салон — в три этажа
«Новая Керамика» — трёхэтажный салон керамической плитки, керамогранита и сантехники на проспекте Кулакова в Ставрополе, работает с 1998 года. Команда студии разработала для салона светлый, воздушный сайт: витрина с настоящим фото зала, каталог, по которому удобно идти до плитки, и салон, куда хочется приехать — с рейтингом 5,0 и маршрутом.
▲1Витрина
- 3
- этажа экспозиций в салоне
- 5,0★★★★★
- 446 оценок на Яндекс Картах
- 15%
- скидка участникам СВО
- 1998
- год, с которого работает салон
Задача
Большой салон, в который хочется приехать
Главное у «Новой Керамики» — сам салон: три этажа экспозиций, где коллекции стоят на стендах и плитку подбирают вместе с консультантом. Заказчик просил светлый, воздушный сайт: сохранить логотип, фирменный красный и светлый фон, показать крупные фото, рейтинг салона и предложение для участников СВО — и не перегружать страницы тяжёлыми фонами, автосменой баннеров и навязчивыми окнами.
Красный — только для важного
Цвет логотипа достаётся кнопкам, предложению для участников СВО и тому, что нельзя пропустить.
Главный герой — салон
Настоящие фото трёх этажей экспозиции, рейтинг 5,0 и маршрут: сайт приглашает приехать и выбрать вживую.
Фирменный язык
Звезда с фасада и три этажа
На фасаде салона — большая гранёная звезда, как в логотипе. Мы собрали её заново из десяти граней, светлых и тёмных, и сделали знаком сайта: она стоит в шапке, в блоке для участников СВО и в подписях. Второй мотив — три этажа: фото первого экрана и картинки шапок разрезаны на три полосы, а здание в блоке о салоне загорается по этажам. Наведите курсор на звезду.
Белый#ffffff · Фон страниц и карточки
Песок#f6f3ef · Секции и подложки
Красный логотипа#d42f2f · Кнопки и важное
Тёплый чёрный#1d1b19 · Заголовки и текст
Камень#77716a · Подписи и линии
Золото звёзд#f4a62a · Только рейтинг
Onest
Один шрифт на весь сайт: крупные плотные заголовки и спокойный текст с хорошей кириллицей.
Первый экран сайта
Плитки сходят — открывается зал
Первый экран — фото торгового зала на всю ширину под светлым градиентом. При загрузке его закрывают плитки цвета песка: они сходят по диагонали, как при укладке, и открывают зал, по фото проходит блик. Дальше фото медленно «дышит» и немного смещается за курсором. Нажмите «Уложить заново» и поводите курсором по фото.
Главная
Главная — по плану заказчика
Порядок блоков главной предложил сам заказчик, и мы его сохранили: первый экран с фото салона, преимущества, предложение для участников СВО, разделы каталога, популярные направления, коллекции и акции, салон, отзывы и «Как нас найти». Выберите блок — окно прокрутится к нему.
Сразу после первого экрана
Участникам СВО — отдельный блок
Заказчик хотел, чтобы предложение для участников СВО было видно сразу. Блок стоит под первым экраном: светлый градиент к красному, гранёная звезда, крупная скидка, которая прокручивается барабаном цифр, доставка и дизайн-проект в подарок. Кнопка «Узнать условия» открывает окно с условиями. Только действующие условия, остальное — «подробности уточняйте у менеджера».
Участникам СВО
- Доставка в подарок
- Дизайн-проект в подарок
Идеи для ремонта
Популярные направления
Не все приходят за конкретной коллекцией — многие начинают с фактуры и формата. Для них на главной отдельный блок: «под мрамор», «под дерево», крупный формат 60×120 и плитка для ванной, каждая подборка ведёт в каталог. Картинки интерьеров — иллюстрации, подготовленные для сайта в одном светлом стиле, а не фото салона.
Каталог
От раздела — до плитки
В каталоге путь короткий: раздел, коллекция, товар. У раздела своя шапка с картинкой и фильтрами, у коллекции — интерьер и все её товары, у товара — крупное фото, цена за метр и характеристики. Наведите курсор на окно — страница пролистается.
Детали
Мелочи — в том же стиле
Меню каталога, поиск, окна «Заказать звонок» и условий для участников СВО, панель покупки и корзина оформлены тем же языком: белые карточки, мягкие тени, красный — только у главной кнопки. Окна не всплывают сами: их открывает посетитель. Нажмите на снимок, чтобы увеличить.
Салон
Три этажа, где плитку выбирают вживую
В блоке о салоне рассказ идёт тремя шагами визита: смотрите вживую, сравнивайте фактуры, подбирайте с консультантом. Фото зала стоит на месте, пока текст прокручивается, а рядом здание салона загорается по этажам. Фото — настоящие, из салона. Прокрутите блок ниже.
01
Смотрите вживую
Коллекции стоят на стендах: видно цвет, рельеф, блеск и формат — то, что не передаёт экран.
02
Сравнивайте фактуры и оттенки
Образцы можно приложить друг к другу и рассмотреть при нормальном освещении.
03
Подбирайте с консультантом
Подскажут сочетания, размеры и запас материала, а дизайнер поможет с проектом.
Страницы
Каждая страница — из тех же блоков
Каталог, фабрики, «О салоне», отзывы, фото, доставка, акции, контакты, блог и даже страница 404 собраны из одних блоков: светлая шапка с картинкой, разрезанной на три полосы, белые карточки и красный только у главного. Тексты разделов остались прежними по смыслу — они легли в новое оформление. Наведите курсор на окно.
▲404
Страница 404
«Такого этажа в салоне нет»
Даже ошибка продолжает тему трёх этажей: вместо сухого «страница не найдена» — табло лифта с числом 404 и кнопки этажей, которые ведут в каталог, акции и контакты. Нажмите кнопку — лифт поедет.
Посмотреть на сайте ↗На телефоне
Салон — в кармане
На телефоне — меню с разделами, поиск и нижняя панель: главная, каталог, поиск, избранное и корзина всегда под пальцем. Фото первого экрана, блок СВО, подборки и галереи перестраиваются под узкий экран. Нажмите на телефон, чтобы остановить прокрутку.
Как шла работа
Восемь шагов — одна команда
Над сайтом работала команда студии: разбор, пожелания заказчика, концепция, шапка и подвал, главная, каталог, страницы и проверка каждого экрана на компьютере и телефоне. Новый вид включили на работающем магазине — каталог, цены, корзина и адреса страниц остались на месте.
- 01РазборПрошли путь покупателя на компьютере и телефоне: от главной и каталога до карточки товара, корзины и страниц салона.
- 02Пожелания заказчикаСобрали их в правила: светлый воздушный сайт, логотип, фирменный красный и светлый фон, крупные фото, без лишнего декора.
- 03КонцепцияМотивы из самого салона: гранёная звезда логотипа, как на фасаде здания, и три этажа экспозиции.
- 04Шапка и подвалКомпактная шапка с каталогом, поиском, телефоном, адресом, избранным и корзиной; нижняя панель на телефоне.
- 05ГлавнаяПервый экран с фото зала, преимущества, СВО, разделы, направления, коллекции и акции, салон, отзывы, контакты.
- 06Каталог и товарРазделы, коллекции, фабрики и карточка товара с панелью покупки.
- 07Страницы«О салоне», «Фото», «Отзывы», «Доставка», «Акции», «Контакты», блог, корзина, окна и страница 404.
- 08Проверка и правкиКаждую страницу проверили на компьютере и телефоне, замечания заказчика внесли и проверили ещё раз.
Довели по замечаниям и при проверке
- Новый первый экран по замечаниям: заголовок «Салон плитки и керамогранита в Ставрополе» и фото зала на всю ширину
- Блок для участников СВО стал светлым, скидка — красным акцентом
- Отдельный блок «Популярные направления» с картинками интерьеров
- Фото на страницах «О салоне» и «Фото» показываются целиком
- Нет рамки вокруг ссылок и кнопок после нажатия мышью — а с клавиатуры она видна
- Рейтинг и отзывы обновляются сами, без ручных правок
Работает как раньше
- Каталог и цены
- Корзина и заказы
- Адреса страниц
- Тексты разделов
- Настройки магазина
Итог
Сайт, после которого едут в салон
Главная с фото зала и «укладкой плитки», блок для участников СВО, подборки, каталог от раздела до товара с панелью покупки, «О салоне», фото, отзывы с живым рейтингом, доставка, акции, контакты с маршрутом, блог, корзина, окна и страница 404 в виде лифта — в одном светлом стиле, выросшем из звезды логотипа и трёх этажей салона.