Rick Barron: BBC Design Brief

1,292 views

Published on

Published in: Design
  • Be the first to comment

Rick Barron: BBC Design Brief

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

×