свежий кейс
SHINGLAS — новый сайт для топовой компании
Иногда полезно получить проект, который выжимает из менеджеров буквально все соки и заставляет их работать на пределе своих возможностей. Сразу становится ясно, готова ли студия к встрече с особо крупным заказчиком.
Гибкая черепица SHINGLAS — это бренд холдинга «ТехноНИКОЛЬ», входящего в первую сотню списка Forbes по объемам годовой выручки. Его штат насчитывает почти 7000 человек, отличается масштабной иерархией и системой подразделений. Наш проект тщательно согласовывался внутри этой большой компании, поэтому требования к разработке довольно часто менялись и уточнялись. И если бы не грамотная постановка процессов в нашей студии, они бы просто погребли нас под собой.
Задачи
Нам нужно было не только дать наглядное представление о продукте и создать в голове у пользователя четкую ассоциацию «гибкая черепица = SHINGLAS», но и свести на сайте разнообразную целевую аудиторию — архитекторов, подрядчиков, торговых представителей и простых покупателей — сделав его одинаково удобным и информативным для всех.
![](https://s29805.cdn.ngenix.net/upload/tilda/1ca/1cac367902bcc3c9af1bc4b1ab16c164.png)
В итоге на нас свалилось гигантское количество контента. Его предстояло как-то распределять по сайту и следить за тем, чтобы самая важная информация была всегда на видном месте. О масштабе проекта и сложности этой задачи можно судить уже по эпичному Mind Map.
![](https://s29805.cdn.ngenix.net/upload/tilda/324/324f4679e7f5ec39cc88dd69ec6954b9.png)
Мы согласовывали мельчайшие детали — например, заголовки на прототипе, порядок пунктов меню, размещение логотипов в шапке. Несколько раз меняли цвета бокового меню, переделывали фотографии в слайдере на главной и меняли в нем подсветку при наведении... В случае с топовыми компаниями по-другому, похоже, и не бывает — каждому заинтересованному лицу важно свое.
![](https://s29805.cdn.ngenix.net/upload/tilda/ebf/ebf471a0e5499984c7fc908c66f3a9ef.jpg)
Ирина
Руководитель проекта
Дизайн
Мы разработали несколько оригинальных концепций для главной страницы, от интерактива до слайдера с крутыми фотографиями. Согласование макетов происходило в несколько этапов: сначала мы утверждали их с подразделением маркетинга, затем дизайн уходил на согласование дальше — всем заинтересованным в проекте лицам. Всего их было больше десяти. Для нас это был полезный опыт!
Первая концепция представляла собой испытание для черепицы: можно было проверить ее на устойчивость к снегу, дождю и огню. Все эти эффекты вызывались по клику пользователя и сопровождались красивой анимацией.
![](https://s29805.cdn.ngenix.net/upload/tilda/eec/eec87258f4c0fcf0a03424e9eae85ef0.jpg)
Алексей
дизайнер
В какой-то момент мы предложили вставить на главную видео, и в итоге туда попал рекламный ролик «ТехноНИКОЛЬ». Мы также дополнили его триггерами, разработанными другим подрядчиком, но обязательными к использованию. Последние концепции мы защищали уже лично в московском офисе заказчика. Успешно!
![](https://s29805.cdn.ngenix.net/upload/tilda/92d/92d449a4b9e78cae523a51259b4395ff.png)
Утвержденный вариант главной страницы: видеоролик с триггерами
Можно идти далее. В каталоге есть 4 вида продукции: 1-, 2-, 3-слойная черепица и комплектующие. Мы хотели представить ее не просто в виде фотографий и сопроводительного текста, но так, чтобы пользователь постепенно открывал для себя преимущества продукта и знакомился с ним.
![](https://s29805.cdn.ngenix.net/upload/tilda/69a/69a377de7e73b8d8cd1698c358e7809d.jpg)
Но самое сложное и важное — это сервис подбора черепицы. Он позволяет наглядно увидеть сочетание всех видов гибкой черепицы SHINGLAS с различными фасадами, комбинировать их цвета, подбирать к ним окна и водостоки.
![](https://s29805.cdn.ngenix.net/upload/tilda/159/1595cc07e185d4a0b9d4b5c52b7fd733.png)
С виду вроде бы ничего особенного, просто симпатичная картинка, но стоит заглянуть чуть глубже...
Разработка
Конструктор состоит из нескольких слоев, как гамбургер: отдельно рендеры крыш, фасадов и остальных частей дома — водостоков, вентиляции, окон. Всего здесь несколько сотен картинок, которые собирались нами вручную. Мы поджали их под размер сайта и оптимизировали, так что теперь конструктор работает довольно быстро. Также у пользователей есть возможность распечатать результат или сохранить получившуюся картинку.
![](https://s29805.cdn.ngenix.net/upload/tilda/d0a/d0afb6de204f431df383d8fb4a0fdb60.png)
Иван
Руководитель отдела программирования
![](https://s29805.cdn.ngenix.net/upload/tilda/f99/f993790fff41c6376a5bb2960444a9bf.gif)
Хотите узнать, как выглядит фасад из красного клееного бруса с белыми окнами, синим водостоком и однослойной классической черепицей оливкового цвета? Легко!
В паре с конструктором создана функция подбора климатических условий для использования черепицы (вообще-то они связаны с регионом пользователя и определяются автоматически, но их можно отредактировать и вручную, выставляя параметры влажности, яркости солнца и ветровой нагрузки, для получения более точных рекомендаций). Такой фишки нет ни у кого из конкурентов «ТехноНИКОЛЬ»!
На сайте доступна пользовательская настройка параметров климата
Для подробного и компактного рассказа о черепице мы решили сделать инфографику. А чтобы довести ее до совершенства, некоторым в студии пришлось вспомнить университетские годы.
Здесь есть анимация: сектор окружности меню закрашивается по движению курсора. И я высчитывала угол, на который необходимо закрасить сектор, в зависимости от его, курсора, позиции. Расчеты заняли 8 страниц! Кто-то даже сказал, что мой блокнот для заметок больше похож на тетрадь по физике.
![](https://s29805.cdn.ngenix.net/upload/tilda/8f6/8f68fcd1ab3ef1c44c61be94794b81af.jpg)
Дарья
Разработчик
На сайте также работает определение города по IP, что не совсем типично для корпоративного проекта. Это было нужно не только для фильтра климатических условий, о котором мы уже говорили, но также для отображения региональных новостей и событий и наконец для того, чтобы пользователь мог посмотреть адреса и контакты торговых партнеров, архитекторов и подрядчиков «ТехноНИКОЛЬ» SHINGLAS в своем городе. Всего в разделе «Контакты» около 2000 разных объектов!
![](https://s29805.cdn.ngenix.net/upload/tilda/328/328eda028a508952efa3b5887b75264f.png)
SHINGLAS — это большой, сложный и дорогой нам проект. Словами всего и не передать, смотреть надо.