E-Learning Challenge #27: Visual Storytelling with Photo Collages Posted Friday, March 21, 2014 at 9:51 PM

Add to Favorites

 

Looking to move from a screen full of bullets to creating visual stories? Then you’ll love the ideas shared in Tom’s post on using photo collages to build interactive stories.


Working from simple panel layouts, the photo collage is a simple way to work with image-driven stories and interactions.


In Tom’s example, he used a symmetrical layout similar to many comic book designs. But that’s just one possibility. Another option is to work from a less structured layout:

 

A quick search in your favorite stock photo site returns a variety of photo collage styles and possibilities. Here are two more ideas:

 

I really like this visual approach to storytelling and and think it’ll make a great e-learning challenge.


Challenge of the week

This week, your challenge is to create an interactive story around a photo collage. You can use placeholder photos and graphics, or rework an existing project into a photo collage.


You can design your interactive story around any topic you like. Not sure where to begin?

 

Here are a few ideas to get you started:

  • Design your story around a common problem or challenge

  • Rework an existing scenario or interaction using a photo collage

  • Use the built-in characters (illustrated and photographic) which include multiple expressions and poses

  • Map collages are ideal for interactive org charts or customer profiles

Tools

You can use Articulate Storyline, Articulate Studio, or PowerPoint to build your interactive story.


Resources

Last week’s challenge

Before you begin creating your interactive story collages, take a moment to check out the amazing ideas shared in last week’s interactive screenshot challenge:



More about the e-learning challenges:

The weekly challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. We’ll feature your work and provide feedback if you request it.


Here’s wishing you an interactive week, E-Learning Heroes!

 

Post written by David Anderson

 

______________________________________________________________________________

Even if you’re using a trial version of Studio ’13 or Storyline, you can absolutely publish your challenge files. Just sign up for a fully functional, free 30-day trial, and have at it. And remember to post your questions and comments in the forums; we're here to help. For more e-learning tips, examples, and downloads, follow us on Twitter.


 

 

71 comments so far

Jackie Van Nice

727 posts

Posted Monday, March 24, 2014 at 6:26 AM

Thanks, as always, for another fun challenge David!

My entry was influenced by a lot of discussion about freelancing at last week's Learning Solutions Conference.

Here's my entry: www.trainingstone.com/.../story.html

Here's my blog post: trainingstone.wordpress.com/.../this-is-why-freelancers-need-floaties

Ashley Chiasson

291 posts

Posted Monday, March 24, 2014 at 6:55 AM

Jackie - I love your entry!

Kimberly Bourque

140 posts

Posted Monday, March 24, 2014 at 9:00 AM

Jackie--great entry as always and very helpful to those getting started in the freelancing business! I'd love to work my way in that direction someday.

Jackie Van Nice

727 posts

Posted Monday, March 24, 2014 at 9:11 AM

Thanks so much, Ashley - and thanks to you too, Kimberly! You can absolutely do it. :)

Nick Russell

509 posts

Posted Monday, March 24, 2014 at 2:26 PM

Well done Jackie, neat concept, great design and execution. Also much enjoyed your Passport Form app last week. Again, very well conceived with lovely animation and sound effects. Played through it quite a few times.

Here's mine:

benchmarkenglish.net/.../story.html

benchmarkenglish.net/.../collage.story

Story file: benchmarkenglish.net/.../collage.story

Jackie Van Nice

727 posts

Posted Monday, March 24, 2014 at 4:45 PM

Thank you, Nick! I'm really glad you like them.

Your interface is pretty remarkable. Very nice. Do you ever write up how you create your entries? I'd love to know what your inspiration was and how you created the graphics.

User Rank David Anderson

3,269 posts

Posted Monday, March 24, 2014 at 5:52 PM

This is going to be a big challenge:-)

Lance Treloar

35 posts

Posted Monday, March 24, 2014 at 8:07 PM

