Главное о кейсе
Перед нами стояла задача разработать полнофункциональный сайт, основанный на эффектных 3D-визуализациях и подаче контента через исторический диалог.
Наша работа началась с создания к старту продаж лендинга https://o1.spb.ru/, показавшего отличные результаты как эффективный инструмент. Теперь воплотили и запустили полноценный сайт.
Концепция
Сайт подчеркивает и раскрывает уникальные преимущества квартала для пользователя через динамичные анимации и запоминающиеся визуализации в лаконичном дизайне.
Используем множество анимационных эффектов: плавные переходы через маски, параллакс-эффект на важных деталях, смену визуалов при скроллинге. Через анимацию мы создаем интерактивное взаимодействие, вовлекая пользователя в историю.
Навигация по сайту максимально простая и привычная — классический скролл в сочетании с функциональной анимацией и бесшовными переходами.
Глубокие выдержанные синие оттенки добавляют контрастности, изысканности, подчеркивают премиальность локации комплекса и ее неизменную связь с водой.
Инсайт
Полнофункциональный сайт премиального квартала «Остров первых» основан на эффектных 3D-визуализациях.
Мы создали огромное количество контента: разработали и визуализировали многие объекты с нуля. Проработали интерьеры, внутреннее освещение, особое внимание уделили благоустройству.
Вот лишь некоторые уникальные элементы проекта нашего авторства:
- двухъярусная набережная Невы и сквозное освещение,
- 16-метровый эко-купол с парящими деревьями,
- прогулочная аллея для жителей острова.
Сторителлинг
Используем сторителлинг и рассказываем пользователям о деталях проекта, не перегружая лишней информацией. История раскрывается постепенно, создавая эффект полного погружения, вовлекает в диалог.
Вместо стандартной подачи названия разделов меню на сайте «Остров первых» больше похожи на строки японского хокку.
Каждый раздел начинается с атмосферной визуальной обложки, как в хорошей книге.
Экспресс-знакомство — через созданный командой 3D-анимационный ролик, с помощью которого менее чем за 30 секунд погружаем в курортную атмосферу проекта, формируем притягательный и неповторимый образ, создаем то самое первое впечатление-якорь. https://1-ostrov.ru/video/common/ostrov-film-short.mp4
История https://1-ostrov.ru/history
Один из самых зрелищных разделов сайта интерактивно рассказывает истории Матисова острова, подчеркивая неразрывную связь прошлого и будущего.
Наш взгляд на экран постепенно фокусируется от общих видов на конкретные даты, постепенно превращаясь в таймлайн, неумолимо фиксирующий ключевые исторические вехи через эффект жидкого стекла.
Завершая свой ход, часы отсылают нас к моменту рождения нового клубного квартала «Остров первых», гармонично сочетающего в себе дань историческим традициям и самое современное содержание.
Расположение https://1-ostrov.ru/location
Для погружения пользователя в локацию мы создали интерактивную кастомизированную карту Матисова острова в стилистике бренда. Подробно рассказываем и показываем значимые локации на острове и в его окружении, в том числе с использованием генплана с интерактивными элементами.
Благоустройство https://1-ostrov.ru/improvement
Создаем курортное настроение с помощью виртуальных прогулок с обзором 360⁰ по благоустроенной территории: показываем классический петербургский бульвар, первую парящую набережную вдоль Невы, первый стеклянный 16-метровый эко-купол, первый сад сакуры в жилом квартале.
Через детально проработанные панорамы погружаем пользователя в атмосферу и транслируем уровень проекта: здесь все самое лучшее, передовое, первое.
Квартиры https://1-ostrov.ru/plans
На сайте — 2 варианта подбора лота: на генплане и по параметрам с удобными фильтрами. Функционал позволяет сформировать файл в формате pdf, забронировать и добавить лот в избранное, а также отправить ссылку в мессенджеры.
Переход в ключевой раздел всегда доступен и с главного экрана, если пользователь сначала хочет изучить варианты в продаже, а потом более детально познакомиться с проектом.
Мобильная версия
Сайт полностью переработали и адаптировали для мобильного интернета, учитывая большое количество 3D-графики и анимации. В результате получилась полнофункциональная мобильная версия с высокой скоростью загрузки.
Комментарий клиента
Крутой, стильный, интуитивно понятный продукт, который наглядно показывает все плюсы и особенности проекта в историческом центре Петербурга.
Стек технологий
Backend: Laravel и Node.js.
Клиентская часть: фреймворк Nuxt 2, основанный на Vue 2.
Для генерации PDF используем самостоятельно разработанный модуль PdfGenerate, основанный на библиотеке Puppeteer.
Для анимации используем нативный JS и CSS либо библиотеку GSAP.
Для сбора обратной связи от клиентов и заявок используем самостоятельно разработанный модуль для отправки писем на сторону заказчика, а также самописный модуль Form для вёрстки форм обратной связи.
Выставлено в номинациях:
— Сайт жилого или коммерческого объекта недвижимости