Комментарии
Капризы погоды на сайте компании «Северсталь» — крупнейшего производителя металлопроката для кровельных материалов
Результат Процесс
Что ей снег, что ей зной
Сибирикс
Что ей снег, что ей зной
Капризы погоды на сайте компании «Северсталь» – крупнейшего производителя металлопроката для кровельных материалов
Металлочерепица — популярный материал для кровли, оттого найти действительно качественный вариант непросто. Выбрать ту, которая не облезет при — 40, не потеряет цвет при +40, не погнётся при перевозке и монтаже и не будет стоить космических денег — та ещё задача. Плюсом, придётся разобраться в особенностях кровельного листа: из чего он состоит, чем так важна толщина полимера и плотность цинка. Поэтому часто потребители, чтобы не тратить время на выяснение всех кровельных тонкостей на форумах, платят «специально обученным людям» деньги, чтобы те разбирались сами.

«Северсталь» производит материалы для профнастила, металлочерепицы и фальцевой кровли, контролируя качество на всех этапах производства — от добычи руды и до готовой продукции. И для профессиональной выставки Металл-ЭКСПО 2017 производителю требовался эффектный промо-сайт, который бы рассказывал о вариантах кровли, их характеристиках и помогал пользователям быстро и самостоятельно сориентироваться в продукции и найти дилера для заказа кровли в своём регионе.
Задачи
1
Сделать презентабельный промо-сайт, который бы выгодно представлял компанию и продукцию среди конкурентов на профильной выставке.
2
Позаботиться о пользе для конечных потребителей: понятно рассказать о преимуществах и видах продукции и предусмотреть возможность сделать онлайн-заявку.
3
Отразить разницу между тремя ключевыми продуктовыми линейками.
4
Сделать форму для обратной связи с конкретным дилером в регионе.
Дизайн
Потребителю важно, как кровля будет выглядеть на крыше — ему хочется потыкать и повыбирать цвета. Уже на брейншторме у нас родилась идея с выбором цветов у крыши домика в промо-блоке. Помня о клиентском слогане «Хорошая погода в вашем доме», мы решили дополнить промо-блок ещё одним интерактивом — переключалками погодных условий: осенний ветер сменяется зимним снегопадом, весенними дождями и летней жарой. Обе идеи отразили на скетче:
Идея понравилась заказчику, и на этапе отрисовки макета мы приступили к поискам домика для промо-блока. Вариантов было много: то он был чрезмерно буржуазным, то слишком простеньким, то кровля визуально не подходила, то ландшафт окружающий был совсем не тем, как хотелось. Чтобы получить идеальный домик мечты, мы отрисовали картинку в слоях, собирая окружение буквально по частям. Это дало больше простора для ландшафтных вариаций в разное время года: летом во дворе появляется велик, а зимой — снеговик на дальнем плане.

На альтернативной версии мы предложили использовать реалистичное изображение и нестандартную навигацию:
На втором экране главной страницы каждый тип черепицы показан поближе:
Детальные картинки черепицы мы долго и методично отрисовывали на основе 3D-модели. Они получились такими красивыми и «вкусными», будто сделаны из карамели — так и хочется лизнуть :)

Татьяна
Руководитель проекта
Разработка
Фишка сайта — в вариативности. Смена погоды в промо-блоке при первой загрузке идет по таймеру: климатические состояния периодически сменяют друг друга, но если разок поскроллить, то можно переключаться между ними вручную.

Тогда же появляется переключалка цветов кровли: пользователь уже на первом экране может примерить разные цветовые гаммы и оценить текстуру всех трех кровельных линеек — не надо искать по сайту, какие есть цвета и как это будет выглядеть в готовом виде. Интерактив вовлекает посетителя с первого скролла и заодно снижает показатель отказов — страницу хочется смотреть экран за экраном, чтобы узнать все подробности о понравившемся материале.
Помимо выбора цветов и времени года, сайт меняет цветовую гамму — заголовки, текст, ссылки и кнопки окрашиваются в фирменный цвет выбранной линейки. Если выбран «Стальной шёлк» элементы становятся зелёными, «Стальной бархат» — бордовыми, «Стальной кашемир» — синими.
Сайт запоминает выбранный цвет черепицы в промо-блоке и на втором экране сразу показывает черепицу того цвета и из той линейки, что выбраны выше. Более того — в блоке с реализованными проектами тоже автоматически показывается именно тот кейс, где использовался выбранный тип и цвет кровли.
Цвета в промо-блоке и в блоке ниже связаны между собой — выбор оттенка на одном из экранов меняет цвет и на втором, и наоборот.
Люблю про ходу верстки придумывать всякие эффекты — заранее никогда не знаешь, что в итоге получится. В этом проекте я предложил, чтобы черепица во втором блоке поворачивалась внутренней стороной, пока меняется цвет здесь и в промо-блоке, а после поворачивалась обратно.

Сергей
Разработчик
Чтобы рассказать потребителям о составе черепицы и разнице между тремя линейками, появился блок из слоёв с подписями:
Черепицу мало выбрать — её нужно правильно рассчитать, сделать замеры и произвести монтаж. Всё это лучше доверить дилеру, ближайшего из которых пользователь может выбрать на карте.

При нажатии на «Оставить запрос» система запоминает, с карточки какого дилера открыли форму и какую линейку последней смотрел пользователь — менеджер при просмотре заявки уже будет знать, что интересно пользователю. Причём, запрос придёт конкретному дилеру, а не какую-то общую почту — для этого мы привязали 160+ электронных адресов к точкам на карте.
На 404-й странице пользователя ждёт небольшой квест — мы предложили ему проводить кошечку по крышам до дома:
Кошка отрисована в нескольких состояниях, как делают при монтаже мультфильмов. Управлять ей просто — достаточно вовремя жать на пробел, и та прыгает. Я даже двигал домики относительно друг от друга, чтобы пройти игру было легче.

Андрей
Разработчик
На мобильной версии всегда солнечная погода, и сайт также меняет цвет элементов при выборе конкретной линейки. Мы аккуратно переверстали форму заявки и другие блоки, чтобы сохранить удобство для пользователей.
Мобильная версия — отдельная история. Хотелось сохранить анимации смены погоды, но ни одно устройство не потянуло бы такой сайт — сразу отказались от этой идеи. Было сложно переориентировать многие блоки под вертикальный формат: их приходилось буквально разрывать на части, а для таблиц и сравнительных блоков встраивать горизонтальные свайпы.

Сергей
Разработчик
Сроки запуска были сжатые, однако сайт запустили за два месяца и сразу с классным адаптивом. Бонус — залипательная игра на 404. Всей студией устраивали соревнования, кто дальше проведет Мурку по крышам. Работать с командой заказчика приятно, они заинтересованы в успехе и готовы к смелым решениям. Получилось стильно и эффектно, теперь хочу себе дом с карамельной крышей :)

Татьяна
Руководитель проекта