233 Tips on Graphics and Visual Design

233 TIPS Graphics and Visu De al sign

233 TIPS ON GRAPHICS AND VISUAL DESIGN © 2017 by The eLearning Guild. All rights reserved. The eLearning Guild 120 Stony Point Rd., Suite 125 Santa Rosa, CA 95401 www.eLearningGuild.com +1.707.566.8990 Copy Editor: Jillian Johnson Publications Specialist: Brian Craig You may download, display, print, and reproduce this material in unaltered form only (retaining this notice) for your personal, non-commercial use or use within your organization. All other rights are reserved. This is a FREE digital eBook. Other than The eLearning Guild, no one is authorized to charge a fee for it or to use it to collect data. Attribution notice for information from this publication must be given, must credit the individual author in any citation, and should take the following form: 233 Tips on Graphics and Visual Design. Readers should be aware that Internet websites offered as citations or sources for further information may have disappeared or been changed between the date this book was written and the date it is read. www.eLearningGuild.com

233 TIPS Graphics and Visu De al sign 233 TIPS ON GRAPHICS AND VISUAL DESIGN Table of Contents Introduction................................................................................................................................................................................................. 1 Twenty-Three Tips on Starting Out as a New Graphic or Visual Designer ....................................................................................3 Thirty Tips on Finding Inspiration and Nurturing Creativity ............................................................................................................10 Nine Tips on Supporting Learning Through Intuitive Interfaces ....................................................................................................17 Forty-Nine Tips on Visual Design and Layout ....................................................................................................................................19 Forty-Seven Tips on Using Graphics and Text Effectively ...............................................................................................................31 Thirty Tips on Keeping Things Simple and Knowing When Not to Use Graphics ..................................................................... 42 Fifteen Tips on Staying Consistent and On-Brand ............................................................................................................................47 Seven Tips on Incorporating Design Trends into Your Work ......................................................................................................... 50 Ten Tips on Getting Buy-In from Stakeholders .................................................................................................................................52 Thirteen Tips on Testing for Quality and Ensuring Instructional Integrity .................................................................................. 54 www.eLearningGuild.com

233 TIPS Graphics and Visu De al sign 233 TIPS ON GRAPHICS AND VISUAL DESIGN Introduction Hello, fellow designers! Whether you have years of experience with graphic design or you can’t draw a stick person to save your life, if you work in L&D, chances are good that visual design is an important part of the work you do—whether or not you were formally trained in it. But why all the fuss about design in the first place? Well, strong visuals can do a lot to make the information you’re sharing easier for people to understand and remember. Things like clear user interfaces that make content easier to explore, high-quality images that enhance content, infographics and graphs that simplify complex data, and clean layouts that ensure visuals don’t distract from content are just some examples of the wide range of design choices that can aid us in a vital part of our role: helping people understand and use information. This means design is an important tool to L&D, but it’s not one that many people in our field have formal training in. Thankfully, effective visual design in L&D is less about your fine art skills and more about understanding how information can best be conveyed visually, and how to use those approaches creatively in your own work. These are skills that anyone can build with the right advice—yes, even those of you in the “can’t draw a stick figure” category. That’s what this eBook is all about. We asked the L&D community to share the design tips and resources that helped them the most in their own work, and then we collected the best of their advice. That means this eBook contains design concepts and ideas that don’t just work in theory, but have real, practical application in the work we all do on a regular basis. It offers tips on getting started with design; finding inspiration; creating thoughtful user interfaces; using graphics, text, and layouts effectively; ensuring design consistency; and more. They’re also targeted at the specific design challenges we face in our field, making this a fast way for you to get advice and develop the skills you need. So enjoy this eBook, and remember—we can all be great designers! Sincerely, Bianca Woods Senior Manager of Programming The eLearning Guild 1 wwwwww.eLearningGuild.com.eLearningGuild.com

October 25 – 27, 2017 • Las Vegas, Nevada The Future Is Here! Look Toward the Future of Technology This year’s keynotes will take a deep dive into the future of learning and technology and help you form a road map for your organization to get there. Sci-Fi Meets Reality: Technology and How to Think The Future, Today Storytelling: Making a ike a Futurist Ay ebb Difference in the Digital Age Jane conigal Lear urton Register by July 21 Save $200 Register Today! Elgd.co/dl17-graph-ebook

233 TIPS Graphics and Visu De al sign 233 TIPS ON GRAPHICS AND VISUAL DESIGN Twenty-Three Tips on Starting Out as a New Graphic or Visual Designer If the choice is yours, choose good tools. For me, that would be those that are industry standards with the most functionality. This gives you endless possibilities and not only builds your skill set for your current job, but also builds experience and abilities attractive to future employers. Examples are Adobe Photoshop and Illustrator. They are both complex and have a long learning curve, but they are fun to use. Approach them as you would a 10-speed bike. You can get a lot of places using just one speed, and most people never use more than five. Learn techniques one by one. There are many good books and countless tutorials online. Rather than learn a laundry list of functions, try to learn how to create specific things and effects. You’ll learn a lot about various tools and functions you can apply to real, immediate output. And once you know how those tools work, you can apply them in endless ways. Grow your skills like a tree—slowly, surely, day by day. Save all the files you make in a single folder, even the bad ones. Look back on your progress as time passes. David Perry, Ford Motor Company Starting out, it may be difficult to decide if your visual design should be graphics, illustration, or some combination. The first recommendation is to stick with one or the other. Jumping back and forth between graphics and illustration interrupts fluid design. Second, take a minute to think of all the photography you’re exposed to in a day: Facebook, Snapchat, selfies, billboards, and more. We are bombarded with photography every day. For that reason, consider using illustration. It can be especially effective in creating neutral characters that reflect greater diversity in your work. Try it. Have fun with it. You might be surprised at the engaging difference illustration can make. Lisa Von Bargen, TEKsystems Use as many of the free resources on LinkedIn and YouTube as you can. You’ll be surprised at what you can learn. Roberta Liverman, Landstar System 3 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN When designing as part of a team, don’t forget to stay open-minded. As artists, we all have egos to a degree, and those can be dangerous when working on collaborative projects! Justin King, ResMed Be original. Stop following or benchmarking others, as this might bias your creativity. Talk to all the stakeholders to evaluate the why, who, what, when, and how: Why do the stakeholders wish to create the design? Who is the target audience? What is the budget? (Very critical.) When are they expecting the design to be complete? How do they want to launch the design—digital, mailer, social media, print, or anything else? Stuti Singh, Mahindra Things look so much better when they’re aligned. Use the alignment tools—they’re your friends! Nick Elkins, Guru eLearning Photoshop is a great foundational tool for creating, edited, customizing, and manipulating images. Take the extra step to learn and use Adobe Illustrator. Kelsey Rodgers, Irvine Company 4 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Always get someone else to take a quick look at your design. This is not about getting opinions, critiques, or even buy-in. It’s to make sure you haven’t accidentally sent an unintended message. Later you might laugh about it, but it could derail your brilliant design. (For instance, an index finger pointing up can often be seen as the “wrong” finger.) When you are in the heat of creating your awesome graphic, sometimes you are not aware of the way someone else will interpret or perceive one of the elements in your masterpiece. So, before you send your design out for approval or, even worse, get it published somewhere, take the time to show it off to someone and ask them what the first thing they notice is. If they smile, but don’t want to say anything, you can bet they picked up on something you didn’t! Kathy Manfredi, Thomson Reuters Seek out resources to learn about color theory and the hierarchy of design elements. Learn the difference between the RGB and CMYK color models. Alexander Salas, StyleLearn Get to know the tools inside your tool for graphic design basics like alignment formatting. Heidi Matthews, Terracon Draft visuals to help everybody get on the same page. Don’t worry if your sketch or chart is ugly—the objective here is to find solutions and share ideas, not to be an artist. Feedback is your friend. Try to get as much feedback as possible from people with more experience. Laura Murillo, SweetRush 5 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Learn about contrast, repetition, alignment, and proximity. Design is about how the viewer sees elements on the page and where the eye goes to see those elements. Design your page so that the learner follows a pattern. Here are some concepts from a great book by Robin Williams, The Non-Designer’s Design Book, that I use in every design I create: • Contrast is when two elements on the page are different. You can contrast large type and small type; a thin line and a thick line; colors that complement each other, etc. • Repetition is repeating visual elements. This develops the organization and strengthens the unity. • Alignment drives the way the viewer sees the page. Center alignment is rarely the solution because it is hard to read and see what is important on the page. • Proximity is the way that items relate to one another and how they are grouped. It helps organize information, reduces clutter, and gives the reader a clear structure. Follow these rules to create clean, clear, and concise design every time. Once you master them, you can challenge the status quo by breaking them—but not until you know why and how you are changing the rules of the game. Jodi Hinkle, SandRidge Energy Embrace obstacles, challenges, and disruptions, because they are an inevitable part of the job. Rather than viewing these occurrences as negatives, try shifting your perspective: Imagine these situations as fun puzzles that you must piece back together instead of roadblocks you must overcome! Raisa Berkheiser, AOL Know copyright law, and realize you can’t just download images from the web and use them in your training materials without breaking the law and exposing your company—or possibly yourself—to a lawsuit. So you have no budget for stock photos or a professional photographer? Don’t despair—help is no more than an arm’s length away, in your smartphone. Use it to take the photos you need. Look critically at quality professional photography—commercial, journalistic, and artistic—to learn about composition, framing, color, style, etc. Then apply what you learn to the photos you take. Even your phone will allow for editing: cropping, color balance, tonal adjustments, etc. Do you need people to pose in situations that illustrate your course content? Some of your co-workers will undoubtedly volunteer. You can suggest the wardrobe and set up the scenes so they precisely convey your particular message. To avoid legal issues, be sure to get a signed model release from each person before you take the first photo. David Perry, Ford Motor Company Find a mentor to guide you. Also, patience and dedication are needed when learning and applying a skill. Jean Johnson 6 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Use the built-in Symbols library in Adobe Illustrator to create simple graphics. Add the symbol to your image. Then, right-click on it and choose “break link to symbol,” ungroup the elements, and edit as needed. The symbol graphic itself may not fit your needs, but one or more elements from it may work for your design. Tama Minter, St. Cloud State University Starting out in a technical communications career can be daunting. I have been working with graphics and web design for several years. My tip is to encourage technical designers, writers, and communicators to expand your skills into video. Although your designs may work in the print and online worlds, the fast-growing future is video. Knowing how to incorporate your work into video will be priceless and highly sought-after in the near future. Ken Weatherford, Technical Writer Training Try not to get “freshman artist syndrome.” There are many effects and filters you can use in photo manipulation products these days. When first starting out, you will feel the need to use many of them in most of your projects, but don’t do it. Often the message can be conveyed using a simple technique. If you have found your career calling, you will be working on many projects in the years ahead. That means the right projects will come along when it does make sense for you to use those filters. Jill Mohler, Moffitt Cancer Center 7 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Utilize visual effects that connect with the material you are creating. For example, don’t place an image of a tomato in your learning module if you are explaining how to make orange juice. You will be tempted to use clip art that was created between 1980 and 2000. Don’t do it. As cute as you may think it is, it will minimize the impact of your presentation. Choose contemporary imagery and design by selecting stock imagery or graphics. If money is tight, you can make your own using PowerPoint and your smartphone; subscribe to free stock sites like Dreamstime.com; or utilize sites like E-Learning Heroes at community.articulate.com. Jodi Hinkle, SandRidge Energy Typography is such an important aspect of graphic design. Design is about communicating a message— and the majority of that is through the written language. Oliver Reichenstein wrote, "Web design is 95 percent typography." Start with the basics of type classification, anatomy of letters, tracking and kerning, hierarchy, and contrast. It will help make your designs look Two different fonts, two very different moods. more professional and clean, and most importantly, you will be able to effectively communicate your content. Crystal Rose, The eLearning Guild Search for and use video tutorials! Check out Lynda.com. This website offers many tutorials on graphic design using various software platforms and is very affordable. Also, YouTube is an excellent resource, and it is free. Using YouTube, specify a search based on specific criteria of what technique or software you would like to learn. It is great to have these on-demand resources at your fingertips. Linda Caldwell, SCANA Corporation/SCE&G Listen to everyone’s ideas and feedback. Ideas can surprise you, and the seed of the next great idea may come from an unlikely source. Shane Donahue, SweetRush 8 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Use color.adobe.com to help determine the color rule to apply. You can see samples of the Analogous, Monochromatic, Triad, Complementary, Compound, and Shades color groupings. If possible, save images as an 8 bit PNG graphic (256 colors). If it doesn’t look perfect, then you can step it up 24 bits (16.7 million colors). Typically, save your PNG images with the Interlace feature turned on. This will allow images to be transported over a network significantly faster. The only time you should use JPG is if it’s a photo graph with no graphics added. The JPG format uses a lossy On the left, a TIFF image; on the right, a JPEG of the same image, reflecting the compression, which means it lossiness the file type is subject to. removes data from the image to make it smaller. This algorithm tends to give graphics jagged edges and creates blocks of color. JPGs are a great format for photos if you don’t need a transparent background. If you do need a transparent background, then save the image as a 24 bit PNG. Phil Cowcill, Canada Department of National Defence 9 www.eLearningGuild.com

