A new global visual language for the BBC's digital services
The BBC website began its official life back in December 1997 with this very simple design.
It was a basic offering with two sections to the site. Over time it has grown to encompass a great deal more. However due to the organic way in which the website evolved and the old structure of the business, with dozens of small design teams working independently of each other, the site had a fairly schizophrenic nature once you delved into its depths.
About 2 years ago, after printing out the site onto what has now become jokingly known as the 'Wall of Shame' we decided to embark on an ambitious project, called Global Visual Language 2.0, with the aim of unifying the visual and interaction design of bbc.co.uk and the mobile website.
We created a new wider, centred page template to take advantage of wider screen resolutions and for the first time created an underlying grid.
We rationalised the hundreds of different banner styles into a new global and local branding and navigation system.
We discontinued the scores of different audio and video players and created a universal embedded media player.
And we redesigned the homepage creating a visual style that began to ripple through the site and onto the mobile platform.
We've lived with and loved the distinctly 'web 2.0' design for a while now and it's done us proud. However, time's moved on, and in autumn last year we decided it was time to resurrect the project.
We set out to broaden our ambitions; to create a design philosophy and world-class design standards that all designers across the business could adhere to. We wanted to find the soul of the BBC. We wanted something distinctive and recognisable; we wanted drama. We knew whatever we created needed to be truly cross-platform and that we needed to simplify our user journeys.
We didn't do it on our own. We pulled together representatives from across the business, led by the project's Creative Director, Ben Gammon, to form a Global Design Working Group, and we created a GVL Steering Group to help manage and direct the course of the project. We also went out into the industry to find a partner to co-create the styleguide: Neville Brody and his agency, Research Studios.
After going through a tender process in which we invited six agencies to pitch for the work, we chose Research Studios because we felt they had demonstrated a good insight into the BBC, its public purposes and they way in which it functions. We were also impressed with the work created for the pitch and Neville's back catalogue of work.
Together, over the last four months, we've spent countless hours and created countless iterations of designs, components, mastheads, footers, polar maps, word documents, pdfs and grids... and whilst it's still a work in progress, I'd like to share with you where we're at with both the design philosophy and the latest version of our global visual language styleguide.
We wanted to create a design philosophy, or a set of values, to unite the user experience practitioners across the business. We settled on nine keywords which we think sum up what we're about and what we're trying to achieve:
Modern British
We want to create a modern British design aesthetic, something vibrant and quirky that translates outside our national boundaries.
Current
It needs to feel current and reflect what's happening in the UK right now, in real-time. We curate a timeline of Britain and create links to the past - to our rich archive.
Authentic
Wherever we are heard we need to sound authentic and relevant, warm and human. We want to reference the BBC's iconic design and broadcasting heritage. We value the trust placed in us.
Compelling
We engage our audiences with compelling storytelling. Our voice ranges from serious and authoritative through to witty and entertaining.
Distinctive
We stand out from the crowd. We strike a balance between overly templated, cookie-cutter design and beautiful anarchy. We are bold and dramatic.
Pioneering
We pioneer design innovations that surprise and delight. But we take our audiences with us.
Joined-up
We view all services and platforms as one connected whole but deliver experiences that are sensitive to their context of use.
Universal
Our services are open and accessible. Our interfaces are simple, useful and intuitive.
Best
Our ambition is to be the best digital media brand in the world.
Armed with our new philosophy we began creating conceptual designs for various properties: BBC news, homepage, search, iPlayer, programme pages and the embedded media player.
Through doing this work we began to distill the essence of a new visual style. I'm going to take you through some of the key elements, starting with the page grid.
We took inspiration from many sources. What we were trying to achieve is an underlying grid system that was flexible enough to enable many unique design variations whilst still feeling coherent and considered.
The new grid is based on 31 sixteen pixel columns with two left hand columns that can be split into four, and one wider right hand column, which accommodates the ad formats that appear on the international facing version of the site.
We're looking to create the effect of interwoven vertical and horizontal bands, making a feature of the right hand column across the site.
Along with the 16 pixel vertical grid we've also for the first time got an integrated 8 pixel baseline grid so that we can align elements on a page both vertically and horizontally.
A key feature of the new GVL is a much more dramatic use of typography. As well as Gill Sans we've introduced big bold type in Helvetica or Arial and restricted variations in size so that we have much greater consistency across the site.
Here's an example of it all pulled together on a new story page, and examples of typography styling in promo drawers. We focused on signposting and articulation; you can see the time stamping treatment and signposting for live content.
This is an example of a call to action for a piece of video and a pull quote. You can see again the dramatic use of typography and big bold iconography.
Here's another couple of examples of typographic styling; type over images and the use of scale to create hierarchy and drama in link styling.
We've developed a highlight colour palette for non-branded areas of the site, or areas where the BBC masterbrand talks directly to the audience (eg the BBC homepage, search, some of our genre areas). Each colour has a tonal range to be used in contrast or in unison with each other.
We've also got a neutral palette and a much more restrained usage of gradients where the colours are situated next to each other in each tonal range on the colour wheel.
Our recommendation is that pages have a predominantly neutral colour palette with colour being provided by large and dramatic imagery. The highlight colour is used sparingly to create vibrancy and draw the eye to key areas of the page.
We're moving away from left hand navigation to consistently placed, horizontal navigation across the site. Here's an example from Sport:
We're designing a new look and feel for the embedded media player - it's still a work in progress but you can see the bold calls to action and typography.
We've got four types of carousel - one that fits right hand column, one for the double left hand columns, a full-width version and one that breaks out of the page grid and extends to the browser edges to create a cinematic, full screen experience.
And finally, we've created a new set of icons.
This style guide is a set of page elements that can be pulled together in any number of ways. We wanted to create something that is flexible enough to allow all our brands their full expression whilst uniting them into a coherent user experience. We also wanted to strip out any superfluous decoration and allow the content and imagery to shine through. To me, this new visual language is exciting and refreshing. It feels timeless, yet very of the moment. I hope you agree.
Next steps; we need to finalise the masthead and footer. We're looking at mobile and IPTV as well how we treat social elements on the page (social bookmarking, share functionality, comments, ratings, reviews etc). We'll also be working through the components in the glow widget library and pulling it all together into an audience-facing design and code patterns library along with a new set of standards and guidelines.
I hope you like what you see. We're always interested in your feedback on both the philosophy and the styleguide.
Bronwyn van der Merwe is Head of Design and User Experience, Central Team, BBC FM&T.
Page 1 of 2
Comment number 1.
At 18:35 16th Feb 2010, BabyBen wrote:What a truly fantastic post, can't wait to this rolling out.
The new style looks brilliant.
Complain about this comment (Comment number 1)
Comment number 2.
At 18:41 16th Feb 2010, Mo McRoberts wrote:An excellent and very comprehensive look to the past, present and future of bbc.co.uk. Three thumbs up.
Complain about this comment (Comment number 2)
Comment number 3.
At 18:43 16th Feb 2010, KernowChris wrote:A resizable Video player PLEASE!
Complain about this comment (Comment number 3)
Comment number 4.
At 18:44 16th Feb 2010, Ed Lyons wrote:This looks interesting. I'm not sure the news page looks particularly interesting though... Hard to judge from one screenshot though. I'm not sure the overall design is massively revolutionary - perhaps you weren't aiming for that - but consistency is certainly a good thing.
I'm sure we'd all be interested in seeing some more mocked-up pages - I'm sure you have some - e.g. larger versions of the iPlayer mockup.
Complain about this comment (Comment number 4)
Comment number 5.
At 18:49 16th Feb 2010, Greg Tyler wrote:Exciting news, and great to see active development. As Ed Lyons says, it's hard to tell how important the changes will be, but it's nice to know something's going on back there and it's being thought about properly.
Complain about this comment (Comment number 5)
Comment number 6.
At 18:56 16th Feb 2010, James Higham wrote:Very interesting (and exciting!) read. However, if you're moving away from the "web 2.0" look, what's the point of beta.bbc.co.uk?
Complain about this comment (Comment number 6)
Comment number 7.
At 19:12 16th Feb 2010, Alex wrote:The prototype styles look good. I agree that the news example looks a bit bland, but that might be because you've clipped it from a larger page.
However, it would be good if the new look could be less "chunky" - the current style of the home page (and the beta homepage) is a bit childish and not that elegant. I'd like something nice and stylish but with added quirk and flair. Keep the chunkiness out!
Complain about this comment (Comment number 7)
Comment number 8.
At 19:20 16th Feb 2010, Josh wrote:I absolutely love the new design language. It is modern, simple and is able to keep pace with the best designed sites on the web. The typograph is classic and iconography beautifully clear.
I can't help but think that the current design tries to be modern and somewhat fails, giving a more childish look than anything else. From the screenshots given the new design has a better, grown up look, which, as you said 'allow(s) the content and imagery to shine through not the, often garishly, cloured mastheads we see now.
It's interesting to hear how you've come about this new design. Some sites throw a new design in your face with no mention of how they came to the design but the BBC seems to do things diffently and I applaud you for this.
Keep up the good work and keep us posted!
Complain about this comment (Comment number 8)
Comment number 9.
At 19:34 16th Feb 2010, lleyam wrote:Very smart. I'm impressed. Just one point of feedback: please don't leave the embedded media player looking like it currently does with the "play" icon floating above the text. It looks so smart with the image, semi-transparent floating box and typography but the "play" button ruins it in that position.
Complain about this comment (Comment number 9)
Comment number 10.
At 20:45 16th Feb 2010, Hymagumba wrote:It definately seems to be a good improvement on the current design (which was a VAST improvement on the previous ones). The News site always seems to lack the punch of other sites though, whether this is because of the older CMS it uses or not I'm not sure but it would be nice for it to get a full blown revamp rather than the tweak it recieved two years ago.
And while they're at it, maybe finally end its love affair with HTML tables? Please?
Complain about this comment (Comment number 10)
Comment number 11.
At 22:21 16th Feb 2010, Green Soap wrote:Visually, it looks very good, but please include user customisation.
The Twitter feeds in the side bar of the current Vancouver 2010 sub-site are particularly annoying, and the option to remove modules like that would be fantastic.
Complain about this comment (Comment number 11)
Comment number 12.
At 23:04 16th Feb 2010, David Travis wrote:"We've developed a highlight colour palette for non-branded areas of the site, or areas where the BBC masterbrand talks directly to the audience". Who writes this stuff? What does it mean?
Complain about this comment (Comment number 12)
Comment number 13.
At 23:13 16th Feb 2010, tip2tail wrote:Looks fantastic!
Wll done!
So when can we expect to see the roll-out begin for this?
Mark
Complain about this comment (Comment number 13)
Comment number 14.
At 00:42 17th Feb 2010, dennisjunior1 wrote:Bronwyn van der Merwe:
I support post # 1 and, thinks its' better than all of the other formats before that.
(Dennis Junior)
Complain about this comment (Comment number 14)
Comment number 15.
At 08:54 17th Feb 2010, cping500 wrote:Can we have something on user testing and experience please.
Complain about this comment (Comment number 15)
Comment number 16.
At 08:55 17th Feb 2010, Christian Oliff wrote:Looks brilliant. Beautiful design, can't wait to see it live! when can we expect it?
Complain about this comment (Comment number 16)
Comment number 17.
At 09:20 17th Feb 2010, cping500 wrote:and here's a further query.... much about the look.... but what about some more on the the 'feel'? Should there be a BBC 'feel' (an emotional /aesthetic response) to BBC Online overall, or does the 'tool kit' provide enough identity while foregrounding individual micro site 'feels'. my comment is inspired a bit by visiting Alan Fletcher's (formally of Pentagram) retrospective at Cube Gallery in Manchester and working not as a designers) for a well known magazine publisher a long time ago.
Complain about this comment (Comment number 17)
Comment number 18.
At 09:45 17th Feb 2010, Tim wrote:Like it. Huge fan of the Guardian's horizontal / breadcrumb-y navigation. Will be interesting to see what the full-width carousel will look like in context too.
One thing I'm less keen on is little boxes like the 'Lisbon Treaty' one above that break up the reading space. But again, perhaps that's one for the context.
Any hints as to what a search results page will look like?
Great work so far. :)
Complain about this comment (Comment number 18)
Comment number 19.
At 10:06 17th Feb 2010, SheffTim wrote:With the media player could you incorporate an idea from YouTube - of clicking anywhere on the screen to stop/start video.
The black overlay - could it be a gradient so it blends in to the image rather than having a distinct edge.
When do you plan to implement this?
Complain about this comment (Comment number 19)
Comment number 20.
At 10:20 17th Feb 2010, SteveoBagins wrote:How far down the line are you with this? When will we start to see the new VL for real?
Complain about this comment (Comment number 20)
Comment number 21.
At 10:33 17th Feb 2010, Simon Surtees wrote:An excellent styleguide - spot-on use of design language.
Simplifying the typography; a really great step.
I'd be interested to see some of the usability data behind the decision to switch from left hand to horizontal navigation. I appreciate that this is the trend for redesigned sites, but I've always found the existing BBC navigation to work really well.
Echoing earlier statements, what's the timetable for rollout and will it include more UX testing?
Complain about this comment (Comment number 21)
Comment number 22.
At 10:50 17th Feb 2010, andy tedd wrote:Looks amazing.
Neville Brody is a genius. Please can he do Gateway too :)
Complain about this comment (Comment number 22)
Comment number 23.
At 11:18 17th Feb 2010, Bojkowski wrote:It seems a little backwards to be specifying Helvetica and Arial. Especially with recent advances in web based typography. It would be a simple amend to include Gill at the top of your font stacks and thereby help in the eradication of rotten old Arial from the majority users screens.
Complain about this comment (Comment number 23)
Comment number 24.
At 11:59 17th Feb 2010, James B Brown wrote:I'm so excited about this, can't wait to read more. Something that's quite amazing about the BBC is that it (must?) share it's rationale about everything... so it's incredible to have a top-class team of design and UX experts taking us through the process of re-working one of the biggest and hard-working websites in the world and being held to account for their decisions. Looking forward to reading more.
Complain about this comment (Comment number 24)
Comment number 25.
At 13:43 17th Feb 2010, Spassmonkey wrote:All looks like a step in the right direction. However, what about all those small screen devices (without flash) now hitting desktop sites?
Horizontal nav is not a good experience on a mobile, and would the carousels be implemented in mobile-friendly javascript or flash?
A massive majority of smartphone users currently head for our desktop sites, rather than the mobile sites, as the latter are quite limited in content offering - although we're working on that.
A simple standard option for users to switch between mobile and desktop views (clearly linked at the top of the page) would also be a great help. Screenshots are too small to see if that's in there.
Overall - great work and definitely a nice blog post ;-)
Complain about this comment (Comment number 25)
Comment number 26.
At 13:52 17th Feb 2010, Dave Cheadle wrote:I found a sneak preview of the new look homepage back in December - check it out here. Might still be live to look at, but I've forgotten how I found it.
Complain about this comment (Comment number 26)
Comment number 27.
At 14:04 17th Feb 2010, John99 wrote:Although I may not have much interest in changes mainly for artistic merit I do appreciate changes to improve and standardise across the now extensive BBC site. Changes should benefit the BBC and us the end users.
Complain about this comment (Comment number 27)
Comment number 28.
At 14:27 17th Feb 2010, Ian wrote:Fascinating post, and interesting background information. Thanks for sharing the process.
A few things strike me, though.
First, your news sample page contains the bulk of the article in two of your small columns, that means 304 pixels wide is content, of the 976 pixel grid. That's a pretty low signal to noise ratio.
Second, you're going for a typographic grid, but still relying on blank line typography. That is a little incongruous, isn't it? What will happen (as it has at a couple of points in your sample image) is that text in one column will appear synched with the whitespace in another, and this will phase in and out depending on the pattern of paragraphs. This retains the problems that a typographic grid is designed to solve, where content should be synched to the baseline frequency, not half baseline frequency.
And finally, but less importantly, when does a grid become not a grid? When you've got 31 columns of 16 pixel wide. Does the eye really read the regularity?
Complain about this comment (Comment number 28)
Comment number 29.
At 14:30 17th Feb 2010, Dereck wrote:What a fascinating insight into your methodology and practices. Really interesting and very educational.
Complain about this comment (Comment number 29)
Comment number 30.
At 14:54 17th Feb 2010, Krzysztof Pawliszak wrote:Can't wait! Hope we can test before it goes on-line. I really like the idea of new grids and video-players.
I wonder why you decided to change the left-hand navigation and go into top navi-bar.
Anyway! I'm waiting patiently
Complain about this comment (Comment number 30)
Comment number 31.
At 15:32 17th Feb 2010, Robin Card wrote:Truly awesome and inspiring. Excellent work from the BBC again.
Complain about this comment (Comment number 31)
Comment number 32.
At 15:36 17th Feb 2010, John99 wrote:One question: I do not see where the 31 columns is illustrated:
"The new grid is based on 31 sixteen pixel columns with two left hand columns that can be split into four, and one wider right hand column ... "
The image (/staticarchive/ae2bfd991fbe60393aa826ef097499d45c361773.jpg%29 below the quoted text looks to me as showing from left to right
- a sub column of........ 9 x 16px
- a padding column of...1 x 16px
- a sub column of........ 9 x 16px
(1st column tot 9+1+9 = 19x16px)
- a spacer column of.... 1 x 16px
- a 2nd column again...19x16px
- a spacer column of.... 1 x 16 px
- a wide right column . 20 x 16px
It seems to me to be built on 60 columns each of 16px.
And an observation, the figures in the image (mentioned above)from this blog are unreadable:
With my computer setup the illustration is not too clear. The jpeg image that I see used as the illustration being 600 x 450 px and the dimension figures it contains resolve badly and are indistinct to read. Details do not improve even if I try to magnify the image outside my browser.
Maybe it would have benefited from one of the other sizes of typeface when displaying it on a blog rather than on a full width page from which I presume it originated. No one else has mentioned this, so maybe it displays better on a modern large widescreen display, but you will always have many users with older technology. (My other screen is out of use; at present I am using 800x600px resolution; but I doubt it would look much better in a larger resolution as that would make the figures proportionally smaller)
Something similar will have to be considered on the newly designed page if images are moved across the differing column widths and contain text that is to intended to remain readable.
Complain about this comment (Comment number 32)
Comment number 33.
At 15:44 17th Feb 2010, Jason wrote:Great to see a public sector body pioneering design and usability that most of the private sector would envy
Complain about this comment (Comment number 33)
Comment number 34.
At 15:51 17th Feb 2010, John Wickerson wrote:It would be good to have a "give feedback on this page" button on each page. That way, when I spot a typo I can alert the pagemaster quickly and easily. The current system is too long-winded for me to bother.
Complain about this comment (Comment number 34)
Comment number 35.
At 16:36 17th Feb 2010, mjmuk wrote:Great post, always good to see the use of good and consistent design across a brand.
Complain about this comment (Comment number 35)
Comment number 36.
At 16:57 17th Feb 2010, Andrew Gee wrote:I think the icons at the end are great. Is there any chance of them being released under a creative commons license?
Complain about this comment (Comment number 36)
Comment number 37.
At 17:13 17th Feb 2010, Richard wrote:This is truly one of the most interesting articles on your methodology and working practices!
Complain about this comment (Comment number 37)
Comment number 38.
At 17:15 17th Feb 2010, lleyam wrote:I also agree with Simon Surtees' post above. Why the switch from vertical to horizontal navigation?
My concern is that the site ends up with no easy way to jump directly to subsections within the top-level categories displayed in the navigation. I assume BBC is none too keen on the use of drop-downs (given that they're not used anywhere on the site); however, I'd make a plea that they're introduced as it helps those of us who like to jump directly to a sub-section rather than go through top navigation level > wait while the page loads > second navigation level > wait while the page loads > done.
Complain about this comment (Comment number 38)
Comment number 39.
At 17:29 17th Feb 2010, Barry wrote:Hello I am from the States and I work for a State Agency in Virginia. I love this post it shows me how things should be around here and what we all should strive for in this agency.
Thanks again for sharing your process with us all.
Complain about this comment (Comment number 39)
Comment number 40.
At 17:58 17th Feb 2010, Rahul wrote:Thank you for this brilliant, inspiring post. I hope I can aspire to this level someday.
Complain about this comment (Comment number 40)
Comment number 41.
At 18:13 17th Feb 2010, mark wrote:"New design language"? There is nothing "new" about it! Designing with a "grid" has been around for a few hundred years at least! It's basic print design theory. They employ basic color theory as well. As far as "modern" goes, our collective and worldwide concept of modern continues to be influenced and defined by the Bauhaus art school of the 30's and 40's. The design is fantastic, it is very clean and has a great use of color. However, to claim that it is a "new design language" as one commenter said is simply ignoring established design history and theory.
Complain about this comment (Comment number 41)
Comment number 42.
At 18:32 17th Feb 2010, Seurat wrote:Nice to see so many first time posters coming on to praise the BBC.
Good to know the BBC blog network isn't completely moribund.
Complain about this comment (Comment number 42)
Comment number 43.
At 21:14 17th Feb 2010, Graeme Hewson wrote:This looks very good, and I look forward to seeing how it develops.
One thing: PLEASE don't make the carousels scroll automatically. I find any kind of animation on screen distracting and irritating. That's why I filter out ads (not applicable to the BBC, at least where I am!) I happened to visit Don Norman's Web site today, and I was pleased to note his carousels have simple forward and back buttons, and no pause buttons, because there's no need.
I trust Neville will lose the marquee scrolling from the front page of news.bbc.co.uk. I'm of an age to remember seeing Grandstand on Saturday afternoons in the 1960s, just before Doctor Who, and seeing the football results come in on the teleprinter. 10 characters/second, was it?
In the post you use words like "simple", "neutral", "restrained". I like those words.
Complain about this comment (Comment number 43)
Comment number 44.
At 21:32 17th Feb 2010, JamieLong wrote:John99, take another look at the image of the grid again. It is 31 columns. Start on the first dark pink coloured vertical column. Now count these only and you will see it is 31 (5, 5, 5, 5 and 11).
Also, I don't think that any of these images are actual size - they are being scaled to fit in this blog! In terms of your screen size - why do you have 800x600? Nearly every website is designed for 1024x768 and a lot of them are being designed for 1200x800 and rightly so. The web has moved on so much in the last few years, websites shouldn't be designed for such a small screen size - it is very limiting creatively!
Good work on the refresh BBC - I hate the web 2.0 look of the current site. It's also interesting to see the elements of a similar big project that I am currently working on...
Complain about this comment (Comment number 44)
Comment number 45.
At 00:54 18th Feb 2010, John99 wrote:@JamieLong #44 (re my #32)
Thanks for replying. I am probably missing something blindingly obvious!
I realise images are scaled to fit the blog. My point is would it have made sense to modify the images before scaling them so that the Text within the pink diagram remained easily readable on this blog. The diagram has no shortage of space available for annotations to be made without obscuring detail.
If on the newly designed pages such images are moved and scaled between the right hand wide column or the left hand narrow or very narrow columns any such text would become unreadable. Obviously text would be scaled to remain legible, it could have been on this example.
The grid is 31 columns if you count it as you did and ignore ( Why ?) alternate columns of 16 pixels and thus about half the pixels on the screen.
My main question is, I am trying to understand why a figure is drawn having 61 columns, with individual columns labelled as 16 px and a width labelled as 976px under a caption:
"... grid is based on 31 sixteen pixel columns ... "
What is the reasoning for ignoring half the screen ?
Correction:
Complain about this comment (Comment number 45)
Comment number 46.
At 07:48 18th Feb 2010, lard wrote:Excellent clean and useable design. Very modern - i.e. taken directly from middle-period Bauhaus print theory (with modifications for interactivity). There are hundreds of blogs around that already use this look, but that doesn't matter because it is, in some ways, fundamental in its goals and structural principles.
Complain about this comment (Comment number 46)
Comment number 47.
At 11:43 18th Feb 2010, Walter_Groped_Us wrote:""New design language"? There is nothing "new" about it! Blah Blah Blah..."
Mark, are you a first year graphic design student? Because you sound like one. Nothing's new, according to your logic. The Dyson was a revolutionary design, but it was still made of moulded plastic. Grids and colour wheels are out tools, it's how they're used that makes something 'new'.
Complain about this comment (Comment number 47)
Comment number 48.
At 13:27 18th Feb 2010, smallnumbers wrote:Kudos for posting.
For someone who has only a passing interest in web design this was nevertheless an insightful read. Great to see the BBC continuing to provide this kind of background, and level of info.
Can't wait to play with it live.
Complain about this comment (Comment number 48)
Comment number 49.
At 14:16 18th Feb 2010, briston wrote:Excellent article, a really good insight into the design process. This kind of transparency is exactly what I want to see from the Beeb.
Possibly not the right place to post this, but will the new iPlayer include an application for the Android market? We're not all iPhone junkies.
Complain about this comment (Comment number 49)
Comment number 50.
At 15:16 18th Feb 2010, gona wrote:where did you learn that homepages must be stuffed with little boxes and fill half the width but at least 3 times the hight of my screen?
i love the customization options though and thanx for the insightful post on your process!
cheers
Complain about this comment (Comment number 50)
Comment number 51.
At 15:32 18th Feb 2010, mahdi_manutd wrote:When I first visited the BBC website long ago, it came very basic and simple to me. Yet, it was easier to navigate in between the pages than other news websites such as CNN.
Years have passed and now I have to admit that the look and features available on this new BBC website are outstanding. Not only has it got even easier and more comfortable for me to find the story I'm looking for, but also has that become more user-friendly by letting me choose what kind of content I like to see on the BBC homepage as I type the address in my address bar and click "Go".
Ability to switch colors is also an exciting option in BBC. Participating in Blogs and live sport sorties is also lots of fun.
But, on top of all, I love the podcasts the BBC is now offering. I am from Iran and I am very glad to have the chance to listen to all my favorite BBC shows by downloading them in the form of Podcast.
Complain about this comment (Comment number 51)
Comment number 52.
At 15:43 18th Feb 2010, mittfh wrote:Here's my understanding of the measurements of the pink image:
Main page content:
Column 1: 9x 16px bands (144px total)
Gutter: 16px
Column 2: 9x 16px bands (144px total)
Gutter: 16px
Column 3: 9x 16px bands (144px total)
Gutter: 16px
Column 4: 9x 16px bands (144px total)
Combinations:
Columns 1+2: 19x 16px bands (304px total)
Gutter: 16px
Columns 3+4: 19x 16px bands (304px total)
Columns 1+2+3: 29x 16px bands (454px total)
Gutter: 16px
Column 4 only: 9x 16px bands (144px total)
Not used: All four columns: 39x 16px bands (634px total)
Gutter: 16px
Column 5: 21x 16px bands (336px total)
Overall: 61x 16px bands (976px total)
Advert boxes (for international site):
MPU: 300x200px
Flared Panel: 336x280px
("Flared" is my best guess at the first word - it's a little unclear)
XXL: 469x548px
Complain about this comment (Comment number 52)
Comment number 53.
At 16:32 18th Feb 2010, Ben Arent wrote:Bronwyn van der Merwe is doing excellent work, thanks for sharing all of the design process. Its great that the beeb is open, and lets hope it inspires other UK websites to upgrade and rationalize there designs.
Complain about this comment (Comment number 53)
Comment number 54.
At 16:43 18th Feb 2010, John99 wrote:@ mitfh #52 . . . (Related comments #27, #32, #44, #45, )
Thanks for the reply,
besides my inability to count consistently, I also have very poor understanding of Graphic Design. Someone will probably need to explain the basics for me to grasp this concept, but I will persevere.
I can understand that gutters or whatever will be used as white space (or whatever the appropriate terminology) and will therefore not be counted as part of a page available to display usable content.
What I am failing to understand is why a grid is mentioned and yet almost half of a page appears not to be counted for some reason. The pink diagram caption mentions 31 columns, whereas to my mind it appears to depict about 60
(I said 60 then recounted and said 61 columns.)
Depending on how the space is used I can see a handfull of the 16px columns used as gutters or whatever. However the caption arrives at a figure of 31 columns, as did someone else [#44]by discounting about half of the columns.
You are discounting I understand 39 wasted "Not used: All four columns: 39x 16px bands (634px total)" 16px columns.
Why are all these columns or "bands" about half the page being discounted, surely nearly all of it will contain useful content ?
(or is it used as redundant space; for example; to enable differing display resolutions to be used)
Glad someone else notices "it's a little unclear"
Complain about this comment (Comment number 54)
Comment number 55.
At 17:55 18th Feb 2010, Paul Jensen wrote:Awesome stuff.
Complain about this comment (Comment number 55)
Comment number 56.
At 21:34 18th Feb 2010, Hobbsy wrote:The horizontal navigation on the Sports page mockup looks great. Excited to see what you'll do with all that extra space (~160 pixels) where the old vertical navigation once stood.
Also, do you have any plans to pretty up the permalinks?
For example the Football section of Sport is currently:
https://news.bbc.co.uk/sport1/hi/football/default.stm
https://news.bbc.co.uk/sport1/hi/cricket/default.stm
why not something like:
https://www.bbc.co.uk/sport/football
https://www.bbc.co.uk/sport/cricket
Looking forward to seeing the new designs in place :)
Complain about this comment (Comment number 56)
Comment number 57.
At 21:39 18th Feb 2010, Szabolcs Bakos wrote:I love it! Awesome!
Complain about this comment (Comment number 57)
Comment number 58.
At 03:53 20th Feb 2010, jht wrote:Good job!
Well done.
Aways very like BBC website as a part of my life.
I am waiting the new style.
Complain about this comment (Comment number 58)
Comment number 59.
At 12:42 20th Feb 2010, Doge wrote:Two quick things:
1 Lots of links and story summaries on the home page please. I find it incredibly difficult to find the excellent content of the BBC
2 Ditch the embedded media player please,or give us an option. I like to use my own (Quicktime).
Complain about this comment (Comment number 59)
Comment number 60.
At 11:56 21st Feb 2010, Hyperstar wrote:The new design looks nice. Is it possible to use https://beta.bbc.co.uk/sport for testing?
Complain about this comment (Comment number 60)
Comment number 61.
At 13:01 21st Feb 2010, Alan Robertson wrote:Looks excellent - when can we expect it to launch? Any beta plans?
Complain about this comment (Comment number 61)
Comment number 62.
At 09:55 24th Feb 2010, Alex Hall wrote:Absolutely fantastic and interesting post. Thank you for sharing. It's interesting to see the changes that have been wrought to the BBC over the past few years. I like the fact that everything has finally become standardised. I remember at one point the style changed completely from one page to the next.
A promising stylistic view for the future of the BBC!
Complain about this comment (Comment number 62)
Comment number 63.
At 20:31 24th Feb 2010, Lion wrote:Amazing! The 1997 BBC website had an RSS feed!
RSS hadn't even been invented yet!
Complain about this comment (Comment number 63)
Comment number 64.
At 22:06 24th Feb 2010, TV Licence fee payer against BBC censorship wrote:#63. At 8:31pm on 24 Feb 2010, Lion wrote:
"Amazing! The 1997 BBC website had an RSS feed!
RSS hadn't even been invented yet!"
I think you'll find that is a bug in the Safari browser, not being able to distinguish between a web page from 1997 and one from 2010... :)
Complain about this comment (Comment number 64)
Comment number 65.
At 14:35 2nd Mar 2010, dommcloughlin wrote:Why use the dreaded Helvetica Arial combination, really exciting things are happening with web typography right now and seeing as you seem to have a typographic focus it would make sense to be more open, not to mention helvetica really isnt a good web font or any font
Complain about this comment (Comment number 65)
Comment number 66.
At 14:07 4th Mar 2010, Dave Jones wrote:Thanks for sharing and giving us an insight into the process of redeveloping a massive site like the BBC. Some really interesting ideas that I can't wait to see in a more concrete form. Hope there will be ample time and space for public feedback before your roll this out.
There are some people saying these are not new concepts - typography, grid based design, colour wheels, etc. A design language is an overarching scheme or style that guides the design of a complement of products or architectural settings. This language is not 'new' in the sense that it's components have never been seen before, it is 'new' because previously the beeb never had a master set of design guidelines for their web content, thus resulting in the 'wall of shame' (which I loved by the way).
I am personally a fan of grid based web design. Some people seem confused by it so I'll give my opinion on how it works. The BBC grid has 31 x 16px columns interleaved with 30 x 16px gutters. The total width therefore is (31 x 16) + (30 x 16) = 976 px. Therefore a 5 grid column would have a width of 144px with a margin of 16px either side.
Complain about this comment (Comment number 66)
Comment number 67.
At 23:29 9th Mar 2010, John99 wrote:I note that the Beta version of the homepage as now available and is to your new design.
The new Homepage does not include by default or by customisation the BBC blogs listing, is this an indication that the blogs will cease.
Complain about this comment (Comment number 67)
Comment number 68.
At 10:46 18th Mar 2010, Joe Richards wrote:Have thought about 100 things to say already, BUT what I most want to say, is PLEASE do not have the "email to a friend, print, tag" links in such prime space on a news article - its so archaic!
Some really exciting previews above though!
At first I was like "Helvetica? BBC?" but I think I am starting to like the idea! Would be amazing if somebody was comissioned to design a BBC typeface though - imagine! It could become a piece of history!
Complain about this comment (Comment number 68)
Comment number 69.
At 19:37 18th Mar 2010, Hyperstar wrote:Im still seeing the old layout
Complain about this comment (Comment number 69)
Comment number 70.
At 14:36 23rd Mar 2010, mikeposh wrote:You've included a link to a page of Neville Brody's work on his agency's own site https://www.researchstudios.com/neville-brody/ - as parts of that page have minimal brightness contrast and are almost impossible to read, how exactly does that inspire confidence in his (or his agency's) design priorities? Would you accept a page on BBC Online which looked like that?
Complain about this comment (Comment number 70)
Comment number 71.
At 11:38 26th Mar 2010, stevesnas wrote:Just looked at the new DW site and new homepage design, wow UN-impressed.
Complain about this comment (Comment number 71)
Comment number 72.
At 04:02 27th Mar 2010, U14390976 wrote:This comment was removed because the moderators found it broke the house rules. Explain.
Complain about this comment (Comment number 72)
Comment number 73.
At 21:40 12th Apr 2010, joemo wrote:I agree that it would be EXTREMELY USEFUL if the video player was resizable e.g. the pop out window could be used when the window is resized so is the video player.
Also it would be useful if videos were available in HTML5 instead of just flash so that they can play on any device e.g. iPlayer programmes could be watched from devices like the iPad without the need for a separate iPlayer Application
Complain about this comment (Comment number 73)
Comment number 74.
At 06:29 19th Apr 2010, eric wrote:This comment was removed because the moderators found it broke the house rules. Explain.
Complain about this comment (Comment number 74)
Comment number 75.
At 23:11 1st May 2010, rxdxt wrote:I love what you've done with the place.. the iconography, colours, a few crits; I miss the clock (though I see you have a widget), Videos in HTML5 would be nice.. and Id suggest that the homepage needs more content - previews (snapshot style) of where you are going to go, so you can decide whether you are going to go there or not.
Still - it looks really good.. I'm most pleased that you continue to iterate and evolve the great work we started together. Best wishes
Complain about this comment (Comment number 75)
Comment number 76.
At 12:45 11th May 2010, Will wrote:please include HTML 5 video instead of flash so everyone can view! thanks :)
Complain about this comment (Comment number 76)
Comment number 77.
At 04:44 12th May 2010, U14460911 wrote:This comment was removed because the moderators found it broke the house rules. Explain.
Complain about this comment (Comment number 77)
Comment number 78.
At 04:53 12th May 2010, U14460911 wrote:This comment was removed because the moderators found it broke the house rules. Explain.
Complain about this comment (Comment number 78)
Comment number 79.
At 13:09 13th May 2010, Vinfotech wrote:Really very cool. Many thanks for sharing this. Kudos to you....
Complain about this comment (Comment number 79)
Comment number 80.
At 15:17 14th May 2010, Martin Cassidy wrote:Can we expect a beta of these new designs soon?
I love them
Complain about this comment (Comment number 80)
Comment number 81.
At 18:23 18th May 2010, Manu wrote:In fact this looks interesting. I enjoy a lot de Iphone application and the new icons.
Some thinks aren not, in my opinion, veri nice like the colors.
Complain about this comment (Comment number 81)
Comment number 82.
At 19:08 20th May 2010, talat wrote:This comment was removed because the moderators found it broke the house rules. Explain.
Complain about this comment (Comment number 82)
Comment number 83.
At 10:36 3rd Jun 2010, Sam Merchant wrote:This comment was removed because the moderators found it broke the house rules. Explain.
Complain about this comment (Comment number 83)
Comment number 84.
At 10:37 3rd Jun 2010, Sam Merchant wrote:This comment was removed because the moderators found it broke the house rules. Explain.
Complain about this comment (Comment number 84)
Comment number 85.
At 11:37 15th Jun 2010, Sim Aurile wrote:This comment was removed because the moderators found it broke the house rules. Explain.
Complain about this comment (Comment number 85)
Comment number 86.
At 21:25 19th Jun 2010, NimpkishMedia wrote:Great Design, in any medium, has always been influenced by grids. Khoi Vinh and Mark Boulton created an awesome visual guide to using grids in web design. https://www.nimpkish.com/blog/web-site-design-using-grids
Complain about this comment (Comment number 86)
Comment number 87.
At 03:10 4th Jul 2010, Xmediasolutions wrote:This comment was removed because the moderators found it broke the house rules. Explain.
Complain about this comment (Comment number 87)
Comment number 88.
At 13:24 8th Jul 2010, Dirorg wrote:This comment was removed because the moderators found it broke the house rules. Explain.
Complain about this comment (Comment number 88)
Comment number 89.
At 15:00 9th Jul 2010, Samuel wrote:This comment was removed because the moderators found it broke the house rules. Explain.
Complain about this comment (Comment number 89)
Comment number 90.
At 12:56 14th Jul 2010, Aldebaranian wrote:So, after seeing the result of these efforts I can conclude that while there are plenty of admirable design choices made, the one most crucial ingredient of a news site: Accessibility of news, has not been taken much into account.
A news page should provide news first and foremost and the new design has spread news over a much larger space. Thus while it superficially looks better than before, no argument there, it is much less useful as a news site because I need to wade through much more screen real estate and be constantly distracted by less important visual noise in the side bars.
It is a shame because the redesign otherwise does look like a good idea. Why is the world moving towards a situation where density of information per pixel is rapidly dropping?
Complain about this comment (Comment number 90)
Comment number 91.
At 13:09 14th Jul 2010, slipperscot wrote:The whole design refresh is interesting, but lost somewhere is consistency. Local news sites, for example, https://news.bbc.co.uk/local/liverpool/hi/ completely loose the consistent news navigation banner, meaning you are forced to go to the browser back button to go anywhere else.
Complain about this comment (Comment number 91)
Comment number 92.
At 18:55 14th Jul 2010, Luvtochat wrote:Update: The site is now launched and the corresponding comments, nearly all negative, are showing the site to be a total disaster. A great story guys, but the results? Oh dear. Oh dear oh dear oh dear. Mr Brody of Research Studios, you should be refunding the BBC for the money they have lost with this debacle. Perhaps the BBC will sue....
Oh and the wall of shame. It's now been updated hasn't it. With this mess.
Time to practice flipping burgers Mr Brody.
Complain about this comment (Comment number 92)
Comment number 93.
At 04:10 15th Jul 2010, pyan wrote:Oh dear, oh dear, oh dear... a triumph of style over content indeed.
Have a look at the CNN site, Mr Brody. Look familiar?
Complain about this comment (Comment number 93)
Comment number 94.
At 05:42 15th Jul 2010, rosedvd wrote:This comment was removed because the moderators found it broke the house rules. Explain.
Complain about this comment (Comment number 94)
Comment number 95.
At 10:54 15th Jul 2010, June1989 wrote:An object lesson in form over function.
Complain about this comment (Comment number 95)
Comment number 96.
At 13:37 16th Jul 2010, barnband wrote:I can see why a number of people thought this a good idea at the early stages. Presentation is pretty slick. Then I wanted to see why so many felt it has been a disaster and can only reach the conclusion that the design team failed to understand it's own brief.
'Modern British
We want to create a modern British design aesthetic, something vibrant and quirky that translates outside our national boundaries'.
The same as British Airways with it's ill fated 'let appeal to the world' tail fin.
'Current
It needs to feel current and reflect what's happening in the UK right now, in real-time. We curate a timeline of Britain and create links to the past - to our rich archive'.
Hmmm! It's understandably vague, but I guess someone new what you were talking about, somewhere.
'Authentic
Wherever we are heard we need to sound authentic and relevant, warm and human. We want to reference the BBC's iconic design and broadcasting heritage. We value the trust placed in us'.
As in 'a copy of CNN, Sky etc.
'Compelling
We engage our audiences with compelling storytelling. Our voice ranges from serious and authoritative through to witty and entertaining'.
Can you turn the sound up a bit, you've hit the mute button!
'Distinctive
We stand out from the crowd. We strike a balance between overly templated, cookie-cutter design and beautiful anarchy. We are bold and dramatic'.
I am sure I could make a cookie cutter comment, if I had the first idea of what you are garbling on about.
'Pioneering
We pioneer design innovations that surprise and delight. But we take our audiences with us'.
Right now the audience is booing at the annoyance and hatred generated.
'Joined-up
We view all services and platforms as one connected whole but deliver experiences that are sensitive to their context of use'.
Needs to be joined up for the readers as well!
'Universal
Our services are open and accessible. Our interfaces are simple, useful and intuitive'.
Fail!
'Best
Our ambition is to be the best digital media brand in the world'.
You have taken the best in the world, and created a laughing stock.
From your'e site it looks as if you are well experienced in designing simplistic graphics for a public with a short attention span. People reading the BBC site do not need that, they read. They want to finish a story so they have to scroll and scroll and scroll.
Previous poster is correct, BBC needs to get a huge refund. Unless, we are not being told the full story - do I need to scroll down?
Complain about this comment (Comment number 96)
Comment number 97.
At 23:58 19th Jul 2010, Muck wrote:A wonderful and insightful blog post, but the end result leaves a lot to be desired.
I was concerned about your previous revamp, but in no time I came to like it. It was well laid out, easy to read, and it had the ability to customise it if you wanted. The new site looks like a poor version of the one before last.
What I like the least is that you have to scroll down, not only to see the more minor stories, but also some of the headline ones. It was far better before when you had the stories of less importance on the right. Now you've got Watch/Listen and Features & Analysis. It would be far better if you had to scroll down for those, rather than the news.
I can't understand why the BBC has used so much time to fix something that wasn't broken. Almost every comment I've read on the internet has been negative.
P.S. How much did the BBC spend on this?
Complain about this comment (Comment number 97)
Comment number 98.
At 00:35 21st Jul 2010, GV wrote:Understand the news redesign now.
vacuity of vision statements = vacuity of design
"We view all services and platforms as one connected whole but deliver experiences that are sensitive to their context of use." - love it!
Complain about this comment (Comment number 98)
Comment number 99.
At 10:17 23rd Jul 2010, cybero wrote:I read your article , found it to be very interesting and appreciated much of the author's and the design teams love of usability, design , graphics and typography , then I went back to review the News page and still got the same sorry, sad impressions that I did when first apprehending your new design.
It looks like a weird cross between YouTube and a tabloid newspaper site. In fact when I fist arrived at the new site, I thought that you must have been the victim of a cruel hack, seemingly shifting the site into a thoroughly retrograde spin on practically all fronts. The design has now shifted from one that was mature, well crafted and as far as I could tell, perfectly capable of being maintained on almost any Content Management System. It could easily have been redesigned under the hood, if that was all it needed.
I most certainly would not want to pay anything for this design if I could, but like every licence fee payer, I shall have to. If you were commissioned by me, I think I'd have told you to put the old design back and start beta testing thoroughly and getting some further feedback
To think that I used to point to the cross platform , cross browser excellence of design, style & service that the BBC site provided. It may be hard for you to comprehend this after all your hard work on this to date, but I don't think this is a redesign that is going to win many hearts and minds over that have already found fault with the look and feel of the site. I'm quite put off by the redesign and that is every time I look at it. That is in marked contrast to the incredibly positive impression the previous major design change made upon me.
I am given to understand that no criticism of the new site design will stop the roll out of this project & that eventually the rest of the site shall be styled and laid out just like the revamped News page. What a shame.
That and the fact that there was no public beta of this design means this restyling is thrust upon us without a really effective period of client side testing and subsequent design side punch listing. Running the new design in conjunction with the rest of the site breaks the coherence of the overall site design and results in incongruity. I have tried browsing the News site without referencing any other non - News internal link, just to try to get a good feel for the new design and how it functions. I despair though, it just doesn't impress me much overall.
This all seems to have been done with far too much haste and far too little wider consultation.
I do not believe for a moment that many of the design aims & objectives you seek to justify your changes with could not have been achieved whilst retaining much of the regular look and feel of the rest of your current site.
You speak of your deploying new Content Management system, is that supposed to be the spur to simplifying much of the look and feel? Is it just a dumber CMS? I thought CMS were meant in fact to be pretty much content neutral and style neutral too. I just hope it serves up pages faster for you than your old one then.
The remark regarding Web 2.0 gradients seems just lame. Web 2.0 was more about information sharing and mutual syndications, far less about gradients. What was I supposed to deduce - that you were doing a Google and shifting over to HTML 5 DTD? That you were inventing Web 3.0 ?
No that wasn't it at all, was it. You're still running HTML 4 transitional { & why not ? ].
In many ways this design seems to drag us back to a very low denominator and supports little of the very latest technologies. It seems like a dumbed down version of the previously configurable design.
How ironic that the concepts that seemed so appealingly essayed in your blog should have resulted in such an unappealing rectilinear result for me.
Complain about this comment (Comment number 99)
Comment number 100.
At 16:33 23rd Jul 2010, cybero wrote:Take it Back, Take it Back, Take that thing right out of here - Far Away, far away, take that thing right out of here.
Complain about this comment (Comment number 100)
Page 1 of 2