Сайт для девелоперской компании АСПЭК-Домстрой

Сайт как экосистема

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

Дизайн и фирменный стиль

Дизайн сайта мы задумали минималистичным. Он основан на простых и лаконичных формах. В дизайне использовали корпоративные цвета и шрифты компании. Это решение помогло создать атмосферу порядка, все детали на своем месте.

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

Значительно доработали техническое задание клиента, а всю необходимую визуальную документацию подготовили в UI-kit — руководство пользования стилями и анимацией.

Стэк технологий

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

Фронтенд решили построить на React.js + Nuxt.js. Скорость работы интерфейса значительно быстрее, чем на аналогичных платформах. Фреймворк позволил оптимизировать калькулятор и карты, а также увеличить скорость загрузки. Для бэкенда использовали стек Python + Django. Фреймворк позволил собрать максимально гибкую и удобную административную панель для комфортной работы контент-менеджера.

Интерактивный генплан проекта

Это один из самых сложных и важных модулей сайта. Генплан состоит из нескольких уровней глубины визуализации карты проекта: квартал, дом, секция, этаж. Посетитель наглядно видит на карте все детали застройки. Может легко понять где и как располагается объект. Кликнув на интерактивные элементы он выбрает дом, секцию и этаж, а затем из генплана мы ведем его в квартиру.

Проработали 32 ключевых страницы

В этом проекте мы отрисовали много типовых страниц. Перечислим самые важные: калькулятор подбора недвижимости (параметрический фильтр), выбор объекта на генплане, способы покупки, ипотечный калькулятор, компания, новости.

Ключевые модули и фильтры проектов застройщика: расположение кварталов, домов и квартир на карте/генплане, блок инфраструктуры объекта, добавление в избранное и сравнение квартир, коммерческой недвижимости, паркинга, кладовых. Технические страницы: доска компонентов, UI-kit (руководство), формы обратной связи, страница 404, политика, куки.

Фильтр подбора недвижимости и калькулятор

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

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

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

Адаптировали сайт для мобильных устройств

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

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

Сайт dom.aspec.ru