Visual Principles in Designing Digital Teaching Content

6. Examples of good and poor visual design solutions

Good visual solution:

  • clear page structure with headings

  • high contrast between text and background

  • visual elements directly related to the topic

  • consistent typography and colour palette

Poor visual solution:

  • too many different colours and fonts

  • dense text without paragraphs or white space

  • low-resolution images or visuals not clearly related to the content

  • text placed on a low-contrast background

Accessibility

Background Colour Background Colour

Font Face Font Face

Font Size Font Size

1

Text Colour Text Colour

Font Kerning Font Kerning

Image Visibility Image Visibility

Letter Spacing Letter Spacing

0

Line Height Line Height

1.2

Link Highlight Link Highlight