Programmes: A Bite Size Design Process
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.
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-³ÉÈË¿ìÊÖ style when there was so much internal talk of a "lick of paint". We spent most of the early period building strong 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 skills.
As recently, the vast majority of ³ÉÈË¿ìÊÖ 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 ( 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 "heading".
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