« Previous | Main | Next »

A new global visual language for the BBC's digital services

Post categories:

Bronwyn van der Merwe | 18:10 UK time, Tuesday, 16 February 2010

The BBC website began its official life back in December 1997 with this very simple design.

1-BBC-homepage-1996.jpg

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.

2-Wall-of-shame.jpg

We created a new wider, centred page template to take advantage of wider screen resolutions and for the first time created an underlying grid.

3-GVL2-Grid.jpg

We rationalised the hundreds of different banner styles into a new global and local branding and navigation system.

4-GVL2-MAsthead.jpg

We discontinued the scores of different audio and video players and created a universal embedded media player.

5-GVL2-EMP.jpg

And we redesigned the homepage creating a visual style that began to ripple through the site and onto the mobile platform.

6-GVl2-Homepage.jpg

7-Mobile.jpg

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.

8-Neville-Brody.jpg

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.

9-GVl3-Workspace.jpg

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.

10-Penguin.jpg

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.

11-grid.jpg

We're looking to create the effect of interwoven vertical and horizontal bands, making a feature of the right hand column across the site.

12-grid.jpg

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.

13-baseline.jpg

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.

14-type.gif

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.

15-type.jpg

16-type.jpg

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.

17-type.jpg

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.

18-TYPE.jpg

19-type.jpg

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.

20-colour.jpg

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.

21-colour.jpg

22-coloour.jpg

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.

23-colour.jpg

We're moving away from left hand navigation to consistently placed, horizontal navigation across the site. Here's an example from Sport:

24-nav.jpg

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.

25-EMP.jpg

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.

26-carousels.jpg

And finally, we've created a new set of icons.

27-icons.jpg

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.

Comments

