Desktop and Office Theme Designs

Click on the image to view the demo

The challenge

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 design

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.

The process

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.

The navigation

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.

Picture2

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.

The Result

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.

Free Download

Here’s the link to download this template.

One thought on “Desktop and Office Theme Designs

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s