DIGITAL DISPLAY

ENTERTAINMENT

Deepscreen web page takeover: Immersive 3D experiences for online advertising

Marcus Vaughan

10 minutes

Company

Mail Metro Media

Responsibilities

Mockups and animation

Project length

1 month

ANIMATION CASE STUDY

Deepscreen for desktop

PixelDojo was approached by Mail Metro Media to find ways to bring more immersion into their homepage takeovers. Our proposed Deepscreen solution gives the illusion of 3D in the browser window bringing life to otherwise flat webpages.

Mail Metro Media have a variety of homepage takeover formats that are used to promote advertisers brands. None, however, are as impactful, eyecatching and memorable as this new Deepscreen format.

Photo courtesy of Ocean DeepScreen

In a rush?

Go straight to the designs.

View designs

DISCOVERY

The problem

Mail Metro Media needed a new page takeover format with ultimate wow factor that could be sold to its premium brand advertisers.

‘How might Mail Metro Media create a new page takeover format to appeal to its premium brand advertisers leading to an increase in sales and wowing mail readers.’

DISCOVERY

Project goals

The purpose of this project is to create an immersive 3D desktop page takeover which will be memorable with users leading to higher dwell times, clickthroughs and brand awareness.

‘Create a new digital display page takeover format that can be used to sell directly to premium advertisers with a promise of higher dwell times and clickthroughs than standard formats.’

DISCOVERY

Project scope

Design and animate a series of 3D ads using inspiration from the Ocean DeepScreen format used in digital out-of-home advertising.

Provide test animation for feasibility.

Provide mockups of initial ideas.

Provide high-fidelity storyboards.

Provide fully animated page takeover consisting of skins, billboard, MPU and sticky banner for mobile.

Show how this format may be repurposed for other advertisers.

DISCOVERY

Test animation

PixelDojo provided a test render to see whether the idea of immersive 3D was feasible and could be transferred to webpages. We chose to use a rotating shoe within a box to give the page depth and perspective.

The reflections in the metallic box added to the feeling of depth as did the shadows behind the shoe.

Visual design

When starting the project’s visual design we look at the client's brand. For this project we were asked to use Disney+ which is a client of Mail Metro Media to whom this new page takeover format could be pitched.

VISUAL DESIGN

Examining the client's brand

The brand direction is important in determining how users feel when they view the display ads and will also help us with image selection, colour palette, font choice and animation style.

Initial ideas and storyboards

We presented our initial ideas and when the creative direction was decided upon we designed high fidelity storyboards.

Our process:

Discovery - Understand the client's problem.
Project requirements - Define project deliverables.
Test render - Determine feasibility of idea.
Visual design - Show initial ideas and design storyboards.

Initial ideas

Page takeovers consist of billboard and skin elements, the remaining parts of the page are reserved for editorial page content.

With this is mind, we added branded video content to the left and right margin skins and to the center billboard area where most of the primary animation would take place.

The box would be the focal point of the page and provide the illusion of 3D depth on the page.

Our first idea was to use a filmstrip and spin this in 3D space.

Our second idea was to use a mobile phone and animate this within the box. We added textures and strip lights to really sell the feeling of depth as the phone moved within it.

We displayed Disney+ upcoming films on the mobile phone, adding interest and grabbing the users attention.

VISUAL DESIGN

Storyboards

With the initial idea approved storyboards are designed to visualise the sequence of shots needed within the animation.

These artboards are then exported from Photoshop for animation in After Effects where we add 3D elements and visual effects.

Disney+ logo animates into place.

Box door opens with mobile phone flying out, rotating and moving forward with particle burst.

3 seconds of Mandalorian movie plays on screen. Video also plays within the skin.

Mobile spins back and displays the 2nd movie.

3rd movie is displayed.

Final frame with 3 promoted movies and strapline.

Animation is complete when the mobile moves backwards, the box door closes and the logo animates into starting position.

VISUAL DESIGN

Final animation

Storyboards are used to help plan the animation with the final video using all the elements from the storyboard to bring everything to life in After Effects.

In the example of the page takeover below the mobile phone interacts with the billboard and skin giving the illusion of 3D depth and a memorable experience for its audience. The shadows and refections of the mobile phone within the 3D box help to sell this effect.

We were also asked to design and animate other display formats based on the page takeover that would be used on mobile devices.

MPU

DOUBLE HEIGHT STICKY BANNER

The results

The Deepscreen page takeover format has been well received by Mail Metro Media premium advertisers and will no doubt be the go to format for page takeovers where 3D immersion and WOW factor are sought after.

The many ways 3D imagery can be used in display advertising opens up new possibilities for creatives and how AI can be further incorporated definitely makes this one format to watch!

Need a consultation? We can advise

Whatever your business needs, we’ll create a great looking website that works for you.

Get in touch

Deepscreen web page takeover: Immersive 3D experiences for online advertising

Company

Responsibilities

Project length

Deepscreen for desktop

In a rush?

The problem

Problem statement

Project goals

PROJECT SMART GOAL

Project scope

PROJECT REQUIREMENTS

Test animation

Visual design

Examining the client's brand

Initial ideas and storyboards

Initial ideas

Storyboards

Final animation

MPU

DOUBLE HEIGHT STICKY BANNER

The results

DO YOU HAVE A PROJECT WE CAN HELP YOU WITH?