Government Olympic Communications

January to June, 2012

Before the London 2012 Olympics, I worked on a project with Code For The People creating a WordPress site for the Government Olympic Communications. This is a newsroom site which needed to be quick to load, quick to update and accessible on any device (responsive).

With few visual design guidelines to go on, I started mocking up visual designs based on wireframes by Simon Dickson.

mockup from early stages of the Government Olympic Communications design

an early mockup from early stages of the Government Olympic Communications design

skinny mockup from early stages of the Government Olympic Communications design

a very early skinny mockup from early stages of the Government Olympic Communications design

 

I wanted the design to work well across different screen sizes with as minimal performance issues as possible, so I kept the design very light on graphics, only using the content imagery to draw attention to the news posts. Where I might have previously used web fonts to make a design more distinctive, I decided to go for more standard fonts in the design to again reduce performance load.

The design is broken up into modules to make it easy to switch about to fit the width of the screen. I also tried to keep a very strong typographic hierarchy, with clear differences between the header sizes, to make the content hierarchy as clear as possible.

As we continued to work on the design, we started working in-browser so we could respond quickly to changes in the scope and visual design. We had a tight timescale, before the Olympics began, and so we had to prioritise different elements to meet the strict deadline.

One of the parts of the design that I was most pleased with was the map. I hadn’t used an image map for years, and I finally found the right time to use one! Each section of the map leads to news posts relevant to that geographical area. I colour-coordinated the different areas with the text key, darkening the text colours slightly to make them easier to read.

colour-coded UK map for geographical navigation

UK map for geographical navigation