BBC testing new Metro inspired homepage

If you are a fan of the Metro design language that Microsoft has developed, you are going to love the update to the beta BBC website. The new look takes inspirations from the live tiles that Microsoft uses as well as the typography that they have deployed across many of their interfaces. It should be noted that not all regions, including the US, can not see the new layout. 

Old Design

You can see in the pictures the current layout versus the newly deployed layout on the BBC beta website. The updated look provides a fresh feel to the BBC website and the redesign works rather well in use. The familiar live tile layout is present that Microsoft first coined on their Windows Phone interface and you can also easily navigate using the oversized arrows as seen below.  

New Design

While new changes always strike a chord with some individuals, the BBC refresh appears to hit the mark for a simple layout and usability. Overall, the new look is appealing and something we could get used too.

Let us know if you love or loathe the new design as it certainly has a bit of Metro feel to it that not everyone may love. 

Thanks for the tip James!

Report a problem with article
Previous Story

Microsoft reportedly acquires VideoSurf [Confirmed]

Next Story

Analyst: Less than 500,000 Nokia Lumia phones will ship in Q4

46 Comments

Commenting is disabled on this article.

Timeline...

1) Typography & Graphic Design of the 1800s, 1900s.
2) CUI guidelines for computers were limited to graphical resolution
3) Microsoft did extensive usability and research to bring graphic design and typography to modern computer interfaces in the 1990s.
4) They published the modern CUI guidelines from this research to bring 'print' aesthetics with usability.
5) It was implemented in several software projects at various levels (Streets 98, etc) and continued to be used in Windows Media Center where a simplistic Remote needed to operate a complex piece of software.


Enter Windows Phone 7, and everyone thinks it is new. Sadly this is lack of knowledge and understanding.

Even the ZuneHD incorporated the WP7 concepts several years ago, just as other pieces of software from Microsoft and OTHER companies that took from the Metro UI studies Microsoft conducted, starting with Microsoft software in the mid 1990s.

The other paradox.

1) Everyone sees WP7 and calls Metro ugly, hates it.
2) Windows 8 shows the same model, again mixed reviews.
3) Graphic designers like Metro and start using it in various projects like th BBC Website
4) People then start to love Metro concepts, as Typography is and whitespace is 'pretty'
5) The more people like it, the more the work to discredit Microsoft's involvement in adapting old school graphic design with modern interaction concepts.
6) People applaud Metro designs, but continue to give credit to anyone but Microsoft.

So take a reality check and just thank Microsoft for what they 'added' to what Metro is and bringing it to computers now that resolution and pagination and other concepts are easy for computers to do far easier.

**One reason Microsoft used WPF/Silverlight's model for WP7 was that it is designed around the Metro core concepts (which go back to Vista), and easily does brilliant typography and pagination and other more traditional graphic design methodologies for placing elements on a computer screen.

*yawn*

As I said, Zune was the first consistent implementation of Metro. Yes, there were earlier implementations, but Zune evolved those nascent design themes from sporadic implementations such as Media Center into something more substantial and less parochial; the first steps towards a consistently designed ecosystem.

Your entire argument is based on the flawed idea that Microsoft created anything and everything involving typography-led design, rectangles and icons, yet by Microsoft's own admission, Metro - in all of its various iterations - was itself inspired by many other sources (many in use for decades before the very earliest MS implementations of Metro), including most famously the signage used on transportation systems, where the Metro UI gets its name from.

Microsoft was not the first to use typography, rectangles, squares and icons in this way, and just because you wish to award it all of the credit for every design since that uses any of these elements, it doesn't mean that every subsequent design was directly inspired by Microsoft's Metro implementation. If MS can acknowledge that it wasn't the sole source of typography, squares, icons and white space, then you should be able to as well.

Your joyless rants in which you arrogantly tear apart everyone who dares to disagree with you are much more dull than you think they are. When lots of people do not share the same viewpoint as you, it doesn't always mean that they're all stupid, or blind, or ignorant of the facts. Sometimes, it just means that you're wrong.

I like how Microsoft cant even make their own site look good with metro, I mean how hard is it to use solid colors and text.

I've been watching this for a while now ... although I think the main page looks jumbled and more than a bit ugly , the new 'live' weather page looks much better!!

It should be noted that not all regions, including the US, can not see the new layout.

Wtf... I haven't got a clue what this is meant to say...

It can't be Metro if the text is not cut.

Not a fan of it personally. Looks crowded a little bit. Needs some space to breath.

It's more like Microsoft's metro was inspired by the BBC, not the other way around. It makes me laugh whenever someone on neowin claims something copies metro just because it has a simple layout.

