Headbox (Brilliant Basics) April 2015

Web Design / Iconography

Overview

HeadBox is a marketplace for renting amazing and unusual spaces to make brilliant things happen. Working within a small team, I delivered a brand identity, design style-guide and responsive web design.

The HeadBox Brand

I was heavily involved throughout the project — kicking off with workshops to establish the product name, define the feature roadmap and create a series of mood boards. The client wanted HeadBox to feel British and at the centre of the design was the selection of a typeface called 'Mr Eaves'. This humanist sans-serif font was a perfect choice, referencing not only 'Gill Sans' — a typeface designed by Eric Gill and used by the BBC, but also 'New Johnston' — designed by Edward Johnston and used throughout London Underground. The colour palette relied on rich hibiscus and cerulean tones, distancing the brand characteristics from the typical bright and vivid shades found in many startups.

Designs were created mobile first and responded to larger breakpoints accordingly.

Atomic Web Design

Instead of designing a series of webpages across multiple breakpoints, I decided to create a design system using atomic design methodology. Design elements are created independently and collected to form components. A library of Sketch symbols can then be used to stitch components together and create page templates. A design system is flexible and highly reusable, allowing iterations to be experimented with and deployed quickly and efficiently.

Iconography

My final task was to create a family of over 40 icons for HeadBox, many of which would be used alongside labels for venue facilities. The iconography was constructed using a rigid underlying grid, ensuring familiarity and consistency amongst the icon set.

An example of the iconography used for venue facilities.