233 TIPS Graphics and Visu De al sign 233 TIPS ON GRAPHICS AND VISUAL DESIGN Thirty Tips on Finding Inspiration and Nurturing Creativity Find inspiration in your most successful design projects. Ask yourself what worked and why. Use those same concepts to create something new. You don’t need to reinvent the wheel with every design; instead, rely on methods that you know work. Charlotte Morris, Pepco Holdings If you’re a designer collaborating with an SME or client and they’re stuck somewhere in the storyboarding or script phase, sometimes finding a new and inspiring digital asset can help lead the way into the progression of course development. For example, let’s say your project is committed to microlearning, but the content provided is still short of what learners truly need to understand. The obvious choice is to include just a little bit more—but what if your SME has no more? What if the storyboard abruptly ends? As a designer, you’re most likely stimulated by graphics that are cool and new. Find an inspiring graphic or image in a repository and show it to the SME or client to see if it sparks additional commentary for their course. Sometimes an exciting graphic begs the question “How can you add me to your course?” and ideas for content abound again. Assuming the graphic fits the theme of other digital assets, be sure to take a step back and ask if it still fits within the context of the project. Isaiah Adona, Phi Kappa Theta Fraternity Glean inspiration from everything! I once had to design a one-page handout for an event at work, and I was struggling with a layout. I scrolled through Facebook for a moment, and I found a post from ESPN that had a beautiful design. I used the NFL-related social media post to get inspiration for a layout for the work handout. Nick Elkins, Guru eLearning Immerse yourself in the principles of design by: reading books; looking at design magazines like HOW and Creative Arts; viewing documentaries like Helvetica (available through Netflix); looking at websites not for content, but for design; and talking to graphic designers about how they work. Look for good and bad design everywhere, including billboards, magazines, TV, and movies. Looking at other people’s work is also motivating and can be a starting point for your project. Sometimes I look at over 100 designs before settling on one that works for me and my client. Jodi Hinkle, SandRidge Energy 10 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN If you’re waiting for a “lightbulb moment” to give you creative inspiration, consider this: Neuroscience tells us that the flash of inspiration only comes at the end of a long neural chain of tiny, incremental ideas. So roll up your sleeves and earn your next flash of creativity. Margie Meacham, LearningToGo Canva is an easy-to-use tool that I use to create designs for web or print: blog graphics, presentations, Facebook covers, flyers, posters, invitations, and more. There are helpful templates to explore for ideas, and many are free or cost just $1. This tool is a big help and nurtures my creativity. Try it at Canva.com. Caroline Cerveny, Digital Disciple Network When you are watching TV or a movie, think about what you see, hear, feel, and learn, and how you might apply each of those to your next creative learning project. Take a photo of what you see, jot down some notes, or sketch out a reminder and add that to a folder on your device to quickly reference when you start your next project. Nick Floro, Sealworks Interactive Studios I work in a country where design and the fine arts are not taught in public schools at either the primary or secondary level, except in some private schools. At the university where I teach, the creative design department is part of the College of Science and Technology and therefore admits students who excel primarily in math and science. The majority of our students have never heard of design or attended art class. The first year, we teach foundation modules in a format that can be described as a crash course, attempting to bring in everything they should have been taught in primary and secondary. Unfortunate as it is, I often have to discuss finding inspiration and nurturing creativity as an everyday activity, not just a class subject. I always remind them to journey back to nursery age; or, simpler, imagine a sibling of that age and see how everything inspires them—just the fact that they are alive, they touch, they stare, they shout, they cry, in contrast to how we behave as adults. I tell them inspiration is everywhere if one wants to see it, feel it, use it; and with that, creativity can be nurtured. Henry Miheso, University of Rwanda If you work on an instructional design team, make it a habit to regularly present your work once every two weeks or every month. This is a good way to learn from others as well as receive critiques on your work. It also provides great inspiration. Maria Mejia, Jefferson Health Keep reading about learning techniques, which can generally be applied to eLearning projects. Play games—board games, video games—no matter the nature. Keep your mind active. Practice creative activities such as photography, painting, crafting, etc. These develop our creative “muscle,” which gets stronger as we use it more. Laura Murillo, SweetRush 11 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Keep an eye out throughout your day for visuals or graphic designs that demonstrate an ability to effectively deliver information. This could be a billboard along the highway, a menu at a restaurant, a notice posted on a bulletin board, an advertisement in a magazine, or an instruction manual, just to name a few. Look for the design elements that make the visual either successful, eye- catching, or both, and then consider how those same elements can be leveraged for your effort. Michael Pack, Four versions of the same sign, each reflecting different values, from extreme MITRE Corporation simplicity to using every bit of real estate and several different colors. How do you want to frame your message? Inspiration is everywhere, even from the most unlikely sources—just open your eyes in a childlike way. For composition, color palettes, technique, style, and subject, look at the work of famous artists from Rembrandt to Warhol, and at cereal boxes, billboards, photographs, calendars, advertisements, websites, whatever you set your eyes on. You may find the perfect color palette just by looking down at the rug you are standing on. (This can be taken to extremes, though. Years ago I had a customer who insisted that an entire eLearning course have a palette of just two colors—those of his favorite football team. Ugh.) If you know your tools well, you’ll look at something and think, “Now how could I create that effect in Photoshop? I’d duplicate the photo layer, select the area for the text, invert the selection, delete the non-text area, reduce the opacity of the duplicated layer to 30 percent, then put a text layer above with black text on the lightened area.” David Perry, Ford Motor Company 12 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Keep a folder on your hard drive or in your inbox where you can store images so that when you need that picture of a sandcastle, for example, you know where to find it. However, make sure not to date yourself too much, especially with online content you want to use over and over. You want timeless images that you can use year after year. Jennifer Beech, University of Memphis We are in a culture where images and graphics are telling us stories. The imagination is a fascinating thing. Don’t insult your viewers with too many words on a page. Give your viewers credit for filling in the gaps when they are looking at your material. The heavy part of the content can often be created as a clickable link from your graphic to a PDF, video, or website. Learners need to connect what they see to what they already know, and then follow those visual links to address gaps they may have in their learning. Good graphics give them a chance to guide their own learning; use your graphics to tell a story that relates to the information they need to know. This is important for building blocks of understanding. As your visuals tell the story, it will open up an opportunity for them to become more excited about learning, and when they become excited to learn, they will take a stronger personal initiative to do so. Laura Schroeder, Georgia State University I have grown bored of buttons, and now use circles and flat icons to organize and present information. Salicia Pultz, OpEx Now 13 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Use your smartphone to quickly capture something you see for later reference. You can take a picture of a sign, scene, poster, location, your laptop or computer screen, or what you are viewing on your phone or tablet. On an iOS product, hold down the Home and Power keys to save a screengrab. The latest version of Android also supports screengrabs. Check your phone settings to learn how to capture quickly. Nick Floro, Sealworks Interactive Studios The book Thinkertoys is an excellent resource for developing your creativity and brainstorming skills. It’s chock-full of fun and engaging exercises and techniques to help you generate innovative, original ideas. Exercises are appropriate for individuals or as team-building activities. Theresa Decker, Samaritan’s Purse Have a critical eye when looking at contemporary work. See what works for you and what does not work. A recent idea, for example, can be seen on a popular TV news show, The Rachel Maddow Show: They highlight whole paragraphs by using an inverted translucent gray triangle to point from a key word on a page of text to an overlaid, enlarged version of the text of interest. Dave Faldasz, ViaSat Inspiration is all around us if we pause long enough to recognize it, in everything from user experiences to interaction and visual designs. The simplest place to find inspiration is where you spend most of your time. If you are like me, that time is spent on websites and mobile apps. My tip is to look at sites and apps not directly related to your work or even your industry. Do you have a favorite mobile app, game, or website? What do you like about the graphics and visual layouts? What do you like about the interface? Pause a moment to study those aspects of design, and you’ll quickly begin to recognize many inspirational opportunities. You can take the same approach to magazines, the messaging and marketing of TV ads, and interacting with physical objects. To nurture creativity, you must be willing to invest time and practice. Regardless of having the ideas to express your inner creativity, the act of doing or making is genuine therapy. Deep thought and relaxation occurs when we’re creating—planting, building, painting, carving, knitting, drawing, and endless other creative outlets. Find what you love to do, practice by nurturing the passion to create, and then make it your own. Kevin Thorn, NuggetHead Studioz Listen to the “ask” of the project. Then research what has been done and what can be done better, and look for ways to present the content so that it is in line with the client’s brand and values. Doug Belding, SweetRush You can find a lot of great ideas while watching game shows and reality competitions on TV. I’ve noticed how certain visual elements keep the viewers engaged, and I think of ways to incorporate those elements into my training solutions. Richard Butler, AT&T 14 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN We encourage our teams, particularly instructional designers, to look at things from different fields or for different purposes other than just training—what we call “tangential design.” Look at magazine layouts, marketing websites, and customer materials to see how they gain attention and promote engagement. Listen to podcasts like StoryCorps and The Moth or watch TED videos, and pay attention to how stories are told. Go to a game development conference to learn about how entertainment game principles might be applied to learning games. Think about how architects approach designing physical spaces and how that might relate to designing virtual learning spaces. Pay attention to user experiences for different apps and what might be leveraged for good learner experiences. Watch an IDEO video about design thinking, and consider how product design relates to learning design. Go to a Maker Faire and see what innovations people have come up with—how they may have kludged something together in ways you’ve never thought of—and use that inspiration for your next learning solution. Think broadly and explore things that might be considered tangential (or even unrelated!) to the design approach and processes you’re currently using. Melissa Carter, GP Strategies The very best inspiration for visual design—including screen design in eLearning and blended learning—is fine art. If you haven’t already studied art history to some extent, you’ll be amazed at the innovation and insightful use of space demonstrated by the masters: from Giotto in th the 13 century, to Raphael and th Caravaggio in the 16 century, to th Manet and Monet in the 19 century. We have so much to learn from the master painters who wrestled with and creatively solved such challenging visual design issues. Grab an Italian Renaissance art book, or Google painters through the Caravaggio’s Christ on the Mount of Olives. Note use of negative space. centuries, and you will be inspired! Stephanie Lattery, Northern Pines Media Look everywhere for design inspiration, not just at trends—other industries, websites, print ads, nature, and even children’s drawings or your own doodles. You can never know when inspiration will strike, so be open to it at all times and use your phone or sketchbook to capture your findings in an inspiration file. What you see today might provide just what you need a month or year from now. Janet Wright, Regence 15 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Join forums and other peer groups and associations. Keep searching for the latest examples out there that might inspire your next project. Keep your eyes and ears open to new applications and even new tools and features in your current software. There are some fantastic examples of gamification, branching scenarios, interactive quizzes, virtual reality, and so much more appearing all the time. I would recommend not sticking with one specific piece of eLearning design software, but experimenting with many—and not just those specific to the task. Sometimes starting off in PowerPoint can help you get your ideas out much quicker (I frequently use this for storyboarding to show to clients). And don’t be afraid to experiment; just make sure you do your user testing to get good, solid feedback. Anna-Leiza Barthorpe, British Columbia Provincial Government Every week, set aside dedicated time to curate inspiration. Use a site such as Pinterest or Flipboard to search for examples of great design across a variety of industries. Save and categorize examples by type, color, theme, or material so you can easily reference them later when you need inspiration. Theresa Decker, Samaritan’s Purse Everyone runs into a creative block now and then. After speaking with my customer and identifying their needs and design preferences, I may conduct a web search for similar products. When I find a design that might fit the task, I dissect it. What is it about the design that appeals to me? Is it the layout, color theme, font choices, artwork style? Which elements are applicable to my design task, and how can I emulate them without plagiarizing another’s work? In other words, how can I create my own design? Anita Keegan, Zeiders Enterprises Go to Disneyland! Every scene, decoration, and attraction has a lot of thought put into it and amazing detail. Props have enough context to get your mind started on a story and allow you to mentally create a narrative based on contextual clues. It’s a really fun mental exercise to daydream and helps nurture creativity. You can also translate the same energy into your design and think about the story and characters you’re creating, even if parts of it do not make it into your project. Crystal Rose, The eLearning Guild Becoming a good visual designer is very similar to becoming a good writer, musician, woodworker, programmer, or golfer. It takes years of practice and persistence while experiencing small victories and recovering from failure. Mike Beaulieu, GP Strategies I try to stimulate auditory and visual learners in my trainings, and sports have always inspired me in describing behavior. For example, if your task requires straightforward communication, using the image of an individual shooting an arrow at a target may help you drive the concept across. If your task requires a clear mind without stress, the image of a swimmer who must control breathing can also remind your trainees to breathe in and out to control stress. Though the images and context may not be 100 percent related, many employees agree that the images inspire them and add to the task at hand. Loly Lopez-Desola, LanguageLine Solutions 16 www.eLearningGuild.com

