Процесс создания сайта жилого комплекса «Статус»
В первую очередь проводим ряд встреч с клиентом, выясняем цели и задачи будущего сайта. Для заказчика данный сайт должен стать одним из инструментов продаж. Поэтому нашей задачей являлось презентовать все преимущества и уникальность данного комплекса, организовать наглядный и
Начинаем с прототипа

Принимаем решение сделать этажи на главной странице кликабельными для быстрого перехода на страницу планировок.
Утверждаем с клиентом, вносим коррективы.
Теперь нужно продумать страницу с планировками. Появилась идея сделать схемы в аксонометрии. Ищем примеры в интернете, вдохновляемся:

Технологи матерят дизайнеров, но подтверждают возможность реализации.
Проектируем страницу.

Показываем клиенту динамическую страницу с рыбными планировками:

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

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

Утверждаем ракурс, моделим, рендерим, дорисовываем.
Основная цветовая гамма фирменного стиля ЖК «Статус» —
Отдаём результат дизайнеру — получаем первый макет:

Накидываем внутренние страницы.

Пока идёт работа над макетами сайта, начинаем моделить внутреннее пространство зданий.


Разглядывать коробки с голыми стенами оказалось скучным занятием, поэтому всем помещениям были придуманы интерьеры.
Расставляем мебель, подбираем материалы:


Так уютнее.
Время шло, здание росло…

Дизайнер показывает первую версию страницы планировок.

Придумываем переключатель этажей на странице:

Даём помощнику задание начертить планировки этажей строго по гайдам дизайнера.

Дублируем планировки для размещения на страницах сайта.

Оказывается, в клиентских чертежах появились изменения. Проверяем, вносим изменения в планы.

Эмоции прочь! Работаем в ночь.
Делаем шаблон ПДФки со схемой квартиры и на его основе подготавливаем остальные файлы для загрузки на сайт.

На очереди парковки.


Тем временем ребята собирают сайт.


Далее формируем массив с координатами векторных масок всех этажей для canvas.

Рисуем векторные маски, проверяем ход курсора по этажам, в зависимости от четного/нечетного этажа загружаем картинку с ховером этажа. С помощью всё той же маски на canvas обрезаем все ненужные этажи. Делаем для планшетов и смартфонов уменьшенные версии иллюстраций.
Верстаем страницу с планировками квартир.
Каждый этаж состоит из нескольких картинок: пустая основа и каждая квартира в отдельности. Все картинки квартир нужно спозиционировать относительно друг друга. Чтобы упростить этот процесс, пишем на JS админку для перетаскивания картинок прямо в браузере

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

По координатам из
Доделываем остальные страницы, тестируем, правим баги — готово.
Выражаем большую благодарность руководителю отдела продаж ЗАО СК «ГорСтрой» Ирине Созиновой и всей её команде: Александре Лозбиной, Наталье Лапиной и Яне Лугавцовой.