Blog Post

E-Learning Challenges
2 MIN READ

Using Photo Mosaics to Design Interactive Stories #459

DavidAnderson's avatar
5 months ago

Interactive Photo Collages in E-Learning #459: Challenge | Recap

Visual Storytelling 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

From straightforward panel layouts to asymmetrical compositions, photo collages offer a quick and effective way to craft image-driven stories using stock photo collages. 

Here's a simple mockup of how the effect can work from a stock photo.

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

To learn more about this creative effect, check out Tom's post on converting courses to interactions with photo stories.

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.

Want some examples? Check out the ELC322 recap for community examples of this effect.

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

🙌 Last Week’s Challenge:

Check out the spinning wheel and roulette-inspired examples from last week's challenge:

Roulette & Spinning Wheel Games RECAP #458: Challenge | Recap

👋 New to the E-Learning Challenges?

The weekly e-learning 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. I’ll update the recap posts to include your demos.

Learn more about the challenges in this Q&A post and why and how to participate in this helpful article

📆 Upcoming Challenges

  • Challenge #460 (05.03): Toggle Buttons. See ELC97 for an idea of what we're going for in next week's challenge.
  • Challenge #461 (05.10): Interactive Podcasts. See ELC364 for a related challenge. This time, the questions will focus on the value of working out loud, weekly challenges, and growing your skills.
  • Challenge #462 (05.17): Click. Hover. Drag. See ELC144 for a general idea of what we're doing.

🚨2024 Articulate User Conference Call for Proposals

We’re now accepting proposals for this year’s in-person user day conference co-hosted at DevLearn in Las Vegas. Learn more about the proposal process.

Published 5 months ago
Version 1.0
    • AshiTandon's avatar
      AshiTandon
      Community Member
      I love this demo and song! And the AI snub was hilarious as well :P
      • JodiSansone's avatar
        JodiSansone
        Community Member
        LOL--Thanks for looking at the credits. I thought I hid my snarkiness in there.
    • ThierryEMMANUEL's avatar
      ThierryEMMANUEL
      Community Member
      I love the scrapbooking style (in the details!) of your demo, Jodi. Only California dogs surf with a smile. In Paris, they just poop looking at you seriously.
  • ChrisHodgson's avatar
    ChrisHodgson
    Community Member
    Seeing the theme for this week's ELH Challenge gave me the push I needed to finally give one of my favourite entries (submitted over seven years ago) a much needed update!

    The project now has a much better voiceover track thanks to the magic of generative AI and Play.HT, and some improved masking techniques that makes the comic book panel presentation style all come together.

    https://discoverelearninguk.com/projects/the-lunchbox-phantom/
  • maren_west's avatar
    maren_west
    Community Member
    Hello!

    My team has new IDs create an "About Me" course to showcase their skills and introduce themselves to the team. This week I took inspiration from one of my colleagues' About Me. However, I don't like talking about myself so I made the subject something I do like talking about, cats!

    This is my first time designing a course with a mobile layout so any feedback on how to improve it would be appreciated!

    https://360.articulate.com/review/content/2547283f-089f-4467-9de8-c8b811d729b2/review
      • maren_west's avatar
        maren_west
        Community Member
        Thanks Jonathan! That is very helpful, I'll try it out
    • JodiSansone's avatar
      JodiSansone
      Community Member
      Boy, cats really know how to chill out. Well done! I looked at it on my phone and on my laptop and both worked perfectly. The only comment I have about the navigation is the "X" button in the player closed me out of the whole project. My mind kept telling me to use the "x" because it was more prominent to me. Can you suppress the player? Just a thought.
  • AshiTandon's avatar
    AshiTandon
    Community Member
    Talk about a hands-on and immersive learning experience! This was simply incredible!
  • Hello!

    Here's an interactive story that uses a mosaic/collage effect, with overlapping elements, to tell a cautionary tale about online privacy.

    ALLOW LOCATION
    Demo: https://bit.ly/elhc459

    This demo will probably become the subject of a blog - watch this space!
    • ThierryEMMANUEL's avatar
      ThierryEMMANUEL
      Community Member
      FYI: As you suggest changing settings to change "country/language" (not necessary for me) Jonathan, it works for France too: the "phishings" are in French! with real information about my address. Is that surprising? or scary? since I really did give my IP address, which is the same thing for the internet, isn't it? Can't wait to have a look at the blog and the technical part of your demo.
    • benjok's avatar
      benjok
      Community Member
      You're crafting an interactive story using a mosaic/collage effect to explore online privacy concerns. The demo allows location access to enhance user engagement and demonstrate the impact of online actions on privacy. Keep an eye out for the upcoming blog post about it!
    • Jonathan_Hill's avatar
      Jonathan_Hill
      Super Hero
      P.S. Try changing your browser location in the Developer Tools > Console Settings, to see this story in another country and language.
      • Jonathan_Hill's avatar
        Jonathan_Hill
        Super Hero
        P.P.S. Click on the Earth icon if you want to be really creeped out about your online privacy...