Co-writers; Lucy Wolski, is the Instructional Design Specialist for the School of Geographical Sciences and Urban Planning. Mary Loder is an Instructional Design Specialist at EdPlus at Arizona State University. Special thanks to Alisha Mendez and Bianca Olivas for graphic creations and the

Canvas Graphic Style Guide.

Designing your course presence: use design elements

A student’s first impression of a course is often a lasting one. There are many ways of setting a good first impression, including adding visual elements that enhance your course. This breakdown of the basic visual components of a course is for those who have found themselves wondering “how can I make this look better”? Here, we highlight the design elements that have the biggest impact on the look and feel of your course.

Dashboard/Course card Image

Our first opportunity to make a visual impression is the Canvas Dashboard image. This diminutive rectangle is the first thing a student sees when logging into canvas, and it takes no time at all to add an engaging visual. Choose a related image from the Unsplash library, a free source of high-quality, royalty-free images, to represent your course. 

Creating your own dashboard image is rather simple as well. You can upload a picture, or create a PowerPoint or Google slide that is 262 pixels x 146 pixels(px), or 3.6in x 2in, or 606px x 1088px in Photoshop. Export or save the slide as a PNG file, and now you have a custom branded course card! 

For more on how to enable this feature in your course, read How do I add an image to a course card in the Dashboard?

Using Google Slides to create custom graphics? Here’s a quick GIF on how to adjust your slide page settings to make custom graphics. Enjoy!

Course Banners

A course banner is a horizontal image at the top of a page. Though it takes time to create, a course banner accomplishes a lot. It sets and maintains a cohesive theme or brand for the course. It can address a module’s specific theme and it adds visual interest to break up a lot of text. Common image sizes for course banners are 960px x 160px when using Adobe Photoshop, or 766px x 127px or 13.3in x 2.2in when using general systems like Canva and Powerpoint or Slides. Access our Canvas Graphic Style Guide for more information. While you can add text to the course banner image, it is recommended to keep it general to ensure that you can use it again and again.

Create a course banner using your favorite graphic design software. Consider a free account on canva.com. Upload the banner to your course using the Rich Content Editor. Mark it as decorative, or add a descriptive alt text to make it accessible for everyone. 

Course Materials

Text Design

The body of a page is a place for text and images! With text, you want to utilize the headings in the Rich Content Editor (RCE). In Canvas, Heading 2 is used for the main sections of the page, and the headings 3-4 are subheadings. This makes it easier to organize the content and therefore easier to follow. Be sure to use an intentional heading hierarchy to ensure those using a screen-reader understand the flow of your content. For instance, start with Heading 2, then Heading 3, and then Heading 4 (if needed); you can skip back up to Heading 2 to start a new section. 

Image and Video Design

Images

Enhance your page by using the Rich Content Editor to add images and videos. Source images from unsplash.com or creativecommons.org, and add an alt text description to ensure all users benefit from your visualization. Be sure to consider copyright license considerations when using images from any sight. Images in the public domain are often your best option. 

To take it up a notch, create a simple collage from spark.adobe.com instead of using just one image. All users will benefit from longer, educational related, descriptions using captions, you can also link documents or original source sites for expansive graphical explanations.

Videos

As often as possible, embed videos into your page instead of linking to them. This will ensure your students can consume your content directly from the learning management system. Use videos that have closed captions and add captions to your self-created videos. Sources like TED Talks will supply a transcript in addition to closed captions and often provide an embed code that can be easily copied into your HTML editor. Additionally, upload a video slate thumbnail to display before the video is played, see our Canvas Graphics Style Guide for more information on video thumbnails. Deploying these tips will guarantee a nice looking content page that is accessible and attractive.

Instructor Profile

If you have not already, add a Canvas profile picture to instantly add your presence to all of your courses. Check out the FAQ: Canvas Profile Pictures for a step-by-step guide.

A “Meet the Teacher” video, or an “About me” page is crucial for establishing a good instructor presence. A robust meet the teacher page might include contact info, a professional image, a short introduction video, and either a brief bio or a link to a bio page. It can be professional but personable.

Home Page

Lastly, but perhaps most important of all, is the Home Page. In Canvas, the Course Home Page is associated with the Home link in Course Navigation and is the first page seen. Canvas allows you to select from five layout options. Consider designating a front page that has meaningful information for your students and set this front page as the home page for your course. According to standards from the Quality Matters Higher Education Rubric, 6th Edition, and the ASU Online Faculty expectations, a course overview page should:

1. Introduce students to the purpose, navigation, structure of the course, and how to get started (QM 1.1 & QM 1.2)
2. Host an instructor welcome and course introduction -Video is highly encouraged (QM 1.8)

Your home page should include quick access to a:

• • Get Started – a short video tour of the course or best first steps, guide them to the first page or module
  • Community Forum – link to the ungraded discussion where students can ask and answer questions about the course
  • Meet the Instructor – link your “About me” page or embed your “Meet the Teacher” in your home page.
  • Welcome Message or Video – A course welcome should answer three questions. Who are you, what is the course about, and why should the student care?

Make it beautiful with a course banner and some buttons or links. Learn more about basic HTML options at ASU and the Canvas on accessing the HTML editor.

A meaningful homepage, a visual instructor presence, and dynamic content pages are building blocks for a beautifully designed course. Taking the time to build these visual elements will pay off in the way your students perceive and evaluate their experience. You can do this! Start small and think about your learning experience. Finding and creating content is easy with the help of your local librarian and some basic tools for course development. 

 

References:

“Standards from the Quality Matters Higher Education Rubric, 6th Edition. Quality Matters. Retrieved from https://www.qualitymatters.org/sites/default/files/PDFs/StandardsfromtheQMHigherEducationRubric.pdf