Upload
rick-barron
View
111
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
1
bbc.co.ukUnifying Visual and Interaction Design
By Rick Barron
2
IN THE BEGINNING...1997
3
Why the change?
4
Overtime, dozens of agencies worked
independently on the site. The site took on a fairly
schizophrenic look and feel.
5
The goal
6
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.
7
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.
8
9 words
9
Modern BritishCurrent
Authentic
Compelling
Distinctive
Pioneering
Joined-up
Universal
Best
10
After hearing six web agencies pitch their services,
BBC went with:
11
RESEARCH STUDIOS
12
WALL OF SHAME
13
BBC created a new wider, centered page template to take
advantage of wider screen resolution.
14
NEW TEMPLATE
15
Hundreds of different banners styles
were reviewed to present a new global and local
branding and navigation system.
16
BANNER STYLES
17
Took a different road and
created a universal embedded media player.
18
NEW MEDIA PLAYER
19
BBC created a new homepage, that migrated
throughout the website, and
eventually onto their mobile platform.
20
NEW HOME PAGE LOOK...
21
...AND NEW MOBILE LOOK
22
CREATING CONCEPTUAL DESIGNS
23
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.
24
NEW GRID
25
The team created a look of
interwoven vertical and horizontal bands. This gave the right hand column, across the
site, to be a feature.
26
VERTICAL & HORIZONTAL BANDS
27
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.
28
16 PIXEL VERTICAL & 8 PIXEL BASELINE
29
A more dramatic use of typography was implemented. This
was made possible by the key
feature of the new GVL [global visual language].
30
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.
31
The core approach was to find a
simple, modern and compelling experience
based around dramatic and scalable editorial concepts.
32
TYPOGRAPHY
33
TYPOGRAPHY STYLING: STORY PAGE
34
TYPOGRAPHY STYLING: PROMO DRAWERS
35
CALL TO ACTION & PULL QUOTE
36
TYPOGRAPHY STYLING: TYPE OVER IMAGES
37
TYPOGRAPHY STYLING: SCALING & LINK STYLING
38
For non-branded areas, where the BBC masterbrand
appears, a highlight color palette was
created.
39
HIGHLIGHT COLOR PALETTE
40
Migrated from a left hand navigation to a consistent
placed, horizontal navigation throughout the site.
41
HORIZONTAL NAVIGATION
42
Creating a new look and feel for it’s embedded media
player, enhanced the bold calls to action and typography.
43
A NEW LOOK: EMBEDDED MEDIA PLAYER
44
A finishing touch was to
imbed a new set of icons. The look and feel is
very simple.
45
NEW LIBRARY OF ICONS