233 TIPS Graphics and Visu De al sign 233 TIPS ON GRAPHICS AND VISUAL DESIGN Nine Tips on Supporting Learning Through Intuitive Interfaces If your learning content is designed to reach audiences across the world, then it is important to consider internationalization from the very start. Internationalization or globalization is the design of content for easy localization. You can consider this from a technical standpoint, such as creating text elements in a way that can be swapped out for language translations. Elements such as date and time formats vary by country. You can also consider internationalization from an inclusive perspective, avoiding content that may be subject to misrepresentation or insensitivity by global audiences. Be aware of unconscious biases and cultural references that wouldn’t make sense in other parts of the world. If you keep these principles in mind, then you’ll be set up for a much smoother localization process for targeting audiences that vary in culture, region, or language. Your global audience will consume and retain knowledge more intuitively because the localized content will serve a more personalized learning experience. Ben Cruz, Google Don’t forget accessibility! Test your customized palette, course template, and graphics using one of the many available online color-blindness simulators. See how your beautifully designed and perfectly colored course will look to all learners! Chuck Jones, Orgwide Custom Learning Solutions In web design, the mantra coined by Steve Krug is “Don’t make me think.” This idea is precisely what we want with our interfaces. Learners have limited cognitive resources, and depleting those on the interface before they have a chance to actually interact with our content is tragic. Allowing our learners to focus on the essential elements to improve learning is what we are after. Richard Mayer’s “coherence principle” also supports this when he calls for us to eliminate extraneous material. Nicholas Rider, Indiana Wesleyan University Our team at Petco uses Piktochart for engaging infographics to enhance our communication. We’ve designed over 50 different break room posters, visual data summaries, and timelines for our store partners at our retail stores. We have also incorporated the use of QR codes on these informational pieces to bring our information to life visually through videos. Grace Gil, Petco 17 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Think of it as a home: Greet your guest and walk them through the space in an intuitive way so that they feel comfortable and want to stay. Doug Belding, SweetRush Provide your learner with images to click or tap that provide a “pull” approach to training: for example, images that come alive with video, audio, or interactions to more exploratory branches. Images that match your theme and look “actionable” will have your learners engaged through the entire module. Work with the SME and instructional designer on a voice-over script to supplement images and text. Cleon McClure, Davol When designing your interfaces, always ensure the end user knows exactly what to do next. Ken Weatherford, Technical Writer Training When you get a new cellphone, do you read a manual? Chances are you play with it. When you’re stuck, you research. Give students the same opportunity to explore, make mistakes, and grow. Design your piece so they can succeed, but learning happens first. Then test with a diverse group of people. If they have an issue, chances are someone else will, too. Accept the criticism and accommodate to the best of your ability. Crisa McCarty, Aflac Technology should feel invisible, so create intuitive interfaces that enable learners to focus on learning, not using. Janice Low, Counter Design Studio 18 www.eLearningGuild.com

