Сайт апартаментов: квартира у моря в несколько кликов
Сайт жилого комплекса апартаментов у моря: десктопная, планшетная и мобильная версии на десятках экранов. Проект делала студия MOSCOWEB — я вёл UX и интерфейсы под руководством арт-директора: от сценариев подбора квартиры до анимаций и адаптива.
Задача
Апартаменты у моря покупают сердцем: важны вид из окна, этаж, близость к пляжу. Таблица с площадями и ценами этого не передаёт. Нужно было сделать подбор, в котором человек идёт от общего к частному — от комплекса к конкретной квартире — и ни на одном шаге не теряется.
При этом часть покупателей точно знает, что ищет, — им нужен быстрый путь через фильтры.
Покупатель должен найти свою квартиру так же, как выбирал бы её вживую — глазами
Визуальный подбор
Основной сценарий построен как путешествие по комплексу:
- Корпус: ночной рендер комплекса, где каждый корпус — кликабельная зона.
- Этаж: фасад корпуса с подсветкой этажей — наводишь и сразу видишь, какой выбираешь.
- Квартира: план этажа с метками планировок, большая цифра этажа и быстрый переход между соседними этажами.
Номер этажа — главный ориентир на экране: соседние этажи видны над и под ним, переключаются скроллом.
Подбор по параметрам
Для тех, кто знает, что ищет: комнаты, площадь, цена, корпус, этаж, пентхаус или вид на море. Результат — сразу планировки с ценой и расположением, без лишних переходов.
Два входа в подбор: глазами и фильтрами — каждый находит свой
Страница квартиры
Планировка с ориентацией по сторонам света и подписью, где двор, а где море, ключевые характеристики и заявка в одном экране. Ниже — то, ради чего покупают апартаменты: море в шаговой доступности, интерьеры, похожие планировки и ход строительства.
При наведении схема квартиры превращается в планировку с мебелью — сразу понятно, как в ней жить.
Анимации
Каждый шаг подбора я продумал вместе с движением: корпус подсвечивается при наведении и подсказывает, что будет дальше, схема планировки оживает и превращается в квартиру с мебелью, а на телефоне этаж выбирается касанием по подсвеченному фасаду. Для десктопа — кастомный курсор, который меняется над интерактивными зонами.
Анимации ведут по шагам: подсвечивают, подсказывают, показывают, что дальше
Выбор корпуса: при наведении корпус подсвечивается, подсказка ведёт к выбору этажа.
Подбор по параметрам: наведение на планировку показывает её с мебелью.
На телефоне план этажа листается горизонтально, а сам этаж выбирается касанием по фасаду: этажи подсвечиваются, подсказка объясняет, где апартаменты, а где пентхаусы.
Адаптив
Каждый экран я проработал в трёх версиях: десктоп, планшет и телефон. На мобильных подсказки ведут по шагам — «выбирайте этаж по клику на него», «выбирайте планировку».
На телефоне подбор работает так же, как на десктопе — только под палец
Результат
➀ Два сценария подбора: визуальный и по параметрам
➁ Путь от комплекса до конкретной квартиры — в несколько кликов
➂ Больше 100 экранов в трёх версиях: десктоп, планшет, телефон
➃ Анимации и кастомный курсор, которые поддерживают премиальный образ проекта