Визуальный прототип
Первый этап | 7 дней
Раскрыли проблему
В основу проекта заложили реальную проблему – шум в новостройках. Тему раскрыли системно: какие виды шума бывают, почему он возникает именно в современных жилых комплексах, как влияет на качество жизни и даже на здоровье человека. Отдельно разобрали, что такое звукоизоляция, какие решения существуют и на что стоит обращать внимание при выборе.
Вшили продукт
Через экспертную подачу, объяснение нормативов и практические советы мы органично подвели к демонстрации решений ТЕХНОНИКОЛЬ в области звукоизоляции.
Параллельно показали, что жилые комплексы от ГК «Гранель» проектируются с учётом современных стандартов и реальных потребностей жителей мегаполиса — включая требования по акустическому комфорту.
Разработка дизайн-концептов
третий этап | 4 дня
При разработке дизайн-концептов ориентировались на уже реализованные спецпроекты ТЕХНОНИКОЛЬ. Поскольку все спецпроекты размещены на одной интернет-площадке, для нас было принципиально сохранить визуальную целостность и преемственность. Новый проект не должен был выглядеть «чужим».
Дизайн-концепт 1
В первом варианте определили направление стикерно-иллюстрированного стиля. Иллюстрации всегда классно работают как лёгкие смысловые маркеры: помогают структурировать материал и делают восприятие более динамичным.
Именно поэтому в первом дизайн-концепте мы выбрали рисованную графику, продолжив визуальную логику предыдущих спецпроектов ТЕХНОНИКОЛЬ. Такой подход сохранил стилистическую преемственность и одновременно позволил адаптировать подачу под специфику новой темы.
Дизайн-концепт 2
Во втором концепте решили добавить больше смелости и визуального контраста. В цветовой палитре использовали более выразительные сочетания — насыщенный сине-сиреневый в паре с оранжево-красными акцентами. Такое решение усилило динамику и придало проекту более современное, энергичное звучание.
Стилистически мы сохранили стикерную логику, но перераспределили роли: в основе визуала заложили реальные фотографии, а стикерные элементы оставили как акценты, для управления вниманием и объединения композиций.
Финальный вариант концепта
Заказчик выбрал первый концепт с векторными иллюстрациями — именно эта подача лучше всего соответствовала задаче проекта. Однако были комментарии к цветовому решению: тёмный фон показался слишком тяжёлым для выбранной темы. Также заказчик попросил взять подход из второго концепта — использовать фотографии в некоторых местах.
Мы пересобрали визуальное решение: вместо чёрного фона использовали светлое голубое небо, что сразу сделало страницу легче и дружелюбнее, а архитектуру «оживили» более яркими оттенками.
Так появился третий вариант дизайна — доработанная версия первого концепта, которая сохранила выбранную стилистику, но стала визуально легче и приятнее. Именно этот вариант получил финальное утверждение заказчика.
Дизайн-концепт 3
Полный дизайн
Четвертый этап | 5 дней
После финального утверждения концепта работа перешла в спокойный и предсказуемый темп — основное направление уже было согласовано, поэтому дальше мы двигались уверенно и быстро. Мы приступили к разработке остальных блоков страницы, строго придерживаясь выбранного визуального стиля. В основе остались векторные иллюстрации, которые мы аккуратно сочетали с фотографиями, чтобы сохранить баланс между графической целостностью и ощущением реальности.
Так страница постепенно сложилась в единую систему — с понятной иерархией, ритмом и визуальной логикой от первого экрана до финального блока.
Фишки проекта
Познавательный контент мы не ограничили статичной подачей. В отдельных блоках материал раскрывался через интерактив, чтобы пользователь не просто читал, а вовлекался и проживал тему. Для усиления взаимодействия встроили несколько механик.
Прослушать шум
Предусмотрели возможность прослушивания аудиофайлов с примерами различных типов шума. Это дало проекту дополнительный уровень погружения: пользователь мог не только узнать о проблеме, но и буквально услышать её.
Тест «Угадайте сколько децибел»
Тест с вопросами о громкости разных типов шума — пользователю предлагалось угадать, сколько децибел создаёт тот или иной источник. Это помогало наглядно показать разницу между бытовыми и критическими уровнями шума.
Мини-игра «Найди источник звука»
Добавили мини-игру, где нужно определить, откуда исходит шум в квартире или доме. Такой формат позволил в лёгкой форме объяснить природу ударного, воздушного и структурного шума.
Адаптивы и подготовка к верстке
пятый этап | 2 дня
Вёрстку заказчик выполнял силами своих подрядчиков, однако это не повлияло на наш подход к подготовке макетов. Адаптировали дизайн всех страниц под мобильные устройства, продумали анимации и эффекты. Подготовили все материалы и техническое задание, после чего передали проект на верстку.
Верстка и оптимизация
шестой этап | 23 дня
Верстка сайта была на стороне заказчика. После завершения работ мы провели тщательную проверку сайта, убедившись в правильности отображения всех элементов и функциональности страниц.
Добились идеальных показателей загрузки страниц и технической оптимизации, что положительно повлияет в дальнейшем на "оценку" сайта поисковыми системами.
Данные с pagespeed.web.dev:
