UX/UI — Докучаев Константин,
Гусенко Алексей
Uralmedias, 2020
МБФ
&Синай-групп
Группа компаний застройщиков в Магнитогорске.
- Исследование
- Проектирование
- Дизайн
Рендеры: ALASI/Синай
Презентация дизайна
Задача:
Разработать структуру сайта и сделать полноценный сервис для подбора квартиры, дома и участка.
Инструменты
- Figma
- Xmind
- Design thinking
О заказчике
ООО «Синай» образовано в ноябре 2007 года, выполняет функции инвестора, строительного подрядчика, проектировщика, заказчика-застройщика, технического заказчика и девелопера. «Синай» реализует квартиры, индивидуальные дома и земельные участки. Благодаря тому, что застройщик является частью группы организаций, которые производят железобетонные конструкции и осуществляют добычу нерудных полезных ископаемых, «Синай» обеспечивает качество и надежность продаваемого жилья.
Упрощенная структура проекта
Главная
- Проекты
- Вторичное жилье
- Ход строительства
- Способы оплаты
- О компании
- Новости
- Контакты
С помощью Xmind и сведений со стороны заказчика, мы собрали полную структуру проекта. Согласовав, приступили к прототипу.
Полная структура для самых любознательных
Прототипирование
для сложных страниц проекта
Поиск и создание концепции
Первый вариант
Второй вариант
Третий вариант
Итог
Утвержден первый вариант концепции.
Реализуем остальные страницы.
Подготовка
Определили сетку в 1200рх, собрали все шрифты и цвета
в стили, задали систему глобальных отступов.
20px
Header
Inter - 50px, line-height 108%, letter spacing 1px
Header 1
Inter - 40px, line-height 120%, letter spacing 1px
Header 2
Inter - 30px, line-height 108%, letter spacing 1px
Header 3
Inter - 30px, line-height 108%, letter spacing 1px
Header 3
Inter - 26px, line-height 108%, letter spacing 1px
Header 4
Description
Inter - 20px, line-height 130%
Description 1
Inter - 18px, line-height 160%, letter spacing 0.3px
Description 1
Inter - 16px, line-height 160%, letter spacing 0.3px
Description 1
Inter - 12px, line-height 160%, letter spacing 0.3px
Description 1
Реализация
Карточка объекта
Фильтр квартир
Внутренняя карточка квартиры
для сложных страниц проекта
Проекты
Фильтр квартир
Этажи планировка
Внутренняя карточка квартиры
Адаптив
Сбор других версий делался под два разрешения:
смартфоны и планшеты.
320/768рх
Заключительный этап
Подготавливаем UI-кит для разработчика.
Оформление сообщества
Помимо сайта для застройщика, еще был запрос на дизайн соц.сетей для самого ГК «Синай».
