One topic, two demos: Skeuomorphism

What is skeuomorphism?

Skeuomorphism is the design concept of making items represented resemble their real-world counterparts. I didn’t really know this word until this week, Dave Anderson challenged the Articulate community to move away from flat design and create a skeuomorphic e-learning interaction.

cooking-1013455_1920
So realistic you can almost smell it.

Desktop demo

Before the flat design ‘rage’, skeuomorphic designs were everywhere. One popular e-learning interaction at the time was the desktop interaction. Basically, the learner viewed a realistic desktop from above, with various desk-type objects on it, such as pens, a mouse, a phone, a cup of coffee.

Popular as they were, I never actually got to create one, so this was my chance. I decided to make it as authentic as possible by taking photographs of my own objects, even my desktop, but except for my hand (I have chubby fingers). All the objects on the desk can be interacted with, so if you’d like to see how it turned out, click the Play button below.

 

Launch Presentation

skeuo 1
Click Play above to see the desktop.

CSI demo

After satisfying my long-held desire to create a desktop interaction, what I really wanted to create was a crime scene interaction. So, I did. Many of the images were created or tinkered with in PowerPoint. The crime scene was created in Storyline2. It consists of two slides and a bunch of layers, triggers and variables. Importantly, I think the graphics turned out pretty skeuomorphic. Oh, you don’t believe me? Well, take a look for yourself by clicking the Play button below.

Launch Presentation

 

skeuo 3
Do not cross!

Bonus!

If you liked these interactions and want a shortcut to build something similar, download the Articulate Storyline source files right here. Simply click the download buttons below. Yours. Free. For real.

button-download-blog
Desktop interaction
button-download-blog
C.S.I.

PS: The fonts used are Courier New and the Google font Rock Salt.

Share This:
Facebooktwittergoogle_plusredditpinterestlinkedintumblrmail

15 thoughts on “One topic, two demos: Skeuomorphism

  1. These are both fantastic demos Veronica. I especially like the crime scene one – you really showed how real-world items and environments can be used in e-Learning.

  2. Good morning, I love your work! It’s very fun, easy to use and creative!
    I’m having trouble downloading the file unfortunately :/

What do you think? Let me know...