233 TIPS Graphics and Visu De al sign 233 TIPS ON GRAPHICS AND VISUAL DESIGN Forty-Nine Tips on Visual Design and Layout Don’t be afraid to go large, ignore the “boundaries” of your medium, and use bold colors. Use the power of the human mind to fill in the blanks, extract meaning from minimal cues, and make sense of counterpoint. Peter de Jager, de Jager & Co. Build a style guide before you begin designing. Choose your colors, fonts, and graphics, and put them on a page (or PowerPoint slide). They should look great together! Is something off? Check the number of colors you’re using, the number of fonts, and the types of graphics you’re incorporating. Eliminate anything extraneous, and remember “3-2- 1”: Stick to three colors, two fonts, and one graphic style. Breana Hidalgo, Pasco-Hernando State College If you can’t do fancy, do simple very well. Effectiveness is more important than glitz. And simple can be extremely elegant. Simple lines, simple graphics, clear text, and candid content: There’s no shame in that. Lisa Nicholson, Standard Insurance Company Add visual interest to your backgrounds while not distracting from the primary content in the foreground by using an abstract, blurry image. This creates the illusion of depth. Pro tip: Make sure that the content in the foreground contrasts well with the background. Maria Mejia, Jefferson Health Paying attention to eye tracking is important for visual aesthetics. Consider how the end user is going to “read” the page (text, graphics, hot buttons, etc.). The eye naturally tracks from left to right in the US, but this is not the case in all countries. Be aware of eye tracking and end-user needs. Zoa Bonofiglio, Auto-Owners Insurance Remember the CRAP (contrast, repetition, alignment, proximity) principles of visual design: • Contrast helps to create a focal point for a page. Use it to make your training visually appealing. • Repetition of specific design elements throughout the training makes it look polished and cohesive. • Alignment involves placing text and graphics on the page so that they feel “connected” in the learner’s mind. • Proximity on the screen provides cues to the learner about whether or not items relate to each other. Richard Butler, AT&T 19 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Finding photos that suggest the mood you want to convey can help you decide on color schemes. Here, the soothing tones of the forest are contrasted with the intense energy of a volcano. If you are not bound by company branding standards, deciding on a color scheme can be challenging. A great way to take the guesswork out of choosing colors is to find a photo that expresses the mood you want to convey in your project. Forest and lake scenes have color palettes that are good for supporting calmness and stability, while firefighting scenes, explosions, or erupting volcanoes can provide colors that convey action, urgency, or danger. Pick only one or two dominant colors from the photo, combine them with a few neutral grays, browns, or blacks, and you should have a palette that supports your message. How do you match those colors? Most illustration, presentation, and eLearning development software includes a color picker, usually represented by an eyedropper icon. Another good option is stand-alone freeware color pickers. My favorite is Pixie by Nattyware, which will display the RGB or other values for customization of colors in whatever software you are using for development. Bob Joyce, University of Texas MD Anderson Cancer Center Ask lots of questions about the desired goals and the experience of the desired outcome, and design to accomplish those in the fewest steps possible without compromising quality. Doug Belding, SweetRush Check your color scheme. How many colors are you using? You can use a tool like Adobe Kuler to create your color scheme before you begin working, and the tool helps you pick colors based on types of combinations (analogous, monochromatic, etc.). But if you still don’t love your color choices after using Kuler, pare it down even more and aim for three colors—a dark, a light, and an accent or highlight color. This will help your design look more cohesive. Breana Hidalgo, Pasco-Hernando State College Be careful in using SVG graphics with mobile devices. While the files are smaller in size, they require more processing power to render. The mobile processor is not as fast as a desktop. Phil Cowcill, Canada Department of National Defence 20 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Keep in mind the many different devices that may be used to view your content. These could range from mobile devices with smaller screens, such as smartphones and tablets, to eReaders with limited display capabilities, to devices with large screens such as laptops, desktops, or projected displays. Michael Pack, MITRE Corporation When thinking about the voice and visual style of learning, think inspirational and conversational. From a voice perspective, be less patriarchal and use more employee-centric language. Be conversational—like you are talking with them, not at them. Use simple terminology, and find opportunities to use engaging language that speaks to “what’s in it for me” (WIIFM) rather than what you want them to do. From a visual perspective, use larger fonts, inspirational imagery, and more white space. Make the images less about business and more about WIIFM, or more emotional. Make learners feel like they want that. Don’t make PowerPoints into Word documents. Make the learner feel like you understand them and where they are. Make them feel like they want to learn, rather than have to learn. Create bite- sized pieces of information that are easy to digest, as people don’t have time anymore. Linda Grosse, RBC Think about focus. When you look at the slide, where does your eye go to? Does it go anywhere? You want the graphics to emphasize the most important information you are trying to relay to your audience, using size, color, contrast, complexity, and so on. If your eye goes everywhere, then it is too busy and likely will cause cognitive overload to the user. John Trest, Inspired eLearning Busy vs. clean. An uncluttered slide directs the eye to the most important information. Don’t use black or very dark colors for background; better yet, use white. You can add color in text, borders, images, etc. Digna Delgado, Universidad Politécnica de Puerto Rico 21 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Creating content in a regulated industry can be a tough balancing act. Satisfying compliance SMEs and keeping courses engaging for learners at the same time can be a challenge. Breaking up the often text-heavy content with relevant graphics and icons provides the opportunity to evoke interest and response from the learner. Visuals should be simple and relatable for your audience, and they shouldn’t detract from the message or seriousness of the topic. Rather, they should enhance and provide context for the course. When using images, I ask myself some questions: What do I feel when I see it? Does it make the content more understandable? Does seeing the image again help me remember the content? Done well, visuals can trigger emotional responses that have a lasting impact the learner can tie to their memory of the learning, which greatly increases recall and, hopefully, desired performance outcomes. Alicia Blitz, MUFG Union Bank Storyboarding should always be the first step in any design process. The best visual designs don’t just magically happen. They begin with a solid storyboard, which serves as a blueprint of what ultimately should be researched, analyzed, drafted, and then tested. Charlotte Morris, Pepco Holdings Make sure the images you select are familiar to learners and can be used across multiple mediums. For example, you may need to create an online learning module, PowerPoint, and intranet post to get your point across to the learner. When you make these graphics consistent, your learner will more easily connect the dots. Make another connection by using internal talent whenever possible. This helps learners better understand the material by seeing people they recognize and can relate to. Jodi Hinkle, SandRidge Energy Gather all content and information that might be used in a project. Identify the most difficult content, and use that in your initial designs to ensure consistency in your design. Look at how information can be simplified. Utilize feedback loops with your audience members to gather input on what works and what doesn’t at an early stage to assure stakeholders that your vision is the best fit for your audience’s needs. Nick Floro, Sealworks Interactive Studios 22 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN By creating infographics out of workshop content or models, you can often create a useful tool. It’s especially effective when the layout is 11 by 17 inches (or an international equivalent), as the infographic can be printed and used as a handout, as a tool, or even as marketing material to promote a workshop. John Boring, Accelerate Learning & Development I love to pick a bold graphic that brings context to content. I use the graphic as my background on the slide and then place my text in a 13% – 15% transparent box over the graphic. It makes the slide pop with visual appeal, and the graphic helps the visual learner relate to content. Salicia Pultz, OpEx Now One of the best ways to make your design look professional is to consistently use a gridded layout. It harmonizes the elements on your page or screen and prevents the “jumping” effect when moving from one screen to the next. A good grid allows a lot of flexibility in where you can place your titles, text, and graphics while maintaining a consistent look and feel. If you are unsure of what a grid is or how it is used, simply do a web search for “layout grid” to find examples and inspiration. Bob Joyce, University of Texas MD Anderson Cancer Center 23 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Give your message room to breathe and places for your eyes to rest. Michelle Vilamaa, independent I like to mix mediums by using cartoon characters sitting in realistic backgrounds. I use the Remove Background function found under the Picture Tools formatting tab in PowerPoint to make parts of my cartoon background transparent, and then I insert a street scene or brick wall, etc., behind the characters. It helps to make the training edgy and modern. Melissa Dougherty, Advance America Use a font or color that is different from what you’ve used on previous pages to inform the learner of a “shift” in the training. This “shift” could indicate a video, simulation, a practice question, or the end of a particular lesson. Richard Butler, AT&T Capturing a software or screen simulation? Once you have determined your recording size, use your favorite graphics editing tool to create a solid-color desktop “wallpaper.” Then, draw out a square that equals the width and height of your recording size and give it a different color. Save this new image and use your computer’s display settings to make it your desktop wallpaper. Now, whenever you need to capture a recording, size the software or browser window to match the colored square on your wallpaper. It’s a fast and easy way to ensure what you are recording will fit within the confines of your project! Chuck Jones, Orgwide Custom Learning Solutions 24 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Divide your page into thirds, use as much margin as you can (I try for an inch), and when placing graphics, think about an invisible triangle overlaying (at varied angles) your page. You would place the graphics on the triangle’s points to lead your learner around the page. This will provide you a professional appearance and an easy-to-read layout. Richard White, T-Mobile Be consistent throughout your visuals with your choice of shapes, font selection and size, and colors. Even a mix of rounded vs. squared text boxes, for example, can distract some viewers from focusing on your message. Dave Faldasz, ViaSat Remember that 1 in 200 women in the world and 1 in 12 men are color blind. Check with websites like ColourBlindAwareness. org for color-choice tips if you are using color to differentiate critical aspects of your message. Dave Faldasz, ViaSat On the left, the original image; on the right, how that image would appear to a person with "green weak" color blindness. Don’t make your students traverse a maze to find course material, assignments, help, etc. Think about what you want to share with your students and what you want them to be able to do, and then create your course navigation to reach those goals. Elaine Reeder, Virginia Commonwealth University 25 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Align repeated elements. Learners’ eyes are attracted to moving images. While this is a virtue in motion graphics that attract the eye to an appealing image as it moves or morphs, it can be very distracting if unintended. If you have a series of slides in a presentation or eLearning project and each one has a visual element that really does not need to move, you must take steps to make sure it does not do so inadvertently as the learner moves from one slide to the next. For example, you have placed a background image on one slide and you want to use that same image as a background on a series of slides. As the learner navigates from one slide to the next, it is a noticeable error if the background moves subtly. The human eye easily discerns movements of as little as one pixel. There are two simple remedies: (1) Place the background image on a “master” slide and apply the master to each of the slides that use it; or (2) copy and paste the image on successive slides, ensuring it is in the exact same position on each one. Likewise, make sure your graphics are not distorted from one slide to the next. A circle cannot look like a perfect circle on one slide and then have a slight oval shape on the next. Make exact copies of objects or use the “constrain” shortcut (holding the Shift key while dragging, for example). Many programs have shortcuts for constraining objects in this way. Refer to the Help system for information. Finally, perform quality assurance by flipping through slides to make sure items are not moving about in unintended ways, and correct the positioning of any that jump. David Demyan, Spectorial Corporation I look at infographics every day, and I see a way of visually handling information. Most of them use a lot of visuals and clip art. Others provide information and text in an easy digestible manner. There are tons of free tools out there for creating infographics with templates, but I like my old friend PowerPoint. Open PowerPoint. Go to Page Setup under File. Choose a vertical slide orientation and set your page size. (I set mine to 11 by 17 inches because it is a standard paper size. I like to have them printed at the copy shop and use them as a handout or leave-behind at a sales meeting.) To find images to use, I just do a Google search on a word—for example, I search for “stop sign” in Google Images and I have lots of stop signs to pick from. Use only non–copyright protected images, the higher the resolution the better. Then I just build a PowerPoint slide that is long and vertical. Lately, I like to use a larger canvas (11 by 17 inches) to take an existing slide or model out of a training and add to it. This way, I can also use it as a tool in a class, an infographic, and a leave-behind. Once I am done, I convert it to a PDF and post it on the website or use it as a handout. This approach is proving most useful. John Boring, Accelerate Learning & Development For quick video editing, TechSmith’s Camtasia is a great go-to tool. One of the niftier things it can do is separate video and audio very quickly into unique objects that can then be edited individually. Todd Miller, Goodway Group 26 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN A diagonal line is a powerful eye grabber. How does your audience read? Top left to bottom right, or vice versa? Structure critical visual elements along that same line for maximum effect. Crisa McCarty, Aflac A Google image search, with the selection for reuse permissions displayed. Where do you find the images you use in your courses? Is the eLearning you’re developing so specific that you can’t easily find images and other design elements anywhere? Then you might need to take photographs and videos, or have someone draw images for you. For instance, to properly illustrate the series of events that can cause a nuclear power plant meltdown, and of course how to avoid them, you may find it difficult to find photographs or designs of real-life events that fit the needs of your content. You might then need to use drawings to illustrate those events. You can use Google, of course, to find images that you need. When doing so, if you click the Tools button, then Usage Rights, you can filter the images by differing levels of reuse permissions. Be careful not to use images that are copyrighted and not labeled for reuse, and give attributions whenever possible. There are also hundreds of general image sites, some of which let you use images freely, most of which do charge for use of an image. These can be very useful in finding what you need. Furthermore, most will allow you to use a watermarked image for free, which is a great way of including content in prototypes you show your clients. If they like the images, you can then purchase them. If you don’t, you haven’t spent any money. There are also many specialized image sites. Be aware, too, that your authoring tool may give you free access to huge image libraries. Don’t spend money when you don’t have to! Finally, avoid using images that you’ve seen used a thousand times before, or images that show people wearing clothing or hairstyles from 10 years ago. These can make your eLearning look tired. You have lots of choices! Have fun finding the perfect images! Joe Ganci, eLearningJoe Always think about how the user thinks and behaves. That will allow you to forge a relationship between the design and the user of that design. Pablo Barrantes, SweetRush 27 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Remember that your text is part of your visual design. Typeface, font size and color, and text placement can enhance or diminish the effectiveness of your design. Too many learning professionals revert to the ubiquitous Times New Roman and Arial. There are many beautiful typefaces that have been optimized for digital media. Use them, but no more than two or three in a document. And if you do use more than one, make sure that they are very different. Choose a typeface that fits with your theme and message. For example, Comic Sans might be fine for some K-6 educational purposes, but not in business uses or even in content intended for older students. Finally, in this mobile age, make sure that you’re aware of how your design will look when your target audience views it. If you know that your design will be viewed on smartphones most of the time, optimize content for that device, not a wide-screen monitor. Kathleen Fortney, Judge Learning Solutions Invest in good-quality stock images if you don’t have a graphic designer on your team. Don’t let bad quality detract from your content. Hyacinth Steele, Queensland University of Technology Be sure to use a sans serif font. You want to make sure that any eLearning modules you produce are consistent with current trends in web design. These fonts are easy to read and give your product a fresh look. Maria Mejia, Jefferson Health Crop a single stock image in several ways to build interest and consistency. Try repeating an image in a project, but present that image in a variety of ways. For instance, include a wide-angle image when presenting a scenario. When revisiting the scenario or in knowledge check questions, include a close-up square or narrow column of the same image. You can also use modified versions of the image, such as adding a colored filter or incorporating it as a transparent background on later pages. In addition to reusing one asset, it prompts the learner to remember the scenario and builds consistency while generating visual interest. Valerie Hartman, Johns Hopkins School of Nursing Every project should have a style guide that includes color palette, font styles and size, language composition, spelling and grammar conventions, etc., for design consistency and faster build time. Dayna Wongpoe, Alaska Airlines Spell out acronyms when first used. Make a note in your reference material or on the graphic itself. Highlight the acronym with an asterisk if space is at a premium, and notate it on the bottom. Your audience will thank you by not interrupting you with an acronym clarification question. Dave Faldasz, ViaSat 28 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Think carefully about contrast when you create graphics that contain informative text. Not only is sufficient contrast a WCAG 2.0 requirement, but it also improves the readability for all users. For example, light gray text on a white background may have aesthetic appeal, but many users will have difficulty reading it, and that means loss of information. Make your learning resources usable and accessible. Toni-Maree Savage, TAFE Queensland Brisbane You’ll likely incorporate graphics within your analysis and reporting process. In fact, you should consider incorporating graphics in two different ways: as a visualization tool to assist with your analysis, and as a presentation tool to clearly communicate the results of your analysis. Great infographic design can really get you noticed. It’s a powerful tool for communicating complex ideas efficiently. Mohit Garg, INS When formatting design elements on a page or slide, use the grid lines to line up those elements, whether they are text, images, tables, etc. This will create a clean, structured look and make for a clearer hierarchy of content. Kasey Dougan, WPS Health Solutions Simple changes can make a difference. The drop shadow added to the picture on the right lends it depth. Take a few extra steps and add depth to your image. It could be something like blurring the background, adding texture to a color background, or adding a bevel and drop shadow to boxes and buttons. This will separate content from the background. Phil Cowcill, Canada Department of National Defence The title is located in the most expensive real estate. Make sure that it has meaning and impact to make the audience want to pay attention. Judith Begoun, Zehren Friedman Associates 29 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Avoid a screen full of text. Text-heavy presentations drop learner interest quickly. Good design makes use of graphics and text, rather than text alone. The graphics should help viewers remember key items. It is good to balance out your text, graphics, and white space so that the presentation appeals to those viewing it. It’s also important to only use graphics that are relevant to the topic at hand. Line drawings, illustrations, and icons typically take less time for viewers to process. However, photos and more realistic images may be warranted, depending on how the images are used. Sometimes photos or realistic images are better able to illustrate what icons and graphics can’t. When designing, ask what you would want to see when viewing a presentation. Fewer words, more visuals. Jonathan Davis, Jenobi Pay attention to word groupings. When reading the text back to yourself, if you find you are taking a breath or pausing, that is where a new line of text should start. For example, don’t end one line with “United” and continue in the next line with “States of America.” Where feasible, keep concepts and phrases together. It makes for a much easier read. Dave Faldasz, ViaSat Consider the product’s goal. Consider who will be using it. Consider what your audience intends to do with it. Is it clear how to use the product? How does your user know it’s working? Is it engaging your users? How does it handle mistakes? Carolina Cerdas, SweetRush How do you find video content for your courses? There are many video sites that have many thousands of videos you can use for free or purchase. However, when you try to find one that is appropriate to your content and its objectives, you may find yourself saying, “Gosh, they have everything except what I need!” A few years ago, I had a project in which we needed to have teenage drivers learn the rules and dangers of railroad crossings. It would have been difficult to find appropriate videos, so we got permission from a railroad company to record video at a location where they guaranteed we could work safely, as no trains would be on that track. In addition, they provided a railroad employee who would lower the crossing bar and raise it again when we needed. We brought in some high school students and a convertible, and we hired a video crew to record the scene. The crew mounted cameras on the car to capture the actions of the students in the car, as well as a camera facing forward toward the railroad crossing. Additionally, cameras were placed on the side of the road. I indicated to the four teenagers that they should drive up to the railroad crossing and stop at a designated point. They did as requested, and the recording went off without a hitch. The crew then asked me where they should set up next. I told them, “Stay put. We’re now going to record them stopping at a different point, closer to the crossing.” They were surprised and said, “Was there a problem with the last scene?” I replied, “Not at all. We are creating learning scenarios, and the learner will choose where to stop the car. In each case, we want to show the consequences of that choice.” They smiled broadly and said they had never done anything like that, that all their work had been for linear videos, such as commercials or television shows. One of them said, “So, it’s like parallel universes, where different choices might be made!” It was my turn to smile broadly. “Exactly!” I said. Joe Ganci, eLearningJoe 30 www.eLearningGuild.com

