Новый сайт · Москва
Декор МатериалСайт, который продаёт эффект, а не банки
Студия декоративных покрытий работает с микроцементом, микробетоном и штукатурками CZEMENTART. Клиенты приходят за красивой стеной, смотрят, из каких материалов она складывается, и заказывают нанесение. Команда студии разработала новый сайт, в котором главный герой — эффект: интерьер, рецепт слоёв, примерная цена работ и кнопка «Хочу такой же эффект».
- 01ОснованиеСтруктура: какие страницы нужны и что на каждой должен увидеть человек, который пришёл за эффектом.
- 02ГрунтДизайн-система: известковый фон, графит, бронза, два шрифта и три слоя логотипа как сквозной мотив.
- 03Декоративный слойСами страницы: эффекты, каталог, товар, корзина, портфолио, блог, цены, контакты.
- 04ЗащитаПриёмка: каждая страница проверена на компьютере и телефоне, ошибки исправлены до показа клиентам.
- 9 эффектов
- со своими страницами, интерьерами и рецептом слоёв
- 14 объектов
- реальных работ в портфолио — с площадями и фото
- 35 товаров
- трёх коллекций CZEMENTART — в новом каталоге
- 26 видов
- страниц и окон — одним языком
Задача
Люди приходят за эффектом,
а заказывают работы
Материалы на сайте были, эффекты тоже — но показаны так, что за ними не было видно главного: какой станет стена. Мы перевернули сайт вокруг эффекта. Всё остальное — материалы, технология, цена и заявка — собирается вокруг него.
- 01Сначала — красотаКаждый эффект открывается интерьером на весь экран. Рендеры подписаны «Визуализация», фото объектов — «Реальный объект».
- 02Рецепт рядом с картинкойОснование, грунт, декоративный слой и защита — с товарами каталога, фото и ценами. Не нужно разбираться в банках самому.
- 03Цена и заявка — сразуПримерный расчёт работ по площади и кнопка «Хочу такой же эффект», которая сама подставляет эффект и площадь в заявку.
Атлас эффектов
Девять стен —
девять настроений
У каждого эффекта своя страница: интерьеры, лупа, чтобы рассмотреть фактуру вблизи, «что это и где применяют», материалы по слоям, расчёт работ, технология, реальные объекты и вопросы. Выберите эффект — откроется его первый экран.
Рецепт и расчёт
Сколько стоит
такая стена
На странице эффекта слои покрытия разлетаются при прокрутке — так видно, что красивая стена держится на основании, грунте и защите. А ниже — калькулятор по настоящему прайсу студии: цена работ за м² падает с ростом площади, санузлы считаются по цене пола. Попробуйте — это тот же расчёт, что на сайте.
Ориентир по прайсу на нанесение под ключ с материалами. Точную смету студия готовит по фото и размерам помещения.
Магазин
Материалы —
для тех, кто наносит сам
Часть клиентов всё же покупает материалы. Каталог коллекций, карточка товара, корзина и сравнение получили новое оформление, а логика каталога, фильтров и заказа осталась прежней. В карточке товара появился калькулятор упаковок и связь с эффектами, а в корзине — предложение доверить нанесение мастерам.
Шапка коллекции с девизом, переключатель NATURAL · DECOR · PROTECTION, фильтры в выезжающей панели и карточки с расходом на м² и эффектами.
Открыть на сайте ↗Живой сайт
Двенадцать страниц —
один материал
Каждая страница подаётся по-своему, но из одного материала: известковый фон, графитовые секции, бронза в цифрах и курсивах, плавные появления и мягкая прокрутка. Наведите на окно — страница прокрутится.
На телефоне
Эффект —
в ладони
На телефоне — компактная шапка с поиском и корзиной, меню на весь экран, эффекты и объекты листаются пальцем, фильтры каталога — отдельной панелью. Нажмите на телефон, чтобы остановить прокрутку.
Как шла работа
Восемь слоёв —
одна команда
Над сайтом работала команда студии: разбор, структура, дизайн-система, страницы и приёмка с проверкой каждого вида страниц на компьютере и телефоне. Новое оформление готовили на работающем сайте в режиме предпросмотра и включили для всех, не останавливая магазин: каталог, цены и адреса страниц остались прежними.
- 01РазборРазобрали сайт и бизнес: люди приходят за красивым эффектом, смотрят, какие нужны материалы, и чаще всего заказывают нанесение.
- 02СтруктураСделали эффект главной единицей сайта: у каждого из девяти — своя страница с интерьерами, рецептом слоёв и примерной ценой работ.
- 03Дизайн-системаИзвестковый фон, графит, бронза и зелёный цвет марки, шрифты Cormorant Garamond и Manrope, три слоя логотипа как мотив.
- 04Главная и эффектыПервый экран, где стена покрывается эффектом, атлас, указатель эффектов и страницы эффектов с лупой фактуры.
- 05ВизуализацииКаждый эффект показан в интерьере. Для «Карты мира» и «Шёлка» не хватало кадров — новые интерьеры создали нейросетью и подписали как визуализации.
- 06МагазинКаталог коллекций, карточка товара с калькулятором упаковок, корзина и оформление, избранное и сравнение — новым оформлением поверх прежнего каталога.
- 07Остальные страницыПортфолио и объекты, блог и статьи, цены, «О компании», контакты, технологии, поиск, 404 и правовые страницы.
- 08ПриёмкаКаждый вид страниц проверили на компьютере и телефоне, все адреса сайта — на ошибки.
Работает как раньше
- Каталог и цены товаров
- Фильтры и подборки
- Корзина и оформление заказа
- Тексты страниц в админке
- Адреса страниц
- Заявки — на ту же почту
Итог
Стены, которые
хочется трогать
Главная, атлас и девять страниц эффектов, портфолио и объекты, каталог, товар, корзина, избранное и сравнение, блог и статьи, цены, «О компании», контакты, технологии, поиск и служебные страницы — единым языком. Теперь человек видит эффект, понимает, из чего он сделан и сколько стоит, и одним нажатием просит такой же.