Image Gallery: Compare different types of lettuce

Weekly Challenge nº84 was about creating an example of Image slider or Photo gallery. My first idea was to build a slideshow, because I wanted the images to stand out, and slideshows and carrousels are visual design patterns which instantly grab user’s attention with images.

I decided to present the most common types of leafy lettuce; I had the pictures and descriptions, but (after many attempts) I couldn’t rotate the scrolling panel into a horizontal position. There are some videos explaining how to do that, but I had 14 pics to include and found it difficult rotating them all together; I got some errors and images didn’t scroll smoothly. So I ended up building an interactive presentation with buttons, the effect is similar, and it works fine.

Click on the image below to viewLettuces the presentation.

Hope Storyline adds the option of horizontal scrollbar in future updates 😉

 

Navigation menu: 7 Wonders of Nature

7_Wonders_NatureThis week challenge #79 was about creating a custom Navigation Menu. In coincidence with the Earth Day, I decided to quickly build a demo showing the 7 Wonders of Nature, based on the list of The New 7 Wonders of the World. In this demo, navigation combines drop-down menu and Next-Prev buttons, everything created in Storyline, playing with triggers and states. For every slide, description of the Wonders are based on Wikipedia and all images are Creative Common licenced. Click on the image and learn more about these beautiful places!

Interactive Slider #52

One of the new features of Storyline 2 is the option to add interactive sliders. Even though this buit-in feature is not available in Storyline 1, I decided to participate in the weekly Challenge #52 Using Interactive Sliders in e-Learning.

I chose a simple example, the sequence of a bird flight; but never imagined how difficult it was to build that simple interaction in SL1. I could not have done it without the support of a community member, who kindly offered his template and helped me indicating how to deal with the triggers. Thank you e-Learning Locker.

You can see the result clicking on the image below. It took 18 objects and lots of triggers to create that simple animation. In conclusion, until I can upgrade to Storyline 2, I’ll search for other alternatives to an interactive slider.Bird-flight

User Interface Design Patterns

When taking the course “UI Design Patterns” I learnt the basic patterns used for interfaces design. At the same time, I’m learning how to build e-learning content with Articulate Storyline, so I thought it would be a good idea to merge the design theory with the practice of the authoring tool.

Interface patterns can be grouped in different categories, depending on their function: for organizing content, for navigating, for structure the page, for getting input from the user, etc.

I made a presentation with five patterns used for organizing content:

  • Two-panel selector
  • Navigation tabs
  • List inlay
  • Slideshows
  • Hub and spoke

Although they were originally designed for websites,
they can also be applied in Articulate’ slides.

Click on the image

UI_Design_Patterns

 

I’m aware the aesthetics might be better (I’m still not expert ;)),

but I focused on each pattern’s implementation.

Hope you find this topic as interesting as I do.