Moving Brands behind BBC’s time signature Newsbeat identity

Moving Brands is behind the animated identity of BBC Newsbeat, which is controlled by musical time signatures.

BBC Newsbeat is the broadcaster’s new online service aimed at 16-24 year-olds. MovingBrands has worked alongside BBC editorial, product and brand teams as part of an integrated development programme.

A spokeswoman for the consultancy says it has looked to create “a digital-first identity and experience as vibrant and distinct as the audience.”

The Newsbeat name and the idea of the “beat” were the inspiration and the starting point for the brand.

The spokeswoman says: “The moving wordmark, the grid, photography, and even the content have been built to respond to the rhythm of ‘the beat’.”

When a user accesses certain parts of the site a beat sequence is triggered in the wordmark based on a musical time signature.

The wordmark uses a grid, which is divisible by four, with letters landing on the on- or off-beat depending on the musical signature.

Moving Brands says that the system is in line with the guidelines of the BBC Global Experience Language.

Content on the site loads vertically, taking its cue from the wordmark and the layout of the home-page, while index images and story pages are also based on the rhythm concept.

As with the logo, the grid system across the entire site is always divisible by four and uses the same musical cues replicating the number of beats in a bar.

Each type of story page is presented in a card. There are different categories of card such as long form or video.

Moving Brands senior designer Stewart Davies says: “These load into the page in a vertical staggered way, as the user scrolls through the site.”

The optimised site is live but has not yet reached full functionality. The movement of the cards will be given further movement in the coming months.

Moving Brands also worked with the BBC on the BBC Newsbeat app, which launches this week..

Davies says: “Within the app, the cards also animate using a tilt. This tilt is reactive to a user’s feedback – how hard someone taps on a card. It uses physics to control the movement, tilting as if positioned upon a central pivot. This is created using CSS 3D.”

Another feature used across Newsbeat is “colour picking”, which means that the prominent colours of images loaded into the back end of the site are recognised by the system and can be used to overlay the images.

It is the first project Moving Brands has completed since joining the BBC Digital Services Framework and has rolled out in several stages.