Creating a ‘Digital’ magazine style for your e-learning

As you might know I’m a big fan of the weekly Articulate challenges. I don’t always have the time to participate in all but I always peek in and sometimes even park them for when I’ve got the time as the challenges are always open. In Challenge #58 you can get your creative juices flowing by creating a digital magazine style for e-learning modules that are more text based.

I create a lot of text based e-learning as, with global companies, audio playback can be an issue in open office spaces or in places where the computers simply do not have audio capabilities (yes, it happens more than you think.) In this case a magazine style can work really well. So what do you need to create a professional looking magazine style template? Here are some tips to get you started

Welcome to the grid

Magazine layouts vary a lot, from the basic 1-2-3 column setup to more creative layouts. You need to figure out which kind of layouts you want to use and which match your course design. Luckily there are tons of cool layouts available. The pro’s call these layouts a ‘Grid’. Check out this page with some pretty nice grids for your inspiration. Here’s another example. As you can see, the possibilities are endless and you just need to figure out what it is you want, and need. Tip! Don’t go all out when starting with this. If you’ve got 4-5 different layouts you’re good to go.

Color me purple

Okay, so you’ve got your grids covered. Now it’s time to come up with a design (note: you can also try to find some design inspiration first and adjust your grids to match). Now I’m a creative guy but that does not mean I go about reinventing the wheel. Especially with so many cool wheels available to me. What I love to do for design inspiration is search Pinterest and Google images. While searching with the keywords ‘magazine’, ‘layout’ and ‘grid’ I found some really cool designs that could work like a charm when setting up an amazing magazine layout. Check out this, this and this. Oh and don’t forget this one.

As you can see, again, it’s all out there. Now you just have to put it together.

I click so I exist…

Okay that’s not exactly true but now that you’ve got your grids and design inspiration you want to consider what kind of interactivity you want to add. The basic ones are playing back some audio, (e.g. a mechanics course where you can recognize technical issues by listing to the car: playing the sound of a car with a hole in the tail pipe), clicking a still image to start a video (in that same place or enlarging it to a lightbox or full size video), you can use an image slider and some click and reveal interactions to show ‘more’ relevant content. There are plenty of cool videos on YouTube about online magazines and apps that can help you with some inspiration.

Another cool but (slightly) more advanced interaction you could add is a slider interaction. Stuff like a 360 image view or interactive graphs are easily done in Storyline 2 and can really bring that special something to your course.


If you really want to go that extra mile add some animations and transitions. Again, don’t go overboard here select a few and use them consistently. Tim Slade uses some nice yet simple animations and transitions in the example he submitted for this challenge. Or check out this example Melissa Milloway submitted. Pretty schweet right?!

Now go ahead… go play!



Published by

Jeff Kortenbosch

Jeff is a performance, change and learning business partner professional that believes in making learning relevant again!

2 thoughts on “Creating a ‘Digital’ magazine style for your e-learning”

Leave a Reply