Skip to content

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:
Facebooktwitterredditpinterestlinkedintumblrmail
Published inFreebieStoryline 2

17 Comments

  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.

    • Thanks Dianne, I’m so glad you enjoyed them. CSI is my favourite too!

  2. Joanna Joanna

    Fantastic examples, Veronica!

    • Hey Joanna, thanks for taking the time to look through them and commenting, I really appreciate it 🙂

  3. Scott Lindstrom Scott Lindstrom

    I loved the CSI one! Thank you for sharing!

    • Thank you Scott! So glad you like it, thanks for commenting!

  4. Grant Tattley Grant Tattley

    Hi Veronica

    love the CSI interaction I can see many uses for this FANTASTIC !! 🙂

    • Hey Grant, glad you like, I hope you can use it in your work, or play!

  5. […] That said, I still really like a bit of realism once in a while. I recently posted a couple of skeuomorphic demos, with free downloads. Today though, I went back to Dave Anderson’s e-learning challenge #5: Desktop Office […]

  6. George George

    Love your CSI really SUPERB

    • Hi George, thanks so much for your comment, glad you enjoyed it!

  7. Alessa Novoa Alessa Novoa

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

    • Hi Alessa, thanks for the feedback! I’ll see what’s going on with the download and contact you soon. Thanks again!

  8. Alexa Rodriguez Alexa Rodriguez

    Hi Veronica! Awesome CSI activity! Loved it! I tried downloading it but it says Error.

    • Hi Alexa, thanks for your great feedback!
      I have updated the link, would you mind trying again? It should be working now. Let me know if you have any issues.

  9. Stephanie Heincker Stephanie Heincker

    Hi, Veronica! I’m an elearning heroes lurker and I love this CSI interaction. I tried the link to the CSI download, but it isn’t working – do you have a newer link to share?

    • Hi Stephanie,
      So sorry about that. My shared folder got moved. I have updated the link above, so should be good to go!
      Thanks for the feedback!

What do you think? Let me know...