Сайт для «Самолёт ЛО»: взлетаем с «Айтроником»

10 октября 2017 → Для застройщиков, Веб-разработка, Корпоративные сайты

Несмотря на сильную туманность, «Самолёт ЛО» удачно приземлился на северо-западную землю. Мы внимательно следили за успехами компании, ещё когда она начинала работать в столице. И, конечно, хотели поработать с ней, когда она стартовала с проектом «Мурино 2017» в Ленобласти.

murino2019.com

Сайт для «Самолёт ЛО»: взлетаем с «Айтроником» - 1

Тендер

Летом 2017-го компания готовила к выводу на рынок свой второй жилой комплекс в Ленобласти, «Мурино 2019». Каков главный способ презентовать новостройку? Всё верно, сделать сайт.

Мы поймали удачный момент. «Самолёт» давно знал нас как мастеров своего дела и... пригласил поучаствовать в тендере на разработку сайта. Звёзды так сошлись, что тендер мы выиграли.

Летучка

Сразу после объявления победителя наши партнёры захотели встретиться с нами лично. Уже на нулевом этапе мы поняли, что они, как и мы, очень ориентированы на результат.

Встреча прошла продуктивно. Мы обсудили:

скетчи (наброски) клиента, на которых он показал, что хочет видеть на сайте;
сайты с любопытными идеями дизайна и анимации.

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

План

Последовательность шагов мало чем отличалась от той, которой мы обычно придерживаемся: 1) создание прототипа; 2) разработка структуры сайта; 3) дизайн; 4) верстка.

Прототип

Сначала создали прототип на основе скетча:

Сайт для «Самолёт ЛО»: взлетаем с «Айтроником» - 2

Структура сайта

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

Как учесть предпочтения всех пользователей? Чтобы решить этот вопрос мы разработали страницу поиска квартир с переключателем «По параметрам» и «Поиск на 3D-плане»: пользователь может искать квартиру по параметрам или на визуальном плане.

Пообщавшись с клиентом, узнав подробнее, какие квартиры строятся в «Самолете ЛО», мы решили дать пользователю больше возможностей для выбора квартир, чем просто искать по цене и площади. Кому-то хочется квартиру с большой кухней, для кого-то важен балкон, а кто-то мечтает о раздельном санузле. Мы добавили дополнительные параметры, чтобы любой мог найти квартиру по душе. Итог: создали 2 способа поиска — на любой вкус.

Сайт для «Самолёт ЛО»: взлетаем с «Айтроником» - 3

Дизайн

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

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

Верстка

Еще одна фишка сайта — анимация. Мало клиентов хотят добавить такую фичу на свой сайт. Но «Самолет ЛО» — прогрессивная компания, и запросы у них соответствующие. Задача стояла простая: больше анимации. Наши партнеры присылали примеры. Много примеров. Из них мы взяли самое интересное и вот что вышло:

Переключатель слайдера на главной и карточке ЖК по мере загрузки рендера постепенно становится голубым: murino2019.com/objects/murino_2019
Анимация при наведении на блоки преимуществ на главной странице: наводим на блок, меняется фон, появляется текст. Просто и интересно. murino2019.com
Новости: при наведении на новость показывается фото. Без наведения — превью новости: murino2019.com/about/news
Акции: при наведении на акцию появляется форма обратного звонка. Без наведения — условия акции: murino2019.com/actions

Итоги

Спустя 4 месяца плотной работы сайт был запущен. Таков главный итог.

Наши партнёры сказали, что нам удалось почувствовать их. Мы оправдали доверие, хотя вначале немного нервничали. Ещё предстоят доработки по сайту, но свою основную задачу – привлечение потенциальных покупателей – он уже выполняет.

Мы вдруг задумались вот над чем. В одном из бурных обсуждений кто-то из команды застройщика предложил для страницы 404 нарисовать «толстого гуся, который не может взлететь». Может, оно и к лучшему, что мы вместе отказались от этой затеи? Вдруг страницы сайта не взлетели бы?