Fiasco Design harnesses the power of JavaScript and CSS in this slick new website for six-times Olympic champion Sir Chris Hoy.
Bristol-based agency Fiasco Design jumped at the chance of creating a dynamic new website design for British track cyclist Sir Chris Hoy recently. The aim was to tell Hoy's incredible story whilst also showcasing his recent public speaking and his own range of HOY Bikes.
Here, Fiasco Design co-founder and creative director Ben Steers explains how the team brought each element together in this sleek new design.
How did the brief come about?
Sir Chris Hoy's management ESP approached us last summer to come on board with the redesign. We'd worked with ESP on a number of projects before, including a site for another of their athletes, track cyclist Jason Kenny, as well as their own company site. After completing these there was a need to freshen up Chris's site so it was a fairly natural progression from there.
Did you have a lot of creative freedom?
We were given a very open brief. We were simply tasked with modernising Chris's current site and making the content feel more 'dynamic'. There were a few requirements to do with new areas of the site but overall we were able to take full creative control over the design of the site, which was refreshing.
The Fiasco Design team were able to take full creative control over the design of the site
What was your design approach to the project?
We new from the start that the site design was likely to be quite minimal as there wasn't a great deal of content to work with. The challenge with most of the web projects that we take on is trying to manage the content and create an effective design which can accommodate that content.
The challenge is trying to manage the content and create an effective design which can accommodate that content
In this case we were given a library of professional, high res images and very little copy so we knew that we'd need to make the most of the images.
What did you use to build the site?
JavaScript and CSS. And, as with any web project we also use a number of different software programs throughout the process including Photoshop, Illustrator and Dreamweaver. The site was designed using Illustrator and Photoshop and built in the browser with the assistance of Dreamweaver.
The site was built using a combination of JavaScript, CSS, Illustrator, Photoshop and Dreamweaver
You mention the site 'pushes the limits of responsive web design, with minimal JavaScript'. Can you explain how?
The site design varies greatly in style and functionality from desktop to mobile, featuring a complete change in navigation in order to make the most of mobile screens. This radical difference would usually be achieved by creating separate sites, but we used responsive CSS to serve the same content to all devices.
What was the most challenging part of the project?
The hardest part technically was managing the layering of content so that only the key content areas scroll, while others stay in view. It's the kind of thing that is vital to user experience, but is ignored when done well and surprisingly fiddly in coding terms, especially in a responsive site.
The site design varies greatly in style and functionality from desktop to mobile
What has the reaction to the site been so far?
We're really happy with the outcome. As with any project there are some things that are taken out of your hands, but the general reaction and feedback from the general public and most importantly the client, has been very positive.
Want to see more from Fiasco Design? Check out the website or follow the team on Twitter for regular updates.
