Северсталь
Разработали лучший сайт для выставки для гиганта металлургической отрасли
![<p>«Северсталь» производит материалы для профнастила, металлочерепицы и фальцевой кровли, контролируя качество на всех этапах производства — от добычи руды и до готовой продукции.</p>](https://s29805.cdn.ngenix.net/wp-content/2018-05-29-severstal_roof/01.png)
Задачи
Для профессиональной выставки
- Разработать
промо-сайт , который выгодно презентует компанию и продукцию на профильной выставке. - Отразить разницу между тремя ключевыми продуктовыми линейками.
- Сделать форму для обратной связи с конкретным дилером в регионе.
- Реализовать адаптивную версию.
Решение
![<p>Фишка сайта — в вариативности. Смена погоды в <nobr>промо-блоке</nobr> при первой загрузке идет по таймеру: климатические состояния периодически сменяют друг друга, но если разок поскроллить, то можно переключаться между ними вручную.</p><p>Тогда же появляется переключалка цветов кровли: пользователь уже на первом экране может примерить разные цветовые гаммы и оценить текстуру всех трех кровельных линеек — не надо искать по сайту, какие есть цвета и как это будет выглядеть в готовом виде.</p>](https://s29805.cdn.ngenix.net/wp-content/2018-05-29-severstal_roof/x02.jpg.pagespeed.ic.CdpFVyv5rm.jpg)
![<p><b>На втором экране главной страницы каждый тип черепицы показан поближе:</b></p>](https://s29805.cdn.ngenix.net/wp-content/2018-05-29-severstal_roof/03.png)
![<p>Сайт меняет цветовую гамму — заголовки, текст, ссылки и кнопки окрашиваются в фирменный цвет выбранной линейки. Если выбран «Стальной шёлк» элементы становятся зелёными, «Стальной бархат» — бордовыми, «Стальной кашемир» — синими.</p>](https://s29805.cdn.ngenix.net/wp-content/2018-05-29-severstal_roof/x04.png.pagespeed.ic.QwDSTekPUJ.png)
![<p><b>Дилеры</b></p><p>Черепицу мало выбрать — её нужно правильно рассчитать, сделать замеры и произвести монтаж. Всё это лучше доверить дилеру, ближайшего из которых пользователь может выбрать на карте.</p>](https://s29805.cdn.ngenix.net/wp-content/2018-05-29-severstal_roof/05.png)
![<p><b>Страница 404</b></p><p>На <nobr>404-й</nobr> странице пользователя ждёт небольшой квест — мы предложили ему проводить кошечку по крышам до дома :)</p>](https://s29805.cdn.ngenix.net/wp-content/2018-05-29-severstal_roof/x404-min.png.pagespeed.ic.M9trMpCSdm.jpg)
![<p><b>Адаптив</b></p><p>На мобильной версии всегда солнечная погода, и сайт также меняет цвет элементов при выборе конкретной линейки. Мы аккуратно переверстали форму заявки и другие блоки, чтобы сохранить удобство для пользователей.</p>](https://s29805.cdn.ngenix.net/wp-content/2018-05-29-severstal_roof/x06.jpg.pagespeed.ic.P_-dTLX464.jpg)
Результат
Сделали сайт с классным визуалом для выбора цвета кровли, с понятными таблицами сравнения характеристик, с наглядными схемами, интуитивной привязкой формы к 160 дилерам по России и классным адаптивом.