233 TIPS Graphics and Visu De al sign 233 TIPS ON GRAPHICS AND VISUAL DESIGN Forty-Seven Tips on Using Graphics and Text Effectively Use graphics relevant to the concepts addressed on the page or screen to reinforce an idea, thus increasing the learner’s retention. Also, make sure the graphics are not too small, large, or numerous on the page or screen at any given time. Otherwise, they may increase the learner’s irrelevant mental load, which could jeopardize the intended outcomes of the training. Richard Butler, AT&T Use the right medium for the message: • Diagrams and animations convey conceptual relationships • Photos and videos convey context • Cartoons, comics, and graphic novels integrate the two • Text is for static language; audio is for language with dynamic visuals and/or context Clark Quinn, Quinnovation Be careful which colors you use for text in a course. Saturated colors can help with focus, but they can also cause issues with how text is read. For instance, saturated red text is hard to read. And if you put a saturated text color on top of a saturated color in the background, you can create “resonance,” which is very hard for the user to read. John Trest, Inspired eLearning 31 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Avoid using bitmap text in your graphics. Use separate authoring tool text instead to overlay text on top of your images, as the text will be much easier to edit if there’s a typo, if it needs to be changed, or if it needs to go to translation. Kevin Darbro, Dell Technologies Make sure you choose images that are high-quality. Higher resolutions mean that you can make the images larger without losing clarity. And don’t be afraid to use images as backgrounds! ThePatternLibrary.com has some great (free) images for you to use. Breana Hidalgo, Pasco-Hernando State College Minimize the use of text as much as possible, but use text to highlight and label when needed. By minimizing the use of text on your graphic, you ensure the text will be much more impactful. This also correlates with the modality principle. Brent Anders, Kansas State University When selecting graphics, I decide on a pictorial representation of the concept that is being described in the text. If I’m talking about how a group should interact in a specific manner, then the graphic should represent that interaction, whether it is a photo or a vector graphic that shows relationships. Placing a graphic just to have a graphic on the page is not an effective use. The text should be a complete concept that is easily depicted by the graphic on the page. The two together should allow the learner to grasp the important information being conveyed. Janet Bowen, JB Freelance I measure effectiveness through the achievement of learning outcomes. When graphics are merely for decoration, it is possible that we aren’t hindering student learning—provided those graphics are relevant. Adding irrelevant graphics, however, is going to cost you. While your student satisfaction scores may rise, their actual learning will suffer. (See Eunmo Sung and Richard Mayer’s article “When graphics improve liking but not learning from online lessons.”) Nicholas Rider, Indiana Wesleyan University How well graphics are implemented, how pleasing they are to the eye, matters. People are much more forgiving of other issues, such as technological flaws, if the experience is something they are enjoying visually. John Trest, Inspired eLearning Check your content and make any edits before you begin designing the visuals. Great aesthetic cannot make up for misspelled, confusing, or long-winded text. Breana Hidalgo, Pasco-Hernando State College 32 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN If you have a busy background, put a color stroke around any text you have. The stroke color should be a high-contrast color of the text—for example, light blue text with a very dark blue stroke. This will reduce eye fatigue for your learners. Phil Cowcill, Canada Department of National Defence Almost every image search engine, from Google to Flickr and others, includes a mechanism to search for content that is public domain, Creative Commons licensed, or otherwise available freely for commercial use. For Creative Commons, it is often as simple as giving attribution to the creator (read the license restrictions for details). But, while this content is free, it isn’t useless, bad, or low-quality. Some of it is exceptional. Some of it can inspire you. Some of it can be reused or edited in ways that enable your training content to succeed. So, even without a budget, you can obtain some exceptional graphics. If you do have a graphics budget or a person or department behind you, you can often find placeholder images that give your graphic creators a strong foundation from which to create your final image. By starting with a great placeholder, you can save yourself and them unnecessary round trips as they try to decipher your graphic needs. Bill Sawyer If you are animating text, don’t use SVG graphics. This requires a fair bit of processing. Use a PNG graphic instead. While the PNG file size is larger and will pixelate if you zoom in, it can be animated much more easily. Phil Cowcill, Canada Department of National Defence I created a resource for non–instructional designers to help them add some visual appeal to their documents. These are primarily procedural how-to guides. I call this document a “snippets page” because graphics can be copied and pasted to the document. Microsoft Word and PowerPoint have some really good graphic design capabilities that I feel do the job and are accessible to most people who do not possess advanced technical abilities. Elaine Glick, HCA 33 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN I still go back to CARP—contrast, alignment, repetition, and proximity—when I am looking at how I use graphics and text. It is a basic design principle, but incredibly useful when determining how to communicate your message, because ultimately, that is what your graphics and text are trying to do: communicate something specific to your audience. Whenever I finish creating something, I look at it and ask myself what the big picture is, or rather, what the main focal point is and what it communicates. If it isn’t communicating what I need it to, then I have gone astray and need to adjust. The last thing to remember is not to be afraid of white space or empty space. It isn’t necessary to fill every place with text or graphics, and in fact, this will generally hinder your message. Keep it simple and clean. Kaitlin Olsen, TransAlta Don’t forget to use plenty of white space! Learners can be overwhelmed or distracted if you have too much going on visually. While it might be tempting to use lots of “bling” in the search to engage learners, a clean space with complementary text is more effective. Tamara Owens, University of Tampa We all know that graphics enhance learning, memory, and application. The continuity principle is based on research proving that words and graphics used together are even more effective than one or the other alone. Margie Meacham, LearningToGo Always use some photos or video of people. People relate to people. Also, pay attention to diversity: gender, race, age, disability. You need to be inclusive to your audience. John Trest, Inspired eLearning If graphics don’t add to the text, they subtract. Absolutely avoid using “eye candy,” i.e., random graphics on a page just so there is an image. Classic eye candy is a generic stock photo of people in an office environment that doesn’t directly relate to the topic discussed in the text. It doesn’t convey the message in a visual way; in fact, it distracts from the message because it isn’t relevant. Examples of appropriately used graphics to illustrate text descriptions on the same page: • A photo of an object or action • A graph that precisely illustrates numeric values—and their relationships • A process flow with labeled icons and arrows that illustrates the process described by a bulleted list in the text • An animated sequence that illustrates something that changes over time • A screen shot of a software program with explanatory labels placed directly on the image, adjacent to the elements described, numbered if sequential David Perry, Ford Motor Company 34 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN If you don’t have access to a graphic design tool such as Adobe Photoshop, there are other tools out there, such as Paint.NET. It’s a free tool (donations accepted) and it’s very easy to use. When I have to make a quick edit to a graphic, I often use Paint.NET instead of Photoshop. It’s fast and offers plenty of features. Melissa Jordan, Inntopia Use graphics and text interchangeably to increase visual impact. For example, highlight important text in colorful blocks or use graphics to develop page numbers and headings. Challenge yourself to go beyond traditional design theory and tap into your individual creativity. Charlotte Morris, Pepco Holdings Using any more than three different fonts in your design can detract from the content, causing visual tension for the person reading or viewing your content. You should be thoughtful about the typography and make sure the various fonts and sizes you are using complement one another and are appropriate to the application (e.g., only use Comic Sans if you are working in a comic book style). Janet Wright, Regence Don’t shun clip art! Iconic graphics (i.e., graphics meant to represent an object, word, or concept, as an advanced signal to the reader of what kind of content is on the page or as a visual mnemonic device) are much easier to create using clip art than using photos. If you’re trying to help the learner remember, say, what a “level premium billing option” is, a clip art animation of a carpenter’s level being pushed down on stacks of money of different heights to make them all the same height is going to do a lot more to help the learner remember this concept than a photo of a smiling business person or a photo of a premium bill. And, if you can’t find a pre-made image that entirely suits your needs, it’s much easier to create the image you need with clip art, especially if you use vector clip art (like WMF files), which you can ungroup, edit, and combine with other clip art files using a tool as simple as PowerPoint. While some may consider photos more “professional” or aesthetically pleasing, don’t use them at the expense of the actual purpose of your eLearning, which is to have the learner come away remembering what you were trying to teach them! So, unless you can find or create photos that achieve that purpose (rather than just serving as gratuitous decoration, which is actually detrimental to learning), don’t be afraid to use clip art. Just look for a style you like (there are plenty of more modern-looking ones) and use it consistently throughout the course. Laura Gillenwater, Sun Life Financial 35 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Use simple images with clean lines, one or two fonts, and complementary colors. You want to enhance the content, not distract from it. Jennifer Gifford, Vidant Health Learn about typography and how you can use it as a graphical element in your designs. You can now take advantage of fonts on the server side, which allows you to embed numerous fonts to create the best look and feel for your viewers without having to worry about installing the fonts on their device. If you are new to fonts, you can check out an online class, read a great overview article, or learn more about Google Fonts. Nick Floro, Sealworks Interactive Studios You don’t need full sentences, but you do want visual support for attention in text; white space (indenting, bullets) and highlighting (bold, italics, color, etc.), when done elegantly, support cognitive processing. Clark Quinn, Quinnovation If your visuals are similar in layout from screen to screen, “duplicate” to create a new screen rather than starting over and guessing at item locations. Even a single pixel shift from one screen to the next can be a distraction and annoyance for some of your audience. Do a rapid flip-through to identify and correct where visual shifts are happening. Dave Faldasz, ViaSat Use Illustrator and vector graphics when possible. They can be exported out with transparency and scaled smaller or larger depending on graphic needs. Lawrence Kevin, Ruckus Wireless Use high-resolution images (3,000-plus pixels) that enhance context as backgrounds. Alexander Salas, StyleLearn I am tired of seeing presentations where each slide has three to five bullet points and a clip art graphic to the side that does not add value and is just there to fill white space. Those bullet points should be your talking points. PowerPoint presentations can be creative! Here’s an idea on how to segue into a new topic when sharing a PowerPoint presentation: Have the entire slide be a picture between different topics. The picture should tell a story related to the next area of focus in the presentation. Ask the audience leading questions about what they see in it, and use it as your new topic introduction. No one needs to see your outline if they are already familiar with the learning objectives. Katie Delgado, Association of Washington Cities 36 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN When designing a course, if you are using narration with your visual learning, try not to have the narrator read the text on the screen verbatim. This can cause cognitive overload, and the brain finds it very difficult to process: “Do I read or listen?” (This does not apply to closed captions, of course.) Try using the visual elements to complement the narration instead. Use text for the important highlights. Anna-Leiza Barthorpe, British Columbia Provincial Government With task- and concept-oriented training, the graphic (photo, line art, screen shot) of the topic subject anchors the learner’s visual perspective while reading the description text. In an instructor-led delivery, this content would be part of the participant guide with the instructor projecting the graphic on the screen and presenting the text procedure for the topic. In an eLearning delivery medium, the graphic would be enhanced with some animation that augments the text narration. The animation could be a simple spotlight, arrows, boxes, or zoom effect to focus the participant’s eyes on the area of the graphic that corresponds to the task, along with syncing the animation with the narrated text. These are just variations of classic “show and tell” storytelling. Both instructor-led and eLearning deliveries would then contain content that supports three methods of learning: visual, textual, and auditory. Rick Broquet, consultant For slide decks, use nothing less than 30-point font. Don’t use sentences; they compel you to read them when presenting. The fewer words, the better. Peter de Jager, de Jager & Co 37 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Use colors with effectiveness! Georgia O’Keeffe said, “I found that I could say things with color and shapes that I couldn’t say in any other way—things that I had no words for.” Colors have common associations, although they vary culture by culture: • Orange symbolizes energy. It’s an ideal color for eLearning if you want to spark emotions, adventure, and excitement. • Blue keeps calm and serenity and can evoke reliability, authority, and loyalty. • Yellow is associated with optimism and happiness. It’s an excellent choice for eLearning courses requiring a little more, such as modules for a monotonous legal or financial subject. • Red symbolizes urgency, passion, and excitement, too. It attracts attention, so it is perfect for navigation icons, essential instructions, and other important eLearning course elements. • Green symbolizes vitality, life, and personal growth. It’s a good color for business training courses designed to increase a company’s profits; dollars are green! • Rose evokes peace, compassion, and love. It is the color of femininity and understanding. But, as with the green, everything is in the shade. • Violet symbolizes royalty, intrigue, and spirituality; it’s an eye-catching color that can surprise and attract the attention of the learner. It can accentuate an element to draw attention. • Brown is associated with nature, simplicity, honesty, and reliability. It’s perfect for simple and direct eLearning courses because it does not distract the learner from the main subject or tasks. Pierre Hauert, OTONA SA Take care to make your visuals reflect the content you are serving your learners and the context in which you’re having them learn it. Too often, we see eLearning that looks wonderful but is all style and little substance. Focus on the content you are including, then choose images and other visuals that reflect the content. For example, it’s no use to have content focused on handling chemicals correctly and then use visuals of people sitting in boardrooms or artistically beautiful abstract art. There’s nothing wrong with using beautiful imagery as long as it doesn’t overpower the content itself, especially if it helps further highlight the content. Let’s say that you are having airport gate agents learn best practices in dealing with difficult passengers. Do you want your learners to feel as if they were at a real airport gate as much as possible, making it easier for them to remember the right steps to take when they are on the job? Take good-quality photos or have someone draw a high-quality image of the setting. Keep the rest of the screen nice but simple. Alternatively, you’d be better off having the gate agent and customer on screen in a completely empty room with nondescript white walls and an airport gate counter between them. This has been shown to work very effectively, even when there is no imagery around the people and counter. Why? The learner’s eyes won’t wander to look at the pretty border or awesome background image. Learners will focus on the only screen elements they can: the actual content. I’m not suggesting that a bare white room is better than imagery that reflects the place in question. Rather, I’m saying that it works better than images that do not acclimate learners to the location in which they’ll be doing their jobs. Remember: Focus on content first, then on the rest. Images, navigation buttons, audio, video—all should help with, not detract from, learning. Joe Ganci, eLearningJoe 38 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN On a Mac, use Shift-Command-4 to make a selection from a screen, rather than making an entire screengrab that has to be edited down to the portion you want. John Carter, John Carter Photography The F-shaped layout pattern is really helpful in learning how to design for people who skim. Users tend to start at the top left of the screen and make their way through the first line; then they proceed to read one- third at the next anchor point, and then start looking at the top of each section. This is how people tend to skim through materials. Segment your materials appropriately with eye-catching headers—people need to have compelling gateways into your content. Crystal Rose, The eLearning Guild My tip is to always keep cognitive load theory in mind when designing a learning resource. Think about ways to organize information to reduce extraneous cognitive load in order to increase germane load, which will result in a better learning outcome. The simplest approaches include chunking related concepts, triggering existing schema through a purposeful menu organization, and gradually releasing content onto a page (this aligns with including digital gesture to enhance meaning, too). Emily Hamilton, University of Sydney When you need to quickly crop pictures, remove backgrounds, or group items together to save as a new graphic, Microsoft PowerPoint is oddly effective. Todd Miller, Goodway Group 39 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Often, eLearning tends to be designed from the perspective of a linear presentation and neglects the concept of motion. Motion helps to establish narrative and engage the learner, which goes beyond simply displaying information on a slide-by-slide basis. In film, there is a concept called the “180-degree rule,” which mostly helps to establish consistency of narrative when moving the camera or perspective of the audience. If done correctly, it is possible to break this rule for various narrative effects. This is sometimes called breaking the 180-degree line or the “fourth wall,” in which the subject matter directly engages the audience and pulls them into the narrative. This can be especially useful in eLearning, as it is usually a tool for breaking down larger concepts and providing exposition without disrupting the flow of the narrative. Jonathan Davis, Jenobi Intentionally use color in text to evoke mood and meaning. A simple application for any project is to highlight key words in a different color. For example: • Red—anger, caution • Yellow—happy • Green—environment • Blue—sad, calm, serene • Purple—mystery Danielle Wallace, Beyond the Sky Put your graphic on the left side of the page, especially if it is a chart or graph. Viewers’ eyes will naturally move to the graph, and they will begin to analyze it. If you have bullet points that go with the graph, try not to state the obvious; rather, use text to point out the meaning of the data. Kely McKeown, Genomic Health Use single templated screens with fixed positioning. My tip is a layout and content design principle that, although effective and efficient, has been somehow tossed by the wayside in recent eLearning software trends. It is primarily born of a common-sense approach to data and content delivery that incorporates a single-screen, templated approach to layout design. Let’s take, for example, vocabulary building and assume that there will be 5,000 or more words of varying sizes to be displayed. A student fishing through displays that are built and laid out “top to bottom” would inevitably have the synonyms section occur at varying positions within that page, depending on the amount of text and data associated with each individual word; however, with the single-screen and fixed-position display concept, the synonyms section would fall at the same exact position for every single word displayed, thereby making that particular student’s quest to compile synonyms predictable and far more efficient. Craig King, TeachTek3k 40 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN We know a picture says a thousand words, and we should strive to eliminate 20 percent of text and replace it with pictures to convey the messages and feelings. An easy way to achieve this for non-artists is to repurpose online animated video platform tools. Simply use the built-in backgrounds and characters to easily create an entire scene. Then use a screen capture to save your image as a JPG. This allows you to “draw” and customize characters and their expressions—without any drawing ability! Danielle Wallace, Beyond the Sky It is important to choose an image or graphic that is relevant to the topic discussed. Chantal Rioux, Manulife Ideally, graphics and text work together to tell a story. If the text is about an anchor, show an image of how it is used as opposed to a simple image of an anchor. Doug Belding, SweetRush Be mindful in choosing types of graphics. Avoid clip art entirely. If your project still looks “off,” analyze the types of graphics you’re using. Are you mixing illustrations and photographs? Pick one! This simple choice will instantly make your design look more cohesive. Breana Hidalgo, Pasco-Hernando State College 41 www.eLearningGuild.com

