Новый сайт · производитель
CZEMENTARTСайт, который наносят шпателем
CZEMENTART сам производит микроцемент, микробетон и декоративные покрытия, а партнёры по всей России делают с ними интерьеры. Команда студии разработала новый сайт производителя: он не продаёт банки, а показывает материал — фактуру, систему нанесения, сертификаты и объекты партнёров.
- 41
- позиция в трёх коллекциях — каждая лендингом
- 11
- эффектов со своими страницами
- 27
- подборок каталога с понятными подписями
- 7
- объектов партнёров — на главной крупно
Задача
Сайт производителя,
а не магазин
Заказчик сформулировал задачу так: материалы почти не покупают на сайте — их нужно презентовать. Показать, что производитель делает качественные и экологически чистые составы, что с ними приятно работать, расход маленький, а эффект красивый, — и что партнёры делают с ними дорогие ремонты. Премиально, с анимацией и ощущением «вау».
- 01Презентация, а не витринаМатериалы на сайте почти не покупают — их выбирают дизайнеры, мастера и заказчики. Поэтому карточка материала стала лендингом: эффекты, описание, характеристики, как наносить, сертификаты, место для видео.
- 02Доверие производителюСвоё производство, маркировка «Честный знак», сертификаты и объекты партнёров — на видном месте, а не в подвале страницы.
- 03Материал хочется потрогатьФактура крупно: лупа на фото, стена образцов под боковым светом, колеровка стены за банкой. Экологичность, маленький расход и удобство нанесения — отдельными доводами.
Фирменный язык
Из двух мазков
логотипа
Логотип CZEMENTART — серый и жёлтый мазки шпателем и подпись «искусство, выраженное в бетоне». Из него вырос весь язык сайта: мазок подчёркивает главное слово, затирает фото при появлении, жёлтым отмечено то, что можно нажать. Фон — фактура известковой штукатурки (её нарисовала нейросеть, это фон, а не фото работ), заголовки — Cormorant Garamond, текст — Golos Text, цифры и CZEMENTART — широкий EuropeExt из прежнего сайта.
Главная
Пять моментов,
которые запоминают
Главная рассказывает о производителе по порядку: нанесение, материал крупно, почему с ним приятно работать, печати доверия, фактуры, система из четырёх слоёв, коллекции, объекты партнёров, отзывы и обучение. Вот пять живых моментов — выберите любой.
Карточка материала
Каждая банка —
свой лендинг
Карточка товара стала большой страницей о материале. Она собирается сама из данных CMS: если у материала нет эффектов или видео, блока просто нет. Шаблон проверили на всех 41 позиции каталога — от микроцемента до колера.
- Банка крупным планомНастоящее студийное фото на фактурной стене, жёлтый мазок за ней, переключатель фасовок и штатная покупка.
- Эффекты этого материалаСвязаны со страницами эффектов по свойству товара — материал сам ведёт к фактурам, которые им получаются.
- Описание и блоки114 блоков «Преимущества», «Области применения», «Ограничения» из админки — крупными разворотами с фото.
- Место в системеСхема «шаг 3 из 4» показывает, на каком слое работает материал: грунт, основа, финиш или защита.
- Характеристики и видеоСвойства товара и строки из описания — таблицей; для роликов есть поле «Видео», блок появится сам.
- СертификатыСканы сертификатов — листами бумаги, которые открываются на весь экран.
Коллекции и каталог
Три коллекции —
одна система
DECOR — декоративная штукатурка, NATURAL — микроцемент и микробетон, PROTECTION — грунты и защита. На странице коллекций каждая расписана подробно, в каталоге — веер банок коллекции, подборки «для пола», «для ванной», «с эффектом песка», карточки с фасовками и ценой, а штатные фильтры — в выезжающей панели.
Эффекты
Стена образцов
под боковым светом
Одиннадцать фактур висят образцами на тёмной стене, а курсор работает как лампа: именно боковой свет показывает рельеф. Подборки «для спокойной базы», «для акцентной стены», «для премиального света» подсвечивают нужные образцы. У каждого эффекта — своя страница с нанесением на первом экране, галереей и материалами, которыми он делается.
Страницы
Весь сайт —
одним мазком
Главная, коллекции, каталог, материал, эффекты и все страницы с текстами из админки — «О нас», «Обучение», «Цены», «Доставка», «Применение» — собраны одним языком. Наведите на окно — страница прокрутится.
ГлавнаяШпатель, банка, преимущества, печати доверия, фактуры, слои, коллекции, объекты, отзывы, обучение.
КоллекцииТри «стены», подсказка «какую выбрать», каждая коллекция подробно.
КаталогВеер банок, подборки, карточки материалов с фасовками и ценой.
Коллекция в каталогеФакты коллекции, вкладки, подборки и фильтры в панели.
МатериалЛендинг материала: от банки до сертификатов.
ЭффектыСтена образцов под боковым светом и подборки.
ЭффектНанесение на первом экране, галерея, «Чем сделать».
О насФото объекта проявляется под мазками, принципы производителя, бегущие города.
ЦеныЧетыре расчёта вложены друг в друга, прайс — из карточек материалов.
Под ключСтена проходит семь этапов — от трещин до печати «Принято».
ОбучениеЦитата о подходе, программы курсов, линия этапов занятия.
ДоставкаМаршрут поставок рисуется линией, реквизиты копируются кнопкой.
КонтактыТелефон, почта, склады и карта.
На телефоне
Фактура —
под пальцем
На телефоне шпатель работает от пальца, подписи у банки становятся сеткой под ней, схема слоёв держится вверху, пока читаешь шаги, а подборки каталога листаются одной полосой.
Как шла работа
Восемь этапов —
одна команда
Над сайтом работала команда студии: разбор, бриф, концепция, страницы и приёмка с проверкой каждого экрана на компьютере и телефоне. Новый дизайн включили на работающем сайте — каталог, корзина, цены и адреса страниц остались прежними.
- 01РазборСняли страницы сайта, выгрузили материалы, эффекты, коллекции, блоки описаний, сертификаты и тексты из админки — чтобы при переходе ничего не потерять.
- 02БрифЗафиксировали главное: это сайт производителя, а не магазин. Доверие, качество, экологичность, удобство нанесения, маленький расход и красивый эффект.
- 03КонцепцияСайт «наносится», как сам материал: мазки шпателя из логотипа, фактура штукатурки, жёлтый — для действия.
- 04Главная, шапка, подвалШпатель на первом экране, банка с колеровкой, печати доверия, лента фактур, четыре слоя, коллекции, объекты партнёров.
- 05Материал как лендингКарточка материала собирается из данных CMS сама и проверена на всех 41 позиции каталога.
- 06Коллекции и каталогСтраница коллекций, разделы каталога с подборками и фильтрами — поверх прежнего каталога и корзины.
- 07ЭффектыОдиннадцать страниц эффектов и стена образцов — подробные тексты из админки разложены по блокам.
- 08Приёмка и доводкаКаждую страницу проверили на компьютере и телефоне и довели по замечаниям.
Довели на приёмке
- Цены в каталоге и коллекциях берутся из розничной цены — у цены со скидкой стояли нули
- Подборки каталога подписаны по-человечески: «Устойчивый к влаге» вместо «Да»
- Лишний фильтр по бренду на сайте одного производителя скрыт
- Сканы сертификатов — листами с просмотром, а не безымянными файлами
- Фото объекта на первом экране увеличили без нейросети: она стирала следы шпателя на стенах
- Вопросы-ответы находятся, даже если в тексте админки стоят не на своём месте
- Заголовки лендингов из админки остались белыми на тёмных первых экранах
- Раздел каталога целиком на одной странице — фасовки не разъезжаются
Работает как раньше
- Каталог и цены
- Корзина и оформление заказа
- Фильтры
- Тексты страниц в админке
- Сертификаты и документы
- Адреса страниц
Итог
Искусство,
выраженное в бетоне
Главная, коллекции, каталог, 41 лендинг материалов, 11 страниц эффектов, стена образцов, страницы о производстве, обучении, ценах и доставке, блог, корзина — одним языком мазка и фактуры. Сайт показывает материал так, как его показывает мастер: крупно, при боковом свете и с готовым результатом на объекте.