Using 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.How to Use Typography to Improve Your E-Learning
Typography—or the art of creating characters for print—is a powerful tool for setting the right mood and tone for your e-learning course. Choosing the right typefaces will help you create clear, beautiful, and legible text that complements the content, interactions, and graphics in your course. In this rich guide to typography for e-learning designers, we'll show you how to create a professional, elegant look for your course by choosing the right typefaces. You’ll learn: Why typography matters The importance of selecting the right typeface for your project How typography can be used set the mood for your learners The impact of size on legibility, readability, and learner engagement How to use fonts to help your learners navigate your coursesHow Do Course Designers Collaborate in E-learning Development? #435
Collaboration in E-Learning#435: Challenge | Recap One of the more challenging steps of the course development process is collecting and managing feedback from your clients, subject matter experts (SMEs), and stakeholders. But as with any collaborative relationship, you need to make a plan for success. That means thinking through how you’ll communicate effectively with stakeholders, motivate your reviewers, provide feedback, and manage expectations for the timing and delivery of the completed project. If you have an Articulate 360 subscription, you have access to features that’ll help you collaborate more efficiently on projects. Some examples include: Collaborative Authoring in Rise 360 Question Banks in Rise 360 Shared Block Templates in Rise 360 Shared Team Folders in Review 360 Project Reviews in Review 360 Request Reviews in Review 360 Integrated Comments in Rise 360 and Storyline 360 Cloud Backup in Storyline 360 and Review 360 🏆 Challenge of the Week This week, your challenge is to share one or more tips or best practices for collaborating on e-learning projects. You can share a simple slide with your favorite tip(s) or build an interactive example. 🎁 Bonus: We’d love to see how you’re using Articulate 360’s collaborative features, including the latest integrated comments in Rise 360 and Storyline 360 and Storyline 360’s cloud backups in Review 360. Some ideas Post your project to Review 360 and ask your fellow challengers for feedback. Review another challenger’s demo in Review 360. Highlight any changes or edits you make to your Rise 360 or Storyline 360 project using the integrated comments. Share your Storyline 360 project file to Review 360 as an attachment. ⚠️ NOTE: You don’t need an Articulate 360 subscription to participate in this week’s challenge. The primary challenge is to share tips or interactive examples of collaborating on e-learning projects. This can include any apps or tools you use to collaborate on any aspect of course development. ✨Share Your E-Learning Work Comments: Use the comments section below to link your published example and blog post. Forums: Start a new 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 to your posts so your great work gets even more exposure. Social media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can follow your e-learning coolness. 📆 Last Week’s Challenge: Before you share your collaboration techniques, check out the creative ways course designers use click-and-reveal interactions to break up big chunks of information so learners can explore and pull content at their own pace. Click-to-Reveal InteractionsRECAP#434: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. Learn more about the challenges in this Q&A post and why and how to participate in this helpful article. 📆 Next Week’s Challenge Next week's challenge #436: Creating Custom Dividers in Rise 360. See this quick tip to get an idea of what we’re doing. Got an idea for a challenge?Are you interested in doing a webinar showcasing how you made one or more challenge demos? Or do you have some comments for your humble challenge host? Use this anonymous form to share your feedback:https://bit.ly/ElearningChallengeForm.The Art of Combining Illustrations and Photos in E-Learning
When you see illustrations and photos mixed together beautifully in a single design, the end result can seem effortless. And it’s hard not to be excited about how much easier your search for images gets when you can pick from both image types. But when you’re new to it, it’s not uncommon to feel a bit stumped on how to bring these very different styles together in a way that looks polished. If you don’t have the right strategy, your final design can look mismatched and cobbled together. Does that mean you need years of graphic design experience to get this combination to work? Not necessarily! It’s just a matter of knowing which approaches are more likely to look nice together. Let’s check out a few creative ideas for mixing illustrations and photos in your e-learning courses. Choose one style for the background and another for the foreground You’ve likely seen this technique used a lot in e-learning courses. And it’s not hard to understand why. Landscape photos or images from different locations are easy to find in Content Library 360 or on stock photo sites. And if you can’t find one you like, you can always use a photo you’ve taken yourself. Either way, using photos as a backdrop and adding illustrated characters at the forefront can make for a really unique design. The Mori’s Journeyinteraction by Samara Reyneke highlights one of the most important things that makes this combination work seamlessly: consistency! The backgrounds are all photos. The characters and items in the foreground are all illustrations. Not only that, the illustration styles are all similar. Consistency throughout the entire project helps this look like a purposeful design choice, instead of just a bunch of random image styles. You can also do the opposite and use illustrations in the background and images in the foreground. Molly Fisher’s Grammar Practice Fill-in-the-Blank example uses the charming combination of an illustrated TV with real video programming. Use image filters to make everything look like an illustration The challenge of mixing photos and illustrations mostly comes down to how different they look. But what if there was a way to make them work together? That’s completely possible with the help of the photo filters in stand-alone filter apps or photo-editing software. These filters make changes to the look and feel of your images, like simplifying the colors or adding outlines. And because those changes are applied consistently to your photos and illustrations, it helps them look like they belong together. A good example of how this can work is Tracy Carroll’s project Jonathan’s Story. In it, she used a tool called Colorcinch to make her images look like hand-drawn comic book frames. While this project just used photos, you still get a sense of how you could take this same technique and mix different image types for a cohesive look. Use illustrations that look realistic There are many different styles of illustrations. They can range from simple and sketchy all the way to looking like actual photos. And it’s those photo-realistic illustrations that help you with this approach. Combining realistic illustrations with a photo background helps make your course design look seamless. A cool example of this is Sarah Hodge’s How to Fight a Bear course. She used 3D models of bears instead of photos, allowing her to create an interaction where learners can rotate them to show their identifying features. But because those models were designed to look realistic, they blend in smoothly with the photo background. Use illustrations as annotations or accents Have you ever watched sports commentators draw on a still shot from a game to explain a play? Well, that approach can also work in e-learning! Your photo becomes your base image, and then you use illustrations to provide additional information. You can see how useful this approach can be in this x-ray exampleby Preethi Ravisankar. Helpful illustrations displayed on top of the photo give you a peek at the inner workings of a person’s skeleton. Because of the way it’s designed, the illustrations work with the photos and don’t seem out of place. You may have also seen advertisements, websites, or book covers that use a combination of photos with doodle-like illustrations. This technique has become more popular in recent years and can give your project a friendly, mixed-media feel. You can see it at work in this interaction exampleby Samuel Apata, where a hand-drawn sketchnote weaves in a photo character who seems like they’re pondering the topics. Learn More While these approaches are a good place to start when you want to blend photos and illustrations, they’re not the only way to use the two styles harmoniously. So, keep an eye out for other designs that do this effectively and let them inspire your course designs. Want more ideas on how you can use images in your courses? Check out these resources. 34 Mixing Photo and Illustration Examples in E-Learning Design #312 4 Fast & Easy Changes That Will Make Your Old Storyline Courses Look New Again 7 Creative Ways to Use Images in Rise 360 Courses 5 Ways to Use Animated GIFs in Your E-Learning 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.Using Photo Mosaics to Design Interactive Stories #459
Interactive Photo Collages in E-Learning#459: Challenge | Recap Visual Storytelling with Photo Collages Build an interactive slide or course from a single image Get rid of bullet points You don't need to be a photographer to make this work Use your own photos or prebuilt stock photo collages Create multiple panel layouts similar t comic books From straightforward panel layoutsto asymmetrical compositions, photo collages offer a quick and effectiveway to craftimage-driven storiesusing stock photo collages. Here's a simple mockup of how the effect can work from a stock photo. A quick search in your favorite stock photo site returns a variety of photo collage styles and possibilities. Here are two more ideas: To learn more about this creative effect, check out Tom's post onconverting courses to interactionswith photo stories. Challengeof the week This week, your challenge is to create an interactive story around a photo collage. You can use placeholder photos and graphics or rework an existing project into a photo collage. Want some examples? Check out the ELC322 recap for community examples of this effect. Here are a few ideas to get you started: Design your story around a common problem or challenge Rework an existing scenario or interaction using a photo collage Use the built-in characters (illustrated and photographic), which include multiple expressions and poses Map collages are ideal for interactive org charts or customer profiles 🙌 Last Week’s Challenge: Check out the spinning wheel and roulette-inspired examples from last week's challenge: Roulette & Spinning Wheel GamesRECAP#458:Challenge|Recap 👋 New to the E-Learning Challenges? Theweekly e-learning challengesare ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of theprevious challengesanytime you want. I’ll update the recap posts to include your demos. Learn more about the challenges in thisQ&A postand why and how to participate in thishelpful article. 📆 Upcoming Challenges Challenge #460 (05.03): Toggle Buttons. See ELC97 for an idea of what we're going for in next week's challenge. Challenge #461 (05.10): Interactive Podcasts. See ELC364 for a related challenge. This time, the questions will focus on the value of working out loud, weekly challenges, and growing your skills. Challenge #462 (05.17): Click. Hover. Drag. See ELC144 for a general idea of what we're doing. 🚨2024 Articulate User Conference Call for Proposals We’re now accepting proposals for this year’s in-person user day conference co-hosted at DevLearn in Las Vegas.Learn more about the proposal process.How Are Designers Using Phat Fonts in E-Learning? #456
Using Chunky Fonts in E-Learning #456: Challenge | Recap 🏆 Challenge of the Week This week, your challenge is to share an example that shows how heavy, chunky fonts can be used in e-learning. You can share a single slide or build out a working interaction to show how you’re using big, fat, and chunky fonts. Keywords and classifications Chunky fonts are generally classified as "black," "display," or "ultra bold" within a typeface family. A quick search on Creative Market returned the following categories: Fat face fonts (these are some of my favorites) Display fonts Retro fonts Rounded fonts Bubble fonts Poster fonts Blackletter fonts Psychedelic fonts 🧰 Resources Here are some serif-iously good resources on using and finding ultra heavy fonts: 25 Thick and Heavy Fonts For 2024 30 Best Bold Fonts to Level Up Your UI Design Best Thick Fonts for Outstanding Designs 30 Best Bubble Fonts For Creative Designs 50 beautiful examples of vintage and retro typography ✨ Share Your E-Learning Work Comments: Use the comments section below to link your published example and blog post. Forums: Start a new 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 to your posts so your great work gets even more exposure. Social media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can follow your e-learning coolness. 🙌 Last Week’s Challenge: Before you tackle this week's challenge, check out the creative ways course designers use pull-based techniques to move from pushing information to creating interactive experiences. Push vs. Pull E-Learning ExamplesRECAP#455:Challenge|Recap 👋 New to the E-Learning Challenges? Theweekly e-learning challengesare ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of theprevious challengesanytime you want. I’ll update the recap posts to include your demos. Learn more about the challenges in thisQ&A postand why and how to participate in thishelpful article. 📅 Next Week’s Challenge Challenge #457 (04.12): Pick 3. No, this isn't a lottery challenge. Instead, you'll combine three previous challenges into a single interaction. Challenge #458 (04.19): Roulette games. Inspired by arecent community discussion, this would be an excellent challenge topic to practice working with dials and random number variables. 🚨 Contact Information Just a quick heads up – if you want your blog, website, or LinkedIn included in our recap posts, could you do me a favor and add or update those links onto your ELH profile sometime this week? I found some broken links last week when I pulled the recap together. You spend a lot of time building creative examples, and your work deserves all the attention it can get. If you make changes, please let me know in the comments below. Thanks!18 Creative Ways to Use Big, Bold, and Chunky Fonts in E-Learning Design #456
Using Bold Typography in E-Learning RECAP #456: Challenge | Recap This week’s challenge asked course designers to show how they use big, bold, and chunky fonts in e-learning courses. Jodi M. Sansone Example | Download | Jodi M. Sansone | Website | @jodimsansone Jonathan Hill Example | Jonathan Hill | Website | @DevByPowerPoint Jayashree Ravi Example | Jayashree Ravi | LinkedIn Karl Grant Example | Karl Grant | Website Chris Hodgson Example | Learn more | Chris Hodgson | Website | @skriss Ashi (Neha) Tandon Example | Ashi (Neha) Tandon | Website | @ashi_tandon Ange CM Example | Ange CM Samuel Apata Example | Download | Samuel Apata | Website | @afrostem Thaddaeus Smith Example | Thaddaeus Smith | Website Sherry Stancil Example | Sherry Stancil | Website Thierry EMMANUEL Example | Thierry EMMANUEL | Website Matt Wright Example | Matt Wright Renata Szabolcsik Example | Renata Szabolcsik Ron Katz Example | Ron Katz | Website Maren West Example | Maren West Alex Milyaev Example | Learn more | Alex Milyaev Kate Golomshtok Example | Kate Golomshtok | Website Amy Swagger Example | Amy Swagger New to the E-Learning Challenges? The weekly 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. If you have a blog, please write about your challenge example. I'll add links to your blog post so your examples get even more exposure. And for those who share your demos on Twitter or LinkedIn, please include #ELHChallenge so your network (and Articulate!) can track your e-learning coolness. Share Your Big & Bold Typography Examples! The chunky fonts challenge is still open! If you have one or more ideas you'd like to share, please jump over to the original challenge and post your links in the comments section. I'll update this recap page to include your examples.How do Course Designers Build Custom Graphics for E-Learning? #391
E-Learning Graphics Tutorials#391: Challenge | Recap The graphics you use in your e-learning play a large role in the effectiveness of your course. The challenge for most course designers is that they don’t have access to a team of graphic designers or professional illustrators who can help them create the appropriate graphics for their course. The good news is that most of what anyone needs to create course graphics is already available in tools like PowerPoint and Storyline 360. Using simple lines and shapes in creative ways, designers can build their own custom graphics that can be reused across multiple courses. And that's what this week's screencast challenge is all about! Screencast Challenge of the Week This week, your challenge is to screencast a design tip showing how you create graphics for e-learning. What's a screencast challenge? Thescreencast challengeswork just like the regular challenges. The only difference is the deliverable. For example, rather than sharing a published demo of a project you built, you'll share a video recording demonstrating how you built the demo or interaction. I like the screencast challenges because they shift the focus from design and development to explanation and presentation. NOTE: Don't worry if someone has already recorded a similar tutorial. This week'sscreencastchallenge is about showing what you know using your voice and style. How do I record a screencast? You can record your screencast using any tool you like. Storyline’s built-in screen recorder is one option. Replay 360 and Peek 360 also work well for quick screen recordings. Another popular option is Camtasia. How do I share my screencast? Please use YouTube, Vimeo, or Wistia to host your screencast. That will make it easy for me to embed the tutorials in the weekly recap post for each challenge. Ready? Set? Record! 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 record your e-learning graphics tips, check out the conditional navigation examples your fellow challengers shared over the past week: Conditional Navigation in E-LearningRECAP#390: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. Learn more about the challenges in this Q&A post and why and how to participate in this helpful article.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.
