Case Study 05
Crafting an interactive microsite and touch screen experience
- ClientWired Magazine
- SectorTech, Science, Presentation
- My RoleResearch and front-end development
- SkillsHTML5, CSS3, JavaScript
- Project Time2 Weeks
- Established2013
Introduction
Wired Magazine needed to create a slick microsite for Cisco showcasing relationships in nature and how they relate to networking. We were also tasked with creating a touchscreen experience for their conference that would be displayed on a giant touchscreen.
Challenge
To create a visually-engaging microsite from their print campaign. The main challenge was converting their hi-res diagram of the tree of life into something that could be viewed on web, due to the small text size, a creative approach needed to be taken to ensure legibility.
Solution
For the touchscreen experience, by using a magnifying glass tool I was able to load the smaller file size jpg front and centre, having the magnifying effect load in the super hi-res diagram where text was legible allowed a smooth loading experience and the diagram to be in full view.
Cisco wanted to highlight various sections of the tree, using touch buttons which would highlight certain areas of the tree. This was inspired by something you might see in a museum display where it's very interactive and easy to use.
Slick Microsite
The microsite was a basic built as there was more content to be shown, the black background meant the luminous colours really popped and brought a lot of visual interest.
Consisting of a few pages content was laid out stacked to keep it readable at most screen sizes without focusing on it being responsive. Colours were carefully chosen here and apart from the five main colours everything else was kept monotone.
Results
Cisco loved what we did and the conference was a success with many people interacting with the display. The microsite also saw many views as this was published directly within the Wired Magazine website.