Новый спутник — это престижный коттеджный поселок в Барнауле.
Как привлечь внимание к строительному бизнесу — сайт «Нового спутника»
Новый спутник — это престижный коттеджный поселок в Барнауле.

Поселок строится (можно следить за прогрессом на Яндекс-карте), коммуникации прокладываются, улицам розданы мимимишные названия «Черничная», «Имбирная», «Вишневая» и так далее — и нужно готовиться предстать перед общественностью. Так сказать, начать строить паблик рилейшенз.

Задача

Сайт ориентирован на покупателей, его задача, строго говоря, показать «товар» и получить заявки.

Решение

Предварительный этап проводим по знакомой схеме: переговоры > moodboard > фиксация идей в майндмэпе > брейншторм.

Обсуждаем мудборд, сходимся с заказчиком на картинке со спутниковой съемкой — решаем эксплуатировать метафору на сайте.

Брейнштормим. Арт-директор предлагает сделать многослойную схему поселка с блекджеком и анимацией — чтобы на каждый слой можно было кликнуть и посмотреть карту, фото домов и схему коммуникаций.

На скетче набрасываем примерную структуру главной страницы. Показываем. Переходим к дизайну.

Катерина
Андрей Веб-дизайнер

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

Главная страница и тот самый «слоеный пирог»:

Каждый слой нашего парящего острова будет анимирован на этапе кода, а пока переходим к внутренним страницам. Главная идет в верстку — чтобы не терять время зря.

Иван
Иван Руководитель отдела программирования

Немного внутренней кухни. Плывущие облака — это два блока с кусками текстуры, сдвиг идет через изменение отступа через css (свойство transition, используемое для задания анимации). Cлои земли — без всякой магии, просто блоки, анимация — опять же через css-transitions. Еще есть фигурные активные области у блоков, внизу по форме шестиугольника. А игрушка в подвале — это canvas+js+куча вдохновения от чтения блогов инди-разработчиков игр.

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

Делаем галерею:

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

И на сладкое — еще одна небольшая фишка.

Бонус: мини-игра

Особенно внимательные могут найти на сайте наш логотип, кликнуть и попробовать побить рекорд. Почти как Flappy Bird, только монитор в стену не швыряйте.