A little rough around the edges - no time for finer detail, but the concept is there

googledrive.com/.../0B8LKwNa24vOAXzZkSGxQcFpObFk

Posted Tuesday, March 25, 2014 at 12:57 AM

You guys are awesome! Here's my stab at it. I don't think I quite understood the "photo collage" concept, and ended doing a little more Photoshop work than I probably needed to.

http://bit.ly/1m3rQoH

Paul Alders

281 posts

Posted Tuesday, March 25, 2014 at 3:41 AM

it's only Tuesday and I already got surprised with such great examples!

Jackie - Nice idea to display a piece of the last photo after each click on your photo-collage. You nailed it again!

Nick - Thanks for sharing. I really like your design. Great Job!

Patrick - Welcome to this great community. In my opinion you understood the challenge perfectly. Keep up the good work!

Paul Alders

281 posts

Posted Tuesday, March 25, 2014 at 3:46 AM

Lance - a great idea to use a bulletin board for this challenge. Hope to see more of your creativity in these challenges. Welcome to the club!

Ashley Chiasson

291 posts

Posted Tuesday, March 25, 2014 at 7:58 AM

Here's my entry for the week - An infographic of sorts based on a 2012 CVU report:

ashleychiasson.com/.../story.html

Allison Nederveld

135 posts

Posted Tuesday, March 25, 2014 at 8:39 AM

My firewall at work is blocking most of these this week but...

Jackie - as always, love it!  I wasn't able to see Ian at the end though (using Firefox) so I am glad I could see that final pic on your blog.

Nick - what a great set up.  I love that it seems like your player size is square until the pop outs fly in.  That is a really cool effect. I agree with Jackie, it would be great to get your insight on the process for how you made this!

Matthew Guyan

80 posts

Posted Tuesday, March 25, 2014 at 3:28 PM

Here's my entry for this weeks challenge. It was inspired by David and Toms recent visit to Australia.

Its a collage of beer coasters from New South Wales (NSW). I've created it in PowerPoint but the idea is that as you roll over a coaster you can see the beer styles from that brewery and if you click on a coaster you go to a screen with more info.

elearning-examples.s3.amazonaws.com/.../Beer-MattGuyan.pptx

Cheers,

Matt

Melanie Dunmore

10 posts

Posted Wednesday, March 26, 2014 at 4:20 AM

Hello,

Does anyone know how I can share my Storyline entry via google drive?

Mel

Cheryl Melfi

15 posts

Posted Wednesday, March 26, 2014 at 4:21 AM

These are great--really inspiring!

Melanie Dunmore

10 posts

Posted Wednesday, March 26, 2014 at 4:43 AM

Here we go - here is my entry - I'm representing the lovely and talented team at Cursim.

cursimcourses.com/.../story.html

ta oni

2 posts

Posted Wednesday, March 26, 2014 at 5:03 AM

Melanie, That's a great piece of work, love the tree and the overall narrative. Great touch with the animations of the apples.

Posted Wednesday, March 26, 2014 at 5:06 AM

Really nice Mel! I wish I had time to create my own! :-)

Kelly Prince

49 posts

Posted Wednesday, March 26, 2014 at 8:53 AM

Love it Jackie....maybe part 2 is waiting an hour at the post office even though you had an appointment. ;-)

Kelly Prince

49 posts

Posted Wednesday, March 26, 2014 at 8:55 AM

oops wrong challenge. I can't figure out if I can edit or delete a comment. I meant for the tutorial challenge.

Jackie Van Nice

727 posts

Posted Wednesday, March 26, 2014 at 9:02 AM

That's very funny, Kelly! I'd love to work in that one! (Good thing you mentioned it was for the passport one.) :-D I don't think we can delete or edit here, but I get it!

Allison Nederveld

135 posts

Posted Wednesday, March 26, 2014 at 12:23 PM

Throwing my hat in the ring!  I used a built-in Storyline character and a comic book layout to present a little scenario.  

