Course Shell Designs

The following are examples of course shells that I have designed @ UNAD FL, UPR Rio Piedras & FIU:

Multimedia Course - Canvas

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. 

Click/tap on the image to enroll and view the course as a student.

PDMLmHomepage.png

Canvas Homepage Designs

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.

RecordsManagementHomeScreen.png

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.

CourseDesignBOT.jpeg

Toolbar & Module Links

I recycled the button toolbar design at the top of the screen and designed the module links at the bottom of the page using CSS to shape, position, and color them.

CourseDesignLiL.jpeg

Moodle Before N After

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
 
Moodle Module Page
 

Moodle Course Shell Design

This video showcases a course design implemented in Moodle. A group of instructional design colleagues and I made the design decisions. I used the institutional color scheme and logo to design the course shell for all hybrid Moodle courses.