Page 1 of 2

  • Comment number 1.

    What a truly fantastic post, can't wait to this rolling out.

    The new style looks brilliant.

  • Comment number 2.

    An excellent and very comprehensive look to the past, present and future of bbc.co.uk. Three thumbs up.

  • Comment number 3.

    A resizable Video player PLEASE!

  • Comment number 4.

    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.

  • Comment number 5.

    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.

  • Comment number 6.

    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?

  • Comment number 7.

    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!

  • Comment number 8.

    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!

  • Comment number 9.

    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.

  • Comment number 10.

    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?

  • Comment number 11.

    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.

  • Comment number 12.

    "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?

  • Comment number 13.

    Looks fantastic!
    Wll done!

    So when can we expect to see the roll-out begin for this?

    Mark

  • Comment number 14.

    Bronwyn van der Merwe:

    I support post # 1 and, thinks its' better than all of the other formats before that.

    (Dennis Junior)

  • Comment number 15.

    Can we have something on user testing and experience please.

  • Comment number 16.

    Looks brilliant. Beautiful design, can't wait to see it live! when can we expect it?

  • Comment number 17.

    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.

  • Comment number 18.

    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. :)

  • Comment number 19.

    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?

  • Comment number 20.

    How far down the line are you with this? When will we start to see the new VL for real?

  • Comment number 21.

    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?




  • Comment number 22.

    Looks amazing.

    Neville Brody is a genius. Please can he do Gateway too :)

  • Comment number 23.

    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.

  • Comment number 24.

    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.

  • Comment number 25.

    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 ;-)

  • Comment number 26.

    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.

  • Comment number 27.

    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.

  • Comment number 28.

    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?

  • Comment number 29.

    What a fascinating insight into your methodology and practices. Really interesting and very educational.

  • Comment number 30.

    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

  • Comment number 31.

    Truly awesome and inspiring. Excellent work from the BBC again.

  • Comment number 32.

    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.

  • Comment number 33.

    Great to see a public sector body pioneering design and usability that most of the private sector would envy

  • Comment number 34.

    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.

  • Comment number 35.

    Great post, always good to see the use of good and consistent design across a brand.

  • Comment number 36.

    I think the icons at the end are great. Is there any chance of them being released under a creative commons license?

  • Comment number 37.

    This is truly one of the most interesting articles on your methodology and working practices!

  • Comment number 38.

    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.

  • Comment number 39.

    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.

  • Comment number 40.

    Thank you for this brilliant, inspiring post. I hope I can aspire to this level someday.

  • Comment number 41.

    "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.

  • Comment number 42.

    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.

  • Comment number 43.

    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.

  • Comment number 44.

    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...

  • Comment number 45.

    @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:

  • Comment number 46.

    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.

  • Comment number 47.

    ""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'.

  • Comment number 48.

    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.

  • Comment number 49.

    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.

  • Comment number 50.

    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

  • Comment number 51.

    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.

  • Comment number 52.

    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

  • Comment number 53.

    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.

  • Comment number 54.

    @ 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"

  • Comment number 55.

    Awesome stuff.

  • Comment number 56.

    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 :)

  • Comment number 57.

    I love it! Awesome!

  • Comment number 58.

    Good job!
    Well done.
    Aways very like BBC website as a part of my life.
    I am waiting the new style.

  • Comment number 59.

    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).

  • Comment number 60.

    The new design looks nice. Is it possible to use https://beta.bbc.co.uk/sport for testing?

  • Comment number 61.

    Looks excellent - when can we expect it to launch? Any beta plans?

  • Comment number 62.

    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!

  • Comment number 63.

    Amazing! The 1997 BBC website had an RSS feed!

    RSS hadn't even been invented yet!

  • Comment number 64.

    #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... :)

  • Comment number 65.

    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

  • Comment number 66.

    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.

  • Comment number 67.

    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.

  • Comment number 68.

    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!

  • Comment number 69.

    Im still seeing the old layout

  • Comment number 70.

    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?

  • Comment number 71.

    Just looked at the new DW site and new homepage design, wow UN-impressed.

  • Comment number 72.

    This comment was removed because the moderators found it broke the house rules. Explain.

  • Comment number 73.

    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

  • Comment number 74.

    This comment was removed because the moderators found it broke the house rules. Explain.

  • Comment number 75.

    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

  • Comment number 76.

    please include HTML 5 video instead of flash so everyone can view! thanks :)

  • Comment number 77.

    This comment was removed because the moderators found it broke the house rules. Explain.

  • Comment number 78.

    This comment was removed because the moderators found it broke the house rules. Explain.

  • Comment number 79.

    Really very cool. Many thanks for sharing this. Kudos to you....

  • Comment number 80.

    Can we expect a beta of these new designs soon?
    I love them

  • Comment number 81.

    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.

  • Comment number 82.

    This comment was removed because the moderators found it broke the house rules. Explain.

  • Comment number 83.

    This comment was removed because the moderators found it broke the house rules. Explain.

  • Comment number 84.

    This comment was removed because the moderators found it broke the house rules. Explain.

  • Comment number 85.

    This comment was removed because the moderators found it broke the house rules. Explain.

  • Comment number 86.

    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

  • Comment number 87.

    This comment was removed because the moderators found it broke the house rules. Explain.

  • Comment number 88.

    This comment was removed because the moderators found it broke the house rules. Explain.

  • Comment number 89.

    This comment was removed because the moderators found it broke the house rules. Explain.

  • Comment number 90.

    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?

  • Comment number 91.

    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.

  • Comment number 92.

    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.

  • Comment number 93.

    Oh dear, oh dear, oh dear... a triumph of style over content indeed.

    Have a look at the CNN site, Mr Brody. Look familiar?

  • Comment number 94.

    This comment was removed because the moderators found it broke the house rules. Explain.

  • Comment number 95.

    An object lesson in form over function.

  • Comment number 96.

    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?

  • Comment number 97.

    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?

  • Comment number 98.

    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!

  • Comment number 99.

    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.

  • Comment number 100.

    Take it Back, Take it Back, Take that thing right out of here - Far Away, far away, take that thing right out of here.

 

Page 1 of 2

More from this blog...

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.