Cutout Image Effects

storyline drag and drop interaction
Click on the image to view the interactive drag-and-drop demo

A redesign of an old drag-and-drop interaction. And a lesson is making sure you save the original images you use in a project…

I still love this interaction, but wanted to revisit it for this e-Learning Heroes challenge #235 – Using the Paper Cutout Effect to Design E-Learning Graphics 

What did I change from the original? Actually, not a lot. A new intro screen, re-positioned some of the cutouts, used the cutout effect on the feedback screens and improved some of the functionality such as not hiding the items as they’re dragged onto the trailer, but apart from that, I think this interaction is a great example of how you can use the paper cutout effect for e-Learning graphics.

Oh – I did add a sound effect as the drag-and-drop items appear on the screen – but this seems to be problematic with viewing in Chrome – so if you want to get the full effect, view in another browser…

Enjoy!

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s