Blog Post

E-Learning Challenges
2 MIN READ

Designing E-Learning Slides with Asymmetrical Layouts #482

DavidAnderson's avatar
25 days ago

Asymmetrical Design in E-Learning #482: Challenge | Recap

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.

Updated 2 days ago
Version 2.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.

  • Bonjour Heroes.

    Be asymmetrical! Not predictable.
    I hope I've answered the meaning of the challenge... in my own way. I've broken down the grid to better draw you into the course; I'm not guiding by taking you by the hand and making it easy for you because I need you to think.
    No further explanations. Just try and hang on to get some on the last screen.

    https://360.articulate.com/review/content/ba7e88bc-aedf-443b-86b9-eaa0a01c0538/review

    Thursday : a simplified file focusing only on rotating two tiles for the example, with explanations, is now attached in a comment to the Review. Let me know if you find it useful. And I'm interested in any way to improve it, of course. It's a version to avoid using JScode if you don't handle it as I don't handle it myself. But there are much smarter and more elegant ways to do it with JScode. I'm looking into it and will use it very soon (for my next client) and one day in a future demo.

    • 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.

      • ThierryEMMANUEL's avatar
        ThierryEMMANUEL
        Community Member

        Coming back from a dive into the graphic world of Memphis Design, whose history I'm discovering thanks to you Jonathan_Hill , you're right. Banhaus too, of course. However, to be in tune with my TRIZ subject, its origin and its period of creation, I was more inspired by the Soviet Constructivism movement, of which I saw an exhibition in Paris a few years ago. The masterpiece I'm using for the puzzle can be seen at the Museum... of free backgrounds from Freepik.😁

    • CydWalker_mwhc's avatar
      CydWalker_mwhc
      Community Member

      Really enjoyed this Thierry! Also a fan of Marie-Jo Leroux, great example of engaging up front.

  • 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.

  • Hi all!  I was also at DevLearn and I promised myself I would try a Challenge one of these days.  You are all so inspiring and talented (which impresses me but also intimidates me -- I am no where near your level of expertise).  Jodie - I sat a couple people down from you in one of the sessions and I wanted to ask you about one of the examples that was shown, but you were popular and others wanted to talk to you too!  

    • ThierryEMMANUEL's avatar
      ThierryEMMANUEL
      Community Member

      I find this demo very interesting, Ange , the way you use the tools to demonstrate it (transparency). It's so interesting that I'd like to know more. Is there a way to explore the other buttons on the left? 🙂

      • Ange's avatar
        Ange
        Community Member

        Hi Thierry, thanks. I didn’t include the other examples 😞 but attached is a jpeg of different layouts. I first used the rule of thirds (la règle des tiers) when I was teaching framing and composition techniques to a beginner photography class. The grid is popular in photography/film/art; it offers a robust starting point that can be built-on/tweaked/broken to effect with a talented/trained eye. My last minute addition of a menu on the left breaks the grid - not in a good way!

  • Ron_Katz's avatar
    Ron_Katz
    Community Member

    Hello Heroes,

    For this weeks Articulate eLearning Challenge we were asked to create examples with asymmetrical layouts. Here is my entry for the week.

    Demo: https://360.articulate.com/review/content/107807e2-9844-417a-a6b8-ab250b1e6433/review

    This entry features LeonardoAI generated snails with right and left spiraling (left spiraling snails make up only about 10% of the population) and music from YouTube Studio. Script was written with the help of Microsoft Copilot using input from an article from PBS News. 

    https://www.pbs.org/newshour/science/how-a-snails-shell-gets-its-twist

    Video elements came from Articulate's media library.

     

    • JodiSansone's avatar
      JodiSansone
      Community Member

      Learned all about chirality...never encountered that word before! 

    • CydWalker_mwhc's avatar
      CydWalker_mwhc
      Community Member

      This is really interesting Ron! Although I was sad about the ending...I would rather have seen Thierry eat the snail.