What to Include in an E-Learning Style Guide
An e-learning style guide is a great way to make sure your projects have a consistent look and feel. It allows you to identify best practices and set standards for how your organization develops courses. While some people might think a style guide limits creative freedom, there are many good reasons to put one in place. An e-learning style guide: ensures a polished and professional output serves as a quick reference tool saves time—meaning less time wasted reviewing and editing design choices expands on a company’s general brand guide, which often doesn’t take e-learning needs into consideration A style guide is especially helpful for organizations with multiple e-learning developers because it ensures consistency across projects. Ready to create an e-learning style guide, but not sure what exactly to include to make it useful? Below are a few must-haves you’ll want to consider. Logos The logo is an essential visual piece of any brand. Your style guide should explain where and when to use the logo. You might also outline the acceptable size, placement, and color variations for the logo, as well as examples of correct and incorrect use. Fonts Most organizations have a few fonts they prefer to use that have already been approved or reflect their corporate personality. Your style guide should outline which fonts to use, what size they should be, and when to use them. For example, you might use a bold 44 pt heading font for lesson titles and a regular 28 pt font for the body text on your slides. Tone or Voice Every company has a unique way of conveying their brand message to their audience. Whether that’s direct and serious or fun and playful, their tone or voice should come through in the course text. Study their website or other company materials to help you define how they communicate. Then share a few example paragraphs or specific copy that mirror a similar tone in your style guide. Writing Tips This could include rules for how to name courses, modules, lessons, assessments, activities, etc. You might also want to specify how to capitalize and punctuate lists and whether to use numbers as numerals or spelled out in full. Colors How a color appears may vary from one monitor to the next, so it’s important to provide actual hex values for your color palette. Specify whether your company allows various tints or shades of the colors and where specific colors are required. Visual Elements Images or illustrations can be a huge reflection of a brand. Consider including guidelines about the format, size, and types of graphics designers should use. Provide example images or illustrations that reflect the company’s brand. Buttons If the company has a standard look for buttons, include it in the style guide, along with tips on when to use each button. Templates Templates are a great way to speed up workflow. If you’ve created any templates—such as layouts, interactions, or quizzes—let people know where to find them in your style guide. If you want the courses to look on-brand regardless of content, create a player template that contains the company logo, custom colors, and specific menu settings that should be consistently applied. Audio Narration If your courses use audio narration, consider addressing that in your style guide. Include things like when to use narration, if a particular intro or outro is used, or if your courses use a specific person for narration versus text-to-speech. Quizzes & Feedback Quizzes are often part of courses, whether they’re brief knowledge checks at the end of a section or a final quiz at the end of the course. Your style guide should tell your developers when to use quizzes, whether there is a maximum number of quiz attempts allowed, and whether there’s a standard minimum passing score. It should also include information on how feedback is provided, or whether it’s provided at all. Miscellaneous Depending on your organization and your projects, you might include other items in your style guide—for example, tips for navigation flow or instructions for naming variables. Consider adding anything to the style guide that’s displayed or used across multiple courses. Additional Tips Remember, an e-learning style guide is a great way to give your projects a consistent look and feel. Here are a few more things to keep in mind. Don’t be too strict. Remember to allow some flexibility for creativity and originality. Show examples of what to do and what not to do. Examples are always helpful! Consider using your course creation apps to train your team on the finished style guide. Resources Looking for other resources to help you build your e-learning style guide? Check out these articles: How to Create a Branded Storyline 360 Prototype How to Brand Your Rise 360 Course Create a Cohesive Look with These 5 Storyline 360 Visual Design Pointers 3 Ideas for Balancing Branding Guidelines with E-Learning Design What do you like to include in your e-learning style guides? Please share your ideas in a comment below. Follow us on Twitter and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.202Views0likes16CommentsUsing Glassmorphism Designs in E-Learning Course Development #310
Glassmorphism Design in E-Learning#310:Challenge|Recap It's a new year, and that means new design trends. In a recent challenge, we looked usingthe2021 Pantone Color of the Year in e-learning design. If you haven't checked out the examples, stop what you're doing and check them out. The color of the yearis abig deal because it will influence design, fashion, home interior, and consumer product trends in the upcoming year. 2021 E-Learning Design Trends This week, we're looking at how course creatorscan use the frosted glass effect, known as glassmorphism, in their e-learning designs. Glassmorphism is a design conceptthat’s been around for a while. Variations of the effect have been used in iOS 7 and Mac OS Big Sur. The effect is created by layering gradient or blurred backgrounds and semi-transparent shapes and panels. Here's an example: Courses Dashboard by Rudi Hartono Applying Glassmorphism Effects to E-LearningTemplates If you’re looking for a place to start, try working with an existing course or template you’ve already built. This way, your content is already in place, and you’re free to focus on the design elements. Here’s a quick before and after for the Serenity template. To create the blurred background effect, I started in PowerPoint and went to Format Picture > Artistic Effects > Blur. Depending on the image you use, you might need to apply another round of blur to the image. To apply a second blur effect, save your image as a picture. Saving the image flattens the blur effect. Insert the blurred image back into PowerPoint and repeat the process. I think the effect turned out pretty well, but I would still like to play with different layouts and panels before considering this a final design concept. Challenge of the Week This week, your challenge is to share an example demonstrating how glassmorphism can be used in e-learning. Your example can be interactive or a screenshot. We want to see how this design trend can be used in course design. Resources Here are some good examples of glassmorphism to give you an idea how the design effect is being used in UI design. Glassmorphism designs and examples on Dribbble Frosted glass examples on Dribbble Glassmorphism in user interfaces Share Your E-Learning Work Comments: Use the comments section below to share a link to your published example and blog post. Forums: Start your own 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 back to your posts so the great work you’re sharing gets even more exposure. Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness. Last Week’s Challenge: Before you dive into this week’s challenge, check out the interactive aircraft safety cards your fellow community members shared over the past week: Interactive Passenger Safety Cards #309: 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.198Views0likes147CommentsHow to Fill Text with an Image in PowerPoint
Have you ever seen a text with an image fill, like this one, and said to yourself, “I wish I could do that”? Well, I have some good news. If you have PowerPoint, you can! Just follow the six simple steps below. 1. Add Combine Shapes Tool to Your PowerPoint Ribbon If you haven’t already, the first thing you’ll need to do is add the Combine Shapes tool to your PowerPoint ribbon. Check out this tutorial to see how to do that. 2. Insert a Background Image The next thing you’ll need to do is find and insert the image you want to use as the fill for your text. For this kind of project, it’s best to choose an image that’s easily recognizable. 3. Insert & Format Your Text The third step is to insert your text. Once your text is inserted, you’ll need to choose a font. I recommend using a bold font so that more of the image is visible. Then, increase the size and boldness of the font as desired. Finally, position your text on the part of the image you want to appear as the fill. In this example, I’m going to move the text over a little so that no green shows through. 4. Insert a Rectangle Next, insert a rectangle that’s the same size as the image. In my case, the rectangle covers the whole slide. Then, right-click on the rectangle, select Send to Back, and choose Send Backward. Your text should now appear on top of the rectangle. 5. Combine Your Rectangle and Your Text Now select your text, followed by your rectangle, click on Merge Shapes, and select Combine. At this point, your rectangle should have taken on the color of your text, and the place where the text was should be transparent. If you try and move your text, you’ll notice that the rectangle is still independent of the image, like in the screenshot below. If you don’t like the part of the image that’s showing through, move the rectangle around until you’re satisfied with the result. If you don’t need the image and the text to be a single object, then you can stop here. If you do, then move on to step 6. 6. Subtract the Image from the Text Select both the image and the rectangle, and then click on Merge Shapes and select Subtract. The image and text should now be combined in one object, like in the screenshot below. If you’re following these steps and the result doesn’t look quite right, try selecting your objects in the reverse order. Now you can go ahead and add any other text or images around it to finish off the look you’re going for. And you’re all set! Want to learn more tips and tricks for creating graphics in PowerPoint? Check out the tutorials below: Guide to Creating Illustrations in PowerPoint for People Who Don’t Know How to Draw Creating Custom Shapes in PowerPoint How I Created These Handy People Icons in PowerPoint And if you’re on the lookout for beautiful, royalty-free images, be sure to check out Content Library 360, the library of 10.3+ million assets that comes with an Articulate 360 subscription. Click here to start your 30-day free trial. 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 X (Formerly Twitter).99Views0likes35Comments6 Ways to Quickly Update an Outdated E-Learning Design
Imagine this: your boss messages you one morning, sends you a link to a dated-looking e-learning course, and says, “We need to get this information out to people ASAP. Can you just freshen it up quickly?” Your first instinct might be to toss the entire course out and start from scratch. But unfortunately, you don’t have time for that. Is there any way to quickly make over what’s already there? Thankfully, the answer is yes! There are lots of simple visual design tricks that anyone—even if they’re not an experienced graphic designer—can use to revitalize stale or outdated courses. So the next time you’re handed an e-learning course that needs a bit more polish, try following these six steps to improve it quickly 1. Replace Weak or Confusing Images Start by replacing or eliminating images that take away from the learning experience. Obviously, any images that are blurry, out of date, or unprofessional-looking need to go. But there are other ways images can be a distraction. For example, if an image is off-topic, it can be more baffling than helpful. And when there are lots of different images that don’t add any further information, they just read as clutter. Looking back at our example above, there are multiple image issues we can quickly solve: Get rid of off-topic imagery. The topic is travel safety, but the background is a hospital and the character is wearing scrubs. Replacing these images with travel-themed options will feel more on-topic. As well, let's assume the on-screen character is part of a course scenario. In that case, she makes sense to introduce here. But if she didn't actually play a part in the course, removing her completely might be the best option. Swap out low-quality images. The background image is a bit grainy. Even if the setting was right, we’d still want to swap this image file with something crisp. Scale images so they feel balanced. It’s confusing to have the character so much smaller than the background—and seemingly floating mid-air. Resizing her replacement to scale with the environment will make everything look seamless. Remove clutter. While the icons on the left are related to travel, they’re not adding any further meaning. This design would be noticeably clearer without their visual noise. Here’s an updated version of the slide with those simple changes made: Sure, the design still needs some work, but you can see how it already looks noticeably better with just a few tweaks. 2. Simplify Your Fonts With the library installed on your computer and the wealth of options you can download online, you, like most designers, might want to try out different fonts. But even if you’re not restrained by company font guidelines, remember that simple is almost always better. Here are some simple guidelines to follow: Stick to one or two fonts. In general, it’s best to stick to just one or two fonts throughout your course and use them consistently. You’ll notice that the example above uses three different fonts, all of which have slightly different designs—making everything look a bit off, even to non-designers. Consider readability. Our example demonstrates why it’s so important to think about readability—all those fancy font details make the content hard to decipher. Stick with options that have simple, clear lines and minimal fussy flourishes. And if you’re not sure what to watch for, look up serif and sans serif font types for good examples. For more advice to guide your font choices, check out this article: 8 Questions to Ask When Choosing Fonts & Formatting Text. Let’s take a look at the example slide after we’ve applied that advice: See how it’s cleaner and easier to read? What an improvement! 3. Tone Down Visual Effects Visual effects are an area where less is often more. They’re not inherently bad—in fact, sometimes a drop shadow or gradient can improve contrast or give a design some energy. But it’s not always easy to know how to use visual effects well. Our example is a perfect demonstration of this. The effects seem tacky and dated, plus they all seem to be competing for your attention. The easiest option is to avoid these visual effects entirely. But another good choice is to use just one or two, and only with a very light hand. With that in mind, here’s one way to apply that advice to our example: In this case we’ve just kept it simple. All the glows, gradients, and shadows have been removed, making the design substantially less busy-looking. 4. Streamline Your Colors Color can do a lot to grab people’s attention, set a mood, and even make a design feel on-brand. But it’s also an area where simplicity and consistency are key to making it all work. Right now, our example uses numerous colors that are fine on their own but look chaotic when used together. By reducing the number of colors, we can quickly make this design feel more harmonious. A helpful technique for this is to create a color palette—a small number of colors that all look flattering together and are used consistently throughout a design. This article on five ways to choose color palettes for e-learning shares practical approaches for choosing the right colors for your project. Let’s preview what our example might look like if we simplified the color palette a little: See what a difference that makes? Also, if you look closely you’ll notice that I added a subtle blue tint to the background as well to pull everything together and create more contrast with the on-screen text. 5. Trim the Text Another change that can make a huge impact on your course aesthetics doesn’t initially seem connected to visuals at all: cut down your copy. By stripping out unnecessary details, you can buy yourself a ton of extra room for increasing font sizes or adding space between design elements. Not only that, but simplifying your copy also reduces cognitive load, making it easier for people to learn. Here’s what our example looks like after applying this tip: As you can see, by taking out the repeated ideas and words, we were able to shorten the text significantly while still conveying the same message. And while it wasn’t a required cut, swapping out the “NEXT” on the Next button for an arrow shows how images or icons can help a slide look less text-heavy. 6. Fine-tune the Slide Layout Now that we’ve created more space, we can use it to rework our sizing and layout. This can include doing things like: Increase the font size. Since our example’s course description was drastically cut down, there’s now space to enlarge the font and make it easier to read. Adjust the size of content boxes. Since there’s less text, it makes sense to pare down the size of the white rectangles and Next button to fit the content better. Align slide objects. When design elements are placed haphazardly on the slide, everything looks sloppy and unpolished. But lining things up with each other—like the edges of the white rectangles—instantly improves things. And what’s great is the alignment guides and on-screen grids in apps make lining everything up and putting consistent space between items so much easier than it used to be. Haven’t used grids to improve a layout before? This article shares how they can help improve your e-learning designs. All this layout fine-tuning helps things look visually organized. It also establishes consistent white space—the empty space between design elements. That white space creates visual breaks in your design, keeping things from looking cluttered and even potentially reducing cognitive load. Here’s our example again with more consistent spacing and alignment. It’s amazing just how much tidier everything looks now. Want an even better look at the new alignment? Here’s that same screen with the main alignment lines and margins highlighted in blue. As you can see, with just a few guidelines the layout becomes substantially more polished. Summary And there you have it! With just a few simple tweaks, you can update the design of an older e-learning course so it feels more current. The fixes in this article take minimal time and next-to-no graphic design experience to follow, but it’s incredible what a difference they can make. To wrap things up, let’s revisit where we started and just how far these six steps got us: Before After It’s like night and day, isn’t it? And it only took a couple minutes. Want to learn even more about the design techniques covered in this process? Take a deeper dive with these links: Your Ultimate Guide to Choosing Graphics for E-Learning How to Choose Backgrounds for E-Learning 5 Important Elements of Typography Improve Your E-Learning Designs Using White Space Follow us on Twitter and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any additional design tips you use to spruce up old e-learning courses, be sure to share them in the comments.99Views0likes16CommentsInsider Tips for Working with Fonts in Storyline 360
Text is the digital representation of letters—so it’s a big part of most e-learning courses. And where there’s text, there are fonts! Fonts are the styling or design of your text and deciding which fonts to use for your Storyline 360 course is a critical early step. Once that’s done, it might be tempting to get straight to work. But before you get started, let’s walk through some things you should know about installing and working with fonts in Storyline 360. Installing Custom Fonts First things first: when you install Storyline 360, you get an assortment of popular open-source web fonts—Lato, Open Sans, and Montserrat, to name a few. Here’s a full list of the installed fonts in case you’re curious. If you’re already running Storyline 360, when you open an existing project, Storyline 360 will scan your project and let you know if any of the fonts you’ve used are missing from your computer so you can install or replace them. Once you’ve installed any custom fonts you’ve downloaded to your system (check out installation instructions here), they’ll automatically appear in the fonts drop-down list in Storyline 360 the next time you open up the application. Pro tip: If you install fonts while Storyline 360 is open, you’ll need to close Storyline 360 and then reopen it to see your newly installed fonts. It’s also worth noting that Storyline 360 does not support Adobe Type 1 PostScript fonts. However, it does support Adobe TrueType and OpenType fonts. Not sure if you have PostScript fonts in your project? Find out by following the instructions in this support article: Storyline 360: Adobe Type 1 PostScript Fonts Aren’t Supported. Testing Custom Fonts We use web fonts (WOFF files) in published Storyline 360 courses to ensure text looks exactly the way you designed it and remains sharp when it’s scaled up or down. However, sometimes browsers are unable to download the custom font files. This is often due to a server configuration or browser settings issue, but it can also be because the browser believes the file is corrupt. If the browser can’t download the custom font file, then it will substitute that font with a standard system font, so your course won’t look exactly the way you designed it. Though there are ways to overcome this issue (see this article), it’s still a good idea to test the custom fonts you plan to use before you apply them to your entire course. To test your custom font, create a slide or two using your font in Storyline 360 and then publish it. Upload the published output to the environment your learners will view it on—including desktops, smartphones, and/or tablets. Make sure the font you chose renders correctly across these devices and their web browsers. If the font doesn’t render correctly or scale well, swap it out for another custom font. Trust me—if you run into any issues, you’ll be glad you found them sooner rather than later. Choosing a Default Font By default, when you insert a textbox into a new Storyline 360 project, the font is Open Sans. You can manually change that font every time you insert a textbox, or you can set up a theme font. If you set up a theme font, your preferred font will appear automatically whenever you insert a new textbox. Creating a theme font saves time and ensures a more consistent visual design. The process is pretty straightforward. You can learn how to do it in this article: Storyline 360 Working with Theme Fonts. Swapping Out Fonts Quickly and Easily What if you need to update a font throughout an existing Storyline 360 project? If you created a theme font, simply update it and it’ll automatically swap out the font everywhere in your project. If you didn’t use theme fonts in your project, use the Find and Replace feature. Simply choose the font you want to replace and the font you want to use instead and Storyline 360 will do the rest! Here’s how it works: Go to the home tab on the Storyline 360 ribbon, click the drop-down arrow next to Find/Replace. Choose Replace Fonts. Use the “Replace” dropdown to select the font you want to replace. Use the “With” dropdown to choose the new replacement font and then click Replace. That’s all there is to it! And here’s a .GIF to show you the above steps in action. Wrap-Up Thanks to these pro tips, working with fonts in Storyline 360 is a breeze. But if you’re still struggling to decide which fonts to use, check out these helpful articles: Finding Fonts That Fit Your E-Learning 5 Formatting Tips for Creating Dyslexia-Friendly E-Learning 8 Questions to Ask When Choosing Fonts & Formatting Text for E-Learning Have any tips you want to share? Leave a comment below. I’d love to hear from you! And if you want to try something you learned here, but don’t have Articulate 360, be sure to start a free 30-day trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.99Views0likes5CommentsRise 360: Interactive Sales Brochure
Need an elegant digital alternative to a glossy paper sales brochure? Look no further than Rise 360! In this eye-catching example, you can see some creative ways to combine Rise 360 blocks to stunning effect. Feeling inspired? Click here to send a copy of this project to your Rise 360 dashboard. Don’t have access to Rise 360? Sign up for a free 30-day trial.98Views0likes21CommentsEverything You Need to Know About Image Usage Rights
It’s tricky to find appropriate, usable images for e-learning projects. And sometimes after you’ve found the right photo, it’s unclear whether you can legally use it. Images are protected by copyright. So you can’t add any photo you find online to your e-learning project. But trying to do the right thing can raise more questions than answers: What if I just link to their website? Should I reach out to this person? Wait, I don’t see who owns this image! Usually images you’ll find on photo sites fall into one of a few categories. Here are some of the different usage terms you’ll find. Copyright Copyright law protects original works, including images. In most cases, you can’t copy or distribute a copyrighted image without permission from the person who created it. You should assume that any image you find online is protected by copyright. If possible, contact the copyright holder for permission to use their work. When you buy a stock photo, you’re buying the right to use that copyrighted image. Depending on which site you use, the image may be royalty-free or rights-managed. Royalty-free means that you’re not responsible for royalty payments. You’re usually able to use the image as you’d like. Rights-managed means there are restrictions on how you can use the image—so be sure to read your license agreement closely! Fair Use The fair use doctrine provides opportunities for using copyrighted images without permission. For instance, you can legally use a copyrighted image for personal and educational use, or for the public good. Most e-learning is commercial. As a course creator, you should assume that using copyrighted images in your work doesn’t qualify as fair use. But fair use also allows you to transform copyrighted images into something new. If you turn a copyrighted image into a completely new work, you can use that image freely. Creative Commons The Creative Commons non-profit provides free copyright licenses for creators. The copyright holder can determine several things with these licenses: Whether you need to credit them for their image Whether you can use their image for commercial purposes Whether you can modify their image What license you must use if you modify their image When using Creative Commons images, be sure to read the license carefully and use the image appropriately. Pro tip: Some photo sharing sites, such as Flickr, allow you to filter search results by specific Creative Commons licenses. Public Domain Typically an image becomes part of the public domain in one of two ways. The creator either gives up copyright willingly, or the copyright expires. These images aren’t protected by copyright, so you’re free to use them any way you’d like. Pro tip: WikiMedia Commons has a large database of images in the public domain. A Helpful Alternative Of course, the easiest way to source freely available images is by finding e-learning solutions that provide stock assets. Articulate 360 includes Content Library 360, an ever-growing library of visual assets that you can access right from within Rise and Storyline 360. The stock photos, images, icons, videos, course slides, and characters in Content Library 360 are 100 percent royalty- and attribution-free, so you can use them in your e-learning however you’d like. See what’s available in Content Library 360 when you start a free, 30-day trial of Articulate 360. You’ll also get access to award-winning authoring apps Storyline 360 and Rise, a project review app, and access to live online training led by industry experts. New to e-learning? Sign up for our E-Learning 101 email course, a series of expertly-curated articles that'll get you up to speed with course development.95Views0likes31Comments