BBC GEL2 concepts
The primary reason for a grid is to organise content. It's secondary purpose of making that content re-usable though, is all too often overlooked.
The current BBC grid was based on a desired visual outcome, and is now struggling with the practical reality of the increasingly diverse content the organisation needs to present.
This self-initiated project utilised elements of BBC GEL to develop a flexible and sustainable grid system to accommodate component re-use and cater for increasing smartphone & tablet audience.
This project lead an increased awareness of the need to re-use components and a more prominent role of early stage product design across the BBC.
- Systematic interface design
The current BBC GEL uses an asymmetrical grid which limits its flexibility and complicates the reuse of components. Fixing this was a key rationale for updating the grid, so as to allow components to be used across multiple page situations and even device platforms whilst retaining their core identity.
A core part of the GEL revision was altering the design structure so that rather than the gutter running between columns, each column instead contains internal gutters. Visually, this effectively doubles the whitespace giving the typography more breathing space, but it also allows the gutter to be used as an active space - such as enlarging hit areas or allowing highlighted sections to 'break out of the grid' for added emphasis (see the Live component in this visual treatment by Lead Designer Dan Shallcross).
A modular grid
Doubling the gutter width allows us to rationalise the vertical rhythm. As you can see from the image dimensions detailed above, 16:9 images using this grid perfectly subdivide into smaller 16:9 images aligning to the 16px baseline / 32px gutter.