Процесс создания сайта жилого комплекса «Статус»

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

Начинаем с прототипа промо-страницы. Берём у клиента модель здания, делаем грубый рендер для прототипа и саму страницу:

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

Утверждаем с клиентом, вносим коррективы.

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

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

Проектируем страницу.

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

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

Клиенту всё нравится.

Делаем схемы остальных страниц.

Делаем модель здания для главной страницы.

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

Утверждаем ракурс, моделим, рендерим, дорисовываем.

Основная цветовая гамма фирменного стиля ЖК «Статус» — насыщенно-синяя. Поэтому изображаем на иллюстрации восход и приближаем гамму к фирменным оттенкам.

Отдаём результат дизайнеру — получаем первый макет:

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

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

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

Расставляем мебель, подбираем материалы:

Так уютнее.

Время шло, здание росло…

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

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

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

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

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

Эмоции прочь! Работаем в ночь.

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

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

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

Ховер-эффект подсветки окон решаем сделать с помощью векторных масок на canvas. Нарезаем три картинки: здание с выключеными этажами, здание со включенными чётными и со включенными нечетными этажами. Это потребовалось для того, чтобы не пересекались освещённые области в окнах на соседних этажах.

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

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

Верстаем страницу с планировками квартир.

Каждый этаж состоит из нескольких картинок: пустая основа и каждая квартира в отдельности. Все картинки квартир нужно спозиционировать относительно друг друга. Чтобы упростить этот процесс, пишем на JS админку для перетаскивания картинок прямо в браузере drag-n-drop`ом и вбиваем координаты картинок в базу.

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

По координатам из svg-файла рисуем прелоадер на canvas.

Доделываем остальные страницы, тестируем, правим баги — готово.

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