Азбука Девелопмент | UI Библиотека

Ваня Аверьянов

Работы

Контакты

Работы

Контакты

Проектирование интерфейсов и UI-библиотеки для платформы недвижимости

ЧТО ДЕЛАЛ

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

Посмотреть макеты
и компоненты

Figma

АЗБУКА ДЕВЕЛОПМЕНТ

ЗАДАЧА

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

UI-Библиотека

Для ускорения работы над проектом и консистентности была собрана библиотека компонентов и шаблонов

15+ базовых компонентов

8+ продуктовых компонентов

6 сценариев фильтрации

Responsive-ready

Примеры базовых компонентов

Показаны сокращенные версии, полные можно найти в фигма-файле

ПРОРАБОТКА КОМПОНЕНТА

Для сложных сценариев использовались компоненты с настраиваемыми свойствами, состояниями и вложенными инстансами

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

Компоненты предметной области

Вместо отдельных экранных решений использовались переиспользуемые компоненты с разными сценариями применения

Система фильтрации для разных типов объектов

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

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

КВАРТИРЫ

Основной фильтр каталога: проект, комнатность, цена, площадь и дополнительные параметры

ПАРКИНГИ

Фильтр для подбора машиномест: проект, срок сдачи, стоимость, площадь и тип места

Интерфейсы

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

ПОИСК КВАРТИРЫ

Основной сценарий поиска квартиры: пользователь может просматривать объекты списком, переключаться в шахматку, выбирать проект и видеть пустое состояние при неподходящих параметрах фильтра

СТРАНИЦА ОБЪЕКТА

Страница объекта собирает ключевую информацию о квартире: стоимость, планировку, характеристики, условия покупки и действия пользователя

СРАВНЕНИЕ

Для сценария выбора между несколькими объектами был спроектирован flow избранного и сравнения квартир с возможностью закреплять объект для сопоставления параметров

Аудит реализации

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

Фрагмент таблицы аудита: расхождения фиксировались с описанием, ссылкой на скриншот, платформой и статусом

ИТОГ

Для проекта была собрана UI-библиотека, спроектированы ключевые сценарии каталога недвижимости, подготовлены адаптивные интерфейсы и проведён аудит реализации

Сайт находится на этапе разработки, но его уже можно посетить

Азбука

Будем

на связи

Instagram

E-mail