Transform Infographics Into Interactive Graphics #12

DavidAnderson

Staff

11 years ago

E-Learning Challenge #12: Challenge | Recap

This week's challenge

This week your challenge will be to take a static infographic and rebuild it as an interactive infographic.

Tools

You can use Articulate Storyline, Articulate Studio ’09, or Articulate Studio ’13, to show and share your interactive graphic.

Suggested infographics

Here are a few ideas to get you started. Feel free to tackle one of these infographics or work with one that’s more targeted to your company or personal interests.

On Driving: Automobile History

Infographic: On Driving: Automobile History

Airline Safety Cards

Infographic: Airline Safety Cards

Cuts of Beef Infographic

Infographic: Cuts of Beef

Last week's challenge

Last week's comic book design challenge brought out some of the best and most creative ideas I’ve seen. You guys are amazing! Check out the comic designs your community members shared over the past week:

Jeff Kortenbosch shared a kicked off the challenge with a graphic novel-inspired scenario interaction. Be sure to take a look at the free comic layouts Jeff used in his demo. Awesome example, Jeff!
Ana Lucia Barguil based her challenge entry on a recent blog post by Tom. She shared three templates with different layouts. Swing by this forum thread to say “Thanks!” and download the awesome freebies
Paul Alders shared page curls and animated transitions to show how Articulate Storyline helps you build engaging learning experiences. Great demo as always, Paul!
Yewande Daniel-Ayoade shows how to teach SAP using comic book designs. I really like how she maximized limited clip art graphics in this project. Thanks, Yewande!
Lawrence Williams resurrected one of his first Articulate Studio projects and leveraged some Storyline sweetness to create this storytelling demo. Great job, Lawrence! And thanks for sharing your source files.
Nancy Woinoski shared her first Storyline project. Custom illustrations, drag-drop interaction, and storytelling make this a must-see project!
Cary Glenn shared free PowerPoint and Storyline templates from his Manga style demo. Thanks, Cary!

Have an interactive week, E-Learning Heroes!

Published 11 years ago

Version 1.0

E-Learning Challenge

Example

DavidAnderson

Staff

Joined October 22, 2010

View Profile

E-Learning Challenges

Join our weekly challenges to try new skills, get inspired, and build your portfolio.

Montsea
Super Hero
11 years ago
Great job, Jeff! I love that you changed the character's states for each marker. You've motivated me to jump into this one.
AllisonLaMotte
Staff
10 years ago
I made this infographic interaction a while back but forgot to post it here, so I'm doing it now. Let me know what you think!

- Published output: https://articulate-heroes-authoring.s3.amazonaws.com/Allison/Interactive-Infographic-Timeline/story.html
- Free download: https://community.articulate.com/download/storyline-2-interactive-infographic-timeline
- JackieVanNice
  Super Hero
  10 years ago
  I love this, Allison! Especially your color scheme, title slide, and hover states for the timeline points. It's a beautiful design. Thanks for sharing the file, too!
  
  Since you asked for thoughts - the only thing I kept expecting to see was some kind of callback or repetition of the title screen's cool peaks on the content screens to tie it all together. If I played with it I might try a very light/transparent version of at least one of the peaks in the background of each content slide to see if that worked - or maybe there's some other way to do it. Even the most abstract hint of the peaks would be great. They're so good I want to see more of them!
  - AllisonLaMotte
    Staff
    10 years ago
    Thanks Jackie! Interesting, I didn't think to do that but that is a great idea :) Thanks for your feedback
AnastasiaNova
Community Member
8 years ago
Here is my contribution. I created this infographic based on statistics from the World Economic Forum report. The Future of Jobs
https://s3.ca-central-1.amazonaws.com/elearningstyle/The+Future+of+Jobs+-+Storyline+output/story_html5.html
- DanSweigert
  Community Member
  7 years ago
  Anastasia, very cool, lots of interesting information here and well organized and easy to get to.
jeff
Community Member
11 years ago
Nice one David! And under all that time pressure ;-) It was great having you at our annual Articulate user day again!
jeff
Community Member
11 years ago
Here's a basic example using Storyline markers and character states!

https://googledrive.com/host/0B5YJfqKOfGphOVBQWnVZSFl3SUU/
BeverlyHicks
Community Member
11 years ago
I can't wait to see some results. Should be inspiring
PaulAlders
Super Hero
11 years ago
Nice job Jeff,

Today I spend some time on this. Here is the result http://www.eyespirations.com/index.php/infographic-weekly-challenge/

If you have any questions, please let me know
DavidAnderson
Staff
11 years ago
@Jeff - what a simple yet elegant example. I like how you worked the general design of the infographic into your interactive example... Perfect use of Storyline's markers: http://bit.ly/1egEeyn

Hrmm, I wonder how our Studio '13 users could build something like that... Is it possible?
jeff
Community Member
11 years ago
@David: You mean like this: https://googledrive.com/host/0B5YJfqKOfGphYlVOZ0R4c1pYM0E/

100% Articulate Studio

Alternatively you could use the Engage interactive markers on a transparent background, but I wouldn't be able to do state changes of the character.
Ana-LuciaBargui
Community Member
11 years ago
Hi Jeff and Paul, I like your work! Here is mine:

The result:
http://bit.ly/1c2ikNf

The story file:
http://bit.ly/17pr2W8

What inspired me:
http://bit.ly/9IgJe
http://bit.ly/1gcNLd3