Demo: dl.dropboxusercontent.com/.../story.html

Blog post: abnederveld.com/.../winter-john-managed

User Rank David Anderson

3,269 posts

Posted Wednesday, March 26, 2014 at 12:41 PM

Nice one, Allison. Really like the "blaming, helping, fixing, and ignoring" approach you took.

Ruth McElhone

40 posts

Posted Wednesday, March 26, 2014 at 4:22 PM

Last week I attended a workshop in Australia by David Anderson and Tom Kuhlmann. I was so inspired that I thought I'd bit the bullet and submit my own offering.

Like Matt (was great to meet you in person last week)....... it's inspired by beer (Guinness) ....something that came up quite a bit in the workshop!!!

Also I was so impressed by David's weekly challenges and everyone sharing their ideas, that I created this last night instead of watching the latest episode of House of Cards.... :) :)

here goes nothing.....

googledrive.com/.../0B7mg1lQJBRMyZWZaS1dBREhaQzQ

User Rank David Anderson

3,269 posts

Posted Wednesday, March 26, 2014 at 5:05 PM

I guess we're going to need to host an elearning beer-theme challenge soon. I'm listening. And yes, Guinness is rich in iron:-)

Great seeing you again last week, Ruth. You guys really know how to host a training event.

Matthew Guyan

80 posts

Posted Wednesday, March 26, 2014 at 5:33 PM

That's cool Ruth. I really like the way the collage revealed the reward at the end and what a great reward it was!

Ruth McElhone

40 posts

Posted Wednesday, March 26, 2014 at 6:15 PM

Thanks Matt. I was inspired by your cool beer mat demo :)

Trish Chin

4 posts

gina orozco

11 posts

Posted Wednesday, March 26, 2014 at 7:00 PM

I really enjoy seeing everyone's creative work.  At times like this, I wish I had Storyline because of all the really neat things you can do!  

Here is my take on the challenge.  It still needs some more work to add a few more details but it works for today.  

googledrive.com/.../0B7GBL1jgEuEsU1QzX0FYU3JXT3c

Kimberly Bourque

140 posts

Posted Thursday, March 27, 2014 at 7:15 AM

Gina--you did a great job writing the scenario!

Kimberly Bourque

140 posts

Posted Thursday, March 27, 2014 at 7:16 AM

Ruth--how did you get the picture separation in the beginning? That's a great intro.

Trina Rimmer

13 posts

Posted Thursday, March 27, 2014 at 1:26 PM

I've been locked in a battle with my son's 4th grade teacher of late, so I really embraced this challenge as therapy! (And it was a good way to keep my dev skills sharp!). WARNING: My project is full of snark, sarcasm, and a heaping dose of cynicism!

dl.dropboxusercontent.com/.../story.swf

Love seeing everyone's ideas. Keep the challenges coming, David!

User Rank Jeff Kortenbosch

1,137 posts

Posted Thursday, March 27, 2014 at 4:00 PM

This was a LOT OF FUN! Here's my entry. I had to put it on my google drive as my own server has been giving me issues all night.

Meet the team!

googledrive.com/.../0B5YJfqKOfGphUzhaUFZUOVpVUmM

Ruth McElhone

40 posts

Posted Thursday, March 27, 2014 at 4:33 PM

Trina and Jeff...I loved your last two examples. There has been some amazing ideas posted. Trina that would be an awesome one  for a scenario or gamifying content.

Kimberly...thanks for your comment. I actually had the full image appear first.

I then split the image in two using the cropping tool and made the two halves appear a few seconds after the full image...then I just animated them to Fly Out- exit.

gina orozco

11 posts

Posted Thursday, March 27, 2014 at 4:40 PM

Ashely, I liked your rollover infographic.  It was a clever way to complete the challenge.

Jeff, your post was very clever and so nicely done.  I'm probably going to steal your idea one of these days.  

