Visual Storytelling with Photo Collages #27
Photo Collages in E-Learning #27: Challenge | Recap
Create Interactive Stories with Photo Collages
- Build an interactive slide or course from a single image
- Get rid of bullet points
- You don't need to be a photographer to make this work
- Use your own photos or prebuilt stock photo collages
- Create multiple panel layouts similar t comic books
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
- Here’s a Simple Way to Convert Your Course to an Interactive Story
- Have You Seen These Comic Book Style E-Learning Examples?
- 3 Ways to Make Your E-Learning Course Look Like a Comic Book
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:
- Heather Steckley kicked off the week’s challenge with an interactive approach to UI training that features lightbox videos and a quiz option to practice using the software.
- Ari Avivi shared a twist on UI training with an interactive street map. I like Ari’s example because it demonstrates the versatility of this simple technique. Ari also shared the project source files. Thanks, Ari!
- Jeff Kortenbosch shared a creative concept that lets the learners view or try the software. Download Jeff’s source files to learn more about his project. Thanks, Jeff!
- Michael Hinze soared through the challenge with an interactive dashbboard featuring interactive markers, map zoom, and scrollbars. If you’re like me, you’ll want to read more about this one. Nicely done, Michael.
- Jackie Van Nice wrapped a fun little story around her US Passport Application demo. Jackie always includes subtle extras in her demo so be sure your speakers are turned on. As always, Jackie shares even more details in her detailed blog posts. Well done, Jackie!
- Ashley Chiasson changes perspectives to provide restaurant reviews in her street-level example.
- Alex O’Byrne shared an animated idea for learning more about Moodle.
- Joshua Roberts helps learners get up to speed with Twitter while providing general facts and info for each area.
- Mary Cropp went for a drag-and-drop approach to clarify her intranet’s navigation tools. Simple demo with a lot of real possibilities. Great ideas, Mary!
- Charles Hamper guides learners through Paint.net in this elegant software demo.
- Dan Sweigert shared a practical example for explaining software controls and features using caption boxes and a practice opportunity. Check out Dan’s blog to learn more about his demo and how he put it together. Thanks, Dan!
- Paul Alders jumped into the challenge with a fun, story-based approach to learning Google Docs. Well done, Paul!
- Gina Orozco joined the challenge with a simple and practical approach to interactive screenshots. Using built-in shape tools, this is a good example of how one can rapidly build interactive screenshots. Thanks, Gina!
- Allison Nederveld moved beyond the defaults to create her zooming map that features a toggle option for learners to choose map and satellite views. Great example of using built-in features to achieve custom results. You can get the lagniappe on Allison’s interactive map from her blog post.
- Nick Russell put some extra effort (and humor) in his scenario-based approach to software training. You’ll find some fun ideas in this one.
- Emilie Elearning provided some good tips, practice opportunities, and resources on using Articulate Presenter ‘13 and Storyline’s player settings.
- Nancy Woinoski shared some more great ideas for technical document training featuring guided questions, annotations, and learner FAQs. Well done, Nancy!
- Sabrina DiCiano introduced us to getting started with Google Fonts. Nice job, Sabrina!
- Ian McConnell shared an interactive screenshot for a modern messaging app. You can read all about Ian's project over at his blog. Well done, Ian!
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!
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 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.
106 Comments
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 stor... Expand
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: http://www.shutterstock.com/pic-85451623/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: http://elearningdesigner.com/photo-collage-elearning-challenge/ Short blog post: http://elearningdesigner.com/portfolio/photo-collag... Expand
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 su... Expand