In the context of this course, visual design refers to the structure, look and feel of the published online page. It involves the interplay between:
- content – the subject matter being conveyed, and
- form – how it is presented visually.
This course will not cover graphic or visual design in significant detail. However, it is important to think about (visualise) what your published pages will look like, and to decide how visual elements will convey meaning — even during the early drafting phases. When outlining individual pages in your learning pathway, your should also reference components of your visual design. For example, describing the images you intend to include on a sub-page, the proposed sub-heading structure for the page concerned, and which pedagogical elements you will signpost in the text, for instance definitions and activity boxes.
Inspect this course website by navigating through a number of pages:
- How are images used on this course website and what is their purpose?
- How is the hierarchical structure of the course content conveyed visually?
- How are the pedagogical elements within pages conveyed visually?
- Can you identify examples of consistency within the visual design?
Please share your observations by posting a WEnote comment below or posting a “Toot” on our course social media site (and remember to include the course hashtag: #EDT4OL in the body of your post). For example:
- Images on the #EDT4OL site are primarily used to …
- The structure of the #EDT4OL site is conveyed by …
- The visual design of the #EDT4OL site could be improved by ..
- I really like this (insert visual element) of the #EDT4OL site because … You can see it here (insert URL)
You must be logged in to post to WEnotes.
Note: Your comment will be displayed in the course feed.
Visual design considerations
Thinking about the visual elements of your pages early in the process will save time later during the publishing phase. For example:
- Too many sub-headings (more than three or four) on a single page may result in long pages requiring excessive scrolling – Remedy: Consider breaking down potentially long pages into separate sub-pages.
- Too many images on a single page will require you to include sufficient corresponding text to wrap around the images so the page is balanced, taking into account that you don’t have control over what devices your learners will be using to access the content (eg desktop computer or mobile phone), which has implications for how content is displayed on different screen sizes.
- Signalling pedagogical elements visually is valuable – for example icons to signify a discussion or other activities – because this differentiates between content and learning activities. However, including too many pedagogical elements on a single page may result in a busy and confusing layout.
- Keep titles of the sub-pages short – for example, one to five words maximum – because these titles will be used in the navigation interface. Long phrases or sentences do not display well in a navigation interface and will reduce the readability of your published materials.
In the context of this course, visual design refers to the structure, look and feel of the published online page. It involves the interplay between:
This course will not cover graphic or visual design in significant detail. However, it is important to think about (visualise) what your published pages will look like, and to decide how visual elements will convey meaning — even during the early drafting phases. When outlining individual pages in your learning pathway, your should also reference components of your visual design. For example, describing the images you intend to include on a sub-page, the proposed sub-heading structure for the page concerned, and which pedagogical elements you will signpost in the text, for instance definitions and activity boxes.
Activity: Look and share
Inspect this course website by navigating through a number of pages:
Please share your observations by posting a WEnote comment below or posting a “Toot” on our course social media site (and remember to include the course hashtag: #EDT4OL in the body of your post). For example:
You must be logged in to post to WEnotes.
Note: Your comment will be displayed in the course feed.
Visual design considerations
Key points
Thinking about the visual elements of your pages early in the process will save time later during the publishing phase. For example:
Project lead
Supported by
Development Partner