Blog Post

E-Learning Challenges
2 MIN READ

Designing E-Learning Slides with Asymmetrical Layouts #482

DavidAnderson's avatar
4 days ago

One of the simplest ways to design e-learning slides is by using a symmetrical grid. Symmetrical grids create a balanced layout, making design easier since they follow clear constraints. Here's an example of a simple grid-based layout:

Symmetrical Layout

On the other hand, asymmetrical designs can feel more challenging because they seem to break those rules.

But you’re not really breaking the rules as much as you’re just breaking the grid. Even in an asymmetrical layout, you need to consider your focal point.

Asymmetrical Layout

When you’re working with asymmetrical layouts, here’s a good question to ask yourself:

What’s the focal point of my slide, and how do I keep things balanced, even if they’re not all perfectly lined up with the grid?

Asymmetrical layouts are all about creating balance without everything having to match up.

Some common characteristics of asymmetrical layouts:

  • Uneven visual elements
  • Engaging compositions
  • Varied sizes, colors, and shapes

  • Balance through visual weight

Asymmetrical designs might feel a bit outside your comfort zone, but they can be a lot of fun to work with. Why? Because nothing has to fit neatly in a box or stay within a grid. And breaking the grid is exactly what this week’s challenge is all about!

🏆 Challenge of the Week

This week, your challenge is to design a static or interactive slide that demonstrates how asymmetrical layouts can be used in e-learning. If you have time, create a second version to show a symmetrical take on your design.

✨ Share Your E-Learning Work

  • Comments: Use the comments section below to link your published example and blog post.
  • Forums: Start a new thread and share a link to your published example.
  • Personal blog: If you have a blog, please consider writing about your challenges. We'll link to your posts, so your great work gets even more exposure.
  • Social media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can follow your e-learning coolness.

🙌 Last Week’s Challenge:

Before you break the grid in this week’s challenge, take a look at the creative style guide examples shared by your fellow challengers last week:

E-Learning Style Guides RECAP #481: 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.

Published 4 days ago
Version 1.0
    • JodiSansone's avatar
      JodiSansone
      Community Member

      My brain resisted this challenge. I like order, so creating something without symmetry is not my preference, but I had fun with it anyway. I needed something to kick start my thinking, so I added a tab in the player to show the layout that inspired my demo. David, I really liked the example you shared. Have a great week everybody!

      • DavidAnderson's avatar
        DavidAnderson
        Staff

        That initial resistance usually means it’s about to become one of your better challenge examples:-)

    • DavidAnderson's avatar
      DavidAnderson
      Staff

      Perfect and just what I had in mind. Great seeing you last week at the user event.

    • Jonathan_Hill's avatar
      Jonathan_Hill
      Super Hero

      This is superb, Jodie, really slick. I could imagine any number of clients in the media / arts sector being very happy with this look and feel.

      Was also lovely to catch up with you last week in Vegas.

    • JodiSansone's avatar
      JodiSansone
      Community Member

      This was great fun. It took me a few minutes to understand the goal, but I got to the end. I had never heard of TRIZ so thank you for helping me learn something new! 

      • ThierryEMMANUEL's avatar
        ThierryEMMANUEL
        Community Member

        Thanks, Jodi. I made it “not simple”, intriguing, thought-provoking on purpose, based on my topic and David's theme as I interpret it: engaging the learner by taking them out of their comfort zone with a non-symmetrical / not-as-usual beginning. I was also influenced by Marie-Jo Leroux, who encourages ID to gamify their courses from the very first slide, if possible, in order to engage learners strongly. I think this is good advice.

    • Jonathan_Hill's avatar
      Jonathan_Hill
      Super Hero

      Been wracking my brains trying to think which art/artist this reminds me of. It's very reminiscent of the Memphis Design movement of the 80s/90s, but there's definitely some Bauhaus in there, too, ThierryEMMANUEL

      Enjoyed learning about TRIZ after solving the puzzle.

  • Hello!

    I'm just about over my DevLearn jet lag. Was great catching up with you all in Vegas!
     
    I'm conscious this demo follows one in which I stressed the importance of the Z Pattern (Gutenberg Rule). I think I've managed to follow my own advice in this  asymmetrical layout.

    LISTING
    https://bit.ly/elhc482 

    • ThierryEMMANUEL's avatar
      ThierryEMMANUEL
      Community Member

      I think you look a bit like the captain of the Titanic in the photos, Jonathan. I had first thought of tilting my background for this challenge, but I hadn't come up with the right idea. So here it is.

    • JodiSansone's avatar
      JodiSansone
      Community Member

      I'm not a sailing person so I did not know what "listing" was. Now I do! I looked the word up and read about "trimming" too. It just reinforced why I don't like cruises. I'm a land person. I like how you incorporated the challenge concept into you animation. It drove home the concept perfectly. Glad you made it home safely! I hope you liked the Neon Museum!

      • Jonathan_Hill's avatar
        Jonathan_Hill
        Super Hero

        Thanks JodiSansone, I couldn't resist the double meaning of 'listing' in the title. 

        I LOVED the Neon Museum, it was one of the highlights of my trip this year. Also snuck back to Meow Wolf, so it's surprising to me that this week's demo didn't turn out weirder.