This design was inspired by the the Articulate e-Learning Heroes weekly challenge #5 Desktop and Office Theme Designs in E-Learning. The challenge was to “create an office or desktop course template, including at least three different content slides, with the objective of showing how the design carries across the project”.
The nature of desktop design being a reflection of “our attempts to tame real-life’s entropy: organised clutter, rich textures and non-linear layouts” really appeals to my design style. I looked at a number of desktop and office theme website designs, and eventually settled on this design based on the website of Dan Whittaker (which doesn’t look like this anymore – see the image below). In attempting to recreate the look and feel of Dan’s website design, I incorporated the design elements of lots of rich textures and shadows, but varied my design just enough to make it individual.
I started by gathering together the images I needed – desktop, book, notepaper, the mandatory cup of coffee, business card, pencil, sticky notes, paper clip and iPad. The visual elements, whilst taking some time to get together, were not the biggest challenge in this project. I was inspired by the unusual navigation used on this website and used this challenge as an exercise in recreating this navigation.
I used Articulate Storyline 2, with the final design having just five slides. Additionally, some of the slides have layers to display information on the page when navigating from the sticky note menu and some layers display videos.
My focus was on the navigation being intuitive, so I incorporated the simple visual elements of underlining with hover triggers and circling of the menu item to indicate the page you are currently viewing.
Unlike a linear course that you would create for training purposes, the navigation in this design is obviously centred around how you would navigate a website, so the menu is always visible, with the exception of the layers that are set up to display videos.
I chose not to use the iPad screen as a navigation element, but did use it in the design as a visual element to display the clickable social media icons on the Contact page and for consistency followed this image through as a background for the videos on some of the layers.
Additional navigational design included leveraging off the concept of the book by adding “previous” and “next” navigation to the pages which allows for more content to be viewed whilst remaining on the current page, similar to how some websites display large amounts of information.
I started working on this design months ago and set it aside for some time. Initially I had thoughts of using the design as my actual website, but have not followed through with this. Overall I’m pleased with the result and I think some of the design techniques and navigation ideas could be easily incorporated into other projects.
Here’s the link to download this template.