233 TIPS Graphics and Visu De al sign 233 TIPS ON GRAPHICS AND VISUAL DESIGN Thirty Tips on Keeping Things Simple and Knowing When Not to Use Graphics Avoid cognitive overload. It’s tempting to put everything on the screen all at once, but a learner can only focus on one thing at a time. So, be judicious on what you show and when you show it. Also, don’t repeat the exact text that is read aloud via voice over narration in the same text on screen. It can actually diminish the efficacy of the point you are trying to make. In short, keep it simple in bite-sized knowledge chunks. Kevin Darbro, Dell Technologies Simplicity rules. Speakers may find a compelling photo sufficient to remind them of key training points. In eLearning, a series of simple layers and slides will out-communicate a complicated one. Crisa McCarty, Aflac Graphics should be included for a reason. When I was starting out as a second-year college student, I had Elmo on my website. I wasn’t brought up on Sesame Street (I’m from a different culture), but I really liked that creature (along with the one sitting in the trash can). Well, Elmo was jumping up and down on the page. Although the site itself was helpful to my users, Elmo shouldn’t have been in the middle of the page dancing. • Use graphics for a reason (they should fit with the theme, your topic, and the humor). • Be careful with any kind of moving objects on your sites and in your eLearning. Ask yourself three times if they help. Ask yourself three times if they are distracting. • Maintain a library and a link of sites with good free graphics. The E-Learning Heroes site has a ton of suggestions. • Show empathy to the user. A clear, simple, elegant page may be your answer. Keep it simple! Irene Knokh, University of Michigan Hospital Ask yourself: “What action should the learner take after viewing the design?” Do you want them to remember something specific? If so, how can you make it memorable enough? Humor or emotion? A strong visual image? Very large or bold text? Color? White space (not necessarily white in color)? Interaction? Then, ask yourself how that balances with the rest of the content and design. Establish visual hierarchy, maintain consistency, and remember that less is more. Jennifer Jesse, D10 Interactive 42 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN While it is true that a picture is worth a thousand words (or more), it is often equally true that your image and your words conflict. If you don’t need an image, don’t use it. Don’t simply add one to make the layout attractive. You can use formatting and other text effects to accomplish the same thing with less effort. When you find an image necessary, be absolutely certain that it doesn’t conflict with the underlying text. If there is conflict, you will have to revise the image or the text to resolve that conflict before you release your content. Bill Sawyer I once heard a quote from Coco Chanel along the lines of, “Put on all your accessories and then take the last one off.” I have found this extremely applicable to visual design. I have always found it helpful to look back on a design and ask, “Do I really need that?” Mariann Foster, Intacct When providing small chunks of information, either individually or as part of a larger bulleted list, it is usually not necessary to include a graphic or other images. This could complicate the design and may not translate well to devices with smaller screens, such as smartphones. Michael Pack, MITRE Corporation Use visual effects and graphics purposefully—where these refer broadly to illustrations, photographs, clip art, icons, charts, graphs, tables, videos, banners, and fonts—to support learning outcomes. Use visual effects and graphics thematically to unify a design or message. Select illustrations, photos, and videos carefully to ensure they are age and audience appropriate, and inclusive: free of unintended gender, sociocultural, ethnic, religious, and other biases. Stephanie Johnson, consultant My biggest pet peeve is seeing text used in excess when voice-over is included. A picture says a thousand words, so if you have voice-over, then words are needed only to highlight main points. Slides or graphics that are overly wordy are just plain distracting. Tereza Marks, CBA When chunking multiple topics, I have enjoyed using different shapes and colors consistently to present the material. Salicia Pultz, OpEx Now Don’t feel like you need an image or graphic on every presentation slide. It does not provide any real value to a presentation. Consider this: How will this image or graphic help the user remember the content on the slide or presentation? While aesthetic appeal is essential, haphazardly placed graphics will lead to cognitive overload by wasting more of your users’ mental energy in processing irrelevant images and graphics. Eric Rowland, MAXIMUS 43 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Use imagery only when it supports the content or makes complex content easier to digest. Doug Belding, SweetRush A key goal of a lesson or topic introduction page or paragraph is to help the student transition from whatever they were doing a minute ago to the lesson ahead. When designing the introduction, use just a single image that represents the lesson or topic well and invokes curiosity, either by itself or from accompanying text. David Jaeger, Florida Gulf Coast University A consistent, strong typography and color scheme is critical to developing a design aesthetic and can help you reduce the clutter of extraneous graphics and images. A bold, unique font or combination of two fonts can often stand on its own as engaging design. Theresa Decker, Samaritan’s Purse Eliminate superfluous words. You do not want or need complete sentences in a graphic. This one simplification concept saves significant graphic space, improves comprehension and attention, and reduces viewer read time. Dave Faldasz, ViaSat When it comes to the visual elements of your training, ask yourself, “How does this help the learner? Why is it critical to this training?” If you cannot come up with a justification, delete it and move on. Raeesa Khan, AOL I always ask myself whether or not a particular image will add anything meaningful to the deliverable. Does it help tell a story or clearly illustrate a concept? Does the image help reinforce the message I’m trying to convey? Does the image distract from important text I have onscreen? If I can’t answer yes to these questions, the image is most likely a decoration or a distraction, and it should be removed or potentially replaced by a more relevant image. Julie Allen, Arizona State University Although I do use graphics quite a lot in my role as a learning developer—in webpages, instructional guides, virtual classroom sessions, etc.—I try to remember to be conscious of accessibility. Accessible documents and webpages should not have irrelevant or superfluous images, only those necessary and relevant—and those should include tag descriptions, header types on text and tables, etc. One thing that is extremely hard to convert to an accessible format is the flow chart. Having attempted to convert these into textual information more than once, I now try to avoid using them at all; and if I do need to use them (for a process, for example), then I start out with a text description first and work from that. Anna-Leiza Barthorpe, British Columbia Provincial Government 44 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Make sure you understand how the brain interprets graphics. Read Connie Malamad’s Visual Language for Designers. Hyacinth Steele, Queensland University of Technology Not all text needs to be represented on screen! This is especially true if you are narrating or presenting information in person. Use a combination of words and images to present information visually, highlighting the main points. Maggie Cowan, Brown & Brown Insurance Whether you are designing an entire eLearning system, a simple PowerPoint slide, a marketing brochure, or an eBook, you should use graphics to support only one idea or one concept at a time. The graphic shouldn’t detract from what you are trying to say to your audience but should help them come to the same conclusion or realize very quickly the point that you are trying to make. If you want to use a lot of graphics, such as a collage of pictures, then try recoloring them to one color or grayscale with a color overlay that perhaps matches the theme of your presentation. Then pick one picture that best illustrates your message and leave it as is. Looping GIFs or slide shows can give your audience the message very quickly, but they can be extremely annoying when not handled correctly—like a loud party next door. Try keeping them on a page of their own or having them stop after a minute or so when the viewer has had enough time to watch. Then give viewers the opportunity to restart again if they want to. Being good at using graphics is like being a good conversationalist. If a picture is worth a thousand words, then keep your message short and to the point. Patricia Stangenberg, Home on the Grange Media Every element in your design needs to reinforce learning objectives or learners’ needs. Remove any additional ornamental elements. Laura Murillo, SweetRush Sometimes a picture is worth a thousand words, but if the picture does not directly relate to your topic or content, viewers spend more time thinking about how the picture makes no sense than learning the content. Janet Wright, Regence No matter how good you think your content is, the end result is what your customers think! Alan Chain, independent As archaic as it may be to some, make sure your information is formatted for printing. It’s an option available for those who may prefer to learn that way; do not discount it. Just include it by default, and let people know it’s already formatted so they can print it. Diane Wilson 45 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Visual design is a form of communication. Purposeful use of graphics will convey meaning. Irrelevant graphics are simply noise. Janice Low, Counter Design Studio Graphics, illustrations, and animations are excellent ways to reinforce (or even lead) instructional content in text and audio. There is rarely a situation in which a graphic is not helpful. It may help to set a scenario, provide a relational diagram, or just maintain the tone of the content. However, keep in mind its purpose. Avoid using graphics just because a style guide says they must be on every screen. Avoid using too many graphics on one screen and diluting the reinforcement you are providing. Brendan Strong Use page numbers that are large enough to be seen, so that the audience always knows what visuals you are on, but not so large that they distract from text in the visuals. Judith Begoun, Zehren Friedman Associates Focusing users’ attention to specific areas of the site with moderate use of visual elements can help your visitors get from point A to point B without thinking about it. Carolina Cerdas, SweetRush Go with a white background for a minimalist (yet rather clean) design. While this may sound simple, it’s a tried-and- true best practice. This will come in handy when selecting graphics that already have a white background. In addition, it’s easier to use a white background than to select a desired graphic and make it transparent. Richard Butler, AT&T 46 www.eLearningGuild.com

