Canvas Design Tools: Streamline Course Creation and Enhance Visual Appeal
The Design Tools Canvas
The design tools canvas is a collection of software tools that augment the native Canvas Rich Content Editor. The tools are hosted by Cidi Labs and Montclair State University has procured a site-wide license for the tool for faculty.
Use these tools when editing a content page, assignment, discussion, or quiz. They will help you avoid formatting issues that make your course difficult to navigate for students with assistive technology.
HTML Syllabus Template
The HTML syllabus template is available for instructors to use in the Syllabus tool of a Canvas course. The template provides areas for you to communicate course administrative information, course learning objectives, student responsibilities, required materials, technology requirements, policies on exam proctoring and basic information about Canvas support services.
To access the template, navigate to your course Syllabus tool and click on the Launch Button (Option+Shift+D for Mac users or Alt+Shift+D for PC users). You may also import the NMSU syllabus template into your courses by going to Canvas Commons and searching “Syllabus Template.” The template will then be imported as a page in your course.
Design Tools, developed by CiDi Labs (Kennethware), has several time-saving features. Watch this video for more information. The tools are accessible from any edit screen in your Canvas course.
Page Templates
Cidi Labs Design Tools are available to help you streamline the creation of course banners, content pages, assignments and discussions. These templates (available via the garnet rocket ship icon when in Edit mode) provide a way to add more structure and design to your Canvas courses.
Page templates are fully-formed HTML files that define the layout and high-level look-and-feel of Web pages. They include the placement of contribution regions, navigation fragments and site-wide images. Page templates can also be divided into sections using layouts, which determine how the content of a page will be displayed. When you create a new page based on a template, you can choose which template to use in the Page Attributes box. NOTE: When you change the template of a page, structured page data (such as widgets and sections) is NOT saved to the new template.
Multi-Tool
The Multi-Tool is a convenient way to format and adjust content within Canvas. It can be opened anywhere you see an edit button in Canvas, including course homepages, assignments, quizzes, discussions and pages. The Multi-Tool features a graphical interface to customize any HTML style, as well as an accessibility checker for header structure, alt text, links and color contrast.
Create a syllabi, newsletter, flyer or other engaging design with ease. This tool offers an array of professionally-designed templates to get your ideas started. It also has the ability to automatically scale your designs with a range of preset shapes, and provides advanced typographic settings. The Pro version includes advanced technical illustration tools for visualizing geospatial data and constructing complex diagrams. Dimensioning tools enable you to measure distances, affirm scale, join objects with mathematical accuracy, and create blueprints, floor plans and architectural designs.
Banner Image
The Banner Image (also known as a “hero” or “cover photo”) is the large image at the top of a website. It’s an opportunity to create a memorable impression, reinforce your brand, and connect with your audience.
When creating a Banner Image, be sure to keep it simple and clear. The best banners are one-third text and two-thirds visuals, or less.
Also, be careful about using an image that contains a person—it should be an image that doesn’t attempt to convey information or contain a subject that could cause a viewer to be uncomfortable.
OIT made Design Tools available campus-wide based on positive feedback from faculty participants in the Cidi Labs Template Design & Accessibility Pilot during Fall 2018. To access Design Tools, go to a course that has the Home page template already selected and click the garnet rocket ship icon.
Icons
Icons can help guide users through a process without the need for large amounts of explanatory text. Well-designed icons are recognizable across devices and will make your users feel delighted and excited to take action on your website.
When designing a set of icons, it’s important to keep in mind that each icon should have a consistent look and feel to it. This includes the stroke (or outline) and fill, corner shape, style (flat vs. three-dimensional) and color scheme.
If you would like to learn more about using Design Tools in Canvas, please attend a 1-hour training session. ITDS hosts groups and one-on-one workshops on a regular basis, check the ITDS Training Calendar for details. To access Design Tools, click edit on a content page, assignment, discussion, quiz or other Canvas component and then click the garnet rocket ship icon in the toolbar.