Thoughtful planning and design of a course and its materials are rudimentary for student success. While visual design can often take a back seat in planning a course, visuals and other media can help to enhance learning more than text alone when used correctly (Mayer, 2009). This guide will help break down some of the fundamentals of learning-focused visual design into easily digestible, “must-know” elements.
Getting Started
Visuals capture attention and can focus and guide learners through otherwise difficult to understand processes, theories, or data. Likewise, visual cues in text-heavy documents can create importance and meaning.
While visual design is a large topic, focusing on space and visual hierarchy is an excellent place to start. These two simple components play a critical role in helping to engage readers and bolster learning goals more effectively.
Space
Negative or empty space in visual elements conveys meaning and becomes the frame that anchors a document (Malamed, 2015). Think about borders between the panels of a favorite comic book; those borders are negative space that defines each panel. This space can also help direct readers to the next panel by using varying weights or thicknesses of that space. Likewise, the margins and spaces between paragraphs or columns create negative space in word processing, website design, and slideshows. In text-heavy documents, this space creates boundaries, keeps things looking tidy, and creates a break for the eyes. This break helps to keep readers from being visually overburdened with text on a page.
Hierarchy
Another essential element in text-heavy documents is visual hierarchy. Visual hierarchy places varying importance on information, guiding a viewer through documents and other materials (Malamed, 2015). Different aspects of typography can create a visual hierarchy.
Serif vs Sans Serif
Serif fonts have little protrusions or “feet” at the terminating ends of the letter strokes. Serif fonts are usually considered easier to read in print form. Sans serif fonts do not have “feet” and are usually easier to read generally, especially in digital formats such as on Sakai. Using two serif or two sans serif fonts in a single document is not generally recommended. It can look like a mistake unless there is a clear differentiation in font size or weight.
Script and other typefaces
As a rule, script fonts and other decorative typefaces should be used sparingly. Think of these as attention grabbers, better utilized in the occasional header, not in the body of the text. If using a decorative typeface to add variation, it is good practice to use only one and utilize a serif or sans serif font for most of the document.
Weight
Think of weight as the lightness/heaviness or thin/thickness of the letter. Variation in a typeface is often listed as light or narrow, normal, bold or BLACK. These weights can easily create the variation needed to build a hierarchy within a document.
Size
Font size is another key element in creating visual hierarchy through text. Larger fonts appear more dominant than smaller fonts. It is generally a good idea to limit multiple sizes of fonts and remain consistent in font sizing throughout a document. Font size is a wonderful way to differentiate between title/header, sub-header, and text body.
Summary
Taking the time to think about these few design elements can greatly enhance the flow, readability, and effectiveness of learning materials and other documents. With the addition of images or other media, well-done materials can be enhanced even further.
Sources
Mayer, Richard E. Multimedia Learning. 2nd ed., Cambridge University Press, 2009.
Malamed, Connie. Visual Design Solutions: Principles and Creative Inspiration for Learning Professionals, John Wiley & Sons, Incorporated, 2015.