233 TIPS Graphics and Visu De al sign 233 TIPS ON GRAPHICS AND VISUAL DESIGN Fifteen Tips on Staying Consistent and On-Brand When developing eLearning modules, it is always important to get out in front with branding and styling standards. Having a template and/or style guide that models those elements is where I like to start. Nothing quite polishes off your product like paying attention to, and integrating, those little details—font sizes, font family, colors, margins, line height, headings, indents, tone of voice, etc. Mismatch any of them, and it’s going to feel off. Unfortunately, it is much more tedious to pinpoint and remedy these issues after the fact. Nicholas Rider, Indiana Wesleyan University Decide on your color scheme and stick to it. If you don’t plan it out from the beginning, you can end up with all kinds of crazy in your design. Kathy Zottmann, Mortgage Bankers Association Color palettes are a critical component of every eLearning project—especially when there is more than one artist or when you have follow-on projects with the same client. Color palettes help maintain consistency throughout any project and streamline the workflow. I recommend assigning a designer to create a good color palette at the very beginning of the project. This standard set of colors should be built into every template that is used by the team. The color palette should offer a wide variety of colors along with light, medium, and dark versions of each color. The light colors should be light enough to allow black or dark text to be legible, and the dark colors should be dark enough that white or light-colored text is legible. To be sure that the contrast between text and background is OK, download a contrast analyzer tool (here is a good one). It is also important to research the project you are working on to see whether certain colors are required to be in the training. These required colors should also be in your color palette. Don’t forget to brief your team on the existence, importance, and use of this very necessary tool. Happy creating! Tina Turner, SAIC Identifying a color scheme or color palette with a few distinct colors (two to four) is helpful when establishing a consistent, on-brand design. Using too many different colors can be distracting, and it’s very difficult to remain consistent in their usage. Michael Pack, MITRE Corporation To help with consistency, use Artboards in Photoshop (Layer > New > Artboard). This will allow you to have multiple images (canvases) in one document. Phil Cowcill, Canada Department of National Defence 47 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Aligning objects that appear across multiple slides can be frustrating. You can fine-tune locations of text and graphics in PowerPoint and Storyline by using Ctrl and arrow keys to nudge these elements with precision. Captivate offers the ability to specify X and Y locations within Properties and Options. Don Bolen, dBolen & Associates Always work with style guides and global files, get your client’s approval before starting production, and make sure all designers apply these standards to all your deliverables. Laura Murillo, SweetRush When designing your learning materials, create a color palette of three to five colors that reinforce either your organizational culture or the theme of your learning event—and stick to it! Create a slide or layer in your content development software that visually displays your color palette, and use a color selector tool to match colors from that layer as you design your materials. Also, use guides for everything you create! This will ensure consistent margins, word spacing, white space, and graphics placement. Trying to “eyeball it” will always result in missing something because you are staring close-up at your screen throughout the process. Theresa Decker, Samaritan’s Purse Make a custom palette using your brand colors, and compliance is at hand. If your logo is required to be in a specific space, combine the palette and master slide. Crisa McCarty, Aflac Keep the same design (stick to a specific color palette and style) throughout the eLearning project to keep it consistent and streamlined. Chantal Rioux, Manulife 48 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN I have found that when designing online courses, instructors must have consistent labels and formatting of expectations for students throughout the course. In my courses, I use modules that are labeled with topic and end date. Within the modules, I create one page that has two titles on it: Content and Tasks. All reading and videos are listed under “Content” and hyperlinked. All assignments for the module are listed as “Tasks” and are also hyperlinked. Simplicity, consistency, and accessibility are key components of online design. Amy Rottmann, Lenoir-Rhyne University Branding information and layout style need to be decided before the document is created. My recommendation is seek agreement and approval, which requires signatures from all parties. Jo Ann Froman, Goodwill Industries Manasota Try to treat a training program like a marketing campaign. Create a visual theme and use it throughout your learning materials. It could be as simple as a specific combination of colors. Whatever you choose, you want people to recognize that a piece of learning material is part of the same training program as another piece of learning material. For example, if a learner takes a web-based training with a specific design, and then reads a job aid with the same design, the learner will immediately understand the job aid is related to the material they learned in the web-based training. A visual theme adds context to the material, which helps reduce cognitive load for the learner—and that is always a good thing. Jill Mohler, Moffitt Cancer Center Be sure that your text and graphics (illustrations, diagrams, etc.) have a similar tone. It will be distracting for learners if you use formal, jargon-heavy text but simple, cartoon-like illustrations—unless the purpose is to be funny! Brendan Strong Reference the style guide often, and learn the boundaries laid out within it. Doug Belding, SweetRush 49 www.eLearningGuild.com

