Swatch Library
With Swatch Library you can create a palette per brand or project, and every swatch is one click to copy, in hex or RGB. Use it free right inside a Rise course or online. Type or paste a code, bulk-paste a whole list at once or, in Chrome/Edge, use the eyedropper to pick colours from anywhere on your screen, a client's website, a brand PDF, a Storyline slide. You can drop a logo or brand asset onto the tool and it will pull the dominant colours out and build a palette from them. Everything happens in the browser, nothing is uploaded anywhere. Beyond that there is a WCAG 2.2 contrast checker built in, set a foreground and background colour, get the ratio, and see pass/fail for AA and AAA body text, large text and non-text elements like icons and focus indicators. That is useful enough on its own, but the thing I am most pleased with is the contrast grid. Each palette has a Grid button that opens a matrix of every colour pair in that palette, painted with the actual pair so you can see at a glance which combinations work for text and which do not. One click on any cell opens the full checker for that pair. If you have ever wondered whether your brand colours are actually safe to use together, this answers it quickly. There is also a colour vision preview. A Vision button on each palette shows it as it appears to people with protanopia, deuteranopia and tritanopia, plus a greyscale row for print. It automatically flags any pairs that become hard to tell apart, named with their perceptual distance score. Each swatch has a tints and shades button that opens a nine-step ramp from light to dark, and you can click any step to copy it or add it to the palette. Useful for hover states and backgrounds. You can drag swatches to reorder or move them between palettes, filter palettes once your library grows, and use Export/Import to back everything up or share a brand palette file with your team so everyone's working from the same set. There's a built-in guide for the full tour. It can be used directly in the linked Rise course, or used online via the link. All free, no downloads, no signup, no nonsense! Swatch Library - Rise Swatch Library - OnlineCommunity 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 HeroesMy Custom Rise Block Component Library
Hi everyone! I wanted to share a custom library of Rise-compatible interactive components I’ve been building and experimenting with for eLearning projects. The library includes custom-designed blocks and interactions intended to help make Rise courses more engaging, flexible, and visually dynamic beyond the default block set. You can explore the library here: https://cognitoblox.netlify.app/ This is an ongoing project, and I’d genuinely love feedback from the community: Which components do you find most useful? What kinds of interactions would you like to see added? Any ideas for improving usability or accessibility? Happy to connect with fellow developers who are experimenting with custom Rise code blocks as well! Thanks for checking it outMade by Members: On-boarding New Team Members
This month we’re spotlighting submissions across several eLearning Challenges that, when combined together, make an onboarding experience. These examples show how a variety of techniques can create memorable and easily referenced guides to simplify the fire hose of information that accompanies onboarding. Mix and match these examples for your specific use case if you’d like to give it a try, and be sure to comment below with what inspired you! A Blueprint for Day One and Beyond by SMcNicol Designed as a leave behind for after an interview, this course shows not only what an interviewee could use as a pitch for their first months in a job, but a clean and organized method for general 30/60/90 day plans. 💡Inspiration to take: How to use what Shannon describes as an “AI assisted workflow” to tailor plans and content Layered descriptions of not only what a process looks like, but concrete tactics for success Who is behind the scenes? By Kate_Golomshtok A bright example of vector image use, this submission shows a quick and memorable way to introduce different team roles. This approach makes it easy to understand the division of responsibilities in complex teams or projects. 💡Inspiration to take: Vector images that clarify tool use and positions for projects that could be confusing at first glance An “insider” approach to content presentation that includes field specific lingo Data Security Training by BrilliantTeams Submitted as part of the accordion interaction challenge, this submission shows how to make compliance training into an easily referenceable tool. New team members can easily dig down into more detail, while keeping high level information such as common initialisms above the fold. 💡Inspiration to take: Compliance training is notoriously a slog, so use engaging interactions to break up detail heavy content Stack information with the rationale behind it to help contextualize the “why” of procedures Meet the Team by AsweniGD Just what it says on the tin, this team introduction is a new team members’ dream for understanding organizational flow, titles, and personalities. Between the color coded org chart and detail on responsibilities this would help new hires understand who to ask what, when. 💡Inspiration to take: The morph transition makes for a clean transition from contextualized visuals to greater detail information Embrace color coded visuals to leave more room for what Ash describes as “human centered” introductions 🏅 Want to Be Featured Next? We’re always looking to highlight inspiring examples from the community, and your work could be next! Here's what we look for in a standout submission: A downloadable .story file or link to your Rise course so others can explore, adapt, and learn from your build. A clear explanation of what you built, how it works, and what makes it unique. Behind-the-scenes insight into your process, techniques, tools, or challenges you tackled. Purposeful design, whether it’s solving a problem, teaching a concept, or experimenting with a new approach. Bonus: Share your ideas for how your design is widely applicable beyond the specific example. Got something cool to share? Post it in Share Examples, and you might see it featured in an upcoming roundup!AI-Powered Lessons-Learned Workflow for Project Teams
Are you ready to transform how your project team captures and reuses critical knowledge? In this course, you’ll discover how to harness generative AI to streamline lessons-learned processes, eliminate manual bottlenecks, and institutionalize organizational learning. Explore the real challenges project teams face, see prompt engineering in action, and learn how to implement governance protocols that ensure trust and security. By the end, you’ll be equipped to design, deploy, and scale an AI-assisted knowledge management workflow that delivers lasting value to your organization.Santa's Naughty or Nice List
Happy Holidays, everyone! I recently built a sorting exercise for a client which used Javascript to split the learner's text entry answer into individual sentences and display these as draggable Post-It notes. The learner was then asked to sort the Post-It notes into 'good' and 'bad' ideas. Which got me thinking... could Santa use a similar method to decide who's been naughty or nice? In this Christmas-themed version, I've simplified the Javascript to recognise only individual words (by space or line break) and generate up to 10 Post-It notes for the sorting exercise. // Get the learner's response from the Storyline text variable var player = GetPlayer(); var learnerResponse = player.GetVar("Christmas_List"); // Split the text into individual words // This handles multiple spaces, line breaks, and other whitespace var words = learnerResponse.split(/\s+/); // Remove any empty strings from the array words = words.filter(function(word) { return word.trim().length > 0; }); // Assign each word to numbered variables (Person_1, Person_2, etc.) // Limited to 20 slots var maxSlots = 20; for (var i = 0; i < words.length && i < maxSlots; i++) { var varName = "Person_" + (i + 1); var trimmedWord = words[i].trim(); player.SetVar(varName, trimmedWord); } // Optional: Store the total number of words processed player.SetVar("TotalWords", Math.min(words.length, maxSlots)); Each of the 10 Post-It notes only becomes visible if a name has been assigned to it. Depending on the split between 'naughty' and 'nice', you'll see a different video message from Santa. I created the Santa videos with Powtoon's AI Text to Video tool. Warning: it's Drag and Drop As fun as this is, Drag and Drop isn't fully accessible, and I'm still tinkering with the master file to see if I can add keyboard fallback controls and preserve the counting system. Watch this space! Play here!
Ai-powered Learning Companion
AI-Powered Agent I’m exploring ways to integrate AI-powered agents into digital learning to make courses more interactive, responsive, and personalized. Imagine learners engaging in real-time conversations, receiving instant answers, and practicing realistic scenarios all within the course itself. Learners go beyond just reading or clicking they can ask questions, get immediate feedback, and practice real conversations directly inside the course. Currently in the early testing phase, the results are already showing promise in boosting engagement and personalization. While there is some response latency, the potential for transforming digital learning experiences is immense. #AI-Powered Learning Agent #AI-Powered Interactive Coach #Smart Virtual Facilitator #AI Learning Companion #AI-Powered Learning Agent #Real-Time GPT Assistant #Storyline openAIConnector https://shorturl.at/VcvzMTricks with JavaScript & On-Brand Storyline Design
Hey everyone! 👋 I’ve been experimenting with ways to make the built-in Storyline 360 player look and feel less default and more on-brand — without rebuilding the player from scratch. Using just a few lines of JavaScript on the Slide Master, You can: 🎨 Change the sidebar and bottom bar color 📝 Style the menu text 🍔 Remove the hamburger icon ➡️ Rename the “Next” button ✨ Add a custom border for visual flair These tweaks helped me align the course with my client’s brand while still using the native player features. 📺 If you're curious, I shared a walkthrough and examples on my new YouTube channel: 🔗 [https://youtu.be/kIwjijlsApY?si=9cHpHHlVNYVnhz5x] I’d love your feedback or to hear how others are customizing the player too! #Storyline360 #JavaScript #CustomPlayer #eLearningDesign #OnBrand
