Brian Chen

Canvas Course Designs By Dr. Brian Chen

Home Page Examples .

The Canvas “Home” page is the first page students land the courses. There are several options including (a) Links to a ‘Start Here’ page, (b) Syllabus, (c) Course Modules, and so on. I have applied 4 different ways to create a ‘Canvas Homepage’ using advanced HTML coding and related techniques. All my Canvas course designs are responsive, which makes contents have a nice appearance and a good performance on all devices, such as phones, tablets, laptops, desktop computers, and on the “Canvas App.”

Click each image below to see a larger screenshot with details on how it is created and designed.

A Twitter Widget is embedded into Course Home Page. An actual Twitter embedded coding is saved as an Html file that I upload to the “Files” and then iframe in a Page. I use Twitter primarily to find resources about research articles and trends to share with my research mentees. An example of a Canvas home page with branching navigations. I have created an interactive home page with branching navigation, contact information, and messages. My advisees can navigate all the important items from that one page just by clicking on the image buttons (e.g., Degree Completion Map, Student Manual, Resource Modules, and Canvas Tutorials) on the home page. The syllabus is designed as the Canvas homepage with grid menus. Each mini card leads to the specific week on the Modules page. The syllabus page includes a downloadable syllabus, my contact information, course outlines, and technical support. The sidebar section displays information about course events and grading. Finally, all assignments appear at the bottom of this syllabus page under Course Summary.
An example with a 'Start Here' button and numbered links of weekly materials. A ‘Start Here’ button and links (in the form of button images) to the materials in all weeks are designed to show on the homepage. Quality Matters metrics recommend a ‘Start Here’ indication for new students to the course. The numbered button links can lead to the specific module on the ‘Modules’ page. Hovering over the button reveals the title or lesson name. This homepage is designed with the integration of aesthetics and module-based representations. The customized images inserted in module links match the course’s structure smoothly and enhance the cohesion among weekly modules.

Module Structure Examples.

The structure of Canvas ‘Modules’ can serve as a course map. Clear and concise naming, location, and structure are important elements to students being able to understand and work through the courses. Modules organize the course content in a linear progression by weeks or topics. A module may contain pages (learning objectives, learning activities) and assessments (quizzes, assignments, discussions). Proper use of text header, indentation, and copy-paste characters can help students locate what they need and focus on a specific section of the module.

The screenshot shows an example of a Module that was set up based on sections of different purposes. The screenshot shows an example of a Module that was set up based on weekly materials.
The screenshot illustrates an example of a Module that was set up based on week.

Content Page Examples.

Canvas ‘Pages’ may contain videos, texts, and links to files and other class materials. Pages can be linked to other pages as well. Moreover, they can be used as a collaboration tool for course or group wikis where only users with assigned permissions can have access. Canvas can keep the entire history of the page to account for updates, revisions, and changes over time. ‘Rich Content Editor’ permits to use customized CSS and advanced HTML coding to create and embed contents.

Resource Page that contains links to different unversity resources for research. A Canvas 'Page' sample of different topics with icons. A Canvas 'Page' sample of embedded interactive multimedia course materials by using Google Slides.
Each week, the Weekly 'Page' includes rich media and can be linked to other pages, assignments, discussions, and other course activities in Canvas. Content Wiki - A wiki that can be a collaborative tool that allows students to create web contents. Jeopardy game.

Course Information Page Examples.

A "Start Here" page or syllabus page could be designed to include the ‘must-know’ information for students. This approach can display the information about the teacher (e.g., a video with a quick introduction to the course, tips on how to prepare for the course, university resources, and technical support available for students.

Start Here Page designed to serve as alternative form of a syllabus. The first item in the first module includes the need to know information for students.
Syllabus Page displayed the instructor information, course description, course objectives and grading scheme.

CidiLabs DesignPLUS.

I participated in "CidiLabs DesignPLUS” Training Series and integrated new insights into the instructional skills to create a customized Canvas course homepage, improve the layouts and accessibility of Canvas pages, and customize/embed meaningful images into LMS.

The Module List is designed to assist my students in effortlessly navigating to their desired modules. The combination of DesignPLUS Tools and a custom stylesheet elevated my advising Canvas site, propelling it beyond its previous boundaries and unlocking a new level of customization. By solely utilizing DesignPLUS tools, I was able to redesign our program's closure exam Canvas homepage within 10 to 15 minutes.
The Add Content Blocks tool is utilized to structure and adjust various styling elements according to the information flow. Furthermore, HTML Snippets are employed to create responsive columns, enabling the consolidation of smaller content blocks and maintaining shorter page lengths. The FAQ section for my advisees is crafted by customizing the style of the entire page, integrating hidden gems from DesignPLUS Tools, and using the advanced DesignPLUS Tools such as custom CSS, HTML attributes, and accordions. Embedding the CEPH accreditation-required survey in the closure exam can ensure that I have sufficient data to collect and interpret for our program evaluation.

Harmonize Discussion Board.

A variety of functions in “Harmonize” can be integrated with Canvas to increase student engagement and promote inclusive learning environments. Harmonize has a modern, visually appealing layout with capabilities that students and instructors can create posts using rich media, including text, images, video, and audio. Moreover, “Harmonize Discussion Boards” can be integrated with “TurnItIn” to empower students to do their best, original work with a self-plagiarism detection system.

The Grid View feature in Harmonize discussions board presents posts in tiles or cards, making it possible to create an online gallery experience that was previously unachievable.
Harmonize's diverse features, such as reactions, multiple discussion threads, and the ability to add multimedia for students to present their ideas, greatly enhance student engagement.

Created by Brian Chen