Сайт N'ice Loft от Coldy

Креативный дизайн, анимация и интерактивные механики для сайта жилого комплекса в Москве

Nice Loft — комплекс, который объединяет жизнь и спорт.

Рассказываем, как нам удалось отразить энергичный характер московского жилого квартала в свежем дизайне главной страницы сайта.

Главная страница объединяет три ключевые сущности Nice Loft: спортивную инфраструктуру, апартаменты и благоустройство.

Ключевая идея

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

Ключевая идея была сформулирована следующим образом: Nice Loft — жилой квартал для победителей.

Дизайн

В части дизайна предстояла самая интересная работа — реализовать систему визуальных приемов, создающих wow-эффект. Так были реализованы:

— Крупный рендер генплана с пролетами при нажатии на пин, который знакомит пользователя с инфраструктурой комплекса;

— Блок с горизонтальным скроллом и легким эффектом параллакса, визуально отсылающий к метафоре бега и фиксирующий внимание пользователя на уникальной спортивной инфраструктуре;

— Высокий рендер здания с главными преимуществами апартаментов;

— Карта с расположением квартала и тройной фильтрацией пешком/на машине/лифт.

Фронт

Основная задача фронт-части проекта заключалась в том, чтобы обеспечить плавную сменяемость блоков. Исходный код страницы написан на TypeScript, SCSS и Pug с применением компонентного подхода. После сборки проекта с использованием webpack была сгенерирована папка /build, в которой находятся оптимизированные HTML, JS и CSS файлы.

Результат

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

Сookies

Продолжая использовать сайт, вы соглашаетесь с тем, что мы используем cookies