Sport Relief 2012
London Olympic Year

My Role - Creative Direction, Design Direction, Design, Illustration

Brief

Create an exclusive visual identity for the Sport Relief 2012 Campaign that avoids any conflict with the London 2012 campaign due to legal constraints. Additionally, craft the design for the responsive Sport Relief 2012 website.

Creative Soloution

I designed the concept with a strong emphasis on progress and dynamism, incorporating elements like finishing ribbons and digital sports gadgets. This theme was seamlessly integrated into every part of the website, evident in features like ribbon-like navigation and the imagery of runners moving forward.

Digital Skeuomorphism

The fundraising user interface (UI) I designed with a vintage digital aesthetic reminiscent of classic displays seen at sporting events. This retro style was elevated with a glossy finish reminiscent of the campaign's ribbons, ensuring visual cohesion. Subtle one-pixel lines were introduced in the background, enhancing the illusion of a tangible device. This approach embraced the popular trend of skeuomorphism that was prevalent during that period. I just elevated it to the next level.

Typography

Typography played a significant role in the campaign, utilising bold and friendly fonts throughout. In addition, a custom handcrafted font was developed exclusively for the campaign, adding a distinct and personalised element to the design.

Colour Palette

The palette had to steer clear of Olympic branding due to legal constraints. It also needed to meet AAA accessibility standards, so contrast was critical. The challenge? Make it bold, flexible, and modern while still feeling sporty and inclusive. Creative, but compliant.

Primary Colours

Secondary Colours

Schools Colour Palette

AAA Accessible Ribbons

I integrated design elements reminiscent of finish ribbons and event flags often seen at sports events into the visual concept. Meeting AAA accessibility standards was a prerequisite for the website's development.

GIF not PNG

For accessibility in 2012, GIF files instead of PNGs to achieve the design in build. The GIFs were crafted with specific dimensions – 1px width and 2px height – allowing them to interlace seamlessly.

Home Page Carrousel

I designed a homepage carousel that evokes the sensation of embarking on a journey through London, and sometimes even across venturing beyond. With each banner seamlessly blending into the next, the carousel presents a unified and continuous image, enhancing the user experience.

Page & Component Designs

iPad-Pro-12.9---Space-Gray---Landscape.png

Style Guide