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.
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.
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.
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.
PS: The fonts used are Courier New and the Google font Rock Salt.
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!
Fantastic examples, Veronica!
Hey Joanna, thanks for taking the time to look through them and commenting, I really appreciate it 🙂
I loved the CSI one! Thank you for sharing!
Thank you Scott! So glad you like it, thanks for commenting!
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!
[…] 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 […]
Love your CSI really SUPERB
Hi George, thanks so much for your comment, glad you enjoyed it!
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!
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.
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!
Hi Veronica,
I came across your CSI demo and I love the interactivity of the project you have created. It’s simply amazing! As a rookie articulate user, I’d love to download the articulate source file to do something similar. Tried clicking on the link, but it shows the file does not exist. Do you’ve a newer link. Thank you!
Hi there! Thank you for your kind comment. I have updated the download links now, so you should be able to grab it! Let me know if you have any issues 🙂