<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet title="XSL_formatting" type="text/xsl" href="/blogs/shared/nolsol.xsl"?>

<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/">
<channel>

<title>
BBC Internet Blog
 - 
Bronwyn van der Merwe
</title>
<link>https://bbcbreakingnews.pages.dev/blogs/bbcinternet/</link>
<description>Staff from the BBC&apos;s online and technology teams talk about BBC Online, BBC iPlayer, and the BBC&apos;s digital and mobile services. The blog is reactively moderated. Posts are normally closed for comment after three months. Your host is Eliza Kessler. </description>
<language>en</language>
<copyright>Copyright 2012</copyright>
<lastBuildDate>Tue, 16 Feb 2010 18:10:00 +0000</lastBuildDate>
<generator>http://www.sixapart.com/movabletype/?v=4.33-en</generator>
<docs>http://blogs.law.harvard.edu/tech/rss</docs> 


<item>
	<title>A new global visual language for the BBC&apos;s digital services</title>
	<description><![CDATA[<p>The <a href="https://bbcbreakingnews.pages.dev">BBC website</a> began its <a href="http://en.wikipedia.org/wiki/BBC_Online">official life back in December 1997</a> with this very simple design.  </p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="1-BBC-homepage-1996.jpg" src="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/img/1-BBC-homepage-1996.jpg" width="600" height="299" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span></p>

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

<p>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 <a href="https://bbcbreakingnews.pages.dev/guidelines/futuremedia/desed/visual_language.shtml">Global Visual Language 2.0</a>, with the aim of unifying the visual and interaction design of bbc.co.uk and the mobile website. </p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="2-Wall-of-shame.jpg" src="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/img/2-Wall-of-shame.jpg" width="600" height="344" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span></p>

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

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="3-GVL2-Grid.jpg" src="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/img/3-GVL2-Grid.jpg" width="600" height="445" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span></p>

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

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="4-GVL2-MAsthead.jpg" src="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/img/4-GVL2-MAsthead.jpg" width="600" height="446" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span></p>

<p>We discontinued the scores of different audio and video players and created a universal <a href="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/2008/03/embedded_media_on_news_and_spo.html">embedded media player</a>.  </p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="5-GVL2-EMP.jpg" src="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/img/5-GVL2-EMP.jpg" width="600" height="446" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span></p>

<p>And we <a href="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/2008/02/new_homepage_goes_live_1.html">redesigned the homepage</a> creating a visual style that began to ripple through the site and onto the mobile platform.</p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="6-GVl2-Homepage.jpg" src="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/img/6-GVl2-Homepage.jpg" width="600" height="445" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span></p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="7-Mobile.jpg" src="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/img/7-Mobile.jpg" width="600" height="581" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span></p>

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

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

<p>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: <a href="http://en.wikipedia.org/wiki/Neville_Brody">Neville Brody</a> and his agency, <a href="http://www.researchstudios.com/">Research Studios</a>.</p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="8-Neville-Brody.jpg" src="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/img/8-Neville-Brody.jpg" width="300" height="225" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span></p>

<p>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 <a href="http://www.researchstudios.com/neville-brody/">Neville's back catalogue of work</a>.<br />
 <br />
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.</p>

<p>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:</p>

<p><strong>Modern British</strong><br />
We want to create a modern British design aesthetic, something vibrant and quirky that translates outside our national boundaries. </p>

<p><strong>Current</strong><br />
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 <a href="https://bbcbreakingnews.pages.dev/archive/">archive</a>.</p>

<p><strong>Authentic</strong><br />
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.<br />
 <br />
<strong>Compelling</strong><br />
We engage our audiences with compelling storytelling. Our voice ranges from serious and authoritative through to witty and entertaining. </p>

<p><strong>Distinctive</strong><br />
We stand out from the crowd. We strike a balance between overly templated, cookie-cutter design and beautiful anarchy.  We are bold and dramatic.</p>

<p><strong>Pioneering</strong><br />
We pioneer design innovations that surprise and delight. But we take our audiences with us.<br />
 <br />
<strong>Joined-up</strong><br />
We view all services and platforms as one connected whole but deliver experiences that are sensitive to their context of use. <br />
 <br />
<strong>Universal</strong><br />
Our services are open and accessible. Our interfaces are simple, useful and intuitive.<br />
 <br />
<strong>Best</strong><br />
Our ambition is to be the best digital media brand in the world.</p>

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

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="9-GVl3-Workspace.jpg" src="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/img/9-GVl3-Workspace.jpg" width="600" height="450" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span></p>

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

<p>We took <a href="http://thingsmagazine.net/projects/1960s/index.htm">inspiration from many sources</a>. 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.</p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="10-Penguin.jpg" src="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/img/10-Penguin.jpg" width="600" height="450" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span></p>

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

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="11-grid.jpg" src="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/img/11-grid.jpg" width="600" height="450" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span></p>

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

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="12-grid.jpg" src="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/img/12-grid.jpg" width="600" height="383" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span></p>

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

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="13-baseline.jpg" src="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/img/13-baseline.jpg" width="600" height="316" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span></p>

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

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="14-type.gif" src="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/img/14-type.gif" width="600" height="441" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span></p>

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

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="15-type.jpg" src="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/img/15-type.jpg" width="600" height="673" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span></p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="16-type.jpg" src="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/img/16-type.jpg" width="600" height="490" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span></p>

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

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="17-type.jpg" src="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/img/17-type.jpg" width="600" height="245" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span></p>

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

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="18-TYPE.jpg" src="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/img/18-TYPE.jpg" width="600" height="758" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span></p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="19-type.jpg" src="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/img/19-type.jpg" width="600" height="262" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span></p>

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

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="20-colour.jpg" src="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/img/20-colour.jpg" width="600" height="424" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span></p>

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

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="21-colour.jpg" src="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/img/21-colour.jpg" width="600" height="424" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span></p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="22-coloour.jpg" src="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/img/22-coloour.jpg" width="600" height="424" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span></p>

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

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="23-colour.jpg" src="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/img/23-colour.jpg" width="600" height="424" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span></p>

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

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="24-nav.jpg" src="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/img/24-nav.jpg" width="600" height="424" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span></p>

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

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="25-EMP.jpg" src="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/img/25-EMP.jpg" width="600" height="424" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span></p>

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

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="26-carousels.jpg" src="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/img/26-carousels.jpg" width="600" height="424" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span></p>

<p>And finally, we've created a new set of icons.</p>

<p><span class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="27-icons.jpg" src="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/img/27-icons.jpg" width="600" height="424" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></span></p>

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

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

<p>I hope you like what you see. We're always interested in your feedback on both the philosophy and the styleguide.</p>

<p><em>Bronwyn van der Merwe is Head of Design and User Experience, Central Team, BBC FM&T.</em></p>]]></description>
         <dc:creator>Bronwyn van der Merwe 
