For the marketing homepage, I wanted to create a cinematic feel by building in the page piece by piece.
1. The device edge is illuminated. Intrigue sets in. Is there something more?
2. Device body fades in at the same time as page title and navigation.
3. The page visitor now has more context about what the app is about, and through considered photography is encouraged to explore the page.
Producing lush imagery is wonderful, but too much of a good thing can mean the visitor is forced to wait for images to download and code to render.
In order to optimise page performance, I designed components to be reused and broke apart some images to apply different levels of compression.
A single background image is served for large screen shots.
A single device is served for both desktop and mobile contexts.
Working closely with the developer, we made sure this method worked no matter the browser width.