Trina, as a parent, I could totally relate to your demo.  Great job!

User Rank David Anderson

3,269 posts

Posted Thursday, March 27, 2014 at 5:24 PM

The family photo wall is a nice idea, Jeff. Like it!

Trina Rimmer

13 posts

Posted Thursday, March 27, 2014 at 5:34 PM

Thanks for the nice feedback, Ruth. :-)

Jeff, I agree that that the family photo wall concept was REALLY well done.

Dianne Hope

44 posts

Posted Thursday, March 27, 2014 at 7:01 PM

Hey Ruth - you never know who you come across when you visit this blog!  Hope you are well.

I loved your entry!  

So disappointed I couldn't attend the workshop last week, but I am getting a lot out of this community.  I'm still looking for my dream job in e-Learning, but in the meantime I'm continuing to build on what I learnt in your Master eLearning Course.

Ruth McElhone

40 posts

Posted Thursday, March 27, 2014 at 8:42 PM

Dianne..so lovely to hear from you and thanks for your kind words! I had a lot of fun making it.

Glad to hear that the Master eLearning Courses is still helping with ideas.

I just sent you a private message as-well.

Sylvia Davis

3 posts

Posted Friday, March 28, 2014 at 3:10 AM

Thanks Paul for the link to Toms instructions on GoogleDrive - got all the way through completing this without any idea of how to share it. I hope it works.

So many great examples already and I (like Ruth) am also inspired to finally commit to engaging in the challenge.

Great to meet Tom and David in Sydney and really enjoyed your presentation too Ruth.

Enjoy!

googledrive.com/.../0B5amr7jUWkIfSEJkVFRxbzRCdGM

Jackie Van Nice

727 posts

Posted Friday, March 28, 2014 at 4:10 AM

Beautiful design, Sylvia! Love the content, presentation of additional detail, and visited state of the photos. Really nice!

Jackie Van Nice

727 posts

Posted Friday, March 28, 2014 at 7:41 AM

Man. Good demos this week.

Lance: Nice post-it/bulletin board idea. Lots of uses for that one.

Patrick: Elaborate work! I agree with Paul - I think you got the idea of the challenge just fine.

Ashley: Loved the colors and how the hover effects brought the infographic alive.

Matt: I can't pull down your PPT where I am at the moment, but if you've gone with a beer theme, you're clearly spot-on.

Melanie: Great style! Love the chunky cut-outs in contrast to the sleek tree and smooth animations. Really nice.

Alison: I like your use of the bold comic-style layout and colors. Also a nice, concise presentation of options and feedback.

Ruth: It's crisp, clean, attractive, and beery. What more could you want?

Gina: Great idea to use the bulletin board to allow exploration of a linear story. Would never have occurred to me to do that!

Trina: Nicely executed - and thanks for the content warning. (That was scary!)

Jeff: Love your wall design and layout (!!) and definitely appreciated your lorem ipsum insights into the Team.  

Paul: Thanks for adding the link to the Google Drive instructions. And where's your entry for this one?  :)

Kimberly Bourque

140 posts

Posted Friday, March 28, 2014 at 7:46 AM

Sylvia--looks like you did it perfectly! Your idea is awesome and the design was fantastic. It just gave me an idea for the future!

Posted Friday, March 28, 2014 at 7:53 AM

Busier than usual this week, so I thought I'd take the easy path by finding a stock photo, adding a few triggers, slide layers, and voilà, I'd have a challenge demo.

This is the photo I started to use: www.shutterstock.com/.../stock-photo-composition-of-smiling-people.html It had everything I wanted.

Things were humming along smoothly until I got some (unsolicited) feedback:  "Why don't you use Storyline's characters? You could create your own gradient backgrounds and stage the same photo shots."

And that's how 20 minutes became a couple of hours:-) It was worth it, and I am really pleased with how it turned out.

Photo collage: elearningdesigner.com/photo-collage-elearning-challenge

