12_Sainsburys_hero

ANALOG FOLK LONDON

Sainsbury's HTML5
Game Ads

CREATIVE
DESIGN
MOTION
CODE

CONCEPT • DESIGN • MOTION • CODE

Analog Folk needed a set of Rich Media banners with special specification for certain publishers. The whole ad needed to be under 100kb before any interactivity with a cap of 300kb.

Creating the Games

The idea was to entertain the audience with a quick puzzle-like game, where the user needed to match three parts, and each would result in an unique end frame and call-to-action. 

Understanding that the campaign needed some wow-factor, we created a short but effective animation that would attract potential customers - online and in public spaces. 

CREATIVE AND LOGIC

Designing and coding the game

The assets were really heavy. Even though the characters and background were flat coloured, there was a lot of detail and so no matter which image format, it was too big for our 100kb limit.

12_sainsburys_dmpu

About this Image

User Journey

The plan then was to have a static version as a poster, and when interacted, it would jump – seamlessly – into the interactive and higher quality version. I ended up using SVG images so it would scale nicely on retina screens, but the poster image was a very compressed jpeg.

Technical limitations

For the change of assets to be really smooth, the initial load had already the libraries download – thus the file size challenge. Instead of waiting for the image swap and the extra load, there was a quick fade, and the assets would animate and be ready for swipe.

The user would then drag, tap or click the arrows and swipe to match the characters blocks and get to a related end frame – and exit URL.

USER CHOICES

A fun and interactive ad

Even though the interactivity was very basic, it needed the same solution for loading. After selecting a character over a static image, there was a quick transition to the now loaded layered assets, Soon after that the character scaled up with a custom transition to the end frame.

12_sainsburys_bill

Interactive Ad

Touch Enabled Ads

Both ads needed to be extra tested in many browsers and devices to get a similar feel to the transitions and interactivity.

Dealing with bugs on ipads was a great challenge, with a very sensitive interval checker of the position of the blocks.

 

Selected Works

Devil May CryFull Digital Campaign

Project Cars 3Display Ads Campaign

Pokemon Trading CardsSocial Media Ads

Poker StarsHTML5 Campaign

Pokemon GoSocial Media Ads

FidelityAnimated Infographic Videos

SWRHTML5 Campaign

Virgin MediaDigital Campaign

NetflixHTML5 Ads

FSI InvestmentHTML5 Ads

HondaHTML5 Ads

JP MorganHTML5 Ads

Tesco MobileHTML5 Ads

Old El PasoDigital Campaign

VaselineHTML5 Ads

Magic FMDigital Campaign

Tesco and SamsungSocial Media Videos

Baywatch FilmSocial Media Videos

ALWAYS AVAILABLE

ALWAYS
AVAILABLE

Get in touch and tell us about your project.

Get in touch and tell us about your project.

PROPER BANNERS

ATL CREATIVE PRODUCTION LTD
CN: 08060382
VAT: GB211558923

(+44) 0203 633 4390

LONDON

St Louis Offices
Kellett 56


+44 7575 042349

BARCELONA

BetaHaus
Vilafranca 7


+34 650 296 992

ALL RIGHTS RESERVED