Creating Visually Stunning Canvas Pages with Cidi Lab’s Design Tools

Concurrent Session 7

Session Materials

Brief Abstract

An intuitive, well-designed e-learning user interface is easy to create using Cidi Labs’ DesignPLUS Design Tools. This BYOD workshop will guide you through the process of building Canvas pages that ease user cognitive load through beautiful, streamlined designs that focus on the student learning journey.

Presenters

Extended Abstract

In many cases, a student’s first interaction with a course’s content is through the e-learning system. Instructors want to showcase course content while welcoming users with engaging, well-designed desktop and mobile interfaces that enhance the student's online learning experience. But how do we quickly and consistently build this type of learning environment? Cidi Labs’ DesignPlus tools will empower you to consistently deliver courses that are user-friendly, accessible, and student-focused.

DesignTools allows course designers to manipulate the appearance and add intuitive interactions within Canvas pages, so instructors and instructional designers can quickly scaffold courses. In this hands-on workshop, the presenters will be demonstrating a student journey and then building a responsive landing page and content page in Canvas using DesignPlus: Design Tools for Canvas. Be sure to bring your own device with DesignTools functioning in your preferred web browser. We will be customizing themes and using the block editor, you will create a landing page with simple, clear navigation so students know exactly what to do at each step of the semester. Then we will organize complex content into easily manageable micro-interactions and reduce cognitive load so students can focus on what’s important - the course’s lessons.

Courses built with Design Tools are ADA compliant, engaging, sustainable, and do not require in-depth knowledge of HTML, CSS, or JavaScript. Add engagement by adding calls to action, add interactivity by adding tabs, accordions, and provide module navigation with progress bars. Learn how to use accessibility tools to check your page for color and heading accessibility. 

Workshop objectives will be the following:

  1. Identify the logic and see a demonstration of how to construct a student journey wireframe to plan a course user flow

  2. Build a course landing page using the Canvas RCE and Design Tools

  3. Build a content page using the Canvas RCE and Design Tools

  4. Add and modify column layouts, add box styles, add and style buttons

  5. Add and style module tab navigation

  6. Add and style a progress bar

Workshop prerequisites:

  1. Basic understanding of Design Tools and HTML in Canvas

  2. Laptop with functioning Design Tools editor

  3. Sandbox course

Well-planned, intuitive user interface and experience design on desktop and mobile is now easier than ever with Cidi Labs DesignTools. Considering the student journey throughout your course and mastering the tools to achieve a great user experience in Canvas is attainable with DesignPlus Design Tools! You will leave this workshop empowered to create a clean user experience making it easier for students to focus on the learning process.