Styling Your VIULearn Files

Basics of Good Design

When designing an online course for your students, it is important to remember the following tips. Feel free to use this as a checklist as you design your enhanced, hybrid or fully online course.

Place a checkmark in the left column if you can answer yes to the following:

1. Course Content
Is the text free of jargon that could be misinterpreted?
Is the text free of spelling and grammatical errors?
Is the punctuation intact?
Is the most important information presented first?
2. Course Files
Is the file type appropriate for the information (e.g. MSWord, pdf, rtf, or html)?
Will the information format consistently on different systems (e.g.) different browsers and
3. Course HTML pages
Are specified fonts relatively common, consistent and easy to read?
Is the colour scheme appropriate?
Is the text concise and presented in chunks
Is the information divided into manageable chunks?
Do keywords stand out?
Are the module topics in groups of seven of less?
Is the navigation straightforward and with appropriate descriptors?
Can the content be found easily through the navigation?
Are the textual links described well?
Are the graphics appropriate for the content?

This video explains how to create a template page for your VIULearn Files (pages)  This information will be useful for setting up and designing consistent pages in your VIULearn course. This video will explain how to make your own template page for your VIULearn course.

If you do not see the video, please click on the link to view it in a new window or tab:
Creating a Template Page in VIULearn

Create a Style Guide

We also recommend creating a style guide for you VIUlearn pages. This makes it easy to keep all your fonts and text consitent. It also allows you to remember the sizing and exact colours you are using for your font.

Here are some ideas for styling your VIULearn pages.

Heading 1 (*Verdana, 14pt), color: # 034489

Heading 2 (*Verdana, 12pt), bold, color: #034489

Content (Paragraph, Veranda, 12 pt), color black: #000000

* font-family: verdana,sans-serif

Heading 1 (* Verdana, 14pt) - color: #5D005D

Heading 2 (*Verdana 12, pt), bold, color: #5D005D

Content (Paragraph, Veranda, 12 pt), color black: #000000

* font-family: verdana,sans-serif


To style your content highlight the text you wish to change and adjust it using the options:

Paragraph/Header Options - Font Family - Size - Font Color


As you can see we recommend formatting using the above options. The colours are compliant with web standards. They font is easier to read and will be readable on most screens.

Handout - Basics of Good Design

We have prepared an easy-to-read handout containing the same information as this page:
Basics of Good Design