Scroll Down to Discover More

Landing Page Promoting an Overseas Property Development

Les Terrasses de la vanoise is a ski property complex in the Champagny-en-Vanoise resort, in the French Alps.

Complete Digital were tasked with creating a landing page as supporting social media campaign to promote the development. My role was to design the landing page and create the promotional banner ads.

The brief was to create a mobile optimised fresh contemporary design to highlight the features of the apartments and the advantages of the area.

Website screen capture showing main ad with menu overlayed Website screen capture showing main ad with menu overlayed

Hero section

Design Goals

The main goal was to create a site that enabled users to get a quicker overview of the development and area on mobile. This involved recreating complex imagry that was used in print brochures with simpler responsive imagery and text. For example label overlays was replaced with numbered marker images. A mobile responsive key to the numbers was then displayed next to the artwork. Media queries were used to make sure the key and related image could be viewd on mobile devices.

The UI was designed in Adobe XD, then Bootstrap 4 was used as the front end framework to create a prototype design. This prototype was then evolved iteratively until a final design was developed.

Website screen capture showing main ad with menu overlayed Website screen capture showing main ad with menu overlayed

Apartment floor plan with markers and responsive key

Website screen capture showing main ad with menu overlayed Website screen capture showing main ad with menu overlayed

Village with markers and responsive key

Design

The core look and feel and layout of the UI was designed in Adobe XD on the Bootstrap 4 grid system. Bootstrap 4 was then useused as the front end framework to create the first initial of the design. This initial version then quickly evolved iteratively as a result of stakeholder feedback until a final design was developed.

infographic of design process

Design process Adobe XD, Bootstrap

Animation

There is a subtle CSS animation applied to the text blocks which is triggered as they appear in the viewport. This is done via the scrollreveal JS library.A background image 'Ken Burns style' paning effect was created by applying paning to the animation property to the hero section background image.

GDN Ads

As well as the design and development of the landing page I was also responsible for creating the suite o Google Display Network ads, for the paid media campaign. Google Web Designer was used to create the animated ( AMP ) versions of the ads. Note: you might need to refresh your page to see the animated banner ad animate.

infographic of design process

GDN Ad static

GDN Ad AMP Animated