
Сайт N'ice Loft от Coldy
Креативный дизайн, анимация и интерактивные механики для сайта жилого комплекса в Москве
Nice Loft — комплекс, который объединяет жизнь и спорт.

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

Дизайн
В части дизайна предстояла самая интересная работа — реализовать систему визуальных приемов, создающих wow-эффект. Так были реализованы:
— Крупный рендер генплана с пролетами при нажатии на пин, который знакомит пользователя с инфраструктурой комплекса;
— Блок с горизонтальным скроллом и легким эффектом параллакса, визуально отсылающий к метафоре бега и фиксирующий внимание пользователя на уникальной спортивной инфраструктуре;
— Высокий рендер здания с главными преимуществами апартаментов;
— Карта с расположением квартала и тройной фильтрацией пешком/на машине/лифт.




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

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