Community Insights: Preparing and Planning your visual design for Articulate Rise
The beauty of Articulate Rise is that when it comes to development, you don’t always have to plan everything. You can jump into the blank canvas, easily add and delete blocks, play with interactions and figure out what works as you go. The ease in which you can chop and change things is often what draws people to rapid authoring tools. Being able to bring your ideas to life in the click of a button, without any complex programming or coding. Whilst this method of ‘figuring things out’ as you go can often work well for building out ideas, when it comes to visual design, sometimes a little bit of planning can go a long way! The blank canvas that Rise brings can offer scope to be as creative as you wish with the visual identity of your course, but naturally this can also feel just a tad overwhelming. This sometimes then leads to two outcomes. We have those who love the freedom of a blank canvas but try to shoehorn in too many styles at once. Or those who just don’t know where to start, so play it safe and end up with a boring, blocky, black and white build. The good news is with proper planning you can avoid both those eventualities and craft a beautiful, accessible build without needing to be a graphic designer! Consistency is key So, what is the point in planning your visual design before jumping into development? Well, it’s not about creating something overly complex, or spending hours crafting a character that you’ll only use once in the course. No. It’s about ensuring consistency. Consistency plays a big role in how our learners are going to perceive the eLearning. Good design will go unnoticed, but bad design sticks out like a sore thumb! Even something as simple as having different icon styles or suddenly switching from using photography to illustrations, can be jarring to a learner. This results in the focus being drawn away from the content and can actually have a negative impact on a learner’s perception of the quality of the content too. Think about it, have you ever visited a website and been immediately put off because of the way it looks? Did you buy the product or access that service? Probably not. Quality of design and consistency of design can have a significant impact on perceived quality and cognitive load. We want our design choices to enhance and support the user experience, not detract from it. Making design decisions before jumping into your authoring tool can help support consistency and leave you with a Rise build that feels polished and professional! So how do you start planning and what do you need to include or consider? Let’s take a look! Create a blank moodboard space. This can be in whichever tool you prefer using. I like PowerPoint or Miro as I can quickly copy and paste things into the slide space. The key thing is that you can access this moodboard easily and have enough page or slide space to jot down your ideas. This will become a bit of working document that you can add to during the initial scoping of your project. Add in any existing brand assets. If you’re working within an organization or with a client, it is likely they will already have some brand guidelines for you to work with. This could include font choices, colour schemes and even suggestions for photography styles. Often these come in very large PDF documents, so take half an hour to read through and pull out any information that could be useful for you. Within your mood board add a title for ‘fonts’ and make a note of the chosen font for both your body text and headers. Sometimes I even add a little paragraph of dummy text so I can see how the font will look. At this stage you can also decide on font sizing too and make a note of this. Next, begin to pull together your colour scheme from the brand guidelines. I like to create a few rectangles within my moodboard and fill them with my chosen colours. Next to each swatch I add the HEX or RGB code so that I can easily copy this over when I get to development. It’s also a good idea to label your colour swatches with their intended use, for example header text, body text and accent colours (colours used for icons, graphs etc.). Sometimes brand guidelines will contain multiple different colour palettes for different uses. This is where it may be worth a chat with your Stakeholders to ask them to decide on just four or five colours. Too many can become overly busy and distracting! Check for accessibility Now that you have fonts and a colour scheme decided, it’s important to check for accessibility. I like to have at least two accessible colour pairings within my colour palette. This means that the contrast between the two colours is great enough to pass accessibility standards. There are lots of helpful websites out there that can allow you to check the contrast of two colours and will let you know if it passes accessibility standards. On your moodboard create a separate section that says ‘accessible colour pairings’ and include swatches of the pairings that can be used. This is particularly important for text and background colour pairings. It’s important to consider the accessibility of fonts too. It can be tempting to go for an elaborate or decorative curly font. As a header with font size 44pt, this may be absolutely fine. But as 16pt body text, could be completely unreadable. Standard fonts such as Poppins, Arial and Open Sans tend to work really well for body text and offer bold / black alternatives for headings too. Decide on an illustration, photo and icon style It may seem pedantic, but sudden changes in icon style can be really noticeable. So next up on your moodboard add the title ‘icons’ and provide a couple of icon examples in a consistent style. Sites like Flaticon are fantastic for sourcing icons of a particular look and feel. Consider whether you want icons coloured or just an outline and how detailed you wish them to be. Play around with a few different styles until you find something that you like. I sometimes find it useful to visit my client’s website and get inspiration from the icons used there. Once you have decided on a style and the colours in which your icons should be, add your examples to your moodboard. If you want to go one step further, why not create a folder in your documents called ‘icons’ and quickly gather a bank of icons that you feel you’re likely to use in your course. When you start the development, you can just grab and go! Make sure you don’t forget to jot down where you sourced your icons from too. This will make it much quicker to find others in the same style at a later date. When it comes to photography and illustrations, the likelihood is your client / Stakeholders may already have guidance on what is appropriate to use. Whether you go down the route of characters, or stock imagery, it’s important to keep this consistent throughout. Head over to a royalty free site and search for a range of images based on the content or subject matter of your eLearning. In the case of photography, search for consistencies in backgrounds, shot type (close up versus wide screen), colours and poses. As a rule of thumb, I tend to avoid overly staged imagery where the person is staring directly into the camera. More subtle stagings where people appear to be interacting more naturally with each other can feel a bit more pleasant and less uncanny valley! Look for diversity in your images too, try to ensure a range of ethnicities, races and genders. Once again, add the title ‘imagery’ to your moodboard and provide a handful of examples you can refer back to later. When using characters or illustrations it can be slightly more tricky to ensure consistency in the style. However, royalty free sites such as Storyset allow you to search through a bank of illustrations all created in the same look and feel. You can even recolour them on the website without needing any graphic design software too! Gather inspiration for layouts and interactivity Did you know website designs can offer a great source of inspiration for Rise? Due to the continuous, one-page, nature of Rise it functions in a similar way to a website. Whilst you may not be able to replicate the functionality or interactivity of a website, you can translate some of the design choices! Head over to Google or Pinterest and type in ‘UI website design inspiration’. Here you will be able to find flatlay images of websites. Consider how the text is segmented, how colour and shape is used, and how images are presented. It can help spark ideas for dividers, background styles and more! Gather your reference images and drop them into your moodboard with the title 'layout inspiration'. Check everything fits together Great, you’ve finished gathering the pieces for your visual design puzzle. But now the most important step, looking at everything together and making sure it fits nicely. So, what do I mean by this? Essentially it means looking at everything as a whole and considering if it is conveying the message you want. For example, moodboard containing a colour palette with sunshine yellow and bright orange and photography of people smiling, may be a rogue choice for a fraud eLearning. This can also include looking for any contradictory elements to your moodboard too, for example a bubbly, rounded font but imagery that is serious and corporate. 🌟 All elements need to feel cohesive and intentional. Consider if you can explain the decision making behind your choices, if you’re finding you can’t really express why you’ve chosen a particular font, or colour, or image style, it’s probably not the right fit! And you’re done! You have your completed moodboard now ready to present to your client, share with colleagues, or to use as your reference to begin developing your Rise build. Remember, this doesn’t need to be a polished document, it should support you in maintaining consistency throughout your build and provide a point of inspiration to help you create Rise courses that break free from being boring and blocky. Once finished, why not share an example of a moodboard you’ve created? Share the tool you used and where you sourced any assets. 💡 Keep Learning Explore more member spotlight articles to discover how other learning designers are building their skills—and shaping the future of learning. Community Insights: Peer Guide Spotlight | E-Learning Heroes Community Insights: How Support Takes You Far | E-Learning HeroesBusiness Maths Essentials
Hello everyone... For this week’s challenge, I decided to experiment with a simple combination of Articulate Rise, ChatGPT and PowerPoint. What started as a small idea quickly developed into a complete, scenario-based learning activity. I created Business Maths Essentials for new starters, using Sam, a newly appointed accountant at BrightStart, to guide learners through key financial terms, classification activities, profit-and-loss calculations and a final decision-making task. The learner supports Sam, a new accountant at BrightStart, as he works through four practical tasks: understanding key financial terms, classifying business figures, calculating profit or loss, and interpreting the wider financial position. The activities were created as responsive HTML, CSS and JavaScript components that can be placed inside Articulate Rise Code Blocks. The design uses clear instructions, immediate feedback, running totals, simple calculations and accessible keyboard controls. Consistent TS4 branding, restrained 44 px emojis and visual status cues help learners navigate the content without distracting from the learning objective. The modular structure also allows each activity to be used separately or combined into a complete learner journey. For the course banner, I adapted a template created by Tom and used PowerPoint’s Morph transition to produce a simple animated GIF, which I placed in different locations. Attached is the Rise Banner Template I used - Source : E-learning Heroes View the course: Business Maths Essentials Enjoy Dr NadiaCybersecurity Awareness - Spot the Phish
Hola....Here's an interactive cybersecurity awareness course designed to help learners recognise common cyber threats and adopt safer digital behaviours. The course uses a learner-friendly approach to introduce essential cybersecurity concepts, including phishing attacks, password security, social engineering, malware, and safe online practices. CLICK TO VIEW8 Business Use Cases for Microlearning
Are you excited to try out microlearning, but unsure when to use it? Below, we outline eight common workplace situations that benefit from a short-form course. Each situation includes a sample microlearning. At the end, learn how you can customize these templates for your own company and training needs. 1. Create Organizational Alignment To hit a business target, everyone needs to be moving in the same direction. Creating that alignment starts with clear, frequent communication of the shared mission, vision, and values. Microlearning can help. The following editable template shows how you can align employees through regular executive “micro” updates: Executive Update 2. Highlight HR Information, Notices, or Reminders Educating employees about annual events like open enrollment, tax season, and compliance training is a critical function of HR teams. The problem? Important announcements often get missed when they’re embedded in long paragraphs or endless emails. Grab the following templates to see how microlearning makes HR communications more digestible and engaging: A Quick Guide To Open Enrollment Internal Company Newsletter 3. Strengthen Company Culture and DEI Initiatives Fostering an inclusive company culture is a continuous process—not a one-time effort. A series of microlearnings can support your larger culture-building and DEI efforts. Check out the following examples for ideas on how to get started: Are You an Ally? Try Taking on These 5 Roles How To Identify and Stop Using Ableist Language Gossip-Proof Your Workplace 4. Streamline Business Processes You can also use microlearning to document and streamline business processes or workflows—such as employee onboarding or performance management. Notice how the following examples make it easy for employees to work through the steps of a process independently: New Hire Pre-Hire Checklist Performance Review and Feedback 5. Increase Security Awareness Most successful data breaches, phishing attacks, and other cybersecurity incidents are caused by human error. Adding refresher microlearnings throughout the year can fortify your defenses. See an example for safeguarding against phishing attacks below: Spot the Phish 6. Enhance Employee Wellness A successful business needs thriving employees. But employee wellness training often ends up buried under competing priorities. Microlearning makes it easy for employees to fit in short breaks for self-care throughout the workday. Check out these two wellness-related microlearning examples: 3 Desk Stretches to Instantly Improve Your Day 5 Tips for Better Naps 7. Provide Quick-Reference Guides Microlearning is the perfect resource for one-off training questions: Employees can quickly find the answers they need—when they need them. Below, we’ve created templates for product and software training. But you could easily create quick-reference guides for sales, customer service, and other teams. Get To Know [Name of Product] Software Training 8. Reinforce and Assess Key Takeaways Finally, who says you have to choose between a more sizable course and microlearning? Repetition aids retention. Consider following up longer training sessions with a microlearning quiz, scenario, or summary. The examples listed below demonstrate how you might do this: Can You Recover From a Workplace Mistake? Training Refresher Wrap-Up There’s no shortage of creative ways you can use microlearning to achieve your business training objectives. The examples above are just a starter list. You might also check out submissions to one of our weekly community challenges, 40+ Microlearning Examples Created in Rise 360 #407. Interested in customizing one of these examples for your team? If you’re an Articulate 360 subscriber or trialer, you can edit all of the examples linked throughout this post by choosing the course from our Rise 360 microlearning content templates. Here’s a short video showing how to do that: What’s the latest microlearning course you’ve created? Tell us about it in the comments—and feel free to ask any questions you might have! Like this article? Subscribe to our newsletter to get the latest e-learning inspiration and insights directly in your inbox. You can also find us on LinkedIn and Twitter.Think About It!! Quiz, with Quiz Builder
💡My take on the challenge: I looked at this from a slightly different perspective. Building a quiz is easy! so I wanted to create something useful for the entire community. I didn't just create a quiz, I built an app right inside Rise that allows users to craft, preview, and export their own high-impact, standalone quiz right inside Rise for use in their own courses. Everything in the quiz is customisable! Use it along with the native rise style and format block controls to create something amazing! 🖥️ The tech bit! The tool is a dynamic, client-side web application built using standard web technologies (HTML5, CSS3, and Vanilla JavaScript). It allows you to build, configure, and export self-contained, interactive quiz blocks engineered specifically for iframe integration within Rise. ⚙️The really techy bit! The system relies on a centralized State Management Pattern (const S). Every interaction, from a slider adjustment to an input keypress or color hex alteration, fires a non-blocking UI update sequence: Mutates the values directly inside the global state object. Formats strings safely using contextual HTML/JS escaping helpers (esc() / escJs()) to prevent injection or rendering errors in the exported markup. Automatically serialises the state to compile a completely isolated, valid HTML document inside a data URI stream (srcdoc). 😤Problems encountered! Because the live preview runs inside an iframe wrapper to preserve strict CSS sandboxing and style isolation, standard DOM access is blocked. To solve this, a robust cross-document messaging pipeline was implemented: The Frame: Houses an active ResizeObserver API loop monitoring its own document height. The Message: The child window securely transmits payload data (window.parent.postMessage({type:'frameHeight', ...})) upward to the host application window upon asset load. The Host: Automatically catches the event listener and dynamically resizes the frame height down to the exact pixel, eliminating double scrollbars and layout shifting entirely. 🔎LMS/Rise Compatibility & Performance The exported codebase is mathematically pure Vanilla JavaScript (ES5 standard for runtime compatibility). It relies on no external dependencies, CDNs, or UI libraries, ensuring lightning-fast load times. It also features a programmatic native browser hook that fires standard completion messages ({type: 'complete'}) across to the parent window automatically upon a user hitting the customisable passing threshold. I hope you enjoy it 😊 Think About It!! Quiz With Quiz BuilderI Asked AI to Help Me Build Team Games. I Didn't Stop at One.
Let me set the scene. I've got a team building meeting coming up. I wanted something engaging — not another "share two truths and a lie" moment that makes everyone stare at the ceiling. I wanted something that actually gets people talking, laughing, maybe even a little competitive. You want a game. 🎮 But I also had approximately zero hours to build one from scratch. Sound familiar? Here's what I did instead: I opened a conversation with AI, described what I was going for, and started building. And somewhere between "let's make it facilitator-led" and "can you add confetti when someone scores a point" I didn't end up with one game. I ended up with five. The Process Was the Whole Point I didn't sit down with a grand master plan to build a game library. I started with a simple goal: create something fun for a L&D team building session that didn't require everyone to download an app, log into a platform, or remember a join code. The constraint? It needed to live in Rise 360 as a Code Block self-contained, no dependencies, ready to run on one shared screen. What I didn't expect was how fast 🏎️ the ideation loop would move. Describe a concept, see it rendered, react to it, refine it. Across a few sessions, that loop produced five fully playable games: L&D Jeopardy: Five categories of industry-specific clues that hit a little too close to home (SME Confessions, anyone?) AI Confessional: A L&D edition where the real answers might surprise you Prompt Lab: A game that actually reinforces AI prompting skills while everyone thinks they're just playing L&D Quest: Virtual Trivia Pursuit: Because our field deserves its own trivia championship The Case of the Vanishing Keynote: A mystery game so relatable it hurts Five games. Multiple sessions. No dev team. No budget line item. What Made It Work A few things I learned along the way that made the process actually fun instead of frustrating: Start with the vibe, not the mechanics. Before I said a word about HTML or JavaScript, I described the energy I wanted: laugh-out-loud, low stakes, facilitator-led, one screen for 20 people. That framing shaped every design decision that followed. React out loud. The fastest iterations happened when I said exactly what I saw — "the modal is off to the left," "the text isn't readable," "this needs more wow factor." Specific feedback beats vague dissatisfaction every time. Let it surprise you. I came in asking for Would You Rather. I left with Jeopardy complete with a starfield background, confetti cannons, animated score bumps, and a facilitator answer key. The AI brought ideas I wouldn't have thought to ask for — and some of them were the best parts. The Real Takeaway for L&D We talk a lot about engagement in learning design. We spend weeks building branching scenarios and interactive modules trying to manufacture the thing that games create naturally: people want to play. What this experiment reminded me is that the barrier to building game-based learning experiences is lower than it's ever been — not because the craft got easier, but because the tools got smarter. You still need to know your audience. You still need to write questions that land. You still need to make judgment calls about what's too complex and what's just right. But the part where you stare at a blank HTML file at 11pm wondering how to center a div? That part you can skip now. Try It Yourself If you've got a team meeting coming up, a training session that needs a warm-up, or just a burning desire to ask your colleagues whether they'd rather deal with a hands-off SME or a micromanaging one — build the game. Describe the vibe. Pick a format. React to what you see. Iterate. You might sit down to build one game and walk away with five. Built in Rise 360 using Code Block. AI-assisted development across multiple sessions. No divs were harmed in the making of these games. 🐵 Rise 360: Team Building ActivitiesAre You Sure? Turning a Confirmation Prompt Into a Checkpoint 🛑
We've all done it. You're halfway through a required course, your inbox is screaming, and you click the first answer that looks right just to keep moving. So when this week's challenge landed on confirmation prompts that little "Are you sure?" pause before you submit I knew exactly the moment I wanted to design for. But I didn't want to bolt a generic pop-up onto a quiz. I wanted the pause to actually do something. The idea id💡 I built this as a Checkpoint inside my course AI Prompts for Learning Experience Designers and here's the part I had a little too much fun with: it's a course about prompting, and the checkpoint itself models the single most important prompting habit there is. Don't fire off the first thing that comes to mind. Pause. Reread. Reconsider. Then commit. The interaction drops the learner into four real-world scenarios, one drawn from each module of the course writing intro copy under a deadline, drafting measurable objectives, iterating on a draft that's almost right, raising the ceiling on generic questions. They pick an answer. And then, before anything locks in, the pause hits. What makes the pause smart ⏸️ This is the bit I'm proudest of. Instead of the same flat "Are you sure?" for every option, the confirmation reacts to the exact answer you picked. Choose the vague prompt and it nudges you: "Three words, zero context — you'll spend the time you saved rewriting the output. Sure?" Choose the strong one and it affirms your thinking instead. It reads like a prompt coach leaning over your shoulder never giving away the answer, just helping you check your own work. Then at the end, a little tally shows what the pause actually did: how many times reconsidering rescued a wrong answer, and how many times it talked you out of a right one. Turns out the value of slowing down is surprisingly easy to measure. 😄 A couple of build notes 🗒️ Placement matters. The Checkpoint sits before the hands-on Practice Lab on purpose recognition first (spot the better prompt), then production (write your own). Nice little scaffolding ramp. All Rise 360 Code Block, and entirely transform-free the gradient hero, the twinkling tokens, the glowing progress bar, the staggered fade-ins, and the count-up score are all pure opacity, shadow, and gradient. Keeps it rock-solid inside Rise's iframe. Matched to my course palette so it feels native, not bolted on. And yes — I built this side by side with Claude as my co-creative partner. The taste and the instructional intent are mine; the AI just helped me get there faster and iterate without losing my mind. Which, fittingly, is exactly what the course is about. 🙂 The real lesson of a good confirmation prompt isn't "gotcha." It's "hey — you've got this, just take half a second to be sure." That's the kind of friction I'm always happy to design in. Would love to hear how you'd use a pause like this in your own work. 👇 AI Prompts for Learning Designers
