UX/UI — Докучаев Константин,
Гусенко Алексей
Uralmedias, 2020
МБФ
&Синай-групп
Группа компаний застройщиков в Магнитогорске.
- Исследование
- Проектирование
- Дизайн
Рендеры: ALASI/Синай
Презентация дизайна
Задача:
Разработать структуру сайта и сделать полноценный сервис для подбора квартиры, дома и участка.
Инструменты
- Figma
- Xmind
- Design thinking
О заказчике
ООО «Синай» образовано в ноябре 2007 года, выполняет функции инвестора, строительного подрядчика, проектировщика, заказчика-застройщика, технического заказчика и девелопера. «Синай» реализует квартиры, индивидуальные дома и земельные участки. Благодаря тому, что застройщик является частью группы организаций, которые производят железобетонные конструкции и осуществляют добычу нерудных полезных ископаемых, «Синай» обеспечивает качество и надежность продаваемого жилья.
![Дом](/local/templates/um_new/img/case/mbf/house.webp)
Упрощенная структура проекта
Главная
- Проекты
- Вторичное жилье
- Ход строительства
- Способы оплаты
- О компании
- Новости
- Контакты
С помощью Xmind и сведений со стороны заказчика, мы собрали полную структуру проекта. Согласовав, приступили к прототипу.
Полная структура для самых любознательных
Прототипирование
для сложных страниц проекта
![Синай1](/local/templates/um_new/img/case/mbf/img-left.png)
![Синай2](/local/templates/um_new/img/case/mbf/img-2-1.png)
![Синай3](/local/templates/um_new/img/case/mbf/img-2-2.png)
![Синай4](/local/templates/um_new/img/case/mbf/img-2-3.png)
![Синай4](/local/templates/um_new/img/case/mbf/img-2-4.png)
![Синай5](/local/templates/um_new/img/case/mbf/img-3-1.png)
![Синай6](/local/templates/um_new/img/case/mbf/img-3-2.png)
![Синай7](/local/templates/um_new/img/case/mbf/img-3-3.png)
Поиск и создание концепции
Первый вариант
![Синай11](/local/templates/um_new/img/case/mbf/search-1-mobile.png)
![Синай12](/local/templates/um_new/img/case/mbf/search-2.png)
Второй вариант
![Синай13](/local/templates/um_new/img/case/mbf/search-1-mobile.png)
![Синай14](/local/templates/um_new/img/case/mbf/search-2-2.png)
Третий вариант
![Синай15](/local/templates/um_new/img/case/mbf/search-1-mobile.png)
![Синай16](/local/templates/um_new/img/case/mbf/search-3-2.png)
Итог
Утвержден первый вариант концепции.
Реализуем остальные страницы.
![Синай17](/local/templates/um_new/img/case/mbf/img-bord.png)
Подготовка
Определили сетку в 1200рх, собрали все шрифты и цвета
в стили, задали систему глобальных отступов.
20px
![Синай18](/local/templates/um_new/img/case/mbf/yellow-mobile.png)
![Синай19](/local/templates/um_new/img/case/mbf/columns.png)
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
Реализация
Карточка объекта
![Синай20](/local/templates/um_new/img/case/mbf/rlz-img1.png)
Фильтр квартир
![Синай21](/local/templates/um_new/img/case/mbf/rlz-img4.png)
Внутренняя карточка квартиры
![Синай22](/local/templates/um_new/img/case/mbf/rlz-img6.png)
для сложных страниц проекта
Проекты
![Синай23](/local/templates/um_new/img/case/mbf/rlz-img2.png)
Фильтр квартир
![Синай24](/local/templates/um_new/img/case/mbf/rlz-img3.png)
Этажи планировка
![Синай25](/local/templates/um_new/img/case/mbf/rlz-img5.png)
Внутренняя карточка квартиры
![Синай26](/local/templates/um_new/img/case/mbf/rlz-img7.png)
![Синай27](/local/templates/um_new/img/case/mbf/rlz-img8.png)
![Синай28](/local/templates/um_new/img/case/mbf/rlz-img9.png)
Адаптив
Сбор других версий делался под два разрешения:
смартфоны и планшеты.
320/768рх
![Синай32](/local/templates/um_new/img/case/mbf/phone1.png)
![Синай33](/local/templates/um_new/img/case/mbf/phone1-2.png)
![Синай34](/local/templates/um_new/img/case/mbf/phone2-1.png)
![Синай35](/local/templates/um_new/img/case/mbf/phone2-2.png)
![Синай36](/local/templates/um_new/img/case/mbf/phone3-1.png)
![Синай37](/local/templates/um_new/img/case/mbf/phone3-2.png)
Заключительный этап
Подготавливаем UI-кит для разработчика.
![Синай38](/local/templates/um_new/img/case/mbf/big-desktop.png)
![Синай39](/local/templates/um_new/img/case/mbf/big.png)
Оформление сообщества
Помимо сайта для застройщика, еще был запрос на дизайн соц.сетей для самого ГК «Синай».
![Синай40](/local/templates/um_new/img/case/mbf/small-1.png)
![Синай41](/local/templates/um_new/img/case/mbf/small-2.png)
![Синай42](/local/templates/um_new/img/case/mbf/small-3.png)
![Синай43](/local/templates/um_new/img/case/mbf/small-4.png)
![Синай44](/local/templates/um_new/img/case/mbf/small-5.png)
![Синай45](/local/templates/um_new/img/case/mbf/small-6.png)
![Синай46](/local/templates/um_new/img/case/mbf/small-7.png)
![Синай47](/local/templates/um_new/img/case/mbf/vk.png)