Сбор информации

В основе каждого нашего проекта лежит тщательный анализ данных. На старте проекта мы
провели несколько интервью с клиентом, провели аудит других сайтов строительных компаний
на московском рынке, изучили структуру и выявили общие визуальные решения, чтобы опираясь
на эти данные, сформировать отличную от остальных систему подачи контента. Также определили
основные пользовательские сценарии для каждого типа целевой аудитории.

Концепция и проектирование

«Тройка РЭД» — имиджевый проект. Наряду с понятной структурой и компоновкой элементов
обеспечивающий удобный доступ ко всем разделам сайта, перед нами стояла задача дистанцироваться
от конкурентов в рамках визуального решения. От идеи размещать на главной странице фотографии
строительных объектовмы сразу отказались, и стали думать, что может выразить саму идею строительства.
Строительство зданий — это всегда работа с объемом, создание чего-то осязаемого из плоского.

Исходя из этого, мы решили придать экрану глубину за счет аксонометрической иллюстрации
городских кварталов. Иллюстрация отражает широкий спектр деятельности комании: строительство
высотных жилых комплексов, общественных зданий, школ, малоэтажная застройка.

Дизайн

Проект пришёл к нам без отчётливого фирменного стиля — перед нами был логотип и набор цветов:
чёрный и красный. Образ мы формировали самостоятельно. За основу в визуальном решении сайта
взяли линейную графику и аксонометрические иллюстраций. Тема иллюстраций ? урбанистический
пейзаж современного города, динамичное развитие которого невозможно без активного строительства.
Плоские монохромные иконки и цветные плашки контрастируют с объемной линейной графикой.

Красный цвет на различных элементах навигации и дизайна использовали для дополнительной
акциденции — информация считывается быстрее, и смысл улавливается легче.

В разделе просмотра объекта в удобной форме доступны технико-экономические показатели.
Также пользователь может ознакомиться с этапами строительства объекта в разделе “дневник стройки”
или посмотреть текущее состояние строящегося объекта через ссылку “строительство он-лайн”.

SVG анимация

Анимации на сайте выполнены двумя способами: для достаточно простых случаев использовалась
нативная svg-анимация, в более сложных использовался собственный скрипт, переключающий кадры
с заданной скоростью (аналогично мультфильму). Для некоторых анимаций было отрисовано около 30 разных кадров.

Интересный момент: код всех анимаций находится в svg-файле, что дает разделение логики
для удобства последующего редактирования и обеспечивает более стабильную и плавную работу сайта.

Перейти на сайт