Как нарисовать разницу, которую не видно на фото

Compoglass — композитный лист из смолы, стекловолокна и плёнок производства ЭТИЗ Композит из Углича. Снаружи он похож на поликарбонат, и вся разница спрятана внутри, поэтому 404gen построила концепцию страницы для etiz.ru на разрезе, а не на фотографии: второй экран — сцена на Canvas, где лист собирается за четыре шага по мере прокрутки. Заголовки набраны широким гротеском Unbounded, текст и цены — Golos Text. Страница чередует светлые и тёмные полосы по темам, профили С-8, С-20 и СВ-38 нарисованы чертёжной линией, калькулятор показывает схему раскладки листов. Десять содержательных разделов, каталог на 35 позиций, мобильная версия.

Результат в цифрах

Десять содержательных разделов: от сборки листа до ответов на вопросы. Анимация сборки листа из слоёв на Canvas, четыре шага. Каталог на 35 позиций с подбором по задаче. Чертёжные схемы профилей С-8, С-20 и СВ-38. Две гарнитуры: Unbounded для заголовков, Golos Text для данных. Мобильная версия с горизонтальными карточками каталога.

Условия проекта

Стек: HTML, CSS, JavaScript, Canvas 2D, SVG, IntersectionObserver, Unbounded, Golos Text, Адаптивная вёрстка.

Задача

Compoglass — композитный лист для кровель, навесов, заборов и теплиц. Его главные свойства — прочность, стойкость к ультрафиолету и граду, долгий срок службы — не видны на фотографии. Снаружи это прозрачный или цветной профилированный лист, и глаз покупателя сразу относит его к поликарбонату, с которым он и конкурирует. Из этого вытекала главная задача дизайна: сделать видимым то, что спрятано внутри материала. Обычная продуктовая страница — фото, список преимуществ, таблица характеристик — здесь не работает: слова «прочнее» и «долговечнее» пишут все, а фотография не показывает разницы. Вторая сложность — две аудитории на одной странице. Частный покупатель приходит за навесом или забором и хочет цену за лист и понятный выбор цвета. Проектировщик и снабженец приходят за профилями, ТУ и сертификатами. Страница должна вести обоих, не превращаясь ни в лендинг с обещаниями, ни в технический справочник. Третья — объём исходного материала. База знаний продукта от клиента — около 236 тысяч символов: линейки, характеристики, сравнения, условия гарантии. Из неё нужно было собрать десять разделов, не потеряв точность формулировок, которые клиент считает принципиальными.

Решение

Концепция держится на одной идее: материал показываем в разрезе, а не на фотографии. **Лист собирается на глазах.** Второй экран — тёмно-синяя сцена, где лист складывается из слоёв по мере прокрутки: смола на нижней плёнке, рубленое стекловолокно, верхняя плёнка с гелькоутом, формование и отверждение. Рисунок строится на Canvas в изометрии, волокна генерируются с фиксированным зерном — картинка одинакова у всех посетителей и при каждом заходе. Справа — четыре подписанных шага, прогресс-линия и кнопка «Пропустить → к ценам» для тех, кто пришёл за прайсом. **Две гарнитуры с ролями.** Заголовки набраны широким гротеском Unbounded: он даёт промышленную, «штампованную» интонацию и хорошо держит кириллицу в крупном кегле. Текст и таблицы — Golos Text, спокойный и плотный. Цены в каталоге — тоже Golos Text, а не заголовочный шрифт: цифра читается как данные, а не как лозунг. **Ритм полос.** Страница чередует светлые и тёмные полосы: белый первый экран, синяя сцена сборки, чёрное сравнение с поликарбонатом, светло-серый каталог, белый калькулятор, чёрная полоса о производстве, песочный инженерный блок. Смена фона отмечает смену темы: посетитель чувствует, что перешёл от «что это» к «сколько стоит» и к «как монтировать». **Чертёжная графика вместо иллюстраций.** Профили плоский, С-8, С-20 и СВ-38 нарисованы векторными линиями с подписью «схема не в масштабе» — как на листе проекта. Калькулятор показывает раскладку листов сеткой SVG с чередующимися оттенками. Иконки сценариев в подборе — тонкие линейные, в той же толщине. **Каталог как витрина материала.** Карточка листа — фото, статус наличия, цветовая точка, толщина и размер, цена за лист и за квадратный метр. Над каталогом — подбор по задаче «Что вы строите?» с пятью сценариями, слева — фильтр параметров. **Мобильная версия отдельно продумана.** На телефоне каталог перестраивается в горизонтальные карточки, а кнопки первого экрана растягиваются на всю ширину — под большой палец.

Как шёл проект

1. Разбор базы знаний продукта: линейки, характеристики, сравнения; 2. Поиск визуальной идеи: показать материал в разрезе, а не на фото; 3. Раскадровка сцены сборки листа в четыре шага; 4. Выбор гарнитур и ролей: Unbounded для заголовков, Golos Text для данных; 5. Ритм страницы: чередование светлых и тёмных полос по темам; 6. Чертёжная графика профилей и схема раскладки в калькуляторе; 7. Дизайн каталога и карточки листа; 8. Мобильная версия: горизонтальные карточки и кнопки на всю ширину; 9. Сборка страницы на HTML, CSS и JavaScript без фреймворков; 10. Сверка формулировок с базой знаний: 51 формулировку сверили с клиентом.

Было и стало

undefined: 10; undefined: 4; undefined: 35; undefined: 5; undefined: 4; undefined: 51.

Услуги проекта

Разработка корпоративных сайтов — После оценки (404gen.ru/services/corporate-websites); Разработка сайтов под ключ — от 50 000 ₽ (404gen.ru/services/website-development).

Экраны сайта

Дизайн-концепты показывают ключевые сценарии по описанию задачи. Новые визуализации созданы с помощью ИИ и содержат демо-данные; это не исходные скриншоты продукта клиента.