Capital Group

Главное о кейсе

Capital Group — один из ведущих застройщиков в России. Нашей задачей было сделать сайт таким же топовым и современным: продемонстрировать уникальные локации проектов и укрепить имидж девелопера. А еще — поработать над лендингом одного из их ведущих объектов прямо сейчас.

Весь сайт делали под ключ: от концепции до разработки. В том числе придумали кастомное решение для страницы с проектами, чтобы заказчик мог сам заполнять объекты информацией.

Анимировали разные детали: от появления текста на экране до полноценных 3D-моделей жилых комплексов. После отрисовки пролетов их рендерили в WebP-секвенции и анимировали по кадрам с привязкой к скроллу страницы.

Сделали три варианта адаптива: мобильную версию, десктоп и версию для планшетов.

---

Capital Group is one of the leading real estate developers in Russia. Our task was to make the website as top and modern as possible: to showcase unique project locations and strengthen the developer's image. And also to work on the branding of one of their leading projects.

The whole site was done on a turnkey basis: from concept to development. Among other things, we came up with a custom solution for the project page, so that the client could add information to the properties themselves.

We animated various details: from the appearance of text on the screen to full 3D models of the apartment complexes. After drawing ranges, they were rendered in WebP sequences and animated frame by frame with a link to the page scroll.

We created three adaptive versions: mobile, desktop and tablet.

Как проект изменил жизнь пользователей

Применили разные подходы к отображению объектов, вариантам пролетов над Москвой и подсвечиванием проектов на общей карте. Чтобы карта выглядела реалистичной, долго подбирали оттенки воды и зелени. Благодаря этому получился живой и настоящий интерфейс, а не безликий макет.

Все проекты клиента показаны на главной пролетами над Москвой. От каждого объекта можно перейти на его лендинг и узнать больше о преимуществах комплексов.

Флагманский объект Capital Group Бадаевский показали через детальную и очень подробную трехмерную модель, сделали акцент на каждой его детали и подсветили преимущества: местоположение, концепцию жилья в воздухе, встроенность в исторический ландшафт. Прямые линии к важным городским точкам указывают расстояния до них и подчеркивают местоположение объекта.

Внизу лендинга Бадаевского сделали трехмерную карту объекта на базе WebGL. Благодаря ней пользователь может по-разному обращаться с интерфейсом и переключаться между разными планами: верхним и нижним.
---

We used different approaches to displaying objects, different ways of flying over Moscow and highlighting projects on the general map. To make the map look realistic, we spent a long time choosing the colours of water and greenery. This made the interface lively and real, rather than a faceless layout.

All the client's projects are displayed on the main fly-through over Moscow. From each property, you can go to its branding and learn more about the benefits of the complexes.

Capital Group's flagship project, Badaevsky, is presented through a detailed and highly detailed three-dimensional model, highlighting every detail and emphasising its advantages: location, the concept of living in the air, embeddedness in the historic landscape. Straight lines to important points in the city indicate the distances to them and emphasise the location of the site.

At the bottom of Badaevsky's branding is a three-dimensional map of the object based on WebGL. Thanks to it, the user can interact with the interface in different ways and switch between different maps: top and bottom.

Бизнес-задача и ее решение

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

---

To demonstrate the client's technology and scale, the main design used a three-dimensional image of Moscow, showing the capital from a bird's eye view. The developer's projects were placed on the map. The interface style was based on minimalist aesthetics to emphasise the niche nature of the project and not to distract from the core of the product - Capital Group's facilities - with bulky solutions.

Крафт (мастерство), реализация, технические детали

Еще на этапе проектирования начали тестирование. Проверяли сайт не только руками, но и через специальные инструменты, например PageSpeed Insights от Google. Оптимизацию делали в конце работы, после готовой структуры и контента. Помогли современные форматы графики. Изображения сжимали в WebP, а видео — в WebM.

---

We started testing at the design stage. We tested the site not only by hand, but also with special tools such as PageSpeed Insights from Google. Optimisation came at the end of the process, once the structure and content were ready. Modern graphic formats helped. Images were compressed in WebP and videos in WebM.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Изначально планировали собрать сайт на WebGL. Но его возможностей не хватало, чтобы разносторонне и полно показать объекты Capital Group. Протестировали несколько вариантов и решили сделать отрендеренные видео. Но в разработке при обратном скролле все ломалось. Так мы дошли до итогового варианта — WebP-секвенции. Разбили видео на картинки и решили проблемы обратного скролла.

---

We had originally planned to build the site using WebGL. However, its capabilities were not sufficient to display Capital Group's objects in a versatile and complete way. We tested several options and decided to use rendered video. But during development, everything broke when scrolling backwards. So we came up with the final variant - WebP sequence. We split the video into images and solved the backscrolling problems.

Скриншоты