Мобильная версия сайта ЖК “Мелодия леса”

Задача

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

Почему мобильная версия, а не адаптив?

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

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

Поэтому мы проделали полный цикл разработки:

Проектирование

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

Поэтому мы проделали полный цикл разработки:

Доработка функционала подбора квартир.

В мобильной версии подбирать квартиры на интерактивной схеме ЖК было бы очень неудобно - его убрали. Доработали функционал подбора квартиры по параметрам: появились новые фильтры по этажам, по наличию скидок, наличию отделки.

В данный блок выводятся все коруса, которые на данный момент в продаже. По
умолчанию активным является пункт "все". На данный момент в данном блоке выбран
корпус номер 5.

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

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

Дизайн

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

Палитра
Интерактивные элементы

Кнопки

Удобное построение маршрута для посетителей на автомобиле

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

Удобный просмотр динамики
строительсва за счет фильтра
по корпусам

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

jhgj

Простые коммуникации с застройщиком

Технологии

Верстка данного проекта была выполнена с использованием: css-препроцессора Less и Pjax — это jquery плагин, который использует pushState и ajax и предоставляет возможность грузить страницу не полностью при переходе по ссылкам, а частично, но с соответствующим заголовком страницы и возможностью возврата назад, большая часть сайта на проекте работает без перезагрузки, что сильно увеличивает скорость работы.


Дизайн-макеты были предоставлены в формате PSD и предварительно согласованы с заказчиком.

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

Для сборки проекта, использовался таск-менеджер Gulp.

В качестве системы контроля версий и совместной работы использовался Git.

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

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

30
рабочих
дней
(хх часов)
20
страниц
мобильной
версии сайта

Отзыв клиента о нашей работе

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

Имя Фамилия

Директор по маркетингу в компании ГК “САПСАН”

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

Хотите такой же сайт?

Заполните короткую форму и наш специалист свяжется с Вами.

Ваше имя

Телефон