От идеи и 3D-проектирования до эффективных онлайн-продаж с помощью сайта «Остров первых»

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

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

Концепция

Сайт подчеркивает и раскрывает уникальные преимущества квартала для пользователя через динамичные анимации и запоминающиеся визуализации в лаконичном дизайне.

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

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

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

Полнофункциональный сайт премиального квартала «Остров первых» основан на эффектных 3D-визуализациях.

Мы создали огромное количество контента: разработали и визуализировали многие объекты с нуля. Проработали интерьеры, внутреннее освещение, особое внимание уделили благоустройству.

Вот лишь некоторые уникальные элементы проекта нашего авторства:

— двухъярусная набережная Невы и сквозное освещение,

— 16-метровый эко-купол с парящими деревьями,

— прогулочная аллея для жителей острова.

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

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

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

Экспресс-знакомство — через созданный командой 3D-анимационный ролик, с помощью которого менее чем за 30 секунд погружаем в курортную атмосферу проекта, формируем притягательный и неповторимый образ, создаем то самое первое впечатление-якорь. 

https://1-ostrov.ru/video/common/ostrov-film-short.mp4

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

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

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

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

Создаем курортное настроение с помощью виртуальных прогулок с обзором 360⁰ по благоустроенной территории: показываем классический петербургский бульвар, первую парящую набережную вдоль Невы, первый стеклянный 16-метровый эко-купол, первый сад сакуры в жилом квартале. 

Через детально проработанные панорамы погружаем пользователя в атмосферу и транслируем уровень проекта: здесь все самое лучшее, передовое, первое.

На сайте — 2 варианта подбора лота: на генплане и по параметрам с удобными фильтрами. Функционал позволяет сформировать файл в формате pdf, забронировать и добавить лот в избранное, а также отправить ссылку в мессенджеры.

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

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

Backend: Laravel и Node.js.

Клиентская часть: фреймворк Nuxt 2, основанный на Vue 2.

Для генерации PDF используем самостоятельно разработанный модуль PdfGenerate, основанный на библиотеке Puppeteer.

Для анимации используем нативный JS и CSS либо библиотеку GSAP.

Для сбора обратной связи от клиентов и заявок используем самостоятельно разработанный модуль для отправки писем на сторону заказчика, а также самописный модуль Form для вёрстки форм обратной связи.

Сайт стал завершающим аккордом и вобрал в себя часть наработок и материалов, которые мы ранее выполнили по проекту: 3D-визуализации, видео о проекте, лендинг.