Bronwyn van der Merwe
</dc:creator>
	<link>https://bbcbreakingnews.pages.dev/blogs/bbcinternet/2010/02/a_new_global_visual_language_f.html</link>
	<guid>https://bbcbreakingnews.pages.dev/blogs/bbcinternet/2010/02/a_new_global_visual_language_f.html</guid>
	<category>user experience &amp; design</category>
	<pubDate>Tue, 16 Feb 2010 18:10:00 +0000</pubDate>
</item>

<item>
	<title>New Homepage Goes Live</title>
	<description><![CDATA[<p>Finally, the <a href="https://bbcbreakingnews.pages.dev/">new homepage has launched</a>!  We've been very busy since the beta <a href="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/2007/12/a_lick_of_paint_for_the_bbc_ho.html"> launched in December</a>. We had <a href="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/2007/12/home_beta_page_response.html">an incredible response</a> to our request for feedback on the new design. Thanks to everyone who sent us their thoughts.  </p>

<p><a href="https://bbcbreakingnews.pages.dev/home/beta/"><img alt="homepage_chameleon.png" src="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/img/homepage_chameleon.png" width="430" height="165" /></a></p>

<p>It took us a while to work through all the comments, both from our <a href="https://bbcbreakingnews.pages.dev/home/feedback/">feedback form</a>, <a href="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/homepage/">previous blog posts</a>, and from blog posts <a href="http://technorati.com/search/http%3A%2F%2Fbbc.co.uk%2Fhome%2Fbeta?sourceid=opensearch">across the web</a>. The response was overwhelmingly <a href="http://www.theotherblog.com/Articles/2008/01/30/the-bbc-beta-is-almost-fab/">positive</a>; however, there were also some <a href="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/2007/12/a_lick_of_paint_for_the_bbc_ho.html#c5006673">suggestions for improvements</a>, reports of bugs and <a href="https://bbcbreakingnews.pages.dev/blogs/bbcinternet/2007/12/a_lick_of_paint_for_the_bbc_ho.html#c5001926">the odd insult</a>!</p>

<p>We also engaged in a programme of extensive user and marketing research and testing to assess the site's success both with new audiences and regular users of the site.  </p>

<p>Taken all together, this gave us great insight as to where to go next.</p>

<p>When the design team returned after Christmas, we began in earnest making improvements, testing and iterating the design.  </p>

<p>From a visual point of view, we reduced the size of the fonts, toned down some of the colours and created a more compact, space-efficient design.  </p>

<p>Editorially, you'll see new topics in the "customise your page" panel including Music, iPlayer and Business & Money. </p>

<p>Within some of the old modules, we've improved the offering, for example, we've added "listen again" links to the radio module and national sports feeds to the sports module.  </p>

<p>There's also more customisation: users can now choose the colour of the page, or leave it to rotate, picking up the colour of the main feature image.  </p>

<p>We feel that running the beta page in tandem with the old homepage has been a great success and we feel that the new homepage is much stronger and more refined, thanks to your input over the last few months.  </p>

<p>Our next step is to start rolling out this new visual language across the rest of bbc.co.uk. We'll keep you posted...</p>

<p><em>Bronwyn van der Merwe is Acting Creative Director, User Experience and Design, BBC Future Media and Technology</em></p>]]></description>
         <dc:creator>Bronwyn van der Merwe 
Bronwyn van der Merwe
</dc:creator>
	<link>https://bbcbreakingnews.pages.dev/blogs/bbcinternet/2008/02/new_homepage_goes_live_1.html</link>
	<guid>https://bbcbreakingnews.pages.dev/blogs/bbcinternet/2008/02/new_homepage_goes_live_1.html</guid>
	<category>Homepage</category>
	<pubDate>Wed, 27 Feb 2008 10:00:01 +0000</pubDate>
</item>


</channel>
</rss>

 
