mike afford media LOGO

Cartoon Weather Symbols - New BBC Weather Symbols - BBC Weather

BBC Weather Symbols

The 'traditional' weather symbol set

For the 2005 redesign I revisited the traditional BBC symbols and produced a completely new redrawn set. They are based very closely on the versions originally designed by Mark Allen in 1974 and subsequent revisions by BBC graphic designers.

The Weather Centre use a set of codes to represent various meteorological scenarios. For many years these have been shown graphically using the familiar 'fluffy cloud' icons on weather maps. They were rarely seen on national TV after the 2005 redesign, but this weather symbol set survived for a number of years in places on the BBC's weather website.

Here is a list of the codes and the associated 'old school' BBC Weather symbol for each weather type.

(UPDATE: Sorry, I've had to remove the complete set because they were just getting stolen. And that wasn't really the idea.)

The remainder have been represented variously by plain text or images. They are :

The 'new' weather symbol set

Also as part of the 2005 redesign I looked at developing a new set of weather symbols to tie in more closely with the more 'realistic' representations of weather types that appear now on the TV weather maps.

The first images were built up from a basic set of backgrounds e.g. half white cloud, day and night, full cloud (white and grey) etc. I made animated overlays in After Effects to show light and heavy rain, snow, sleet etc. Below is a static test sheet showing the 33 weather codes using the new symbols.

weather symbols : new BBC weather symbol set

You might spot that the 'sunny day' icon (1) is a blue square with no yellow sun and there's also no sun peeping out from behing the clouds in (3). There are also probably a few other minor differences between my versions here and the ones that ended up appearing on the BBC's weather website.

These new weather symbols were initially designed for a very specific function - to combine the cloud symbol and temperature disc into a single square area to use on outlook charts and city league tables on TV forecasts. The centre of each panel would always include a colour-coded temperature disc (hence no 'sun', just blue sky). The images themselves would also always be animating - so for example, the difference between hail (falling quickly and vertically downwards) and snow (drifting more slowly and diagonally) is clearer.

weather icons - new weather symbols on website
weather icons - new weather symbols on outlook graphic

At some point it was decided to use these animating symbols on the BBC Weather home page. Each animation existed as a set of single frames designed to run at 25fps for broadcast. Below left is an example of how 'light snow showers' appeared on the BBC Weather website. I guess to keep the file size down they chose to drop some frames from the original animation which made for a slightly jerky end result I think. I've just had a go myself to see if I can improve on it - my own version is on the right.

animated weather symbol   animating weather symbol

I've used a bit of motion blur, sacrificed some detail in the cloud and tried to make the highlight on the cloud background a tiny bit darker than the snowflakes. I have also ditched the dithering to keep the file size down. I've ended up using a color table with more colours, but by optimising the animation I've gained some extra frames to make it a little smoother. Perhaps with a little bit more tweaking of the colour table, I could maybe bring a bit more detail back into the cloud with one or two more intermediate greys. Anyway, both images weigh in at around 28kB, but mine is a few hundred bytes smaller. The rain symbols require fewer frames of animation, so they would have been smaller still.

Of course, these days you may as well forget all about animated GIFs and go for something a bit more sophisticated like seamlessly looping weather icons using jQuery and Spritely.

The new BBC Weather website

The old cartoon weather symbols had somehow survived in long-range forecast tables for many years following the 2005 rebrand.The new BBC weather symbols above finally replaced the 'traditional' symbol set on the BBC's Weather Beta site which appeared in 2008.

symbols on the BBC Weather website (left), and Beta site (right)

The temperatures are now displayed separately as text, and each symbol has a text description below a static image. The site-specific data appears in two expandable tables, one showing detail over the next 24 hours, and one showing the forecast for the next 4 days. There are toggles for wind, humidity, pressure and visibility, and the night-time data has also been separated out.

See also (external links)

royalty free weather symbols from our store

Additional content © BBC | Site design by Mike Afford