Short blog post: elearningdesigner.com/.../photo-collage-challenge

Kimberly Bourque

140 posts

Posted Friday, March 28, 2014 at 8:52 AM

Montse, as usual, it looks great! Ah--perfectionism, it is so great unless you want to be quick and throw something together and 20 minutes becomes hours of making sure everything is perfect.

Sara Walters

3 posts

Posted Friday, March 28, 2014 at 12:48 PM

This idea popped into my head last night, and I had a lot of fun creating it!  Thank you, David, for organizing these challenges.  I took a stylized approach for to the photo collage, and added some simple game elements.

Best when viewed using Google Chrome: googledrive.com/.../0B8zYWvF8kUbJa2pfMl96RnNoU3M

User Rank David Anderson

3,269 posts

Posted Friday, March 28, 2014 at 2:09 PM

Hey Sara - Welcome to E-Learning Heroes. Great job w/ your challenge idea.

Admittedly, I'm not quite sure how you programmed your progress meter. I see that you have good choices and not-so-good choices. Can you share a little more around how you put it together? I really like it.

Sara Walters

3 posts

Posted Friday, March 28, 2014 at 2:59 PM

Thanks, David!  If I were using the progress meter for one of my work projects, I would give the learners more of an explanation as to why their answers were right or wrong.  But, if I waited to post this sample until I had everything just as I wanted it, then I would never post it.    

I appreciate the opportunity to see the work of other developers, and to work on my skills.  If you, or others in the group, have some feedback for me, I would love to hear it.  Here's a summary of how I set up the progress meter:

I used PowerPoint to create the visuals for the progress meter - 6 images in all.  I created a Points variable in Storyline and set it to zero.  When learners click an icon that would keep Melanie productive, I add to the points.  When they click an "unproductive" icon, I subtract points.  The progress meter images have two states - Hidden and Normal.  I keep them all hidden unless the Points variable matches the correct number.  For example, the progress meter with three stars only displays when the Points variable equals three.

Gemma Henderson

48 posts

Posted Saturday, March 29, 2014 at 2:03 PM

Hello all! Apologies for the tardiness! I'm poorly *cough cough*. Here is my submission for the week. I've attempted to make this both tablet and web friendly (fingers crossed).

I couldn't find any inspiring photos at the time, but some inspiring collages...and I sneakily went with a button collage theme.

Blog Post: http://wp.me/pW9yx-w8

Object: googledrive.com/.../0B5P-uSz1oqHWMnJhazA4X2RBQlE

I've been totally lurking and viewing everyone's submission, really inspiring work yet again!

Happy weekend all :)

Matthew Guyan

80 posts

Posted Sunday, March 30, 2014 at 12:16 AM

Great stuff with this weeks challenge, some really cool ideas on display. Thanks everyone for sharing!

Paul Alders

281 posts

Posted Monday, March 31, 2014 at 11:33 AM

Hi everyone, a little bit late but here is my entry for this challenge.

Last week I wrote a blogpost about an earlier (drag and drop) challenge.  Afterwards I came up with the idea to use this photo challenge to visualise the process of designing a coloring book with Articulate Storyline.

Here you can read my blogpost;

www.eyespirations.com/.../how-to-create-a-coloring-book-with-articulate-storyline

Here is my entry for this week;

www.pinterest.com/.../568298046701192636

Kimberly Bourque

140 posts

Posted Monday, March 31, 2014 at 11:54 AM

What a great way to visually depict your blog post, Paul! Love the design.

Cynthia Lewis

5 posts

Posted Monday, March 31, 2014 at 1:22 PM

Wow, Paul! Great way to use layers and states! So many possibilities! Mind blown!

Thanks for sharing :)