Microsoft didn't invent the style. It's been around for a long time.

Joey S said,
It's more like Microsoft's metro was inspired by the BBC, not the other way around. It makes me laugh whenever someone on neowin claims something copies metro just because it has a simple layout.

Microsoft didn't invent the style. It's been around for a long time.

Yes the concepts of Metro have been around since the early days of typography.

However, adapting computer interface models around these concepts were Microsoft in the mid 1990s, and were studied and published on how to bring a common new UI model that moved away from the CUI guidelines of the late 80s and early 90s.

If Microsoft was inspired by the BBC, it was their 'print' version of content, and not their web site, as Metro and Microsoft UI work predate anything the BBC was doing online.

Wow, either people hate Microsoft, have no concept of UI history, no concept of graphic design and typography, or just love the BBC.

I wonder why the same people that were calling 'metro' ugly not too long ago are applauding it and now transfer the credit to anyone but Microsoft.

Magazine/news style web design came along with web 2 styling which has been around longer then "metro" has. So post is bit pointless.

Why does the BBC need a new homepage every year may i ask. There was nothing wrong with the design before the old design i.e. http://www.andrewtaylor.me.uk/...k-peak-at-new-bbc-homepage/

How many people actually use the homepage anyway. I normally see people google "BBC [insert specific service here]" or go to a direct link from bookmarks. Anyway, the site does look nice though, I'm not sure how upping font sizes, white space and images makes a more pleasant experience as so much content is now hidden behind that scroll thing IMHO.

Meph said,
Huh? It's not new and it's not Metro inspired. They've been using this style of design for ages.

http://www.bbc.co.uk/gel

Really? So they have been using this before 1995?

Metro UI concepts are very old, and only recently hitting more 'known' usage in computer interfaces. Go look up the Metro and Typography researching and published articles from Microsoft going back to 1994/1995.

Microsoft tried the Metro UI in several software product around this timeframe, but the world was still in 'awe' of the simulated 3D buttons and other gaudiness of the 1990s, and the Microsoft software was not noticed for its unique and Typography inspired UI, even though people have been using it since then, and it exists in Windows Media Center and other products like the Original XBox and the XBox 360 UI. (Go look up Microsoft Streets 98 and other products from this time line that were not a part of the Office/Windows ecosystem, and did use the Metro UI.)

thenetavenger said,
Really? So they have been using this before 1995?

No, no. I specifically mean the Microsoft Metro UI. I mean that GEL wasn't inspired by that metro, but the article indicates that it was.

I can see some similarities in terms of design concepts but I wouldn't really say its metro inspired. The BBC have also been testing this for some time, so it's a bit old.

Stefano Elia said,
I can see some similarities in terms of design concepts but I wouldn't really say its metro inspired. The BBC have also been testing this for some time, so it's a bit old.

Since Metro existed before the BBC website first existed, I doubt that any reasonable person can claim that Metro and the published UI research had no influence on the design.

Just to be clear, this isn't actually "Metro-inspired" - it's the latest development of the BBC's "Global Visual Language", which has been gradually implemented since early 2009, long before Windows Phone arrived on the scene. (Before WP7, the only consistent implementation of Metro was Zune, and that relied primarily on text; with Windows Phone, Metro grew into something that fully embraced iconography and tiles too).

Now known as GEL, the "Global Experience Language", work on the project began in 2008, and such is the scale and scope of the BBC site, that the work to move all sections and microsites to the new look is still ongoing.

You can find out more about the BBC's Global Experience Language guidelines at http://www.bbc.co.uk/guidelines/gel/; you can also follow the latest site updates to GEL at http://gelled.info/.

Remember though: just because something looks similar to Metro doesn't mean it was 'inspired by' or a copy of it. The BBC started the change to this style a long time ago.


