Rick Barron: BBC Design BriefPresentation Transcript
Unifying Visual and Interaction Design
By Rick Barron
IN THE BEGINNING...1997
Why the change?
Overtime, dozens of agencies worked independently on the site. The site took on a fairly schizophrenic look and feel .
Unite the visual and interaction design of bbc.co.uk and the mobile site. In short, take the organization and its users into a more compelling digital space .
BBC sought to create a design philosophy, or a set of values, to unite the user experience practitioners across the business. They focused on nine keywords which summed up what they were about and trying to achieve.
Modern British Current Authentic Compelling Distinctive Pioneering Joined-up Universal Best
After hearing six web agencies pitch their services, BBC went with:
WALL OF SHAME
BBC created a new wider , centered page template to take advantage of wider screen resolution.
Hundreds of different banners styles were reviewed to present a new global and local branding and navigation system.
Took a different road and created a universal embedded media player.
NEW MEDIA PLAYER
BBC created a new homepage , that migrated throughout the website, and eventually onto their mobile platform .
NEW HOME PAGE LOOK...
...AND NEW MOBILE LOOK
CREATING CONCEPTUAL DESIGNS
A new grid 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.
The team created a look of interwoven vertical and horizontal bands . This gave the right hand column, across the site, to be a feature.
VERTICAL & HORIZONTAL BANDS
With the 16 pixel vertical grid, BBC added an integrated 8 pixel baseline . Doing this allowed the ability to align on a page both vertically and horizontally.
16 PIXEL VERTICAL & 8 PIXEL BASELINE
A more dramatic use of typography was implemented. This was made possible by the key feature of the new GVL [global visual language] .
The use of Helvetica or Arial in bold type was launched. Variations in size was restricted so as to provide control in consistency across the site.
The core approach was to find a simple, modern and compelling experience based around dramatic and scalable editorial concepts.
TYPOGRAPHY STYLING: STORY PAGE
TYPOGRAPHY STYLING: PROMO DRAWERS
CALL TO ACTION & PULL QUOTE
TYPOGRAPHY STYLING: TYPE OVER IMAGES
TYPOGRAPHY STYLING: SCALING & LINK STYLING
For non-branded areas, where the BBC masterbrand appears, a highlight color palette was created.
HIGHLIGHT COLOR PALETTE
Migrated from a left hand navigation to a consistent placed, horizontal navigation throughout the site.
Creating a new look and feel for it’s embedded media player, enhanced the bold calls to action and typography.
A NEW LOOK: EMBEDDED MEDIA PLAYER
A finishing touch was to imbed a new set of icons. The look and feel is very simple.