« Previous | Main | Next »

Programmes: A Bite Size Design Process

Post categories:

Jamie Tetlow | 09:42 UK time, Tuesday, 18 March 2008

I'm the lead designer on our /programmes work and seeing as Sophie's away, she's asked me to give you a little detail about the new designs.

bite_size_episode.jpg

We've been testing and developing the technical infrastructure since October 2007's initial beta launch and we've now had the time to refresh the look and feel. Back in October, we'd taken the view to not implement any strong visual design as we didn't want to spend too much effort defining another pan-BBC style when there was so much internal talk of a "lick of paint". We spent most of the early period building strong semantic markup foundations and grappling with the layout and hierarchy of the core information but now, with the arrival of what's being called the "Global Visual Language", we needed to crack open our photoshop and css skills.

As Tim Anderson noted recently, the vast majority of BBC websites have been mocked up as full pages in Photoshop and then passed to someone else to convert into the final code - but the work on /programmes demands a different approach, so I thought I'd shed a little light on our process.

The site is so extensive (over 100,000 pages indexed in Google and growing by the day) that designing whole pages can become a burden. We instead focus on "components" - the repeated patterns across the site. If we can unify the design (and code) here, a more coherent product emerges. We'd been working this way with a list of 30 components since the site went live and it really helped ease the pressure as we could design in bite size chunks. We could focus on just the "episode item" as it appears in a list, the "calendar" from the schedules, "previous/next navigation" that appears on episode, series and schedule views or a simple h1 "heading".

bite_size_calendar.png

Richard and Bronwyn's team helped us to interpret the new Global Visual Language, and in early February they handed us a visual brief in the form of layout mockups for two of our page types. We could clearly see where they wanted us to head stylistically, but these designs explicitly included just half of the components we needed to update. Fortunately, Olivia - the designer who'd mocked up the brief - was available for a few days, so we had the opportunity to flesh out a direction for most of the missing pieces, and once we felt we had enough to work with, we could focus on the css.

When writing the markup, we'd ensured that each component is represented by an id or class. This gave us enough hooks on the code to approach the css in the same bite size chunks as the design. We were also free to treat the brief as a guideline, not something too rigid, allowing us to improvise when approaching more complex interactions not expressed in a photoshop document.

The whole process from signed-off design brief to the live deploy has taken less than 20 days. Now that we've taken the giant refresh leap to bring us inline with the homepage and mobile, we'll now make many smaller incremental steps to refine each component.

So that's the little things covered, but next on our list is to be ever more integrated with the Channel, Network and Programme sites. We've already got some good ideas about how /programmes can help to knit and weave these programme experiences together and hopefully you'll see this emerge, in bite size fashion, over the coming months.

Jamie Tetlow is a designer in Audio & Music Interactive.

Comments

This post is closed to new comments.

More from this blog...

BBC iD

Sign in

BBC navigation

BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.