21 Course Visual Elements
Online Course Style Guide
OTL’s Online Course Style Guide establishes a UVU online learning brand that promotes accessibility, consistency, and quality.
Branding and Secondary Marks
Department Branding
Department branding is handled through a global Canvas css file. If you see a css file in your canvas course that has the new 2023 template, you can safely remove that file without issue.
Secondary Marks
Secondary marks are department branding images (the department logo). They are optional—not all departments have a secondary mark.
In the 2023 template, the default branding image is a plain UVU secondary mark like the one above. You can update this UVU secondary mark with the College or Department secondary mark.
To access a department or college logo go directly to your myUVU –> Employee Resources –> Campus Services –> Marketing Information –> UVU Secondary Unit Logos. They have different sizes and colors. Bookmark this page for future use.
Icons and Images
Icons
We use icons in our template headers as part of common navigation.
You can choose icons from the Icon list in CIDI tools by activating CIDI tools in a Canvas page (editing mode) and select “Icon” then “Choose a Category” from the drop down menu under “Custom Categories.”
Images
If you need images for a course, check Adobe Stock. (See Adobe Stock for login instructions.)
For creative commons images, try Wikimedia Commons, Flickr, or Openverse.
Image Banners and Instructor Photos
Review the Online Course Style Guide at the top of this section for images and banners.
Using Image/Banner Templates
Course banners and instructor photos can be created and formatted using these PhotoShop templates:
- UVU_HomePage Banner-1200x360_(Template)
- UVU_Syllabus_OverviewBanner-1200x171_(Template)
- UVU_OTL_InstructorImage_Square_(Template)
- UVU_OTL_InstructorImage_Vert_(Template)
Download the templates to your computer and open them in Adobe PhotoShop. Once you have done that:
- Drag and drop your selected image over the template image.
- Size the image to the same width as the template image by pulling the “handles.”
- Drag the image to the desired position.
- Export the file as a .jpg using the course id somewhere in the title.
Adding Image Banners to the Course
- Before dropping the file into the images folder of your Canvas course, change the name of the file to match the name of the existing image file. (For example, you would change MUSIC-1236_banner.jpg to syllabus_banner.jpg.)
- Drop the file into the Canvas course image folder.
- Select “replace” to dynamically update all pages that call to the file.