Coldy's N’ice Loft website
Creative design, animation and interactive mechanics for the website of a residential complex in Moscow
Nice Life is a apartment complex that combines life and sports.
The main page combines three key entities of Nice Loft: sports infrastructure, apartments and landscaping.
The key idea
At the analytics stage, it was necessary to structure a large amount of information in order to highlight the unique value proposition of the complex and wrap it in a visually dynamic story. For this purpose, the key meanings in positioning were identified, which cover the needs of the audience and allow the complex to stand out from other developers.
The key idea was formulated as follows: Nice Loft is a residential quarter for winners.
Design
In terms of design, the most interesting work was to implement a system of visual techniques that create a wow effect. So were implemented:
— A large render of the master plan with spans when clicking on the pin, which introduces the user to the infrastructure of the complex;
— A block with horizontal scrolling and a light parallax effect, visually referring to the metaphor of running and fixing the user’s attention on the unique sports infrastructure;
— A high render of the building with the main advantages of the apartments;
— Map with the location of the block and triple filtering on foot/by car/elevator.
Front-end
The main task of the front-end part of the project was to ensure smooth changeability of blocks. The source code of the page is written in TypeScript, SCSS and Pug using a component approach. After building the project using webpack, the /build folder was generated, which contains optimized HTML, JS and CSS files.
Result
Game mechanics in the form of animations and effects and a well-constructed narrative allowed us to reflect the expanded sports infrastructure and the victorious spirit of the residents of the complex. Bright accent colors and high grotesque preserve the sporty style of the site, and smooth animation and expressive three-dimensional renderings add image-making and emotionality to it.