Сайт для офисов ООО «Мосэнка»

ООО «Мосэнка» появилось в 1991 году довольно оригинальным образом: правительство Москвы и турецкая строительная компания Enka объединились, чтобы строить больше офисных помещений — на них в начале 90х как раз спрос попёр. В результате сотрудничества получилось пять симпотяжных зданий в центре Москвы. Это не футуристичные сплетения стекла и металла, а уютные здания на Садовом кольце с зеленью и птичками.

Задачи

1. Сделать красивый и статусный сайт-презентацию. 
2. Рассказать потенциальным арендаторам про свободные помещения и бизнес-центры в целом. 
3. Показать здания так, чтобы потенциальные арендодатели хотели работать только в них.

Дизайн

Изначальная концепция, которую мы предложили заказчику — сайт с промо-блоком, в который входят фотография здания и карта города, а ниже — кнопки CTA, тексты и преимущества. Всё это дело, конечно, нужно скроллить. Но заказчик видел свой сайт иначе — красивые фотографии бизнес-центров, анимация, и чтобы всё помещалось на одном экране.

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

В итоге на главной осталась краткая информация о зданиях, контакты арендодателя и горизонтальное навигационное меню внизу экрана. И на фоне — большие анимированные фотографии Мосэнок. Здания как бы наезжают (в самом прямом и добром значении) на пользователя, а за ними летят облака, качаются деревья, уплывают вдаль столбы. Красота!

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

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

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

Самой лаконичной и при этом залипательной получилась 404 страница. Она — сосредоточение дзена. На ней тишина, спокойствие, облачка плывут, солнышко светит.

Разработка

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

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

Так как «Мосэнка» — компания интернациональная, и некоторые её клиенты на русском не говорят, мы сделали английскую версию сайта.