A practical guide
VISUAL
LITERACY
Disclaimer: these are only SOME examples. Visual literacy is a vast and marvelous world! If you are interested, we encourage you to learn more by visiting the resources at the end of this page.
Why?
Everything about a product conveys a message, not just the text. We communicate though form, color, composition, typography, and many more elements. These alternative communication channels send a message about our mood, tone, and style!
How?
Some key elements to achieve the ultimate goal of effectively communicating with visual aids are listed and explained below. Visual literacy can be a lot to digest, but don’t worry - we are practicing what we preach and have included plenty of examples to communicate each element’s meaning!
Layout and Composition
Layout and composition refers to how elements are arranged in the given space. The “space” may be a poster, a handout, each slide in a presentation, or even a social media post. Titles, text blocks, photos, icons, graphics, etc. are all examples of these objects. Below are some key principles to know before arranging these items.
Proximity
Indicates the relationships between items. Items similar to each other will be closer together (in small clusters), while those more dissimilar will be farther apart.
White space
Accentuates the separation between content blocks. Avoid cluttered arrangements by leaving some space empty. This white space makes your product easier to read and gives importance to each element.
Alignment
Refers to the text, as well as other composition elements! The best method to master alignment is to use a grid or invisible lines as a guide. Clean alignment results in an organized, professional style.
Contrast
Emphasizes specific elements in the composition. To apply contrast, using different colors, typefaces, and even sizes comes in handy. Hierarchy is closely related to this idea - items that are more significant are noticed (larger, darker, etc.) before those that are less important.
Repetition
Presents the message consistently. While it is not necessary to have numerous copies of the same element, maintaining the message is important! Be consistent with how you are communicating, such as using the same font (perhaps in different sizes), using the same shape style (rounded or very sharp, but not both), and using the same color palette (all pastel, all saturated, etc). Simply be consistent!
Color
Color is essential in our everyday lives. It can often evoke an emotional response and even has the ability to communicate substantial unwritten information. For example, in all of our images above, we used green and red to indicate what is “correct” and what is “incorrect”. Color may rapidly become complicated (and messy!). Here, we will stick to the basics, but remember that color selection is a science itself - complete with color theory, hue, saturation, and several other concepts.
Dos and don'ts
Some color combinations tend to “vibrate” when placed together. Avoid this mistake by changing the saturation (how light or dark the color is). This creates a more pleasant composition that is easy for most eyes to look at.
Reduce the total number of colors in your composition.
Color palettes are your best friends when deciding which colors to use. Colors that draw a lot of attention should only be used to highlight a small feature, while less flashy colors can be utilized in a larger ratio (such as the background of a presentation).
Typography
Our font selection can convey our personality, offer a statement about our field of work, or even demonstrate our attention to detail. Slim and tall typefaces should be used for presentations and academic settings. More “fun” fonts, such as Comic Sans, should be avoided. Combining multiple fonts is difficult. Use less than three fonts or variations (bold, italic, etc) and be consistent with the same fonts and size throughout the document.
Images
An image is worth a thousand words, right? For this reason, images are an obvious cornerstone of visual communication! Images can be pictures, illustrations, or even icons. In any case, what matters is correct usage.
Finding high-quality, royalty-free visuals is not difficult with proper resources. A list of websites where you can find free images is found at the end of this article. Always remember to verify the copyrights first!
High-quality means that pixels are not noticeable in plain sight. We call these images “rasters” (pictures/photos, files typically ending in “.png” or “.jpeg”). Never change the proportions of the picture by stretching it on one side!
Other really handy visuals are found in “vector” format, which means they may be scaled up and down without losing quality. These “vectors” are icons or drawings with file extensions typically ending in “.svg”. All of these formats can be downloaded but remember to give artist credit where it’s due!
