Остров X — премиальный во всех отношениях проект: архитектура, локация, инфраструктура. Глядя на него, трудно поверить, что это действительно жилой комплекс в центре Москвы, а не декорации для научной фантастики. Проектом занимается Донстрой, один из крупнейших девелоперов жилой недвижимости. Они обратились к нам за промо-сайтом, уже имея качественный бренд, айдентику, визуализации и другие материалы.
Такие вводные — отличный стимул создать что-то впечатляющее. Любая презентация в таких условиях будет выглядеть неплохо. Вызов в том, чтобы сделать не просто сайт на уровне продукта, а поразительный сайт, который вдохновляет пользователей, точно воплощает бренд и наполняет продукт дополнительной ценностью.
Кто мы?
Мы — Vide Infra, занимаемся дизайном и разработкой диджитал-продуктов, которые регулярно собирают награды. Делаем прорывные мобильные и веб-приложения, маркетплейсы и большие корпоративные сайты. Входим в топ-10 Рейтинга Рунета по креативности и топ-40 мирового рейтинга Awwwards. О наших проектах и новостях читайте на videinfra.ru
Задача
Одностраничный промо-сайт, как деловой костюм — даже самый простенький смотрится прилично. Но что, если продукт — исключительный, как “Остров Х”, Джеймс Бонд в мире жилой недвижимости? Какой костюм будет ему под стать?
Дело не в том, чтобы сайт не был похож на конкурентов (это просто побочный эффект), а в том, чтобы каждая деталь сообщала что-то о продукте. Чем точнее рассказ, тем уникальней он выглядит, а значит, прочнее эмоциональная связь с конечным потребителем. Поэтому здесь не обойтись без глубокого анализа бренда и коммуникативной стратегии.
Премиальные продукты нацелены на потребителей, стремящихся получить все самое лучшее. Они знают, что идеальный костюм не купить даже в самом дорогом бутике. Его шьют специально для вас, по индивидуально снятой мерке. И тогда он будет говорить за вас.
Стратегия
Флагманский проект Донстроя “Остров” включает десять кварталов бизнес- и премиум-класса. Он строится в Мневниковской пойме, необычной локации рядом с центром Москвы, окруженной рекой и природными парками. Самый дорогой квартал, десятый, состоит из двух столичных вилл с футуристичной архитектурой — это и есть “Остров Х”.
Х прежде всего означает “десять”, но вместе с тем ассоциируется с чем-то секретным, закрытым и таинственным, отмечает то самое место, доступное только избранным. X marks the spot. Кроме того, X используется как знак умножения, например в слогане “Статус Х Удовольствие”.
Емкий бренд помог нам определить ключевую идею. Просторные квартиры, новаторская архитектура, технологичная инфраструктура — это только атрибуты того, что желают клиенты “Остров Х”: лайфстайла, который кажется невозможным посреди Москвы.
Амбициозность и устремленность в будущее здесь сплетается с предельной приватностью, защищенностью и спокойствием. Резиденты столичных вилл, не покидая мегаполиса, живут в безмятежности секретного острова, закрытого клуба, заповедной зоны. Только им доступна эта роскошь: простая по форме, ценнейшая по сути. А первый шаг к ней — клик по ostrov-x.ru
Контент
Простота стала принципом сайта: одна страница, лаконичные тексты, крупные визуализации. Структуру выстроили так, чтобы четко обозначить главные преимущества, не перегружая подробностями. Рассказ о продуктах такого уровня, как “Остров Х”, нельзя переусложнять.
Дизайн
Сайт “Остров Х” напоминает фантастический командный пункт из шпионского фильма. Первый экран задает эмоциональный тон, а каждый следующий его только усиливает. Перед пользователями открывается панель управления собственным будущим, и они видят безупречность, уверенность, умиротворенность.
Будущее сверкает в тонких лучах, формирующих логотип. Мы дополнили и развили элементы айдентики “Остров Х”, чтобы интегрировать их в дизайн. Логотип ни разу не встречается на сайте как изолированная статичная картинка, а только как неотъемлемая часть интерфейса. Невозможно просто заменить его и получить сайт другого проекта.
Например, на первом экране логотип занимает всю высоту и реагирует на движения мыши, а скролл запускает анимацию, которая открывает окрыляющий вид на виллы. С первых секунд пользователь на ощупь знакомится со стилем “Остров X” — проглядеть его невозможно.
Элементы айдентики пронизывают весь сайт. Мы используем формы логотипа в меню и отдельных блоках — строим из характерных линий простые фигуры. Они выполняют сразу несколько функций:
- Разделяют блоки и расставляют акценты.
- Дополняют композиции, усиливают впечатление от рендеров.
- Закрепляют визуальные ассоциации с продуктом.
- В блоке об интерьерах — становится метафорой освещения.
Некоторые решения, связанные с айдентикой, не дошли до финальной версии по внешним причинам, хотя технических препятствий для их реализации не было.
Линии логотипа перекликаются с деталями зданий — крышами вилл. Эту связь можно усилить, построив из таких же линий более сложные анимированные фигуры, повторяющие элементы архитектуры и интерьеров. Динамические трехмерные формы, трансформирующиеся от блока к блоку, должны были стать вишенкой на торте.
UX и транзишены
Мы позаботились о ритме, с которым пользователь продвигается по сайту. Ключевой инструмент здесь — мастерски проработанные транзишены, то есть переходы между экранами.
Мы приложили много усилий, чтобы их отточить. Размеренный вертикальный скролл чередуем с зумом на карту, горизонтальными галереями и другими неожиданными транзишенами. Отчасти нам помогла библиотека Locomotive scroll, но ни одно готовое решение не давало нужной точности и плавности. С помощью параллакса, затухания и других эффектов мы добились, чтобы каждый переход соответствовал контенту.
Важно, чтобы анимация не перегружала сайт. Если он будет тормозить, то вся тонкая работа пропадет впустую. Мы несколько раз изменяли структуру фронтенда, пока не добились отличной производительности.
Результат — продвижение по сайту приносит тактильное удовольствие. Отзывчивый интерфейс приглашает изучать детали, возвращаться к ключевым элементам, таким как карта, и открывать новые преимущества “Остров X”. Пользователь воспринимает тщательную выкройку сайта и внимание к UX как залог безупречности жилого комплекса.
Звук
Саунд-эффекты на промо-сайте недвижимости — дерзкое решение, нарушающее негласные правила. Звуки могут раздражать и быть слишком навязчивыми, поэтому их используют с большой осторожностью. Но деликатный подход к аудио открывает новое измерение.
Мы добавили на некоторые страницы большие иконки с зацикленными видео. Если пользователь наводит на них курсор, то слышит обволакивающие саунд-эффекты, соответствующие экрану: пение птиц, шелест травы или журчание ручья — и сразу погружается в атмосферу уединенной сбалансированной жизни. Эти звуки приоткрывают завесу секретного острова, прокладывают еще один путь, который ведет к стойкому ощущению: “Остров Х” дарит жителям мегаполиса настоящую роскошь — приватность и спокойствие.
Непросто сделать выдающийся сайт для такого проекта, как “Остров Х”. Мы тщательно продумали каждый аспект, чтобы результат был действительно впечатляющим:
- Сформулировали концепцию и развернули ее в лаконичную структуру.
- Разработали дизайн, естественно развивающий айдентику бренда.
- Спроектировали превосходящий ожидания UX.
- Выбрали смелые, нестандартные решения для вовлечения пользователей.
Получился сайт, который восхищает технологичностью, роскошью и гармоничной эстетикой — именно таких ощущений пользователи будут ожидать от жизни на виллах «Остров Х».
У нас еще много впечатляющих кейсов — подпишитесь, чтобы не пропустить! Также следите за нами в Telegram-канале и на сайте Vide Infra.
На связи!
