Visual Principles in Designing Digital Teaching Content

1. Simplicity
Less is more. Do not overload pages with unnecessary elements, animations, or decorations that do not support understanding. Every element should have a clear purpose. Leave enough white space so that the content is easy to read and visually clear (Clark & Mayer, 2016).

2. Hierarchy
Use visual elements such as font size, colour, line weight, or emphasis to show what is important and what is secondary. Titles, subtitles, and body text should be visually distinct to help students follow the structure of the content.

3. Contrast
Contrast helps highlight essential information. The text should stand out from the background (e.g., black text on a white background) to ensure readability. Avoid low-contrast combinations, such as light grey text on a white background (W3C, 2024).

4. Consistency
Use the same colours, typography, icons, and styles throughout the material. A consistent design allows students to focus on the content instead of adapting to different visual styles (Clark & Mayer, 2016).

5. Typography
Choose simple, readable fonts. It is recommended to use no more than two fonts in one material—one for headings and one for body text. Avoid overly stylised or decorative fonts that make reading difficult.

6. Colour
Colours can attract attention, convey emotions, and help organise information. Use them carefully:

• choose a limited palette (2–4 colours)—use tools such as Coolors, Adobe Color, or Canva Color Palette Generator to find harmonious combinations

• ensure sufficient contrast for readability—verify it with tools like WebAIM Contrast Checker

• avoid overly saturated or distracting combinations

• be aware of users with colour-vision deficiencies (e.g., colour blindness) and use additional cues besides colour (icons, patterns) (W3C, 2024)

7. Images and Graphics
Images should be high-quality, relevant, and connected to the topic. Avoid generic illustrations that add no value. Well-chosen images can break text monotony, increase engagement, and support memory, but they must always serve the instructional purpose.

For graphs and tables:

• simplify the visual presentation,

• use clear labels and legends,

• avoid data overload (Mayer, 2021).