@Vice: it's not as random as it looks. On the screenshot of the new page above, in the upper half: the first two columns are the top site-wide feature of the day (editor's choice), with two featured iPlayer video on demand links below it; to the right of that ("the red column") is the top news story, top headlines, and one local news headline; to the right of that ("the yellow column), the top sports headline, three further sports headlines and a further sport feature. For over a decade, BBC News branding has been inextricably linked with the colour red; BBC Sport has relied on yellow for around the same amount of time.

Below that, in the thick black bar that divides the top and bottom halves, you can select options to change the focus of the page; clicking on "More from lifestyle", for example, replaces the news headlines with recipes, health articles and features, and 'lifestyle and leisure' related video content.

The lower half of the page features three content drawers: most popular - which offers the top 10 most read, watched and listened-to news articles/content; what's on - the searchable TV/radio guide; and 'explore' - which provides quick links to a range of content across the site.

gcaw said,
Just to be clear, this isn't actually "Metro-inspired" - it's the latest development of the BBC's "Global Visual Language", which has been gradually implemented since early 2009, long before Windows Phone arrived on the scene. (Before WP7, the only consistent implementation of Metro was Zune, and that relied primarily on text; with Windows Phone, Metro grew into something that fully embraced iconography and tiles too).

Now known as GEL, the "Global Experience Language", work on the project began in 2008, and such is the scale and scope of the BBC site, that the work to move all sections and microsites to the new look is still ongoing.

You can find out more about the BBC's Global Experience Language guidelines at http://www.bbc.co.uk/guidelines/gel/; you can also follow the latest site updates to GEL at http://gelled.info/.

Remember though: just because something looks similar to Metro doesn't mean it was 'inspired by' or a copy of it. The BBC started the change to this style a long time ago.


@Vice: it's not as random as it looks. On the screenshot of the new page above, in the upper half: the first two columns are the top site-wide feature of the day (editor's choice), with two featured iPlayer video on demand links below it; to the right of that ("the red column") is the top news story, top headlines, and one local news headline; to the right of that ("the yellow column), the top sports headline, three further sports headlines and a further sport feature. For over a decade, BBC News branding has been inextricably linked with the colour red; BBC Sport has relied on yellow for around the same amount of time.

Below that, in the thick black bar that divides the top and bottom halves, you can select options to change the focus of the page; clicking on "More from lifestyle", for example, replaces the news headlines with recipes, health articles and features, and 'lifestyle and leisure' related video content.

The lower half of the page features three content drawers: most popular - which offers the top 10 most read, watched and listened-to news articles/content; what's on - the searchable TV/radio guide; and 'explore' - which provides quick links to a range of content across the site.

You might want to time-line Metro and its origins, as it invalidates all your assertions.

Metro is a UI design model using simplicity borrowing from very old school typography techniques, that predate the modern computer.

Microsoft advanced this model in the mid 1990s, which is where the released research that the BBC project borrowed from.

Thinking that Metro's simplistic elements, paging, whitespace, typography focus, as well as tiles and other aspects only originated in WP7 is laughable when read by any serious graphic designer that has been around before 1990.

Metro itself first appeared in Microsoft software products in the 1990s, and have been used in Microsoft products and other non-Microsoft projects going forward.

It is a set of common UI principles researched and published by Microsoft over 15 years ago.

Microsoft was a part of the common GUI guidelines of the 1980s and Metro is the updated version of this common guideline model that was introduced in scientific and technology studies in the 1990s by Microsoft.

To say that the BBC wasn't influenced by Metro show you have no understanding of Metro and are only associating it with the UI in WP7, which is somewhere between misinformed and pure silliness.

gcaw said,
...

Thank you. I was gonna say if something has a tile in it, people jump up and already assuming it's Metro and copy of Metro. I think it's another trend these days.

Oh thenetavenger - could you kindly point out the source that says the BBC project borrow from Microsoft? I guess, Metro for Microsoft now is Tablet for Steve Jobs. They invented it.

The weather page deserves an award.
Beautiful looking and so much easier to use than the old one.

Well done BBC keep up the good work and make me proud to pay my TV licence!

mine looks totally different from your screenshots.....

the header is black

no clock, no weather

all in greyscale....

This has been online for weeks.

To be honest I'm not sure whether I like it, it is slightly confusing. If I want business news I want a small list of business news. Not have to search for it.

stevember said,
This has been online for weeks.

To be honest I'm not sure whether I like it, it is slightly confusing. If I want business news I want a small list of business news. Not have to search for it.

Was about to say, keep up Neowin!

But I have the same feelings as you stevember. I like that the BBC is up-to-date and utilising new technologies. It looks nice and is quick to use, but it doesn't really deliver the news to me the way I want. The categories feature at the moment allows me to move the news I like the most to the top.

bdsams said,
We dont get this page in the US, only those in the UK (possibly all of Europe) can see it, we have this ugly page here: http://i.imgur.com/eH5R1.png

The BBC is first and foremost a UK service and website. You should've looked into it, realised how old this "news" is and not reported it.
Stop making excuses for writing crap posts.

Looks like they have a shotgun that shoots stories out on to the homepage in a random arrangement.

I'm much more of a fan of the Blog style of news page where each story is listed down the page with the newest on top. Like how Neowin has it.