Instructional designers are frequently expected to create learning materials such as infographics and presentations to convey instructional messages, making visual communication skills crucial in their careers (Ervine, 2016; Kuba & Jeong, 2023). In addition, visual communication is among the top five skills for instructional designers in higher education. Sub-skills such as design principles and media creation are ranked the highest on a scale from unnecessary to essential. Further, the shape of education has changed in recent years due to concerns about Covid-19, which required many classes and educators to switch to a distance learning format, making the production of visuals a critical skill (Global Industry Analysts, 2021). Both academics and instructional designers in the industry must possess visual communication skills to keep up with the changes, as they will be required to interpret, use, and produce information that is presented visually (Ariga et al., 2016).
Fortunately, visual communication skills—such as creating visuals—are learnable, teachable, and capable of development (Avgerinou & Pettersson, 2020). With that in mind, in this chapter, we discuss visual skills divided into two parts: creating visuals for learning and showcasing your work and skills. After Part 1, you will see a learning check to help you evaluate your understanding. Also, throughout the chapter, you can follow my steps in creating and publishing a design. Or, if you want to be a step ahead, you can create your own design.
As instructional designers, we must support organizations in translating business goals into consistent messages that are both verbally and visually consistent with the organization’s values. Thus, you should always ask your client or organization for their brand style guide to comprehend how they communicate visually. Brand style guides are instructional manuals that help designers communicate a consistent brand and message and save time in decisions regarding fonts, colors, and images to use. Understanding brand style guides is crucial for creating visually customized learning assets for a particular audience. Also, creating personalized materials for your clients helps you earn their buy-in since you demonstrate that their project is unique.
If your organization or client has a complete brand style guide, consider yourself lucky! You just saved a lot of time. The brand style guide will include specifications on colors, fonts, and graphics the organization wants designers to use and will likely include several examples of how their specifications can be applied to different designs. That means you do not have to test different fonts or create a color palette. However, what if the organization does not have a brand style guide? You might have to do a little research. For instance, you can analyze their social media pages, websites, and marketing advertisements to check the most used colors (e.g., Are the designs mostly monochromatic or do they have more than one color?), font types (e.g., Do they use serif or sans serif? Is there a combination of different fonts?), and graphics (e.g., Do they use icons? What the icons look like?).
In this mini-case study, I created a “spin-off” visual identity guide comprising specific instructions for developing learning materials. I used the client’s detailed brand style guide to create a secondary visual identity guide to maintain consistent visual communication across all learning materials and the company brand and voice.
The challenge was to apply their branding, which comprised visual communication depicting happiness, joyfulness, and cheerfulness, to instructional content that included negative topics, such as car accidents and traffics injuries. Also, we had multiple instructional designers working on the project on a very tight deadline, making a visual identity guide crucial for consistency.
The guidelines contained examples of using the branding’s primary and secondary colors to customize illustrations, icons, and images. The guidelines also encouraged the use of a lot of grayscale for media that depicted any negative topic in order to distance the company's cheerful voice from the negative topics.
The visual identity guide also included examples of design “Dos and Don'ts,” such as using images with vibrant and warm colors to align with the branding colors (i.e., yellow and a lot of orange) and avoiding images with cold colors. We also added instructions to include characters and people of different ages, ethnicities, and genders to reflect the company’s values regarding diversity and inclusion.
As a result, the learning materials were customized to reflect the client's branding and were accessed by over 850,000 online learners. This is one example of how it is vital to understand the brand style guide of your organization to create visuals that reflect their visual communication, voice, and values.
Besides accessing or creating a brand style guide, the following are some guidelines for creating effective visuals:
Scenario: Imagine your team at your university is presenting a talk on the CRAP design principles (i.e., contrast, repetition, alignment, and proximity; Williams, 2008) and you are tasked with creating a takeaway infographic with a summary of the CRAP principles.
In this first part, we will begin with creating customized icons. You can use this file containing four icons to customize the icons. Try creating different options. If you need ideas, watch the video below on styling icons in PowerPoint.
Here are some points to consider:
Contrast refers to the arrangement of opposing elements in a composition that draws viewers’ attention to specific parts (Lauer & Pentak, 2012; Williams, 2008). In instructional materials, we apply contrast to establish a visual hierarchy based on the function and importance of content. For example, in Figure 2, the designer established visual hierarchy by using bolded letters only in the title and subtitles, using a bigger font size for the title and subtitles, adding white space around the main title, coloring the title and subtitles, and adding bullet points to differentiate the two examples from the description.
Below are some features you should always consider when styling titles, subtitles, and paragraphs to create contrasting characteristics and enhance the content structure:
Figure 2. Infographic with clear visual hierarchy
Moreover, you can apply more features to important content, as the designer made in Figure 3: creating a clear hierarchy that starts from the main title to subtitles, key phrase, description, and bullet points. The main title uses five features: bolded letters, large-size font, upper case letters, white space, color, and a graphic element. The subtitle uses fewer features than the title, and the key phrase uses bolded letters and a light gray rectangular box. In contrast, the paragraph style for the body of the text is the simplest, smaller font, less white space around it, and with no color or shape.
Figure 3. Slide presentation with contrasting paragraph styles for visual hierarchy (Kuba, 2021)
The alignment principle helps designers arrange elements in a composition to create a sense of equilibrium and organization and improve the readability of the design (Lauer & Pentak, 2012). For informative materials, such as instructional assets, building a modular grid is an effective way to support alignment, structure, and organization. A modular grid is a set of intersecting vertical and horizontal lines that structures a layout and facilitates the arrangement of elements (Timothy, 2017). Grids help designers organize content and make slides uniform while providing flexibility to generate various layouts (Kuba, 2021). The modular grid is the most relevant grid for instructional materials and includes four parameters (see Figure 4):
Figure 4. Elements of a grid (Kuba, 2021)
A grid can also support the proximity principle, which states that elements close to each other are perceived as related, and elements that are spaced apart are perceived as unrelated (Kuba et al., 2022; Lauer & Pentak, 2012; Mayer, 2017). For example, in Figure 5, I created a 4x3 (column x row) grid and placed the title and image on a spatial zone of one row and four columns and each takeaway point in one column. Thus, by positioning the tile in a large spatial zone (i.e., with bigger white space around it), I created a clear distinction between the title and body of text as they appear spaced apart. Also, the gutters support the proximity principle by distancing subgroups to make them visually noticeable, thereby improving the reading flow.
In sum, grids are handy for aligning elements, providing flexibility to create different designs, and helping maintain consistent designs. They are also particularly useful when multiple designers are working on the same project. For instance, using the same modular grid, you can create different layouts to inform learners of the structure of the lessons (e.g., one layout for the learning objectives, one for the content, and another for the takeaway points; see Figure 6).
Figure 5. Takeaway slide arranged in a modular grid (Kuba, 2021)
Figure 6. Different layouts using the same modular grid (Kuba, 2021)
Repetition helps designers create unity and consistency within their design. The repetition principle states that elements that share similar characteristics are perceived as related, while a lack of pattern indicates that they are unrelated (Lauer & Pentak, 2012; Williams, 2008). There are two common strategies regarding the repetition principle:
You can also use the repetition principle to help learners better understand the organization of a lesson. For instance, you can create diverse graphic elements for different purposes (Figure 9). Also, the suggestion of creating specific layouts for the learning objectives, content, and takeaway slides is an example of the repetition principle applied across different lessons.
Figure 7. Applying the same characteristics to elements with the same function and hierarchy, such as having all subtitles with the same formatting (Kuba & Jeong, 2023)
Figure 8. Applying the same characteristics to related content, such as applying purple to all elements under the contrast principle (Kuba & Jeong, 2023)
Figure 9. Using different graphics for different purposes (e.g., repeating the reading box style every time you propose a new reading for learners; Kuba, 2021)
In this second part, we will design an infographic using the CRAP principles. You can use the same file from Part 1. Use the provided text located on the left side of the canvas and icons created in Part 1 to compose the infographic. Remember that the design should represent the visual communication of your university and will be presented in a talk.
Here are some points to consider:
If you need ideas, you can check this paper: Kuba & Jeong (2023). The article includes examples of high-rated and low-rated infographics. You can try replicating one of the infographics or creating a new one.
Spacing apart two sections of text is an example of which design principle?
Contrast
Repetition
Alignment
Proximity
Using bolded letters to highlight important content is an example of which design principle?
Contrast
Repetition
Alignment
Proximity
Which of the scenarios below follow the Alignment principle?
Placing elements arbitrarily in the design.
Drawing lines to line up elements in the design.
Combining various text alignments in the design.
Avoiding visual connections between elements in the design.
Applying the color red to all subtitles is an example of which design principle?
Contrast
Repetition
Alignment
Proximity
*Feedback for the answers is given at the end of this chapter.
Now that you have created an infographic, it is time to promote your work. If you do not have a portfolio, I highly recommend starting one. Building a portfolio is not an easy or quick task. For every project you complete, adding it to your portfolio is almost like a new project altogether. You must document and explain your design process concisely and showcase artifacts. In this section, we discuss techniques to promote your work and strategies to make your portfolio stand out.
Mockups are easy to find and easy to edit. They are high-fidelity prototypes containing a placeholder that allows you to upload your image or video and get a more professional look, even if you have basic skills in design software. Mockups are also a great technique to provide a tangible vision for your audience of what the design will look like on a table screen, smartphone, or printed material. That way, your client can see the full vision of your work, ensuring everyone is on the same page. Additionally, with so many free mockups available online, you can save time while preparing a high-fidelity prototype of your product.
Let’s see some examples:
Video promo mockups. The video below was created on a ready-to-use After Effects mockup and shows examples of SCORMs designed in Storyline. The viewers can see how the interactivities look for the end user, so these are thus serving as high-fidelity prototypes. Although the mockup included various scenes with placeholders, you might need some basic understanding of timelines.
Watch this video.
In this third part of our design challenge, we will create a high-fidelity prototype of your infographic. You will need access to Adobe Photoshop (Adobe offers free trials), a jpeg of your infographic, and this PSD file.
BONUS TIP: You can change the logo on the mug by following the same process. Double-click on the thumbnail of the “logo_negative” layer, replace the logo, save it, and close it.
Now that you have your infographic and a mockup of your infographic displayed on a tablet, the last step is to document your project in your portfolio. Having a well-documented portfolio is a great way to show potential clients or interviewers all your skills before they even talk to you. You likely will have 30 to 45 minutes during interviews, so use your portfolio as leverage to put you ahead of the game. Here are some tips:
In this last part of our design challenge, we will create a webpage to document the project. There are many website builders out there, so chose one, and let’s get started. Use the stages of the ADDIE model as subheadings of your documentation and remember to describe your design process and include the image of your infographic and the mockup.
Here are some suggestions:
In recent conversations with graphic design colleagues, we agreed that there is no such thing as being born with talent. We all talked about the terrible projects we have done in our early careers and how visual communication skills are not a talent that you are born with or without, but rather a complex skill that needs continuous practice. Thus, to wrap up this chapter, I offer ideas to keep improving visual communication skills and include examples of work done in the early stage of my career to show the importance of practice.
List of practice activities:
Remember that studies have shown that visual communication skills are learnable, teachable, and capable of development (Avgerinou & Pettersson, 2020), and I can prove it. Below are two ugly projects I completed during the first year of my bachelor’s degree. It took me much practice to learn how to apply design principles effectively, and I am still learning. To this date, I still follow tutorials in my free time, I still save designs that I like to try replicating, and I am constantly engaging in personal projects as my portfolio is a work in progress.
I hope the tips in this chapter help instructional designers better connect with their clients and jobs and produce more attractive and effective visuals for learning.
Figure 11. Renata’s ugly projects: Menu cover for a pizza restaurant and a brochure
Spacing apart two sections of text is an example of which design principle?
Using bolded letters to highlight important content is an example of which design principle?
Which of the scenarios below follow the Alignment principle?
Applying the color red to all subtitles is an example of which design principle?
This content is provided to you freely by EdTech Books.
Access it online or download it at https://edtechbooks.org/becoming_an_lidt_pro/ID_visual_communication.