Разработка сайта для жилого комплекса «Белый остров»

Интернет-агентство Bquadro создало сайт с динамичной анимацией для нового объекта от компании «Базис-СПб».



Жилой комплекс «Белый остров» расположен в Санкт-Петербурге на Белоостровской улице, в реконструируемой локации с развитой транспортной, развивающейся социальной, торговой и развлекательной инфраструктурой.

Евгения Ружицкая, руководитель отдела продаж «Базис-СПб»:

«Белый остров» — уединенное, но не обособленное пространство. Это место защищенности и комфорта в новом развивающемся районе.

Перед агентством Bquadro стояла задача — создать эффектный сайт для презентации жилого комплекса и продажи квартир.

Также, было важно сделать максимально удобный в использовании сайт, который поможет увеличить узнаваемость бренда и компании у целевой аудитории.

Bquadro сотрудничает с компанией «Базис-СПб» не в первый раз, и ранее реализовали сайт для ЖК «Neva-Neva». Как и в прошлый раз, агентство ставило перед собой задачу — сделать проект, который будет производить WOW-эффект.

В основе концепции продвижения ЖК «Белый остров» — идея об уютном, высокотехнологичном и экологичном месте.

Много внимания уделяется не только инфраструктуре, но и экологичности — дом возведен по международным стандартам экологического строительства LEED.

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

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

Специалисты агентства решили создать интересную графику и реализовали горизонтальную прокрутку для главной страницы — это нестандартное решение, которое привлекает внимание.

Такой подход помогает создать нужный нам WOW-эффект и ощущение, как будто пользователь листает журнал, откинувшись в кресле бизнес-класса самолёта.

Самым интересным решением, помимо главной страницы, стало меню «бургер», который при нажатии сворачивается в минималистичное боковое окно и, если открыть меню с главной страницы, движение главного изображения продолжится.



Александр, технический директор Bquadro:

«3D-эффект меню — наша гордость. При нажатии на него, текущий экран со всем содержимым и анимацией превращается в повернутый прямоугольник внутри экрана. Выглядит очень эффектно!»

Мария, fullstack-разработчик:

«Мы сделали три варианта горизонтального скролла, чтобы добиться идеального сочетания работы разных устройств прокрутки. Иногда я просыпалась среди ночи с новыми идеями и бежала их реализовывать! Настолько была вдохновлена проектом».

Главная страница

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



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

Александр, технический директор:

«Самое сложное было адаптировать главную страницу под разные браузеры.

Для того, чтобы пользователю было легко ориентироваться на странице — добавили прогрессбар внизу страницы.

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

Причем, большая часть работы пришлась на время карантина. Команда трудилась над сайтом удаленно, но посмотрите, какой результат!

Это действительно — новый опыт».

Анимация

Весь сайт построен с использованием динамичной анимации, которая помогает поддержать идею «сайта-журнала» и, в то же время, подчеркивает эргономичность жилого комплекса.

Выбор квартиры

Выбрать квартиру на сайте «Белого острова» можно двумя способами: визуальный поиск и подбор по параметрам.

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

Визуальный поиск

В визуальном подборе сначала выделяется часть дома, а после можно выбрать отдельный этаж. Здесь же отображается сколько квартир свободно прямо сейчас.







Александр, технический директор:

«За время работы над проектом мы обработали десятки рендеров, добавляя для них визуальных выбор.

Это было не просто, но благодаря командной работе с клиентом, справились довольно быстро.

Отдельное спасибо за качественные макеты планировок этажей, квартир с мебелью и без мебели, в том числе в формате SVG».

Подбор по параметрам

Разработчики реализовали фильтр с основными характеристиками: корпус, количество комнат, этаж, площадь, а также добавили номер квартиры.

Результат выводится плиткой или таблицей (отображение настраивается по желанию). Дополнительно отображается план квартиры.

Интеграции

Специалисты настроили интеграцию с CRM клиента. Теперь информация по квартирам (цены, доступность) обновляется на сайте в режиме реального времени, а все заявки с сайта уходят сразу в CRM и заказчик видит их.

Также, реализовали модуль выгрузки в XML по стандартам Яндекс.Недвижимости и ДомКлик и теперь все квартиры можно найти на известных площадках недвижимости.

Карточка квартиры

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

Посмотреть планировку можно как с мебелью, без мебели, так и на этаже. Здесь же указана минимальная стоимость квартиры в ЖК.

Если пользователь ещё не решился на покупку, он может добавить квартиру в «Избранное» или скачать планировку в формате pdf.



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



Мария, fullstack-разработчик:

«Обратите внимание, горизонтальная прокрутка работает при стандартном поведении мыши. Страницу удобно смотреть на любом экране, используя разные средства для прокрутки страницы — от мыши до тач-экрана.

При этом, картинки на главной странице плавно двигаются в противоположном от прокрутки направлении. Это придает объём общей картине и в целом, делает сайт ещё более живым!»

Шрифт



Итог

Вся проектная команда со стороны заказчика, включая руководство и партнеров восторженно отозвались о реализованном сайте. Заказчик поблагодарил Bquadro за проделанную работу.

На данный момент агентство продолжает развивать сайт.