Сайт компании по недвижимости на Кипре
Каким должен быть сайт по недвижимости? Современным, серьёзным и стильным. Внушать доверие и обеспечивать безупречный пользовательский (и прибыльный) опыт. Мы это знаем наверняка, потому что имели дело не с одним проектом в сфере real estate. Что у нас получилось на этот раз — читайте в новом кейсе.
О проекте и задаче
Знакомьтесь, Irindholding — компания, которая занимается недвижимостью на Северном Кипре и развивает высококлассный послепродажный сервис. Однако нехитрый и устаревший сайт отказывался этому содействовать и умолял о капитальном апгрейде.
В результате общения с клиентом мы пришли к выводу, что пришло время переосмыслить бренд и спроектировать продукт с нуля — с новой концепцией, понятной логикой и современным wow-дизайном. А ещё предусмотреть функцию мультиязычности и вшить в сайт онлайн-калькулятор, генератор PDF-файлов и главный источник лидов компании – YouTube. Кроме интеграции с каналом нам предстояло интегрировать сайт с привычной для клиента amoCRM.
Итак, команде Webnauts надлежало объединить техническую функциональность с визуальным восторгом, которые будут приносить заявки от клиентов. Поэтому мы решили не ограничиваться готовыми решениями типа WordPress и пустить в действие прогрессивные фреймворки Nuxt 3 и Laravel.
Особенности UX-дизайна
Сценарий пользователя
Прототипированию страниц предшествовало длительное обсуждение структуры и логики будущего сайта. Мы разработали сценарий пользователя для двух целевых групп: инвесторов и покупателей недвижимости.
Инвесторам:
Покупателям:
Роль распределителя посетителей на первом экране сайта выполняет двойная кнопка с примечанием «Я выбираю Кипр для…»
В общем, дизайн сайта похож на интерактивную презентацию. Мы разбили контент на удобные и доступные для восприятия блоки-слайды. Процесс скроллинга приятный (потому что плавный), удобный (потому что дозированный) и комфортный (потому что предсказуемый и невольно вызывает ощущение контроля). Этот эффект усиливается благодаря сайдбару слева, демонстрирующему «местоположение» пользователя слайд за слайдом, по мере его продвижения каждой страницей. Наведение курсора на сайдбар дополнительно вызывает содержание текущей страницы:
Одним из ключевых пожеланий клиента был вау-эффект. И вместе нам удалось добиться впечатляющего результата — благодаря грамотному проектированию, плавной анимации и мегаполезным фичам. О них и поговорим.
Функциональность
Пользовательские сценарии сайта отличаются по своей функциональности и настроению. На странице, предназначенной инвесторам, мы встроили удобный онлайн-калькулятор, благодаря чему она выглядит серьёзной и прагматичной. Страница для покупателей акцентирует внимание на интерактивной карте и ярких видео с YouTube-канала компании (не говоря уже о целом комплексе послепродажных услуг). Наконец мы имеем сайт, где в противовес практичности и деловитости выступает волшебный вайб жизни на Северном Кипре. С одной стороны, сайт порождает доверие инвесторов, а с другой – интерес людей, желающих приобрести недвижимость.
Онлайн-калькулятор
На сайте компании по недвижимости важно не просто показать её преимущества, а доказать конкретную выгоду от сотрудничества, воплощенную в цифрах и фактах. В этом контексте мы разработали кастомный калькулятор для расчёта прибыли от инвестиций. Почему «кастомный»? А потому, что написанный согласно заказу клиента по его чёткому и нестандартному запросу.
Теперь в разделах сайта «Инвестиции» и «Проекты» потенциальные инвесторы могут не только быстро рассчитать прибыль от вложения средств в недвижимость, но и увидеть рост этой прибыли по графику через год, два, три… ну вы поняли.
YouTube
Интересно, что YouTube-канал стал главным лидогенератором нашего клиента. Поэтому для нас было очень важно интегрировать его на страницы сайта. Помимо этого, видео позволяет пользователям как можно лучше погрузиться в атмосферу жизни на острове, а команде Irindholding — продемонстрировать свою экспертность в сфере недвижимости.
Интеграция сайта с популярным видеохостингом была реализована через API проигрыватель iframe. Так, при разработке админки сайта бекендер предусмотрел поля для ввода ссылок, а фронтендер встроил iframe на видимой части сайта. Как это работает? Ссылка с бэкенда динамически поступает на интерфейс сайта, благодаря чему воспроизводится ролик с YouTube.
Добавить или изменить видео на сайте очень просто: клиенту нужно лишь зайти в админку сайта и вставить нужную ссылку в соответствующее поле конкретной веб-страницы:
Кастомная карта
Ещё одним воплощением наглядности и интерактива стала залипальная кастомная карта Северного Кипра. Чтобы «подсветить» районы острова и «вызвать» локации актуальных объектов недвижимости, достаточно просто навести на них курсор.
Как известно, сенсорный экран смартфонов и планшетов исключает возможность ховер-эффекта, поэтому карта в мобильной версии сайта содержит только локации актуальных объектов. Однако они интересны как с точки зрения анимации, потому что имеют эффект пульсации, так и с точки зрения разработки. Наш бекендер «пришпилил» их на карте по координатам в пикселях, отдельно для мобильной и десктопной версии.
Вёрстка сайта
Дизайн сайта со всеми его анимациями и функциями написан на языке Vue.js, а именно фреймворком Nuxt 3. В частности, для работы с бэкендом была использована технология useAsyncData, а для других задач были использованы некоторые плагины:
- Splide — для создания слайдеров,
- Chart.js — для визуализации графика прибыли в онлайн-калькуляторе,
- Vue screen — для отслеживания размеров экрана при работе с серверным рендерингом (SSR, или server-side rendering).
Во время вёрстки сайта фронтендеру помогли такие библиотеки:
- GSAP — для адаптивной и плавной анимации JavaScript,
- Pinia — для создания хранилища данных.
Интересной, сложной и небанальной задачей стала собственноручная разработка идеи поэкранного скролла без подключения сторонних библиотек:
Программинг сайта
Сайт был реализован благодаря гибкому, мощному и одновременно изящному PHP-фреймворку Laravel 10, в частности:
1) Разработана административная панель по шаблону дизайна Admin LTE.
2) Заложена мультиязычность и возможность легко редактировать контент страниц на английском и русском языках прямо с админки.
3) Обеспечена функция загрузки веб-страниц проектов и готовых объектов в виде PDF-документа, готового к печати и последующей передаче клиентам.
4) Интегрирована привычная для клиента amoCRM.
Развёртывание и запуск готового сайта на сервере выполнен с помощью технологии Docker.
Вывод
Команда Webnauts запустила очередной сайт по недвижимости, вычёркивая из ТЗ пункт за пунктом. Итак, мы:
- Определились со стратегией.
- Продумали логику работы интерфейса и спроектировали прототипы.
- Сверстали страницы и приправили их анимацией.
- Запрограммировали и интегрировали сайт с CRM.
- Наделили продукт мощным функционалом: двуязычность, онлайн-калькулятор, генератор PDF-документов, интерактивная карта и воспроизведение видео с YouTube.
В конечном итоге имеем сайт, работающий сразу на два фронта: в угоду инвесторам и покупателям. Он не только рассказывает о сложных вещах на простом языке, но и обеспечивает исключительный пользовательский опыт через наглядность и удобные инструменты.
Комментарии