Magazine-inspired design for Onboarding course cover slide
Hi, this week challenge is so timing and inspiring to me, especially when it comes to renovating my onboarding programme. So I thought Why not give it a try! It was my first time to explore Custom Blocks, especially trying different Typo, shapes, lines and everything else. P/s: With this design I hope the onboarding experience to feel more like opening a digital editorial publication than a typical corporate training course. Would love to hear any room for development.Design Like an Art Director
This week's challenge got me thinking about the contrast David set up so well, the fit-it-in mindset versus the editorial designer mindset. So I built both. Review here. The PDF is the fit-it-in version, a fully designed benefits employee handbook. Clean, structured, readable. This is available on the resources tab of the published file. A few Screenshots below. The art director's version takes the exact same content and reimagines it as a cinematic experience, where every frame carries one idea, typography does the heavy lifting, and nothing ever looks like a list. Would love to hear which approach you think lands harder.Stop Designing Courses. Start Designing Performance. (Yes, I Made a Whole Magazine About It.)
This week's challenge asked us to build a magazine-inspired layout for an e-learning course. A reasonable person reaches for a nice hero image, a pull quote, and calls it a day. I, apparently incapable of restraint, invented an entire fictional learning-design magazine — masthead, barcode, snooty cover price, the works — and then nearly lost a fistfight with my own cover image. Reader, meet FRAME. One magazine. One issue. Big opinions. FRAME has exactly one issue so far: The Performance Issue. And the cover story is, fittingly, "Stop designing courses. Start designing performance." Here's why that's not just a cute headline. The challenge quietly nails something I think about constantly: editorial design and performance design are the same move. The fit-it-in designer asks, "How do I cram all this onto the slide?" The art director asks, "What does the reader actually need to feel — and what's the one thing that matters most?" Swap "reader" for "learner" and that is the whole philosophy. So instead of slapping a magazine layout onto random content, I made the content about the thing the layout is demonstrating. The article practices what it preaches. Very normal, very healthy behavior on my part. The build (a.k.a. drop caps in an e-learning course) It's all running in a Rise Code Block — custom HTML, CSS, and JavaScript — with a real editorial type system doing the heavy lifting: Bodoni Moda for the dramatic, fashion-magazine masthead and headline Newsreader for the body copy (because magazines use serifs and we should be allowed to have nice things) Archivo for the kickers, labels, and page furniture Paper-and-vermilion palette. A proper drop cap. A pull quote sitting on a solid ink slab. A sidebar with "Three questions to ask before you build a single slide." A "By the Numbers" strip. I put a drop cap in an e-learning course, friends. We are officially through the looking glass. The cover that fought back The artwork was done. All I needed was the right size. Simple. Here is the complete, humbling timeline: Me, with total confidence: "It's 16:9." I did not look this up. I simply declared it. Claude — agreeable to a fault — went "sounds right!" and built it. Two professionals, vibing, zero sources between us. Beautiful, really. Then I actually Googled it. Google, with equal confidence, told me 1000 × 3000 — a portrait strip the proportions of a CVS receipt. (Reader, I had it backwards.) "Okay, 3000 × 1000 — a wide banner." We rebuilt the entire cover sideways to fit. It looked great. I felt productive and correct. Plot twist. At this point Claude finally checked Articulate's own docs, which calmly state that cover photos want… 16:9. My original, evidence-free guess. The one we abandoned to go chase a number Google was suspiciously sure about. We had traveled in a complete circle and ended up exactly where I started, just with more files. And Rise cropped it anyway. Because Rise dynamically crops covers, so no "correct" dimension was ever going to stop my masthead from quietly walking off-screen. The thing that actually won? I dropped the image onto a rectangle in PowerPoint, shrank it, centered it, exported a PNG. Fixed instantly. I have a whole interactive-design toolkit, and the hero of this story is a PowerPoint rectangle. I solved it like it's 2009. No notes. (I did later bake the padding in properly, so Future Me never has to do the PowerPoint Shuffle again — but the Shuffle is what got me to the deadline.) Did I use AI? Loudly, yes. I co-built this with Claude — the HTML/CSS/JS, the editorial copy, and yes, even the fake barcode. Credit where credit is due. It's a genuinely great way to go from "I have a weird idea about a fake magazine" to "the fake magazine is real and has a barcode" in an afternoon. The takeaway The information never changes. The packaging — and who you design it for — changes everything. FRAME, Issue 07. The Performance Issue. Newsstand price: press play. Display until you design like an art director. If you published a learning-design magazine, what's the cover story? 🏆 Stop Designing Courses. Start Designing Performance.Articulate Challenge 542: Things You Should & Shouldn't Say to E-Learning Designers
I was halfway through my design for this Articulate Challenge when I realized how heavily the banner image influenced the aesthetic of my submission. Ah well! I set out to create a clean, somewhat playful design that is hopefully satisfying to click through. A variable dictates which result slide the user reaches at the end of the activity. You can access the activity here: Articulate Challenge 542.Gas Turbine Operator Scenario
For this week’s eLearning Heroes Challenge, I skipped the usual upfront learning objectives and started with a real-world scenario instead. The course opens during a gas turbine startup. Learners step into the role of the operator as things seem normal… until they’re not. A few warning signs appear, decisions are made under pressure, and then—boom—the scenario ends on a cliffhanger. By the time learners reach the formal topics and objectives, they already care. They know why the content matters because they’ve felt the pressure of the operator and are invested in, “What happens next?” Review link: https://360.articulate.com/review/content/62ecf666-5ac5-4b7c-afc4-c3b02afd7d76/reviewChallenge #523
Hello Everyone, I decided to update a microlearning Rise course about time management that I created using the custom block feature. I can see how this feature could liven up a lot of new and existing courses! https://360.articulate.com/review/content/045b98e6-31c9-4de0-a896-99a1f1ffd257/reviewGuide to a Healthy Lifestyle: Nourish, Move & Mind
Experience it I recently saw an interactive e-learning example in a Mastercard and really liked how it embedded lots of info in a simple, clear way. It inspired me to try something similar—organising content into smaller, engaging chunks that are still meaningful. I thought of healthy habits right away—it’s a topic anyone can relate to, and some ideas immediately popped into my mind. Learning Goal & Audience Goal: Share the three basics of wellness—nutrition, exercise, and mindset—in a quick, engaging, and friendly format. Audience: Anyone looking for small ideas to improve their daily wellbeing. Concept & Structure I set it up as a three-tile menu: Eating Habits, Physical Activities, and Mental Health, each including key subtopics, brief explanations, a "Did You Know?" feature, and simple definitions to keep the content light but informative. The structure is flexible—you can easily scale the number of tiles, tabs, or content items based on your learning goals or time constraints. Visual & Interaction Design I used soft colours like blues, yellows, and purples to give it a calm and positive feel. I also added light background animation and small object movements to make the screen feel more alive without being distracting. Development & Triggers Each tile links to its own layer on a separate slide. I used buttons and triggers to keep everything smooth. Motion path animations were added to the pop-ups so they slide in nicely when opened. Tools Used Illustrator for the graphics Vyond for simple animations Articulate Storyline for building everything and setting up the triggers Challenges & Solutions I started with custom motion paths but switched to built-in animations—they worked better and were easier to manage. I also made small fixes to the GIF and icon states after testing, just to make sure everything responded well. Outcome & Next Steps I’d be happy to share my process in more detail if it’s helpful—always glad to exchange ideas and learn together. Let me know what you think—I’d love to hear your feedback! ...and let's share, connect, and inspire: my LinkedinInteractive Markers on a Car
Version 1 I saw this nice Polestar ad on my phone that had markers and labels that I thought I'd test with the morph. I I tried a few things: Create a slide with all of my elements. Add triggers to slides (need to change them after duplicating) Since the morph is only a transition between slides and I wanted all of my objects to transitions in and out the ones I wasn't using a made transparent. I think all of these "hidden" objects via transparency may be problematic. :) Attached is the file. Version 1: View demo Version 2 I tried a few novel things in version 1 that may have confused Storyline, so I simplifed the demo in version 2. Version 2: View demo. About Me I love helping people learn to use the Articulate software to meet their needs at work. I especially like to help those new instructional designers who are trying their best to get a handle on things. I regularly contribute to the training team's blog where we assemble all sorts of tips and tricks. Follow it to stay up to date. I post every Wednesday to Articulate's company blogwhere I share more general instructional design tips. I used to write the Rapid E-learning Blog. Still lots of good tips & tricks in there. Connect with me on LinkedIn and follow my YouTube for more tips & tricks.
Case: Operation Dopamine - A Noir Comic Mystery
Hi E-Learning Heroes! 👋 For this week's Comic Book-Inspired Challenge, I decided to go full "Noir Detective" graphic novel style. 🕵️♂️✨ In my project, "Case: Operation Dopamine", the learner steps into the shoes of a private investigator exploring a ransacked laboratory. The mission? To find the 6 stolen components of Gamification (such as Engagement, Customer Lifetime Value, and Emotional Connection) and restore color to a black-and-white corporate world. 🔍 Play the interactive demo here: > Play Operation Dopamine I had so much fun blending storytelling, visual design, and instructional concepts into this one. I would love to hear your thoughts and feedback!
