Digital Display Advertising

Creating eye-catching content that loads quickly is always a creative and technical challenge.

The industry has since evolved, but for a long time customers had dial-up modems, so file-sizes were often restricted to 40kb. Modern fibre modems are over 1200 times faster.

These technical constraints meant that adding business value to a print-based campaign often requires thinking “outside the box”.

Display ads could be created as static JPG or animated GIF images, however the more dynamic and interactive SWF format was widely supported and it had increased impact.

The examples below were created in an IDE called Flash (using the ActionScript 3 programming language), which exported SWF files. The original code can be downloaded as a Windows executable.

Get Flash
Get Macromedia Flash Player
Get Flash Player

A browser-based clock

A digital execution to give the impression of ‘time flying by’ – this demonstrates that the premium brand understands the time demands there are for a small business, and has the solution to improve operational efficiency. In order to communicate the benefits of the product for a premium brand, use animate smoothly (even when highly compressed), and if possible add an interactive component to grab the user’s attention.

I researched vintage flip-clock motion and fonts, re-drew the original bitmap artwork completely as vectors, and added dynamic blurring and shading effects. I found a way to access the system clock and retrieve the time set on the local device.

A highly adaptable solution that animated smoothly (set to the user’s local time). The ad generated a high click-through rate.

40kb

Real-time stock results

As part of a wider strategic evolution of the UBS brand into the digital space, there was an opportunity to extend utility beyond web applications into advertising media to promote a new product Traded Notes Tracked Investments.

Using inspiration from advergames, expandable banners, website takeovers, and feed integrations (such as Wieden + Kennedy’s onedotzero brand identity and UVA’s collaboration with Massive Attack), I suggested a proof of concept rich media banner that displays stock prices from a real-time UBS feed.

I implemented a stock prices ticker using one of UBS’s existing feeds, and adjusted the necessary crossdomain permissions to allow it to be ingested only by the banner but in any external environment.

The new media design guidelines strategy presentation and example execution was well-received, and influenced the future direction of the UBS identity.

  • Client: UBS Bank
  • Product: ETRACS
  • Date: October 2010
Bloomberg UBS banner execution
UBS Stock Ticker
100th Window (UVA & Massive Attack) 2003
40kb

A miniature sketchpad

Readers love their books, in their own way and for their own reasons – but not all were aware of book tokens redemption locations. The solution was to extend the existing print campaign values of uniqueness and personalisation into digital advertising.

First, I replicated the illustrative approach by revealing it as if drawn by hand, then embedded a small drawing application with the pencil graphic as a cursor, so that users can experiment and create their own drawing. An adapted version allowed users to download their creation as a bitmap.

This encapsulated the brand slogan that “every book nut is different”.

The result was that direct interaction with the content improved dwell times and brand retention as well as increasing conversion rates.

  • Client: National Book Tokens
  • Product: Gift Cards
  • Date: November 2008
174kb

Physics engine with collision detection

Samsonite developed a ground-breaking impact-resistant material (called Curv) for their premium luggage collection, demonstrating it with an explosive TVC campaign. Presenting streaming video in a banner was a challenge, so we needed a way to convey both strength and impact using campaign elements.

I isolated the hero images and a screen capture of the room. Using a basic collision detection algorithm, the luggage bounced off walls (and each other) without sustaining damage. Adding realistic dynamic shadows helped to convey the illusion of a physical space, and starting in a randomised position created additional visual interest on repeated viewings.

  • Client: Double A Digital (for Samsonite)
  • Product: Cubelite
  • Date: April 2011
Westfield Shopping Mall

The client was so happy with the creative, they purchased additional media and were re-purposed for large-scale shopping malls DOOH placements.

24kb

Z-depth blurring using a multiplane

The client was launching a new body wash product range, and wanted to promote a survey to obtain consumer feedback. The execution needed to capture the feeling when using silky-smooth oil in a hot shower – a luxury moment.

I utilised the multiplane camera parallax technique (invented by Lottie Reiniger, refined by Walt Disney and often referred to as 2.5D).

Diagram of multiplane camera

Repeating a handful of raindrops onto a number of layers to minimise file-size, these were resized and dynamically motion blurred to create a realistic sense of three-dimensional depth. Adding some artificial “steam” completed the luxurious effect.

  • Client: Dove
  • Product: Supreme Creme Oil Body Wash
  • Date: April 2008
26kb

Lip-smackingly smooth transitions

The client wanted to promote a campaign of “Great” products (duvets, gardening, west end tickets, travel, warranties and a wine club). A series of executions was needed that would “leap off the page” and stand out against static content on the page.

I created a flexible programmable transition that repeated a simple graphic element (such as a triangle or circle) as an image mask.

The typical speed for for a frame-based animation was about 15fps, but a script-based animation played back at a much high frame rate (around 60fps) and this communicated elegance and quality.

  • Client: Daily Mail
  • Product: Wine Club
  • Date: August 2009
29kb

Different optimisation approaches (such as font sub-setting, image compression, lazy loading, and converting bitmap graphics to vectors) were developed and remain useful techniques for trying to improve quality and presentation.

Selecting the right approach to maintain a design vision is a delicate balance of science and art.

Macromedia Flash Enabled

Adobe Flash player was a driving force for creativity in the early days of the web, as well as the delivery mechanism for delivery of animation and rich media digital display advertising units.

Designers were able to use simple stage-based animated frames and scenes, and had access to powerful scripting frameworks such as Flex (SDK), GSAP (animation), Flint (particle system), and Hype.

Support for Flash ended in 2020.