BBC Weather imagery system

Building the visual system behind BBC Weather

How I drew on my scenic-painting background to deliver 32 weather states in six weeks, within a £20,000 budget.

A large sheet of glass covered in frost, lit from behind so the ice crystals glow white against black, with a technician silhouetted beside it, cable trailing to a light rig.
Building frost on glass in the studio, rather than commissioning it as a scene.

Context

An atmospheric app needed accurate, consistent imagery within a limited budget and schedule.

Approach

Build weather states from reusable layers, with meteorologists shaping the system.

Results

32 weather states from 41 layers, delivered in six weeks for £20,000.

Role
Lead Designer, imagery system
Scope
Art direction · Visual systems · Production planning · Accessibility
Partners
Moving Brands, Meteorology, Editorial, Engineering and Photography

Context

An ambitious visual direction needed a practical production plan

The new brand direction, “Window on the Weather”, imagined the app as a view onto the conditions outside. My responsibility was to make that concept work across the app’s weather states.

Four reference photographs of weather seen through glass: rain running down a window, condensation at dusk, frost with bare branches beyond, and rain over a swimming pool.
Reference imagery for “Window on the Weather”. Natural light, shallow focus and the glass itself carrying the condition.

The imagery needed to feel natural, represent the forecast accurately and leave space for readable information.

Producing every scene separately would be costly and time-consuming. Stock photography offered limited control and ongoing licensing concerns, while matte painting risked losing the natural photographic quality we wanted.

I needed a way to create a consistent range without treating every weather state as a separate production.

Diagram: shoot every scene, licence stock photography and matte painting were each ruled out, leaving a layered production system. Routes considered Shoot every scene Full control of the result, beyond the budget and schedule Licence stock Affordable, but little control and licensing concerns Matte painting Full control of the composition, loses the natural quality A layered production system Photograph the components once, then compose the states
Each route solved for one constraint and failed another. The layered system was the only one that held cost, control and naturalism at the same time.

Approach

A production system built around reusable layers

A theatre stage set shown two ways: fully lit in performance, with painted columns, a chandelier and a dining scene in front of a night-sky backdrop; and from the wings, revealing the same backdrop as raw painted flats and rigging.
The kind of scenic painting I trained in, the same painted flats read as a believable room from the audience and as a set of reusable, repaintable surfaces from backstage.

My scenic-painting background changed how we built the images

Scenic painting works in layers, and the same set of painted flats can read completely differently depending on how they're lit. Lighting a flat from behind or from above could produce a different effect from the same surface.

I applied that principle to the weather imagery. Skies, clouds and weather effects became layers, and changing how each was lit helped produce different conditions. This translated 32 required weather states into 41 reusable layers.

The full layer stack, exploded, next to the reference table that defined every layer the system needed, grouped by cloud type, precipitation, diffuse conditions and window effects.

I commissioned a photographer to capture the backgrounds, with a separate studio shoot for window effects. The layered approach gave us control over the compositions and a reusable set of assets for future changes.

Four frames from the studio shoot: glass sprayed with green-tinted droplets and lit from behind, a Lightroom catalogue of rain-on-window frames, the team reviewing shots on a laptop at an opening, and a large frosted pane glowing white with a technician silhouetted beside it.
The window-effects shoot. Rain, condensation, frost and ice were built on glass and photographed against a controlled background, so each effect became a layer rather than a scene.

Meteorologists helped define the system before production

The combinations had to represent real weather.

I worked with meteorologists to card-sort the weather states by cloud type, identifying which elements could be shared and which needed to remain distinct. Prototypes helped us assess whether the combinations were credible before committing to production.

Daily feedback and sign-off with Meteorology, Editorial and our creative partners kept the work aligned as it progressed.

Specialist knowledge shaped both the images and the way we produced them.

A colour card-sorting exercise laid out on a wall: printed cards for weather states such as Sandstorm day, Light cloud day, drizzle day, Thick cloud day, Heavy snow shower day and Heavy rain shower day, grouped into columns with yellow sticky-note annotations.
The card sort in progress. Every weather state on its own card, grouped and re-grouped with Meteorology until the categories below held.

Every scene had to leave room for the forecast

The imagery needed to support the interface across changing conditions and levels of detail.

I established consistent horizon rules and clean text zones, checking difficult conditions such as snow. Alongside Engineering, I balanced visual quality with file size and app performance.

A crop study showing the same rain-on-window weather image used across wide responsive web, narrower responsive web and native app layouts.
The full final image could be cropped for different devices and scales, creating the weather-on-the-window effect across web and native app surfaces without separate artwork for every format.

These constraints became part of the visual system, helping the assets work consistently inside the product. The companion redesign case study shows how the background also receded as users moved into detailed forecasts.

A six-frame development review board collage showing printed Aberfoyle weather-screen variants, red annotation marks and blue sticky notes used to compare contrast, horizon height and legibility.
Three development boards side by side, each showing a reference photo at top and grid of printed app-screen variants below, tracking how the imagery evolved across rounds.
Six printed variants of the Aberfoyle forecast screen pinned up for review, annotated in red pen with checks, crosses and notes such as 'too much colour'.
Four printed app-screen variants shown close up, one marked with a cross and 'too high', tracking contrast and legibility across versions.
A development board of printed screen variants beside close-up crops of individual states, showing the review process in progress.
Development in progress. Printing the same screen against different imagery made contrast failures obvious in a way on-screen review did not. These notes on contrast and horizon height set the rules that every subsequent state had to meet.

The background receded to keep the forecast legible

Atmospheric imagery made conditions clear at a glance, but it could compete with the numbers on detail pages and hour-by-hour views.

I used clean text zones, consistent horizon rules and a blur-to-gradient motion so the imagery carried the condition first, then fell back when people needed to read.

The rain-on-glass background recedes to a plain gradient as the hourly panel slides into view.
The same behaviour on a different condition, confirming parity across states.

Results

A complete weather range from a reusable set of assets

32weather states
41reusable layers
6week delivery
£20kbudget
Four finished app screens side by side: Aberystwyth heavy rain shower, Hull sunny, Montego Bay thundery showers and Ballycastle light rain shower, each with distinct imagery, on a white background.
Four states from the finished set. Heavy rain, sunny, thundery and light rain, all composed from the same layer library.

The system brought “Window on the Weather” into the app while giving the team reusable assets for maintaining and extending the imagery.

Reflection

The limits made the system better. With only six weeks and a tight budget, I could not treat every state as a separate picture. The discipline of reusable layers is why the library could keep growing after launch.