GIFs 101: How to Use, Find, and Make Them
Aside from—you know—the ability to access any information you need in seconds, GIFs are the best thing about the internet. In this post, we’ll talk about what GIFs are, when to use them in your e-learning, where to find them, and how to create your own. You’ll learn everything you need to know about GIFs. (Except for how to pronounce it. We’re staying out of that debate!) What are GIFs? Basically, GIFs are image files that include animation. GIF stands for Graphic Interface Format. And, unlike JPEGs and PNGs, GIF files support animated images. Early GIFs were super basic. They were composed of just a couple of alternating frames, for example: In the 30 years that GIFs have been around, the art form has evolved. Now it’s super easy to find high-quality clips from TV shows and movies, quick clips of cats doing funny things, fun custom artwork, and much more! How can I use GIFs in my e-learning courses? GIFs are also great for your e-learning projects. They offer an easy way to delight your learners with some unexpected movement. And you don’t have to embed a full video or build an animation into your course. Making your learners laugh or expressing an emotion with a GIF can make your e-learning more relatable and more fun. Plus, they’re handy for demonstrating a process or system. Instead of having learners click from one slide to the next to see how a process works, you can use a GIF to give learners that helpful context. GIFs look particularly at home in Rise courses, which are web-based. Check out this example on hurricane preparedness and this one on cardiology observations to see what we mean. Where can I find GIFs? GIFs are abundant online. Some popular places to find great ones include: GIPHY, the most popular search engine for GIFs, allows you to browse for images by category or search to find exactly what you need. Educational GIFs, though it hasn’t been updated recently, has a ton of GIFs on processes, history, how-tos, and more. Imgur is a place for people to share images. A lot of these images are GIFs, and a lot of the GIFs are great. Social media sites such as Twitter are great places to find GIFs. How do I make my own GIFs? There are a couple of ways to make an animated GIF, depending on how involved you want to get. The old-school way provides you with the most control over the process. Here’s a tutorial that shows you how to put together a GIF from several static panels in Photoshop. There are also several widgets that can help you make GIFs quickly and easily. You build them from video snippets using GIPHY’s own GIF Maker App. You can create a GIF from images on GIFMaker.org. Or you can make and style your own reaction GIFs on sites like And I Was Like and GifCam. Get your GIF on! You now have all the knowledge and tools you need to find and use GIFs in your projects. If you have any other questions about when and how to use GIFs in your e-learning (or if you’re just looking for the perfect one for your project), let us know in the comments. And be sure to follow us on Twitter and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.How 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 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).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.Guide to Creating Illustrations in PowerPoint for People Who Don’t Know How to Draw
Visuals are a key element of any e-learning course. They help attract the learner’s attention and reinforce key messages. If you don’t have a graphic designer on your team—or access to an asset library like Content Library—you may be struggling to find or create the visuals you need for your course. If that’s where you are, don’t worry! In this tutorial you’ll learn how to create your own illustrations in PowerPoint using freeform shapes. What Is a Freeform Shape? On the Insert tab of PowerPoint, you have access to a whole host of default shapes to help you create your own illustrations: But did you know that hidden among those default shapes is a freeform shape that allows you to draw your own personalized shape? It looks like this: In this tutorial, you’ll learn how to use this super-powerful feature to create your own illustrations—even if you have zero artistic ability. Set Default Shape Format When you draw a freeform shape, PowerPoint automatically applies the default shape format—meaning the fill and outline colors—to your shape. And while you could just use that and change the style afterwards, I recommend changing the default style to something with a contrasting border and no fill color. Why? If you’re tracing over a photo, the contrasting color makes it easier to see where you’re drawing. And with no fill color, you can still clearly see the image you’re tracing. So how do you set a new default shape style? It’s easy! Just insert any shape, format it however you’d like, right-click on the shape, and select Set as Default Shape: Now, when you draw your freeform shape, it’ll automatically take on the format you’ve defined. Find a Photo to Trace Let’s say you want to include a visual of a hand holding a phone in your course. Unless you’re already a gifted illustrator, it’s going to be difficult to draw that freehand. The easiest thing to do is search for a photo of what you’d like to draw and trace it. Here’s a good example of a photo you could use as a starting point: Tracing a photo is also a great solution for times when you’re not sure whether you have the right to use a given photo in your course. Draw a Freeform Shape Now that you have your photo, you can insert it into PowerPoint by clicking on the Pictures button on the Insert tab. Then, also on the Insert tab, click on the Shapes button, and select the freeform shape tool. There are two main ways to draw using the freeform shape tool in PowerPoint. 1. Press and hold your mouse: Use this technique to draw an illustration freehand. This option is best for people who are comfortable drawing and have a pretty steady hand on their mouse (or access to a graphic tablet). 2. Press and release your mouse: Use this technique to draw an illustration one point at a time. This option is best for those of you who (like me!) are not comfortable drawing freehand. It allows you to create a shape by connecting a series of points. But you don’t have to choose one or the other; you can actually combine these two methods while drawing the same shape. It’s up to you to decide what works best! To create a closed shape, continue drawing until you are back to your starting point. To create an open-ended shape (or a line), double-click at any point to exit the freeform shape tool. Edit Points Once you’ve finished drawing your shape, you can fine-tune it by editing each individual point. To do that, just right-click on the shape and select Edit Points: When you’re in Edit Points mode, you can see all the places you clicked to create your shape and adjust them as needed. To move a point, just click on it and drag it to the place you want it to be. If you want, you can take it a step further by right-clicking on a point and choosing one of the following options: Add point: If you messed up when you were drawing your shape, you can add in extra points afterwards and position them as needed instead of starting over from scratch. Delete Point: If you want to get rid of an unneeded point. Open Path (if it’s closed): If instead of a closed shape, you want to create an open-ended path, choose this option to unlink the first and last points you drew. Close Path (if it’s open): If you meant to create a closed shape, but accidentally created an open path, choose this option to link the first and last points you drew. Smooth Point: To make a point more rounded, choose Smooth Point or Straight Point. When you choose Smooth Point, the handles on the point will stick out straight, instead of forming a corner. When you drag on one side of the handle, the other side will automatically adjust, creating a symmetrical curve. By playing with the length and angle of these handles, you can change the shape of the curve. Straight Point: This option also makes your point rounded, but this time you’ll notice that the handles work independently, meaning that if you drag on one side of the handle, the other side of the handle doesn’t move. This allows you to create an asymmetrical curve. Corner Point: By default, all the points on your shape are corner points. If you change your point to a smooth or a straight point and aren’t satisfied with how it looks, choose this option to revert to the default setting. By adjusting your points, you can smooth out your drawing considerably, as you can see in the before and after photos below: Before After Format Shape Once your shape looks exactly the way you want, you can hide the image you used to trace your shape and change the color as needed. If need be, you can draw another freeform shape or use a combination of default shapes to complete your illustration. For this example, you could create a cell phone out of a combination of shapes. Start by inserting a rectangle with rounded edges to make up the base of your phone: Now, as you can see, the part of the thumb is now hidden by the phone. To make it look like the thumb is on top of the phone, add a second rectangle with rounded edges that starts below the thumb and goes until the bottom of the phone, like this: Now, right-click on the first rectangle you created and select Send to Back. Your illustration should now look like this: Now repeat this process with two gray rectangles with square edges to create your screen: Finally, insert a circle for the camera, a rounded-edge square for the speaker, and a rounded-edge square for the home button of the phone. Here’s what your finished illustration should look like: And there you have it! Thanks to PowerPoint, you can create your own custom illustrations without being a professional illustrator. Thirsty for more PowerPoint illustration tips? Check out these tutorials: Creating Custom Shapes in PowerPoint How I Created These Handy People Icons in Powerpoint Did you enjoy this article? Be sure to 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).Everything 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. These assets are made available through third parties, including Unsplash, Noun Project, Pexels, and Pixabay, and you can use them in your content without additional charge. However, as noted in our Terms of Service, the use of these images, including any attribution requirements, is subject to these third parties’ terms. 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.Insider 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.5 Graphic Design Mistakes Newbies Make and How to Avoid Them
If you’re new to the e-learning field, you might soon realize that people often assume you have some kind of magical power on the ready: they not only expect you to design the content, they also expect you to make that content look great. And if you don’t have any graphic design knowledge, you might feel pretty intimidated right about now. The good news is that this article will help you avoid making a few rookie design mistakes and get you on the road to success. Mistake #1: Designing a Unique Layout for Every Slide One of the most common graphic design mistakes that newbies make is creating a new slide layout for every slide. But using too many different slide layouts can make your course feel disjointed. For example, take this set of slides: Each of them is completely different, so it doesn’t feel like they’re part of the same course. Reusing a few basic layouts—with similar shapes, colors, and compositions—throughout your course gives it a more cohesive feel, like in the Content Library slides below. Another benefit of reusing the same slide layouts is that it helps learners instantly identify the type of slide they’re looking at—for example, a title slide or a quiz slide—making it easier for them to know what to do next. When you’re designing your course, start by creating a layout for each of the basic slide types you find in most e-learning courses and go from there. Mistake #2: Using Too Many Different or Flashy Colors If you’re required to use your company’s graphic guidelines, then you might not have much choice in the colors you use for your courses. But if you have a little more freedom to choose your own colors, you might find yourself wanting to include lots of different colors to add a little flair and personality to your course. However, it’s important to resist the urge to use all the colors of the rainbow in the same e-learning course. Why? Overusing colors can overwhelm learners and make it hard for them to know what to pay attention to. Take this slide, for example: There are so many bright colors mixed together here that it’s hard to know what to focus on. But that doesn’t mean you can’t use bright colors at all, just that you should use them in moderation and in a purposeful way. Take the slide below, for example: I used the same yellow as in the previous example, but this time I used it on a white background along with some muted gray tones that are less visually aggressive. And the use of yellow here immediately attracts your eyes to the numbers, making them the clear focal point of the slide. When you’re starting out, try to keep your color palette to a minimum. Start out with three colors, for example, one dominant and two neutral. When you start to get a little more comfortable with graphic design, you can start using more colors, while still keeping in mind that the colors should complement each other and not overwhelm the learner. If you’re looking for color palette ideas, be sure to check out Adobe Color and Design Seeds. And if you’re keen for more tips on choosing color palettes, try reading these helpful articles: 5 Ways to Choose Color Palettes for E-Learning Popular Color Schemes for E-Learning Design The Color Effect: How Your Palette Affects Learners Mistake #3: Going Font Crazy When people are just starting out in e-learning, they usually do one of two things. They either leave the default font settings as is, or they go crazy and use tons of different fonts. While projects with default fonts may be missing that little something extra, they usually look better than those with too many used haphazardly. Here’s an example of a slide with too many different fonts: In the above example, there are four different fonts. Not only are some of them hard to read, they just don’t go together and so they detract from the message. Much like colors, when it comes to fonts, less is more. Let’s look at this same slide with only two different fonts: I typically choose two fonts for my courses: one for the headings and one for the body. If you’d like, you can also mix in a third font for things like quotes or key words that you want to really stand out. However, I would avoid using more than three fonts in the same course. If you want to emphasize a key message, try putting the text in bold or changing the color instead of using a different font. Here are some other resources about typography I recommend checking out: 5 Important Rules of Typography for E-Learning Designers E-Learning Typography & Finding the Perfect Font My 4 Favorite Free Fonts for E-Learning Mistake #4: Not Leaving Enough White Space If you’re not familiar with the term “white space,” it refers to any empty areas between objects on your slides—whether it’s actually white or another color. When there’s a lot of course content, it can be tempting to pack as much as you can into each slide. I see this a lot, especially with new e-learning designers. Have you ever seen a slide like the one below? That’s a lot of information to take in at once! When slides are too dense, it can be hard for learners to pick out the key messages. A good rule of thumb is to present one idea per slide. Don’t be afraid to leave white space. Au contraire, embrace it. Let’s take a gander at what it would look like if I broke the above slide down into several “airier” slides. Ahhh … much better! When you leave enough white space it’s easy to pick out the important information. Remember: it’s better to create more slides with less information than vice versa. Check out this article for more tips on keeping the content on each slide to a minimum: 5 Ways to Avoid Overloading Your Slides. Mistake #5: Mixing and Matching Images That Don’t Go Together A lot of newbies choose images that accurately represent the content, but don’t necessarily match the other images in the project. I get it! After all, the content itself is the most important part of the course, isn’t it? Well, yes and no. It’s important to choose images that add value, but it’s also critical that those images work well together. If they don’t, you could end up with a course that doesn’t look very professional. Take this slide, for example: The mix of photos, icons, and illustrations makes the slide look disjointed. And while people say not to judge a book by its cover, the reality is that we all do. If you want your learners to take your course seriously, the graphics need to be on point. Look how much better that same slide looks when I use all photos. To make sure your images look like they go together, don’t mix and match image styles. While it’s possible to get a good result when mixing photographs and illustrations, doing so is a complex feat that’s best left to the experts. If some of your photos are black and white, add a black-and-white filter to all your photos. Don’t mix flat design illustrations with more realistic illustrations. The key here is to make it look like all the images were created especially for your course, even if that’s not the case. More Resources Now that you know the top five newbie mistakes and how to avoid them, you’re ready to get started! But if you feel like you could do with some more graphic design guidance, check out these great resources: E-books: Essential Guide to Visual Design How to Use Typography to Improve Your E-Learning Articles: Visual Design How-Tos for E-Learning Developers Who Else Wants Great Graphic Design Resources? 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). 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.5 Inspiring Font Pairings for Your Next E-Learning Project
Look at any e-learning project and one of the first things you’ll notice are the fonts. Theme fonts set the stage. They establish a project’s tone—and they make a big difference in helping learners read content more easily. But, with so many options to choose from, how can you possibly pick? Thankfully, you don’t have to search online for the perfect heading and body fonts. You can simply mix and match the built-in Storyline 360 fonts and system typefaces to make your content look polished and legible. Curious to see which fonts work well together? Take a look at these five pairings you can start using right away! 1. Montserrat Medium & Montserrat Want to combine similar fonts without falling into the “it’s boring” trap? Try pairing Montserrat Medium with Montserrat. These two fonts have the same base—just with different line thicknesses. The result is an engaging, easy-on-the-eye contrast. Together, these fonts create a sense of strength and tranquility. And because of their versatility and geometric lettering, the fonts are generally safe for any project. 2. Georgia & Verdana Pairing different fonts can sometimes feel daunting. How do you know which ones to mix and match? What if you end up combining fonts that conflict instead of contrast? Choose Georgia and Verdana and you can put those worries aside, as these two fonts were designed to work together. The elegant simplicity of Georgia combined with the clear and legible Verdana font makes this classic combo a nice choice for your projects. 3. Trebuchet MS & Garamond Need a fresh look? Sometimes combining the old with the new can give a sense of unique familiarity. To capture that balance, try Trebuchet MS and Garamond. The modern Trebuchet MS paired with Garamond—one of the oldest fonts—emits a friendly and sophisticated tone, giving you the best of both worlds. 4. Oswald & Open Sans The best font pairings have visual contrast—but that contrast can't look disjointed. After all, we still need to maintain cohesiveness. Use Oswald and Open Sans to create that ideal match. Oswald’s slightly elongated characteristics combine beautifully with many fonts. Match it with the neutral and friendly Open Sans and you’ll have a distinct and professional pairing that’s instantly pleasing to the eye. 5. Raleway & Roboto Light Need to add some personality to your projects? Look no further than the dynamic Raleway and Roboto Light duo. This sleek and modern font combination is the perfect mix! Raleway works great as a heading because its subtle, artistic look attracts just the right amount of attention. Roboto Light body text completes the picture because it’s versatile and easy to read. Wrap-Up Using any of these font combinations can help your courses look captivating, professional, and readable. And since anyone using Storyline 360 already has these fonts installed, you can easily share your file and rest assured knowing the text formatting will stay intact! Of course, these are just a few pairing options; we’re sure you have many other creative ideas up your sleeve. We’d love to hear them! Which built-in fonts are your go-tos for headings and body text? For more typography tips, check out these articles: 8 Questions to Ask When Choosing Fonts & Formatting Text Insider Tips for Working with Fonts in Storyline 360 How to Use Typography to Improve Your E-Learning Storyline 360: Working with Theme Fonts 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.How to Find the Images You Want in Content Library 360
In the past, finding stock images was one of the most time-consuming aspects of e-learning development. Between visiting multiple websites to find what you need and trying to parse each site’s terms of use, attribution requirements, and download specs—it was a frustrating time-suck. But all of that has changed with Articulate 360. That’s because Articulate 360 includes Content Library 360, the ever-growing asset library of millions of images, videos, icons, and illustrations. Content Library 360 puts all of these assets right at your fingertips in Articulate Storyline 360 and in Rise 360. With Content Library 360, you never have to leave Storyline 360 or Rise 360 to find what you need. You can search from millions of stock assets without cranking up your web browser—and without sweating details like image quality or usage rights. With Content Library 360, it’s all taken care of for you. Having Content Library 360 built right into your authoring workflow is certainly convenient for finding stock assets, but millions of them to choose from how do you hone in on what you really want? In this article, we’ll explore some handy Content Library 360 search tips that can help. Nail down keywords and phrases Having access to the stock imagery in Content Library 360 is super-helpful, but at the end of the day finding quality images boils down to smart searching—and as any librarian will tell you: keywords matter. Use keywords that are too broad or vague and you’ll waste time wading through too many of the wrong images. Do Some Word Association Since the same words can have a lot of different meanings, I like to do a little word association. I jot down the keywords and phrases I come up with on a scrap of paper and keep those next to me as I search. When certain keywords or phrases yield better search results, I’ll circle them so I know to come back to those later on as I narrow my search and make my final selections. For example, let’s say I need a picture of someone looking healthy and content for a health and wellness course. When I search for the word “content” I end up with lots of images of writing and paperwork. Not exactly what I’m going for. But if I brainstorm some associated words, like “relaxed” or “peaceful,” and then search for those and other related terms, I find many more options that are better suited to my topic. Pro Tip: Keep in mind that the more search terms you add, the more refined your search results will be. So if you’re looking for something specific, try using as many keywords as possible at first. You can always remove words or phrases from your search to broaden the results. Word Usage Impacts Your Search Results Words that have different uses can complicate searching for the right image. For example, when searching with keywords like “female” or “male,” you may end up with results that seem a little random—or even sexist. That’s because those terms are commonly used as both nouns and adjectives, so searching them is more likely to yield images that include stereotypical gender traits or roles. The term “female leader,” for instance, might result in an assortment of images that include everything from female animals in the wild, leading the pack, mixed in with images of women with exaggerated, stereotypically feminine traits. Here’s a quick example of what I mean: Simply searching “female” yields lots of images of stereotypical traits like youthful women with long shiny hair, curvy body shapes, big eyes, and pouty lips. However, when I searched for “woman” and added the term “business” it yielded much better, more workplace-appropriate results. Keep authenticity in mind Stock images are usually commissioned or sold for use in advertising. Often these images are tagged for search engines or stock photo sites by the individual photographers who took the images. The tags they use to categorize their photos may be based on attributes of the project they were hired for. So one photographer may tag an image of a family on the beach with words like “family” or “vacation” and another might tag a similar image as “people” or “holiday.” Obviously, this makes using some word association a powerful technique (see above), but it’s also a good opportunity to consider images that are a bit more evocative and less literal; to focus on more authentic depictions of concepts rather than the cheesy perfection we usually associate with stock photos. After all, when you’re trying to change people’s minds or their behavior, using more authentic images can help you connect with learners on an emotional level. To help search for and find images with an authentic look and feel in Content Library 360, keep these tips in mind. Take a cue from your audience Are your audience members mostly young people in business casual dress? Appeal to these learners by looking for images of diverse groups of people in a more casual, realistic setting, like the one below. Source: Content Library 360 Don’t toss out people images that aren’t picture perfect Human beings come in lots of different shapes, sizes, ages, abilities, and ethnicities. We don’t all look like models and we don’t always stare straight into the camera with a gleaming smile of perfectly straight pearly whites. Instead of searching for images that depict a model workplace full of designer-clad, camera-ready perfection, like the image below left, opt for a little more realness and character, like the image below right. Staged Stock Photo Source: Dreamstime More Candid Stock Photo Source: Content Library 360 Focus on depicting an authentic mood or setting I mentioned already that stock photos are not designed specifically for use in e-learning projects. Because of this, many images can end up being exaggerated or cliched portrayals of real-life situations that just don’t resonate with learners. For instance, terms like “boss” can produce results that are gender stereotyped—like a bunch of elderly white men in business suits. Instead, try searching for environments or situations where you’d find someone collaborating, directing, or looking like they’re taking the lead. When I searched Content Library 360 with the keyword “team meeting,” I found lots of great images, including the following ones showing diverse team leaders working side by side with employees. The best part about using images like these is that they convey a feeling of teamwork in a modern workplace, rather than perpetuate a dated stereotype. And images like these are open to interpretation about who is “the boss,” so there’s no worrying that you’ve shared a biased depiction of leadership in your organization. Source: Content Library 360 Avoid being too literal Images should never be there just to fill white space on the screen. You want to make sure that you’re using them purposefully to support the content and objectives of your course. Some people may take that a step too far by asking you to use images of someone doing the exact thing you’re talking about on a particular slide or screen—like a picture of a manager juggling their schedule, in a time management course, for example. But be careful. Searching with keywords that are too literal, like “juggling schedule,” could get you a ton of images like this: Source: Content Library 360 Instead, of wading through photos of jugglers, try searching for images that complement your content and reinforce context. For instance, you could use words that evoke how it feels to be a busy manager, or focus in on images that support the concept of time, like this one: Source: Content Library 360 Get a little creative with stock photos Some stock images may not always be a perfect fit out of the box, but there are ways you can make them work. Here are a few things to try. Do some cropping With the built-in photo editing tools in Storyline 360, there’s quite a bit you can do to customize the look of Content Library 360 images, including cropping out the bits you don’t need, like I did with this image, below. Source: Content Library 360 Add a transparent overlay Distract from the shortcomings of an image that’s less than ideal by covering it with a transparent overlay. Here’s how to do it in Storyline: Draw a rectangle shape over the image and add a light or dark fill. Change the transparency of the rectangle’s fill color to achieve the desired effect. Finally, place some text on top of that rectangle overlay, like in the example below. Now you’ve de-emphasized the image by making it part of the background for your content AND you’ve created a cool, eye-catching way to draw your learner’s attention to what really matters! Before Overlay Source: Content Library 360 After Overlay More Learning The bottom line is that stock photos are not designed specifically for use in e-learning projects. And the truth is, you’re not always going to find the perfect image right away. Sometimes you’ll need to go to a highly specialized photo site or get a little creative with how you use an image—or you’ll need to spend some time refining your search terms using the tips I shared above. But the real beauty of Content Library 360 is having the ability to search right at your fingertips. You can’t beat the convenience of finding and inserting images right within the apps. And by using some of the creative search strategies I’ve covered here, you’re bound to find loads of options for your projects. If you’re looking for more tips on working with stock images, check out these helpful articles: Customize and Edit Photos in Storyline: 6 Tips How to Remove Backgrounds in PowerPoint Enhance Your E-Learning Courses with Stock Images and Video What are your search tricks for finding stock assets in Content Library 360? I’d love to hear your tips, so please share them with me in a comment, below. Want to try something you learned here, but don’t have Articulate 360? Start a free 30-day trial, 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.Tips for Designing Buttons That Scream “Click Me!”
Almost every e-learning course has at least one or two buttons. Often, buttons are a means of navigation (like the Next and Back buttons), or a way to reveal more information (like in a click-and-reveal interaction). With so many uses for buttons, I’d like to share a few best practices for button design that will help your learners have the best possible experience in your course. Use Familiar Button Formatting Make your buttons look like buttons. Often, buttons are rectangles with round or square edges. Sometimes they feature a drop shadow to add dimension. Most of the time they’re filled in with a bold color, but other times the only color is in the outline. The key is to make them stand out from the rest of your design, so learners are drawn to them and instinctively know they’re clickable. Here are a few examples of button styles: Filled with Drop Shadow Outlined with Drop Shadow Filled Without Shadow Outlined Without Shadow True Square Rounded Square Oval Does this mean you can’t create buttons with other shapes? Not exactly. It means you should favor standard button shapes. But in some instances, it might make sense to use another shape. For example, if you’re creating an animal-themed course, you might want to make paw print buttons. That’s totally fine! But if you use a nonstandard shape, then be sure to double down on other familiar button characteristics to ensure learners know they’re clickable: at a minimum, choose a bold color and add a drop shadow so your buttons stand out. Label Buttons Clearly & Concisely Button labels tell the learner what will happen when they click. Your labels should be both clear and concise—so their purpose is immediately obvious. Let’s compare the two buttons below: Concise Wordy Though both buttons clearly state the button’s purpose, the one on the left is more concise—making it faster and easier for learners to figure out what it’s for. Use Recognizable Icons A good way to help the learner quickly identify the function of a button is to use an icon. For example, a downward arrow for a Download button. Let’s look at an example: Text Only Text with Icon The button on the left is perfectly fine, but do you see how adding the icon reinforces the text label and makes it even more obvious what the button does? Some people also create icon-only buttons—without any text. If you decide to go that route, be sure to choose icons whose meanings are unambiguous. Otherwise, your learners could be left wondering what the buttons are for. Even icons that seem obvious to you might not be to your learners. For example, let’s look at that download icon again on its own: When it appeared next to the word Download, the meaning was clear. But now that it’s on its own, suddenly the meaning isn’t quite so obvious. It could mean Download, but it could easily also mean Down. To avoid confusion, it’s a good practice to always include text either on the button, below it, or when the user hovers over it. Provide Feedback on Interaction Have you ever noticed that when you hover over a button or a hyperlink, the pointer arrow becomes a little hand? This is a subtle cue indicating that the object is clickable. Other common visual cues include a change in color or shape, an animation, and the appearance of another icon, like a check mark. If you’re building your course in Storyline 360, you can use the States feature to change the format of your buttons when learners hover, click, or drag them, for example. Learn more about how to do that here: Everything You Need to Know About States in Storyline 360. Be Consistent Learners expect consistency. Be sure to use a similar format for all the buttons in your course. Use the same shape, color, font, and size for all your buttons, regardless of their function. Buttons with the same function should appear in the same spot on every slide, not jump around from slide to slide. This ensures learners always know where to look and what to click on. To ensure consistency, it’s a good idea to define these standards when you start designing your course and refer back to them as you’re designing your course. In Sum Remember: learners shouldn’t have to search for buttons or guess their functions. When they’re easy to spot, clearly labeled, and react the way learners expect, they’ll complement your awesome course content, rather than distract from it. Looking for more tips for designing courses that are easy to navigate and in line with learner needs? Check out these articles: What Are UX and UI Design and How Do They Apply to E-Learning? User Interface Design: 3 Things E-Learning Authors Need to Know How to Design a Better Learner Experience 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).
