Contrast
Contrast is one of the most important visual techniques. Contrast can be defined as “the state of being strikingly different from something else in juxtaposition or close association.”
Contrast can be used to:
Make important elements stand out
- Make elements that are not the same clearly different
- Hide less important elements
- Provide a strong focal point to attract interest
Contrast can be provided in various ways including:
Contrasting colour
For example:
- A colour different to other elements on the page
- A different shade of the same colours
- A high level of contrast between background and elements in the foreground
- Using a combination of colours that lie opposite to each other on a colour wheel
Contrasting size
For example:
- The size of an element (text or image) being significantly larger than surrounding elements
- Thickness of lines in images or text
Contrasting shape
For example:
- Incorporating elements with disparate shapes
Repetition
The principle of repetition means reusing the same or similar elements throughout your course. It is the principle that helps to maintain consistency in your design. By repeating design elements throughout your course, you provide visual cues so users are able to easily follow the course content and understand how it all fits together.
Elements that can be repeated to develop a sense of organisation, unity and consistency include:
- Colour, for example the same colour text for all major headings
- Shapes, for example the same shape buttons
- Spatial relationships, for example the same space between lines in a paragraph or between a heading and body text
- Visuals, for example all stock photos or all vector images used in a course
- Sizes, for example consistent size of fonts or line thicknesses in shapes or buttons
Elements that are common across the digital space should also be repeated to ensure consistency and avoid confusion. For example, hyperlinks are universally known to be blue and underlined. Creating hyperlinks with different visual elements can mean users will not understand what they are. Conversely, using blue and underline text to provide contrast when it is not a hyperlink may also create confusion.
Alignment
Alignment dictates the way every element is placed in a design. The whole point of the alignment principle is that nothing in your slide design should look as if it were placed there randomly. Every element should have some connection with another element. This creates a clean, clear and sophisticated look and feel.
Alignment can include:
- All headings being aligned the same way
- All body text being aligned the same way (ideally left aligned, as fully justified text can pose readability issues for some users)
- Aligning all images or shapes in the same way
Considering applying a grid when designing to ensure all visual elements are in alignment.
Proximity
Proximity is about moving things closer or farther apart to achieve a more organized look. The principle of proximity states that elements that are associated with each other should be placed closely (grouped together), and vice versa. It can be difficult for users to identify related elements if they are spread out (not in proximity to one another) resulting in a poor user experience.
Examples where proximity can be applied include:
- Images and their associated captions
- Graphs and keys on tables and charts
Proximity can also be applied to differentiate elements, for example white space between paragraphs to differentiate between the message in each block of text.
In conclusion
The visual designs in your course are designed to attract and engage the audience. They are to help convey the message in the course and make it easier for people to navigate and understand your course. One of the key things is that your visual designs should mean that users do not have to think. So, check the visuals in your course and make sure they are CRAP.
