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:

coloredsandbeaches

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!

Advertisements

One thought on “Double-tab navigation: Colored sand beaches

  1. I am amazed by how you were able to put this together. I could not even imagine how you were able to think up the double navigation style.

    I’m just starting with storyline and it seems I have a long way to go. hahaha

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 )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s