Double-tab navigation: Colored sand beaches

The Idea:

It was 2006, in those days social networks were not as popular as they are now, and people used to forward emails through large mailing lists. One day I received a PowerPoint about the colored sand beaches around the world and I was so amazed by the pictures it contained, that I saved it in my Documents folder.

A couple of months ago, cleaning up the folder, I realized I had kept that Powerpoint all that time, and decided to convert it into something more interactive. Click on the image to see the result:


The Research:

Searching on the web, I found lots of pictures, videos and articles about the coloured sand beaches. All images included are under Creative Commons licence; in total, almost 40 pictures and 4 videos were included. In the web of the University of Georgia, I found a sample image collection of sand from around the world. I picked the most representative samples, those from the beaches that I had written about.

Most of the information is from blog Sand Atlas and from the U.S. Geological Survey. Check the rest of the sources on the Credits section.

The Design: rounded tabs, borders and buttons!

Using basic shapes, I gave every element in this demo a rounded style. Top tabs are ovals that grow double the size when they’re selected and Bottom tabs are simply two overlapped ovals.

To create the double-tab interaction, I needed 50 layers and 20 triggers! And 12 T/F variables for the customized Menu. Enjoy!

Labelled interactive image: Las Meninas

meninas2A couple of years ago, when visiting Museo del Prado in Madrid, I was amazed by one of the masterpieces of the Spanish painter Diego Velázquez. Back at home, I created a labelled image with a free software called Images Actives.

Unfortunately, this freeware hasn’t been updated since 2011, and this week when I tried to revamp the first version of the file, I got some bugs especially when zooming the image details.

For this new version of the labelled image, I used Storyline. I set up one scene linked to a Spanish and English description, using the information of Wikipedia in both languages. And I added a simple drag-n-drop interaction activity.                                                                                                      Click on the image to launch demo

Today museums  are exploring digital technologies to enhance the visitor experience. Labelled images have a great potential to make it more interactive and immersive; offering a visual description of the works of art that can be seen in museums and galleries.

Comic book: The Multimedia Design Dilemma

“E-Learning and the Science of Instruction” by Clark and Mayer, this book is essential reading for anyone wishing to design and develop multimedia content for e-Learning.

At the beginning of each chapter, the authors challenge the readers with a “Design Dilemma”, a scenario to introduce one of the principles explained in the book. In these scenarios, an eLearning team is committed to create an online course on Excel for Small Business. Every character, the VP, the Instructional Designer, the Graphic Designer, the Programmer, etc, they all have different views on how to design the multimedia content for the course.

At the end of each chapter and after the Principles are analyzed with evidence-based examples, the reader is taken back to the scenario where the dilemma is resolved.

Click on the image to view my comic book

multimediaDilemmaThe Idea

After reading the book, I wanted to write a post about the Multimedia Principles, but there are tons of articles and presentations about this, so I decided to turn the “design dilemmas” into a graphic story.

The Result

I was looking for illustrated characters and backgrounds for the story, when I came across with this cool and free Comic image collection. Using the source files, I could create different scenes; changing character’s dialogues and expressions. The characters fit perfectly into the story. I changed their names and made a slight variation of their choices.

In the book, the team is designing a course on Excel, but I replaced this with a course on Applied Optics.

Unfortunately, I don’t have enough time to finish the book: Multimedia, Modality and Redundancy Principles in this first printing. Wouldn’t be great to have the complete edition one day?

Check out more comic book examples in the Weekly Challenge #11

How U-shaped Valleys are formed?: Show a process with animation and images

Glacial_valley_formationIt’s been a while since I’ve decided to start making my own images and animations. Animations and sequences of images are perfect to show processes; to illustrate changes in time and over space.

I had some notes from the time I taught Geography, and after searching some information on the web, I decided to illustrate the formation of a U-shaped Valley.

Using Artweaver, I drew a valley diagram, and combining layers, I got the different stages of the advance and retreat of a glacier and the resulting U-shaped valley. After exporting all the images; I used them to make a GIF file with GifMaker. There were two specific erosional processes at the base of the glacier, which I considered it was better to represent them separately, so I sketched two simple animations using Animatron.

On NASA’s website, I found amazing photographic files of the retreat of (still) existing glaciers.

Finally, I put all together: information, images and animation, using Storyline.

Download my animation from Wikkimedia Commons

View this project in Spanish: Formación de un Valle Glaciar

Information contained in this demo is based on scientific and educational resources. Below, some of the references I used:

Wikki Books: Glacial erosion and deposition

The Geography Site: Valley Glaciers.

USGS: A glacier carves a U-shaped Valley

Physical Glacial erosion 

Types of Graphics used in e-learning

It is almost impossible today to imagine an e-learning course without any media file. Images, graphics, videos, animations, diagrams, etc., they’re all an essential part of the content, they complement the text; and support the learning experience.

Researchers have found that users closely attend to images that are relevant to their tasks, but they rarely pay attention to pictures which serve no purpose other than fill screen space within the interface.  For that reason, we should be aware of the type of graphics contained in our course design.

Reading the book “e-Learning and the Science of Instruction” I found the Multimedia Principle extremely useful to relate the type of media with the learning purpose, the chart below sums up the concepts explained by the authors.


It is extremely important we choose the appropriate media files for the courses we design, we should make sure the images, graphics, animations, or videos; contain information to help the learner to perform the task. Otherwise, they could be distracting and slow down the learning experience.


Clark and Mayer (2011) “e-Learning and the Science of Instruction” 

Mayer, R. Principles for Multimedia Learning

Read more:

Shift e-Learning “Graphics for e-Learning: Which one should I use?”