(insert gif of Wayne's World bowing "we're not worthy" here)

www.inthenewsonline.com/.../waynesworldnotworthy.gif

Jackie Van Nice

727 posts

Posted Monday, March 31, 2014 at 1:31 PM

Good gravy, Paul! That's amazing!

gina orozco

11 posts

Posted Monday, March 31, 2014 at 1:34 PM

Wow Paul!  I would never have thought to create a coloring book.   It was very creative and really shows that perhaps our only imitations are the ones we impose on ourselves.  

Paul Alders

281 posts

Posted Monday, March 31, 2014 at 1:38 PM

Kimberly / Jackie - Thanks for the nice comments

Cynthia - I really appreciate your gif file #LOL ;) Thanks

Posted Monday, March 31, 2014 at 4:24 PM

Paul,

You don't mess around! This is awesome! Well done, sir.

Ruth McElhone

40 posts

Posted Monday, March 31, 2014 at 5:40 PM

Paul...that blows my mind!!

Gina ...you are so right about the limitations we place on ourselves. I call it my "PowerPoint baggage"...that I have from years of doing f2f PPT sessions.

Matthew Guyan

80 posts

Posted Monday, March 31, 2014 at 6:05 PM

Wow Paul, that's amazing!! Really well done mate. Thanks also for sharing how you did it.

Gina/Ruth, I struggle with this too. I agree it can be hard to break out of our own limitations (I like the term PowerPoint baggage Ruth). I think the first step in overcoming it is being aware of it. Then we can aim to do things differently!

Paul Alders

281 posts

Posted Tuesday, April 01, 2014 at 12:08 AM

Hey all - Thanks for all your nice comments on this submission. Speaking about limitations... Before I joined this community my 'creativity' was quite limited, but after I start to visit this community more often the ideas and examples that you shared got my 'creativity' to the next level. Because of this I want to share all the credits for this submission with you guys. I really looking forward to all the next submissions that you are willing to share in these challenges.

Thanks

User Rank Tracy Parish

402 posts

Posted Tuesday, April 01, 2014 at 7:45 AM

A little late to this challenge, but I love it.  I've done something like this before, but think mine is a bit simple compared to some of the shares here.  This demo is something I created for a bit in an Occupational Health and Safety course.

www.tracyparish.ca

User Rank David Anderson

3,269 posts

Posted Tuesday, April 01, 2014 at 1:33 PM

Great ideas for moving past bullet points, Tracy. And no worries re: when you post your demos... These are always open:-)

Thanks again for sharing!

User Rank David Anderson

3,269 posts

Posted Wednesday, April 23, 2014 at 12:48 PM

Nice demo, Nancy.  Another reference to Grumpy Cat. He's been around me all along but I just couldn't (wouldn't) see him:-)

Kimberly Bourque

140 posts

Posted Wednesday, April 23, 2014 at 2:14 PM

David--I just saw a couple of challenges ago where you haven't caught onto Grumpy Cat? Wow...I'm sad. (S)he is actually a legend in my eyes. And in my last job, I was actually referred to as Grumpy Kim because of how much I love Grumpy Cat...My absolute favorite was at Christmas time that had "fa-la-la......NO." I laughed for days (still gives me a chuckle just thinking about it). And when I saw Ashley's course summary page with GC, I definitely got a good laugh from that one.

Mary Cropp

26 posts

Posted Sunday, May 11, 2014 at 3:57 PM

Super late, but here are the Faces of Workplace Stress.

googledrive.com/.../0B04ltP3Bc_PEVE5jZjhXelJGbEk

Ian McConnell

10 posts

Posted Tuesday, May 27, 2014 at 7:30 AM

Hello everyone,

David--once again, another great challenge. Love the idea!

Here's my entry: tlslearning.com/.../visual-storytelling-using-a-photo-collage-e-learning-challenge

Thanks!

User Rank David Anderson

3,269 posts

Posted Tuesday, May 27, 2014 at 1:50 PM

Hey Mary - sorry I missed your post! Your demo turned out really well. I like the character-based nav screen and use of tabs for the deep dive. Thanks for sharing!