BBC R&D visual identity guidelines

v0.2 Beta

Source code & documentation: https://github.com/bbc/rd-visual-id/

Editor URL (Chrome/desktop): https://bbc.github.io/rd-visual-id/editor/

Ethos

This visual identity has been created to help us better communicate what we do, as well as visually standing out and feeling like the exciting, intriguing place that R&D is.

We’re created a generative identity that allows us to describe the uniqueness of what we do with equally unique visuals – micro identities for our work & people that are designed using algorithms to never be the same twice. The visual components of the identity are generated using a web tool, written in React, that anyone can access.

It’s a living identity and we hope that everyone in R&D is able to contribute to/improve/hack over time to create more effective, more beautiful and hopefully more weird results with it.

• BBC R&D visual identity guidelines
  • Source code & documentation: https://github.com/bbc/rd-visual-id/
  • Editor URL (Chrome/desktop): https://bbc.github.io/rd-visual-id/editor/
  • Ethos
  • Logos
  • Colours
  • Typography
    • Titles
    • Subtitles & card titles
    • Body copy
    • Example
  • Datacards
    • Source code & documentation: https://github.com/bbc/rd-visual-id/
    • Editor URL (Chrome/desktop): https://bbc.github.io/rd-visual-id/editor/
    • Patterns
    • Icons
  • Photography
    • Photography style 1: Staff confident in their natural habitat
    • Photography style 2: Intriguing imagery of experiments at work/play
    • Photography style 3: Objectifying our work
  • Presentation/document templates
    • Template status
  • Example applications
  • Areas for future exploration
    • Data: How might the identity tell a story using data?
    • Audio: What would a generative audio sting for R&D be?
    • Our Labs: How might the identity live in physical spaces?
    • Convergence: How might we bring multiple data cards together in interesting ways?
  • Feedback

Logos

The R&D logo is a simple wordmark using the BBC blocks and Reith Sans typeface, and can be downloaded in PNG and SVG form https://www.dropbox.com/sh/ei1llgulkh1hslm/AAAJiCCZMKPisUidaMRzrs0Ha?dl=0

Colours

There are four colour families. We generally advise that each data card sticks to one colour family, but don’t rule out bringing them together for more creative applications. These are found in ./components/src/constants of the editor github repo.

purple = ['#450073', '#FF4855', '#D64BCE']
orange = ['#730A40', '#FF5B00', '#FFBB00']
green = ['#342446', '#12A87A', '#66CFA3']
blue = ['#000050', '#7080FF', '#80BBFF']
mono = ['#000000', '#FFFFFF']

Typography

Titles

BBC Reith Serif bold, ideally using the middle-darkest of the colour family.

Subtitles & card titles

BBC Reith Sans medium uppercase, using the darkest of the colour family

Body copy

BBC Reith Sans medium (or bold for emphasis), using black/#000000

Example

Datacards

Datacards are micro-identities that represent who we are & what we do in R&D. They could be made for a team, a project, or a building. The source code is available for all R&D staff to use & contribute to:

Source code & documentation: https://github.com/bbc/rd-visual-id/

Editor URL (Chrome/desktop): https://bbc.github.io/rd-visual-id/editor/

The datacard is comprised of series of abstract patterns, generated using GLSL shaders that loosely translate to areas we work in.

The data cards are not intended to be hieroglyphic, so don’t worry trying to get it to accurately represent specifics of your work. Each pattern is generated with a random seed that ensures no two are the same.

To create a datacard you use the web tool using the link above:

• Choose some parameters on the right hand side that loosely represent the correct topics
• Choose a colour (we’re not assigning meaning to colour for now)
• Hit the “generate” button to change the random seed & colour combos until you find something you like
• Hit “export” to see a range of options for creating stills (currently as frame sequences) GIFs, and MP4s of the patterns as well as composed elements (such as datacards).
• Oh, and don’t forget to hit “play” in the bottom left to see it moving!

NOTE: The tool is still in development, and you may on occasion get glitchy results (which might be your thing anyway). See the issues tracker for known issues - please feel free to submit pull requests!

Patterns

The datacard is comprised of series of abstract patterns, generated using GLSL shaders (see generator documentation) using the web too.

They can also also be accessed via dropbox as:

• Bitmap & motion patterns https://www.dropbox.com/sh/9qicfsuf2sw5h2i/AAAOWb61SN5dlC-3jFAXsgbYa?dl=0
• Vector patterns (more coming soon) https://www.dropbox.com/sh/v72k44tq46bcs3f/AADJt6NBgJJPFp9V4yti7jvZa?dl=0

Icons

These are based on the BBC GEL icons and will be added to over time. Please email alex.nelson@bbc.co.uk if you have icon requests https://www.dropbox.com/sh/5jjpj8ta5crxx6j/AABAWzU46MAGwdn7PZ1-7b4Qa?dl=0

Photography

We have three styles of imagery we want to start using:

Photography style 1: Staff confident in their natural habitat

• ✅ People at work, sitting at their desks, in the lab
• ✅ Looking at the camera or focusing on the task at hand
• ❌ Uncomfortable headshots against a wall

Photography style 2: Intriguing imagery of experiments at work/play

• ✅ Weird and wonderful uses of technology
• ✅ A bit of mystery
• ❌ People sitting at computers with no sense of output

Photography style 3: Objectifying our work

• ✅ Still-life portraits of prototypes
• ✅ appreciating the beauty in our data
• ❌ People hunched over computers with no context of what they’re doing

Existing photography can be found on Dropbox, where we’ll be building up a library of images. https://www.dropbox.com/sh/izp0zkfgpszofmj/AABDCxxdpbKHtmTtCLXrUd5ga?dl=0

Presentation/document templates

Keynote and Powerpoint templates are in development, and can be accessed here.

https://www.dropbox.com/sh/50srujhfwvvxzvo/AAC1gIn8mihrPg41OSzqeW3Pa?dl=0

Template status

• Powerpoint/Keynote - D+E version “D+E R&D template”“ Most stable of the two templates being trialled. TODO:
  • Colour/pattern variants
  • “Grab & go” version
• Powerpoint/Keynote - Bolder version “R&D template” More impactful version, but more dificult to implement. TODO:
  • Colour variants
  • Automatic cover generation
  • “Grab & go” version
• Standalone card template - use this for generating assets like stickers (save as PDF)
• Word template Only one doc tested fo far, please send examples to alex.nelson@bbc.co.uk
• LaTeX - to to

Example applications

These are a flavour of what the identity could be used for - we want your ideas for what else could happen!

Areas for future exploration

The work to date has only scratched the surface of what a generative identity for R&D could be. We want you to explore this more.

There are some specific themes that we’re really interested in, and could prove a jumping-off point for your exploration:

Data: How might the identity tell a story using data?

How could the identity bring to life dashboards, whereabouts systems, interesting data visualisations?

Audio: What would a generative audio sting for R&D be?

Bringing together musical and elements from the BBC sound effects archive?

Our Labs: How might the identity live in physical spaces?

Where can we see it emerging on windows, walls, floors, screens, in 3D?

Convergence: How might we bring multiple data cards together in interesting ways?

Could we show evolution of projects, people, teams?

Feedback

Any bugs, please add them to the GitHub issues tracker, all other queries please email alex.nelson@bbc.co.uk