Процесс создания сайта жилого комплекса «Статус»
В первую очередь проводим ряд встреч с клиентом, выясняем цели и задачи будущего сайта. Для заказчика данный сайт должен стать одним из инструментов продаж. Поэтому нашей задачей являлось презентовать все преимущества и уникальность данного комплекса, организовать наглядный и интуитивно-понятный диалог посетителей с сайтом.
Начинаем с прототипа промо-страницы. Берём у клиента модель здания, делаем грубый рендер для прототипа и саму страницу:
Принимаем решение сделать этажи на главной странице кликабельными для быстрого перехода на страницу планировок.
Утверждаем с клиентом, вносим коррективы.
Теперь нужно продумать страницу с планировками. Появилась идея сделать схемы в аксонометрии. Ищем примеры в интернете, вдохновляемся:
Технологи матерят дизайнеров, но подтверждают возможность реализации.
Проектируем страницу.
Показываем клиенту динамическую страницу с рыбными планировками:
Такую схему будет интересно изучать. Также мы предположили, что планы хорошо сориентируют пользователя о положении каждой квартиры относительно всего комплекса и помогут сравнить квартиры друг с другом.
Клиенту всё нравится.
Делаем схемы остальных страниц.
Делаем модель здания для главной страницы.
Клиент предоставил готовую модель комплекса, нам осталось внести некоторые правки, настроить свет и материалы.
Утверждаем ракурс, моделим, рендерим, дорисовываем.
Основная цветовая гамма фирменного стиля ЖК «Статус» — насыщенно-синяя. Поэтому изображаем на иллюстрации восход и приближаем гамму к фирменным оттенкам.
Отдаём результат дизайнеру — получаем первый макет:
Накидываем внутренние страницы.
Пока идёт работа над макетами сайта, начинаем моделить внутреннее пространство зданий.
Разглядывать коробки с голыми стенами оказалось скучным занятием, поэтому всем помещениям были придуманы интерьеры.
Расставляем мебель, подбираем материалы:.
Так уютнее.
Время шло, здание росло...
Дизайнер показывает первую версию страницы планировок.
Придумываем переключатель этажей на странице:
Даём помощнику задание начертить планировки этажей строго по гайдам дизайнера.
Дублируем планировки для размещения на страницах сайта.
Оказывается, в клиентских чертежах появились изменения. Проверяем, вносим изменения в планы.
Эмоции прочь! Работаем в ночь.
Делаем шаблон ПДФки со схемой квартиры и на его основе подготавливаем остальные файлы для загрузки на сайт.
На очереди парковки.
Тем временем ребята собирают сайт.
Ховер-эффект подсветки окон решаем сделать с помощью векторных масок на canvas. Нарезаем три картинки: здание с выключеными этажами, здание со включенными чётными и со включенными нечетными этажами. Это потребовалось для того, чтобы не пересекались освещённые области в окнах на соседних этажах.
Далее формируем массив с координатами векторных масок всех этажей для canvas.
Рисуем векторные маски, проверяем ход курсора по этажам, в зависимости от четного/нечетного этажа загружаем картинку с ховером этажа. С помощью всё той же маски на canvas обрезаем все ненужные этажи. Делаем для планшетов и смартфонов уменьшенные версии иллюстраций.
Верстаем страницу с планировками квартир.
Каждый этаж состоит из нескольких картинок: пустая основа и каждая квартира в отдельности. Все картинки квартир нужно спозиционировать относительно друг друга. Чтобы упростить этот процесс, пишем на JS админку для перетаскивания картинок прямо в браузере drag-n-drop`ом и вбиваем координаты картинок в базу.
Страницы получились тяжелые, поэтому просим дизайнеров нарисовать векторные прелоадеры.
По координатам из svg-файла рисуем прелоадер на canvas.
Доделываем остальные страницы, тестируем, правим баги — готово.
Выражаем большую благодарность руководителю отдела продаж ЗАО СК «ГорСтрой» Ирине Созиновой и всей её команде: Александре Лозбиной, Наталье Лапиной и Яне Лугавцовой.