This is a short lesson that discusses Mayer's Multimedia Principle for the design of multimedia learning. It includes screens with presentations and example, practice exercises, a module test and a survey. 

These are examples of using HTML & CSS to design course home pages:

Homepage with Side Panel

I used CSS to position, style, and color the main and side columns and create the module button gradients.

Toolbar & 2-Column Layout

I designed the button toolbar at the top of the screen and the two-column homepage to display the course introduction and selected icons to illustrate course details.

The following images present the contrast between course shell and course instructional design before and after my intervention as instructional designer. I designed the course format for Moodle using the university brand colors. I hired a vendor to develop it, although I did develop the icons for weekly units and menus myself. The main changes were

1. using Moodle’s native capabilities to highlight the current weekly unit (the university wasn’t using it before this),
2. a main course page that showed the topic, date and number of weekly units as links to the actual weekly unit pages, and
3. weekly unit pages that showed the objectives, learning materials, learning activities and assessments (when necessary) clearly labeled.

Click the tabs below to see examples of the Moodle course home and module pages.

Moodle Course Homepage

[Open in New Window]

Moodle Module Page