When we came to the design and build phase of the Design Council website we had already done a lot of work to help define the digital strategy. You can read about that here. The outcome of this was a solid understanding of our client, their audience and goals. This was essential for creating a site which has since been critically lauded.
"The Design Council website is a wonderful example of responsive design done well. For a site with a complex breadth and depth of information, the design brings attention to the navigation rather than hiding it, and does so without distracting the user from the content." — .Net Magazine
To translate the strategy to an tangible build we started with the vision and visual language we had defined in the strategy phase. Once we had agreed on a bold and confident new visual language, we turned our attention to designing patterns to be used throughout the site. These patterns became our building blocks; like lego, every pattern fit together in browser to form pages.
Modular design and development
Designing in this modular way forced us to consider the detail in each design pattern: “what is its reason to exist?” “Do we have two patterns doing similar things that could be combined?” By continually asking ourselves these sorts of questions, we were able to remove all extraneous detail that vies for user attention.
This approach allowed us to get a sense of what the site was like in browser earlier than usual. We were able to make improvements and see flaws that cannot be ascertained or replicated in flat designs, working closely with Design Council to get real content in situ as early as possible.
We utilised cutting-edge responsive design to provide an intuitive, device-agnostic user experience. Through using a fluid grid system with five breakpoints, we ensured content and imagery were able to resize instantly to fit every screen size. This also ensures maximum readability across desktop, tablet and mobile devices by loading exactly the right amount of content for that device. We created all the site illustrations as responsive Scaling Vector Graphics (SVGs). We created a plug-in to automate this SVG process, which ensures all illustrations adapt to different screen sizes and are pin sharp at every pixel density.
Additionally, the fluid grid enabled us to use a multi-push site navigation. Each page, and its content, is able to adapt responsively as the side menu is opened and closed. This means none of the viewing experience is impaired by the opening of a menu – as it so often is.
The left-hand multi-push menu allows users to navigate through the site in the same way across every device. We felt that this consistency provided the most satisfying and intuitive user-experience, something that we were happy to see qualified by our multiple rounds of user testing.
Our ultimate benchmark for the success of this project was to create an organic and intuitive user journey through a beautifully crafted site, a journey that mirrors the Design Council’s own objectives of championing functional and innovative design that betters people’s lives.
The new site launched in 2014 to much critical acclaim from the design community both in the UK and abroad, and was recently named Awwwards site of the day, an accolade voted for by industry professionals with an interest in design, usability and creativity. In the first ten months since launch the average number of pages visits per session - a key indicator of engagement - increased 83%, and we have continued to work with Design Council to enhance and improve upon the stable, flexible platform that we've created for them.