Разработка сайта для ЖК Северный порт

Промо

Клиент

LEGENDA
Intelligent
Development

Год

2023

О проекте

Клиент

«Северный порт»
— новый жилой комплекс
на побережье канала имени Москвы

Задачи

Разработать дизайн и создать объектовый сайт для ЖК «Северный порт», на котором пользователи смогли бы ознакомиться с новым жилым комплексом: узнать о его местоположении, преимуществах, ценах и посмотреть планировки.

Заказчик

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

Цели проекта

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

Анализ конкурентов

Изучили восемь
сайтов конкурентов, ссылки на которые предоставил клиент:

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

В результате на основе анализа этих порталов и ТЗ клиента сформировали два варианта концепций дизайна:

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

Клиент выбрал второй вариант концепции.

Дизайн

С помощью дизайна
подчеркнули премиальность жилого комплекса.

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

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

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

Использовали 3D-рендеры жилого комплекса. На них «Северный Порт» стоит высотными доминантами вдоль побережья канала имени Москвы. Кроме того, на визуализациях показываем благоустроенную набережную с променадом, который органично соединяется с парком Северного речного вокзала.

Анимации

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

Структура сайта

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

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

Разделы, которые мы реализовали:

«Главный экран». На нём демонстрируем весь жилой комплекс, который располагается вдоль береговой линии.
«Архитектура». Описываем архитектурную концепцию «Северного порта».
«Продукт». Демонстрируем интерьеры будущих квартир и описываем их сильные стороны.
TechnoBox. Наглядно демонстрируем, как квартира будет укомплектована с технологической точки зрения, например как реализована шумоизоляция и электрические сети.
«Селекция планировок». Это интерактивный раздел, где можно изучить чертежи всех видов квартир и планировок.
«Локация и благоустройство». Описываем преимущества местоположения ЖК: рассказываем про набережную; перечисляем, какие есть парки поблизости; иллюстрируем транспортную доступность.
«Карта». Показываем на карте, где находится ЖК «Северный Порт и ближайшие парки, станции метро, школы и детские сады, магазины и рестораны.
«Контакты». Указали адрес и время работы офиса продаж, контактный номер телефона и форму обратной связи.

3D-визуализация

Реализовали
3D-визуализацию TechnoBox — главной особенности проекта.

TechnoBox — это технологическая комплектация квартиры. Вместо стандартной отделки собственник получает пространство, готовое к интеграции умных решений и декорированию.

Наша команда реализовала объёмную модель TechnoBox. При скролле 3D-модель плавно приближается и поворачивается во все стороны. Так пользователи могут детально рассмотреть TechnoBox со всех ракурсов и изучить все её особенности.

В разделе демонстрируем, как реализованы преимущества TechnoBox:

Стационарный и удалённый контроль над квартирой;
Всегда свежий воздух и никакой пыли;
Единая сеть коммуникационных систем;
Шумоизоляция;
Подготовленные стены;
Выровненный пол.

Разработка

Работу над
фронтендом и бэкендом вели параллельно.

Фронтенд

Сверстали все разделы сайта на основе готовых дизайн-макетов.
Реализовали анимационные эффекты и интерактивные элементы: 3D-модели TechnoBox и селекции планировок.

Из технологий использовали фреймворк Nuxt.js, так как он ориентирован на оптимизацию производительности и SEO. Анимацию TechnoBox писали на WebGL.

Бэкенд

Разработали механизмы получения и обработки данных, их взаимодействие с базой данных.
Настроили вывод динамической информации на фронтенд: формированию страниц, отображению текстов, картинок и интерактивных элементов.
Создали CMS — административную панель управления контентом, чтобы сотрудники заказчика могли заменять все изображения, править текст, создавать и редактировать виджеты.
Интегрировали чат-бот для общения с посетителями сайта и сервис аналитики Calltouch.

Для бэкенда использовали фреймворк PHP Laravel.

Результат

К началу продаж
заказчик получил полностью готовый объектовый сайт ЖК «Северный порт».

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

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

Сотрудники клиента с помощью CMS могут самостоятельно и оперативно обновлять информацию на сайте по ходупродвижения проекта.

Благодарность клиента

Никоненко А.М.

Северный порт.pdf

Разработка