233 TIPS Graphics and Visu De al sign 233 TIPS ON GRAPHICS AND VISUAL DESIGN Seven Tips on Incorporating Design Trends into Your Work Most courses end with a list of links to resources. Persuade the learner to click on the resources by creating a pop-over called “Recommendations for You.” Format the resource links as thumbnails, and you will then have a “customized and personalized” list of recommendations similar to Netflix’s or Amazon’s personalized viewing or shopping experience. To take it one step further, you can tie the recommendations to certain quiz questions that are answered incorrectly or overall quiz scores that need improvement in certain areas, thereby turning your course into an adaptive learning experience. Karen Wondergem, West Coast University By all means, find free or inexpensive templates for your rapid eLearning software. But don’t just drop them into your work! Not one of them was built with your office’s look and feel or instructional needs in mind, and using them “as is” does the opposite of what you intended, i.e., not to look amateurish. Instead, download the template and dissect it for the variables, triggers, etc., that give it the effect that caught your eye. Then apply those elements to your existing work or, at the very least, use your company’s color scheme and fonts. Jay Shuck, Ecolab It’s very easy in Photoshop to make a 2D logo into a 3D logo by extruding it. This tool is found under 3D > New 3D Extrusion for Selected Layer. Phil Cowcill, Canada Department of National Defence Read Ruth Clark’s Building Expertise. It is all there. There’s no single tip that will work globally; it depends on what you are trying to teach, the expertise level of your audience, etc. So my best tip is: Read this book three times, take notes, mark the information down, and apply it. Susan Skinner, e-velopment 50 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN One way we keep our courses fresh is by gleaning inspiration from another industry with similar objectives and challenges. Web design is a very relatable industry. Like instructional designers, web designers must continuously evolve to make their audience remember what they want them to remember and to encourage focus on the main points of a site. We also have to consider constraints of space and time, and we have to be able to measure effectiveness. Take a look at websites that feature award-winning designs. Look at the typeface, color schemes, navigation, and menu design to see if there is a new trend or idea that you can use as inspiration for your next project. Additionally, the web design industry has a strong handle on the increasing demand for visual storytelling, and there are many websites that compel users to explore the contents through storytelling and compelling images. They may use simple graphics or beautiful photography, but either can be powerful in increasing the engagement of the learner with your content. Laurie Goslee, BKD As designers, we are often overloaded with all the changes that are occurring in our industry, from new technologies to new design styles to new ways of conveying text. One design tip that is quick and easy to remember is the value of illustration—which is often thought of as a “cartoon” look. Why is this impactful? Well, take a moment to think about the range of photographs and images that surround us every day: selfies, Snapchat, Facebook, billboards, movies, YouTube. Photography dominates our professional and personal lives. For this reason, illustration stands out. It is visually different from images that participants see every day. The result? A more engaging training. Quick tip: Maximize your illustrations to convey your message, and add minimal text. Text should only complement the visual. Remember, when it comes to text, less is more! Lisa Von Bargen, TEKsystems I tend to do a lot of sketching early on, but other directors may have a different approach and get similar results. Continue to learn from one another and share! Shane Donahue, SweetRush 51 www.eLearningGuild.com

233 TIPS Graphics and Visu De al sign 233 TIPS ON GRAPHICS AND VISUAL DESIGN Ten Tips on Getting Buy-In from Stakeholders Stakeholders need to know that you are working both for their best interests and for those of their clients. When designing interfaces and interactions, make sure you aren’t adding a burden to one group to benefit the other. Some will argue that there is always a cost and that not everyone can win. While I understand this may have to happen in some situations, I disagree that it has to be the norm. Creating value for all parties is both desirable and possible in most cases. Having the patience (usually with yourself) and ingenuity to get to that solution is something you will need to own. Nicholas Rider, Indiana Wesleyan University Develop a style guide that is approved by the organization or the stakeholders. Jo Ann Froman, Goodwill Industries Manasota Stakeholders are among the most important people in any training project because without them, there would be no reason for the project to even take place. If there’s one piece of advice you take with you about stakeholders, it should be “Listen.” Take the time to meet in person where possible and have real conversations with your stakeholders, regularly; ones where you really listen! Ask questions, and forget about feeling self-conscious or coming across as naïve. People will respect your openness and appreciate your honesty when you seek to understand their priorities and interests. Learn whatever you can about them and from them, and most importantly, find a way to understand their needs. The information they provide you with and how you use it is invaluable, and will be integral to the success and long-term benefits of your work. Sadly, in many projects, training is treated like an add-on that gets a last-minute invite to the party. IDs are often discouraged to take the time to meet with stakeholders but told instead to just “get on with” designing. On every project I’ve ever worked on where the stakeholders were fully engaged, the results of the training were outstanding and genuinely made a difference to the participants and to the organization as a whole. Not only that, but the training delivery continued beyond the bounds of the project and often led to further training projects as a result. Be courageous, build relationships with your stakeholders, and seek to understand their priorities. Their commitment and contribution will be one of the most valuable assets you have in your design tool kit. After all, even with all the models, systems, and structure in the world, training is really about the people. Laura Hesketh, Tree Frog Training 52 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Effective storyboarding can really help gain buy-in from stakeholders. Storyboarding brings ideas to life that might be harder to explain verbally. Salicia Pultz, OpEx Now Create three versions for difficult stakeholders. Design the first iteration. Create two different versions that are to the “left” and “right” of the first example. Then they can provide input on the extremes and may choose the middle ground. Lawrence Kevin, Ruckus Wireless Use focus groups to determine what learners take away from your graphics and message. Sharon Doughten, Cuyahoga Community College Stakeholder buy-in is a common concern for learning developers, particularly when innovative concepts are being introduced. We find it critical to involve stakeholders at a very early stage in the design process, even at the brainstorming stage. We have found that traditional brainstorming around a table often results in dominant characters articulating their ideas better than others and hence securing their ideas for a learning project. To counter this, we use more creative processes for brainstorming, such as 6-3-5 Brainwriting. Techniques such as this ensure that all levels in the organization contribute and have their ideas considered on a level playing field. Target learners can also be involved in this process—if stakeholders hear their passion for a potential solution, the stakeholders are more likely to support it. So use more creative ways to start your learning projects to be confident about their potential success. Richard Hyde, Learning Pool Asset production for learning material requires resources, and often, stakeholders need persuading that it is an expense worth paying for. One approach I now take is to sell the idea that digital learning assets can be repurposed to also help sell the product (course, workshop, etc.). For example, an interactive digital asset will contain many individual graphics that could be used for shout-outs on social media or for inclusion in business presentations. As a manager, I find it is very much my role to help stakeholders grasp the benefits of investing in the development of excellent-quality visuals and graphics, by understanding that they are always considering the bottom line. Michelle Boardman, University of Derby Online Learning Insist on a single point of contact for client approvals. Working only with a committee and syncing the conflicting feedback would take much more time and make billing and scheduling more difficult. Mike Beaulieu, GP Strategies When pitching a concept or idea to clients, use words that the clients used in the kickoff to show them you listened and to reinforce the decisions made. Doug Belding, SweetRush 53 www.eLearningGuild.com

233 TIPS Graphics and Visu De al sign 233 TIPS ON GRAPHICS AND VISUAL DESIGN Thirteen Tips on Testing for Quality and Ensuring Instructional Integrity Make sure any content you present is grounded in peer-reviewed research. Anyone can write an eBook, but a quality eBook takes a team of thoughtful, well-versed designers who know why things work instead of relying upon anecdotal evidence and opinion. Mel Edwards, Purdue University When designing materials to be used online, remember that they may be used for years in the future. Thus, if you are going to use graphics from an outside source like a text or website, that copyright might not be an issue now but may be in the future. I recommend trying to create as many in-house graphics as possible. Otherwise, you may have to redesign materials (in part or in whole) in the future. This is extremely important if you’re using a text in an educational setting. You may have permission to use the graphics now, but if you stop using the text or upgrade to a new edition, that might change in the future. Tereza Marks, CBA Your work should always look intentional. If it looks like you made a mistake, in your viewer’s minds you did. And if you made an error in one area, maybe they can assume you made a blunder in another—now your training loses its credibility. It may only be caught subliminally, but it matters. That hesitation a learner experiences will cause them to lose their focus. Lisa Nicholson, Standard Insurance Company Share the draft of a learning design with a small but trusted test audience prior to rollout. The audience can include individuals such as stakeholders, subject matter experts, or senior-level personnel. Review their feedback and apply elements of what is constructive to develop the final product. Charlotte Morris, Pepco Holdings Consider doing at least basic usability testing of your materials to evaluate your use of graphics—even just looking over a user’s shoulder as they use your materials. I once had a user who clicked repeatedly on blue text in a screenshot graphic, thinking it was a link. I changed the color of the text in the graphic to fix that issue. David Perry, Ford Motor Company 54 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN When reviewing content and functionality for edits, if possible, take a one- to two-day break after your last development day. I find taking that small amount of time allows me to be more meaningful in my review. Michelle Vilamaa, independent Designing a logo or branding? Do your up-front research! Do your best to minimize or eliminate duplication of existing registered logos. I once worked on a team creating a new logo for our group, then I needed to step away from the project. About six months later, I happened to stumble across a nearly identical design used by a company entirely outside our line of business. We focused on a “curriculum design” message, and the image we were refining was nearly identical to that of a trucking and transportation firm. Terry Follmer, Second Opinion Learning Instructional integrity is key to delivering a consistent and meaningful piece of learning. With that said, focus on visuals and graphics that keep this integrity in focus. This means less is sometimes more if you are just trying to create a visual representation for a definition. Kelsey Rodgers, Irvine Company Typically, an organization has one general IT platform. However, one must check and test across multiple platforms to ensure cross-platform functionality. For example, some workers who work remotely in the field may need to save things and work offline vs. being connected to the Internet. If that can be arranged, it will help those who have limited access. Offshore workers and remote field workers (think oil fracking in remote North Dakota) all need information, but many nice, sharply designed systems will not work on their limited bandwidth! In addition, always test on a Macintosh, as often there are a handful of Mac users while everyone else is on a Windows platform. Also, check for mobile usability, both on iPhone and Android. With the popularity of BYOD (bring your own device) policies, there is wide variance in the phones used. One last step is to test on a system that is not company-supplied! Use a personal computer to view the site. If you have remote workers, it will provide perspective on slower networks and slower (less RAM), older computers running Windows 7, Windows 8, and Windows 10. Very few companies are exclusively using one standard platform, so plan accordingly. Diane Wilson There’s a couple of things to remember when testing for quality and integrity that most designers never think of. Always remember who your customers are—or who your customer’s customer is. You have the knowledgeable end users, the afflicted, and the oblivious. The knowledgeable users don’t know what they really need to know, so give them more value. The afflicted have a problem, and you need to try to solve it for them. The oblivious don’t even know they have a problem, so use every resource to ensure your solution is easy and informative, and bring them to a happy conclusion. Ken Weatherford, Technical Writer Training 55 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN When starting to design a new learning website from scratch, I’m a great believer in paper-based clean wireframes. I’ll start with this first—to get an idea of the optimal layout—and storyboard test it with some users (or colleagues). I have found that this simple first step really informs the layout, which in turn dictates the visuals and design of the pages. It’s much harder to unpick a design if user testing is carried out after the initial design stage. Michelle Boardman, University of Derby Online Learning Review your work from the point of view of the end user, and ask yourself if this would be satisfactory to you. Doug Belding, SweetRush 56 www.eLearningGuild.com

233 TIPS ON GRAPHICS AND VISUAL DESIGN Know what communicates to your audience visually. I am a learning architect and not a graphic designer, but I apply a technique that I routinely use in learning development to validate visual design choices for my projects. This is basically an extension of the all-important “know your audience” dictum that is so critical to get right if you want to provide a meaningful learning experience. The technique is simple and can be done quickly. After I share an item for review, I ask two questions: (1) What did you like? (2) What would you change? I ask these questions to target audience members in person or, when this is not possible, remotely via phone, email, and sometimes surveys (when the visual is particularly important, e.g., a program banner). So that this is not off-putting to the busy people whose opinion I value, I let them know that I would like a quick response that will require just a couple of minutes. I also try to get responses from people who represent different geographic locations, levels of experience, age groups, etc. The feedback is always interesting, sometimes surprising, and, more times than not, I will update or even replace a visual because of what I’ve learned. Applying this approach has certainly improved the overall quality and, especially, the storytelling value of the visuals I use in my learning solutions—all with minimal effort. It’s a simple technique but one that, in many situations, can add a lot of value. James Goldsmith, Accenture Join The eLearning Guild Today for FREE! We know that learning professionals are constantly seeking best practices and cutting-edge techniques to help create better learning experiences for everyone. We want the Guild to be your first stop for eLearning information, networking, and community, and that’s why membership in The eLearning Guild is FREE. DemoFest Archive Webinars Select eBooks and Conference handouts Learning Solutions white papers and session videos Magazine Supplier and product Newsletters TWIST Blog Search for jobs and And more... directories resumes on the Job Board www.eLearningGuild.com +1.707.566.8990 57 www.eLearningGuild.com