{"id":28,"date":"2021-01-25T18:06:48","date_gmt":"2021-01-25T23:06:48","guid":{"rendered":"https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/chapter\/canvas-design-considerations\/"},"modified":"2021-04-21T14:47:27","modified_gmt":"2021-04-21T18:47:27","slug":"canvas-design-considerations","status":"publish","type":"chapter","link":"https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/chapter\/canvas-design-considerations\/","title":{"raw":"Canvas Design Considerations","rendered":"Canvas Design Considerations"},"content":{"raw":"This section provides suggestions and examples of how you could design the content of pages in your Canvas course.\r\n<h2>Home Page<\/h2>\r\n<h3>Banner Image<\/h3>\r\n<img src=\"https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-content\/uploads\/sites\/1259\/2021\/01\/examplebanner-01.png\" alt=\"Example banner\" width=\"100%\" data-api-endpoint=\"https:\/\/canvas.ubc.ca\/api\/v1\/courses\/51366\/files\/8016570\" data-api-returntype=\"file\" \/>\r\n<h3>Home Page Banner:<\/h3>\r\nDownload the original file: File examplebanner.ai could not be included in the ePub document. Please see separate zip file for access. (5.1MB, Abobe illustrator)\r\n\r\nDimensions: 1000px x 200px (to fit Canvas Home Page dimensions)\r\n<h3>Download copyright-free images:<\/h3>\r\n<div style=\"padding: 12px 16px;background-color: #f5f5f5\">\r\n\r\nThe following web sites give access to images that are free for commercial use with no attribution required. You can search for images to illustrate course topics or concepts.\r\n\r\nUBC Science Flickr: <a href=\"https:\/\/www.flickr.com\/photos\/ubcscience\/albums\">https:\/\/www.flickr.com\/photos\/ubcscience\/albums<\/a>\r\n\r\nUBC Brand Marketing Flickr: <a href=\"https:\/\/www.flickr.com\/photos\/134760388@N08\/\">https:\/\/www.flickr.com\/photos\/134760388@N08\/<\/a>\r\n\r\nUBC Media Relations Flickr: <a href=\"https:\/\/www.flickr.com\/photos\/ubcpublicaffairs\/albums\">https:\/\/www.flickr.com\/photos\/ubcpublicaffairs\/albums<\/a>\r\n\r\nPixabay: <a href=\"https:\/\/pixabay.com\/\">https:\/\/pixabay.com\/<\/a>\r\n\r\nFreepik: <a href=\"https:\/\/www.freepik.com\/\">https:\/\/www.freepik.com\/<\/a>\r\n\r\n<\/div>\r\n\r\n<hr \/>\r\n\r\n<h2>Formatting: creating structure on a page<\/h2>\r\nPresenting information in Canvas is quite easy and allows you to create visual hierarchies within a page, assignment or other element within their course. This page highlights some ways to create this hierarchy to present information in a way that is accessible to all learners.\r\n\r\n<hr \/>\r\n\r\n<h2>Headings<\/h2>\r\n<img class=\"alignnone wp-image-374 size-full\" src=\"https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-content\/uploads\/sites\/1259\/2021\/01\/headerscanvas.png\" alt=\"\" width=\"1049\" height=\"239\" \/>\r\n\r\nBy using text styling in the canvas rich-text editor, you can create a visual hierarchy of text, which can be read by most screen readers in place to assist learners who may be visually impaired. To use these, just select a Heading size you'd like to use - usually you can use Heading 2 for major sections, and Heading 3-5 for subsections. This also helps to create a visual structure for all students, to let them know that content is broken into sections. All sections on this page are broken up in this way.\r\n<h3>Sub-headings<\/h3>\r\nSub headings are also encouraged, as these will allow learners to skip through content to see major sections, with minor sub-sections both visually and through screen reading software.\r\n\r\n<img class=\"alignnone wp-image-376 size-full\" src=\"https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-content\/uploads\/sites\/1259\/2021\/01\/canvasheading3.png\" alt=\"\" width=\"1049\" height=\"239\" \/>\r\n<h3>Sub-Headings and Accessibility<\/h3>\r\nUsing heading tags is important as it allows those using screen reader software who many have visual challenges to 'read' text in a hierarchical fashion, so structuring content around major topics with sub-topics can help learners jump to specific areas of a page and focus on what they want to. The below structure outlines how this may work.\r\n<ul>\r\n \t<li>H2: Animals\r\n<ul>\r\n \t<li>H3: Mammals\r\n<ul>\r\n \t<li>H4: Gibbons<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>H3: Reptiles\r\n<ul>\r\n \t<li>H4: Iguanas<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li>H2: Plants<\/li>\r\n<\/ul>\r\n<h3>Indenting<\/h3>\r\n<img class=\"alignnone size-full wp-image-372\" src=\"https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-content\/uploads\/sites\/1259\/2021\/01\/indentingcanvas.png\" alt=\"\" width=\"230\" height=\"118\" \/>\r\n\r\n&nbsp;\r\n\r\nText can be indented...\r\n<p style=\"padding-left: 30px\">...like this, to bring attention to a quote or other important line of text. Text can even be made <strong>bold<\/strong> or <em>italicized<\/em> to bring extra emphasis to written content.<\/p>\r\n&nbsp;\r\n<div style=\"background-color: #dedede;font-size: 1em;margin: 0px;padding: 10px\">\r\n\r\n<strong>Tip<\/strong>\r\n\r\nDo not underline text. Underlined text typically indicates a link, so non-linked, but underlined text can create confusion for students.\r\n\r\n<\/div>\r\n&nbsp;\r\n<h3>Bullets<\/h3>\r\nJust as in other word processing applications, the use of bullets to provide concise and stratified information is a great way to present information.\r\n<ul>\r\n \t<li>Dotted bullets\r\n<ul>\r\n \t<li>provide a great way to provide\r\n<ul>\r\n \t<li>hierarchy<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<ol>\r\n \t<li>Numbered bullets<\/li>\r\n \t<li>could be used to list the<\/li>\r\n \t<li>steps involved in completing a task<\/li>\r\n \t<li>within Canvas<\/li>\r\n<\/ol>\r\n<h3>Emojis<\/h3>\r\nUse of emojis (characters that express emotions or emotional reactions) are very common in day to day online discourse, so using them within the context of Canvas is completely fine - even encouraged \ud83c\udf89.\r\n\r\nEmojis can be used anywhere text is present, including module headings (use a\u00a0 \u2705 a\u00a0 \u279c to mark current modules), rubrics (for assessment criteria levels - \ud83d\ude41 \ud83d\ude11 \ud83d\ude42 \ud83d\ude03), etc. They are also a good way to highlight text for attention (like the heading above) or to liven up some text.\r\n<h3>Blended Course?<\/h3>\r\n<div style=\"padding: 12px 16px;background-color: #f5f5f5\">One effective use of emojis in a blended course is to flag pre-readings or pre-class homework.\u00a0 Make sure you use the particular emoji consistently to convey the same meaning each time it is used. And be careful not to use too many colourful and distracting emoji's, as that could detract from the student experience.<\/div>\r\n&nbsp;\r\n<h4>Tables<\/h4>\r\nTables should primarily used to share data, not for design purposes. Tables within Canvas can provide an opportunity to present information in a clean and structured manner.\r\n<h3>White Space<\/h3>\r\nDefine, and explain how it improves reading and ability to focus, and process the information.\r\n\r\nExplain that default formatting doesn't allow for the formatting conventions we are used to in print, and Canvas behaves inconsistently with white space before\/after paragraphs and other elements....\r\n\r\n&nbsp;\r\n<div style=\"background-color: #dedede;font-size: 1em;margin: 0px;padding: 10px\">\r\n\r\n<span style=\"color: #002145\"><strong>Tips<\/strong><\/span>\r\n<ul>\r\n \t<li>When in doubt, it's better to add more white space, rather than less.<\/li>\r\n \t<li>Add a space at the bottom of the Canvas pages, that way when they are viewed in the course, the content is not running to the horizontal line at the bottom of the page.<\/li>\r\n<\/ul>\r\n<\/div>\r\n\r\n<hr \/>\r\n\r\n<h2>References<\/h2>\r\nMany online readings pages will include references to academic articles, book chapters or websites. To keep these in the hierarchy of the page, use heading style H2 for the word \"References\", but to visually separate them, it's recommended to use a horizontal rule hr tag followed by a heading and each reference in APA format (if that is what you want to model for the students).\u00a0 Example below with sample text:\r\n\r\nThe items below are listed for your reference only, and you are <strong>not<\/strong> required to read them.\r\n<ul>\r\n \t<li>Hartley, James. (2004). Designing instructional and informational text. Handbook of research on educational communications and technology.<\/li>\r\n \t<li><a href=\"https:\/\/www.interaction-design.org\/literature\/article\/the-power-of-white-space\" target=\"_blank\" rel=\"noopener noreferrer\">The power of white space<\/a><\/li>\r\n<\/ul>\r\n&nbsp;\r\n\r\n<hr \/>\r\n\r\n<h2>Colour Use for Learning<\/h2>\r\n<h3>The Basics<\/h3>\r\nFor online learning content, the use of a limited number of colours is best practice. This evidence-based suggestion is rooted in cognitive load theory, and research which shows that:\r\n<div style=\"padding: 12px 16px;background-color: #f5f5f5\">\r\n<ul>\r\n \t<li class=\"p1\">\"readers like additional color; and<\/li>\r\n \t<li class=\"p1\">color can help learning (see Dwyer, 1978); but<\/li>\r\n \t<li class=\"p1\">extra colors have to be used sparingly and consistently if they are not to confuse the readers;<\/li>\r\n \t<li class=\"p1\">some colors stand out more than others, so it is unhelpful to use a range of colors on the same page\" (Hartley, p.921)<\/li>\r\n<\/ul>\r\n<\/div>\r\nLimiting extraneous visual information, such as colour, can help learners focus on learning.\r\n<h3>UBC Canvas Colours<\/h3>\r\nMost often you will see that the Learning Management System (LMS) have adopted institutional colours. The UBC Canvas LMS uses the following UBC brand colours.\r\n<div class=\"content-box\">\r\n<div class=\"grid-row\">\r\n<div class=\"col-xs\">\r\n<div style=\"height: 100px;background-color: #002145\">\r\n<div style=\"padding: 25px 0;text-align: center\"><span style=\"color: #ffffff;font-size: 24pt\">#002145<\/span><\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"col-xs\">\r\n<div style=\"height: 100px;background-color: #0055b7\">\r\n<div style=\"padding: 25px 0;text-align: center\"><span style=\"color: #ffffff;font-size: 24pt\">#0055B7<\/span><\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"col-xs\">\r\n<div style=\"height: 100px;background-color: #f5f5f5\">\r\n<div style=\"padding: 25px 0;text-align: center\"><span style=\"color: #000000;font-size: 24pt\">#F5F5F5<\/span><\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"col-xs\">\r\n<div style=\"height: 100px;background-color: #ffffff\">\r\n<div style=\"padding: 25px 0;text-align: center\"><span style=\"color: #000000;font-size: 24pt\">#FFFFFF<\/span><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\nThese colours are used in the main navigation menu, bread crumbs, visited links and other areas in the Canvas learning environment. The colours selected are versatile and the contrast ratio of these colours is in compliance with the <a href=\"https:\/\/www.w3.org\/TR\/2008\/REC-WCAG20-20081211\/#visual-audio-contrast-contrast\" target=\"_blank\" rel=\"noopener noreferrer\">Web Content Accessibility Guidelines<\/a>.\r\n\r\nUsing black for text and standard dark blue for buttons and other shapes ensures that your course looks professional and part of the UBC brand.\r\n\r\nIn addition to the UBC Canvas colours above, you may be interested in the web colour for Faculty of Science:\r\n<div class=\"content-box\">\r\n<div class=\"grid-row\">\r\n<div class=\"col-xs\">\r\n<div style=\"height: 100px;background-color: #3399cc\">\r\n<div style=\"padding: 25px 0;text-align: center\"><span style=\"color: #000000;font-size: 24pt\">#3399CC<\/span><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n<hr \/>\r\n\r\n<h2>Science Canvas Template Recommendations<\/h2>\r\nLimiting the additional colours to neutral shades of grey helps learners as it reduces visual complexity. A light grey and a dark grey are used in the template and samples pages so that the text and background colour combos with be readable; background combos using medium tones can often reduce legibility.\r\n\r\nLiterature on the design of online learning materials also supports the need for consistency, as students may feel lost as they navigate from course to course if colour schemes or even course layouts change.\r\n<h3>Universal Design for Learners<\/h3>\r\nThis colour scheme is designed with consideration to students with visual disabilities, cognitive challenges caused by ADHD, anxiety, etc... and it will benefits all learners.\r\n\r\nSource: page developed by Parm Gill, ETS, UBC.","rendered":"<p>This section provides suggestions and examples of how you could design the content of pages in your Canvas course.<\/p>\n<h2>Home Page<\/h2>\n<h3>Banner Image<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-content\/uploads\/sites\/1259\/2021\/01\/examplebanner-01.png\" alt=\"Example banner\" width=\"100%\" data-api-endpoint=\"https:\/\/canvas.ubc.ca\/api\/v1\/courses\/51366\/files\/8016570\" data-api-returntype=\"file\" \/><\/p>\n<h3>Home Page Banner:<\/h3>\n<p>Download the original file: File examplebanner.ai could not be included in the ePub document. Please see separate zip file for access. (5.1MB, Abobe illustrator)<\/p>\n<p>Dimensions: 1000px x 200px (to fit Canvas Home Page dimensions)<\/p>\n<h3>Download copyright-free images:<\/h3>\n<div style=\"padding: 12px 16px;background-color: #f5f5f5\">\n<p>The following web sites give access to images that are free for commercial use with no attribution required. You can search for images to illustrate course topics or concepts.<\/p>\n<p>UBC Science Flickr: <a href=\"https:\/\/www.flickr.com\/photos\/ubcscience\/albums\">https:\/\/www.flickr.com\/photos\/ubcscience\/albums<\/a><\/p>\n<p>UBC Brand Marketing Flickr: <a href=\"https:\/\/www.flickr.com\/photos\/134760388@N08\/\">https:\/\/www.flickr.com\/photos\/134760388@N08\/<\/a><\/p>\n<p>UBC Media Relations Flickr: <a href=\"https:\/\/www.flickr.com\/photos\/ubcpublicaffairs\/albums\">https:\/\/www.flickr.com\/photos\/ubcpublicaffairs\/albums<\/a><\/p>\n<p>Pixabay: <a href=\"https:\/\/pixabay.com\/\">https:\/\/pixabay.com\/<\/a><\/p>\n<p>Freepik: <a href=\"https:\/\/www.freepik.com\/\">https:\/\/www.freepik.com\/<\/a><\/p>\n<\/div>\n<hr \/>\n<h2>Formatting: creating structure on a page<\/h2>\n<p>Presenting information in Canvas is quite easy and allows you to create visual hierarchies within a page, assignment or other element within their course. This page highlights some ways to create this hierarchy to present information in a way that is accessible to all learners.<\/p>\n<hr \/>\n<h2>Headings<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-374 size-full\" src=\"https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-content\/uploads\/sites\/1259\/2021\/01\/headerscanvas.png\" alt=\"\" width=\"1049\" height=\"239\" srcset=\"https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-content\/uploads\/sites\/1259\/2021\/01\/headerscanvas.png 1049w, https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-content\/uploads\/sites\/1259\/2021\/01\/headerscanvas-300x68.png 300w, https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-content\/uploads\/sites\/1259\/2021\/01\/headerscanvas-1024x233.png 1024w, https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-content\/uploads\/sites\/1259\/2021\/01\/headerscanvas-768x175.png 768w, https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-content\/uploads\/sites\/1259\/2021\/01\/headerscanvas-65x15.png 65w, https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-content\/uploads\/sites\/1259\/2021\/01\/headerscanvas-225x51.png 225w, https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-content\/uploads\/sites\/1259\/2021\/01\/headerscanvas-350x80.png 350w\" sizes=\"auto, (max-width: 1049px) 100vw, 1049px\" \/><\/p>\n<p>By using text styling in the canvas rich-text editor, you can create a visual hierarchy of text, which can be read by most screen readers in place to assist learners who may be visually impaired. To use these, just select a Heading size you&#8217;d like to use &#8211; usually you can use Heading 2 for major sections, and Heading 3-5 for subsections. This also helps to create a visual structure for all students, to let them know that content is broken into sections. All sections on this page are broken up in this way.<\/p>\n<h3>Sub-headings<\/h3>\n<p>Sub headings are also encouraged, as these will allow learners to skip through content to see major sections, with minor sub-sections both visually and through screen reading software.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-376 size-full\" src=\"https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-content\/uploads\/sites\/1259\/2021\/01\/canvasheading3.png\" alt=\"\" width=\"1049\" height=\"239\" srcset=\"https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-content\/uploads\/sites\/1259\/2021\/01\/canvasheading3.png 1049w, https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-content\/uploads\/sites\/1259\/2021\/01\/canvasheading3-300x68.png 300w, https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-content\/uploads\/sites\/1259\/2021\/01\/canvasheading3-1024x233.png 1024w, https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-content\/uploads\/sites\/1259\/2021\/01\/canvasheading3-768x175.png 768w, https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-content\/uploads\/sites\/1259\/2021\/01\/canvasheading3-65x15.png 65w, https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-content\/uploads\/sites\/1259\/2021\/01\/canvasheading3-225x51.png 225w, https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-content\/uploads\/sites\/1259\/2021\/01\/canvasheading3-350x80.png 350w\" sizes=\"auto, (max-width: 1049px) 100vw, 1049px\" \/><\/p>\n<h3>Sub-Headings and Accessibility<\/h3>\n<p>Using heading tags is important as it allows those using screen reader software who many have visual challenges to &#8216;read&#8217; text in a hierarchical fashion, so structuring content around major topics with sub-topics can help learners jump to specific areas of a page and focus on what they want to. The below structure outlines how this may work.<\/p>\n<ul>\n<li>H2: Animals\n<ul>\n<li>H3: Mammals\n<ul>\n<li>H4: Gibbons<\/li>\n<\/ul>\n<\/li>\n<li>H3: Reptiles\n<ul>\n<li>H4: Iguanas<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>H2: Plants<\/li>\n<\/ul>\n<h3>Indenting<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-372\" src=\"https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-content\/uploads\/sites\/1259\/2021\/01\/indentingcanvas.png\" alt=\"\" width=\"230\" height=\"118\" srcset=\"https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-content\/uploads\/sites\/1259\/2021\/01\/indentingcanvas.png 230w, https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-content\/uploads\/sites\/1259\/2021\/01\/indentingcanvas-65x33.png 65w, https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-content\/uploads\/sites\/1259\/2021\/01\/indentingcanvas-225x115.png 225w\" sizes=\"auto, (max-width: 230px) 100vw, 230px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Text can be indented&#8230;<\/p>\n<p style=\"padding-left: 30px\">&#8230;like this, to bring attention to a quote or other important line of text. Text can even be made <strong>bold<\/strong> or <em>italicized<\/em> to bring extra emphasis to written content.<\/p>\n<p>&nbsp;<\/p>\n<div style=\"background-color: #dedede;font-size: 1em;margin: 0px;padding: 10px\">\n<p><strong>Tip<\/strong><\/p>\n<p>Do not underline text. Underlined text typically indicates a link, so non-linked, but underlined text can create confusion for students.<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<h3>Bullets<\/h3>\n<p>Just as in other word processing applications, the use of bullets to provide concise and stratified information is a great way to present information.<\/p>\n<ul>\n<li>Dotted bullets\n<ul>\n<li>provide a great way to provide\n<ul>\n<li>hierarchy<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ol>\n<li>Numbered bullets<\/li>\n<li>could be used to list the<\/li>\n<li>steps involved in completing a task<\/li>\n<li>within Canvas<\/li>\n<\/ol>\n<h3>Emojis<\/h3>\n<p>Use of emojis (characters that express emotions or emotional reactions) are very common in day to day online discourse, so using them within the context of Canvas is completely fine &#8211; even encouraged \ud83c\udf89.<\/p>\n<p>Emojis can be used anywhere text is present, including module headings (use a\u00a0 \u2705 a\u00a0 \u279c to mark current modules), rubrics (for assessment criteria levels &#8211; \ud83d\ude41 \ud83d\ude11 \ud83d\ude42 \ud83d\ude03), etc. They are also a good way to highlight text for attention (like the heading above) or to liven up some text.<\/p>\n<h3>Blended Course?<\/h3>\n<div style=\"padding: 12px 16px;background-color: #f5f5f5\">One effective use of emojis in a blended course is to flag pre-readings or pre-class homework.\u00a0 Make sure you use the particular emoji consistently to convey the same meaning each time it is used. And be careful not to use too many colourful and distracting emoji&#8217;s, as that could detract from the student experience.<\/div>\n<p>&nbsp;<\/p>\n<h4>Tables<\/h4>\n<p>Tables should primarily used to share data, not for design purposes. Tables within Canvas can provide an opportunity to present information in a clean and structured manner.<\/p>\n<h3>White Space<\/h3>\n<p>Define, and explain how it improves reading and ability to focus, and process the information.<\/p>\n<p>Explain that default formatting doesn&#8217;t allow for the formatting conventions we are used to in print, and Canvas behaves inconsistently with white space before\/after paragraphs and other elements&#8230;.<\/p>\n<p>&nbsp;<\/p>\n<div style=\"background-color: #dedede;font-size: 1em;margin: 0px;padding: 10px\">\n<p><span style=\"color: #002145\"><strong>Tips<\/strong><\/span><\/p>\n<ul>\n<li>When in doubt, it&#8217;s better to add more white space, rather than less.<\/li>\n<li>Add a space at the bottom of the Canvas pages, that way when they are viewed in the course, the content is not running to the horizontal line at the bottom of the page.<\/li>\n<\/ul>\n<\/div>\n<hr \/>\n<h2>References<\/h2>\n<p>Many online readings pages will include references to academic articles, book chapters or websites. To keep these in the hierarchy of the page, use heading style H2 for the word &#8220;References&#8221;, but to visually separate them, it&#8217;s recommended to use a horizontal rule hr tag followed by a heading and each reference in APA format (if that is what you want to model for the students).\u00a0 Example below with sample text:<\/p>\n<p>The items below are listed for your reference only, and you are <strong>not<\/strong> required to read them.<\/p>\n<ul>\n<li>Hartley, James. (2004). Designing instructional and informational text. Handbook of research on educational communications and technology.<\/li>\n<li><a href=\"https:\/\/www.interaction-design.org\/literature\/article\/the-power-of-white-space\" target=\"_blank\" rel=\"noopener noreferrer\">The power of white space<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2>Colour Use for Learning<\/h2>\n<h3>The Basics<\/h3>\n<p>For online learning content, the use of a limited number of colours is best practice. This evidence-based suggestion is rooted in cognitive load theory, and research which shows that:<\/p>\n<div style=\"padding: 12px 16px;background-color: #f5f5f5\">\n<ul>\n<li class=\"p1\">&#8220;readers like additional color; and<\/li>\n<li class=\"p1\">color can help learning (see Dwyer, 1978); but<\/li>\n<li class=\"p1\">extra colors have to be used sparingly and consistently if they are not to confuse the readers;<\/li>\n<li class=\"p1\">some colors stand out more than others, so it is unhelpful to use a range of colors on the same page&#8221; (Hartley, p.921)<\/li>\n<\/ul>\n<\/div>\n<p>Limiting extraneous visual information, such as colour, can help learners focus on learning.<\/p>\n<h3>UBC Canvas Colours<\/h3>\n<p>Most often you will see that the Learning Management System (LMS) have adopted institutional colours. The UBC Canvas LMS uses the following UBC brand colours.<\/p>\n<div class=\"content-box\">\n<div class=\"grid-row\">\n<div class=\"col-xs\">\n<div style=\"height: 100px;background-color: #002145\">\n<div style=\"padding: 25px 0;text-align: center\"><span style=\"color: #ffffff;font-size: 24pt\">#002145<\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"col-xs\">\n<div style=\"height: 100px;background-color: #0055b7\">\n<div style=\"padding: 25px 0;text-align: center\"><span style=\"color: #ffffff;font-size: 24pt\">#0055B7<\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"col-xs\">\n<div style=\"height: 100px;background-color: #f5f5f5\">\n<div style=\"padding: 25px 0;text-align: center\"><span style=\"color: #000000;font-size: 24pt\">#F5F5F5<\/span><\/div>\n<\/div>\n<\/div>\n<div class=\"col-xs\">\n<div style=\"height: 100px;background-color: #ffffff\">\n<div style=\"padding: 25px 0;text-align: center\"><span style=\"color: #000000;font-size: 24pt\">#FFFFFF<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>These colours are used in the main navigation menu, bread crumbs, visited links and other areas in the Canvas learning environment. The colours selected are versatile and the contrast ratio of these colours is in compliance with the <a href=\"https:\/\/www.w3.org\/TR\/2008\/REC-WCAG20-20081211\/#visual-audio-contrast-contrast\" target=\"_blank\" rel=\"noopener noreferrer\">Web Content Accessibility Guidelines<\/a>.<\/p>\n<p>Using black for text and standard dark blue for buttons and other shapes ensures that your course looks professional and part of the UBC brand.<\/p>\n<p>In addition to the UBC Canvas colours above, you may be interested in the web colour for Faculty of Science:<\/p>\n<div class=\"content-box\">\n<div class=\"grid-row\">\n<div class=\"col-xs\">\n<div style=\"height: 100px;background-color: #3399cc\">\n<div style=\"padding: 25px 0;text-align: center\"><span style=\"color: #000000;font-size: 24pt\">#3399CC<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<hr \/>\n<h2>Science Canvas Template Recommendations<\/h2>\n<p>Limiting the additional colours to neutral shades of grey helps learners as it reduces visual complexity. A light grey and a dark grey are used in the template and samples pages so that the text and background colour combos with be readable; background combos using medium tones can often reduce legibility.<\/p>\n<p>Literature on the design of online learning materials also supports the need for consistency, as students may feel lost as they navigate from course to course if colour schemes or even course layouts change.<\/p>\n<h3>Universal Design for Learners<\/h3>\n<p>This colour scheme is designed with consideration to students with visual disabilities, cognitive challenges caused by ADHD, anxiety, etc&#8230; and it will benefits all learners.<\/p>\n<p>Source: page developed by Parm Gill, ETS, UBC.<\/p>\n","protected":false},"author":253,"menu_order":2,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-28","chapter","type-chapter","status-publish","hentry"],"part":204,"_links":{"self":[{"href":"https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-json\/pressbooks\/v2\/chapters\/28","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-json\/wp\/v2\/users\/253"}],"version-history":[{"count":14,"href":"https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-json\/pressbooks\/v2\/chapters\/28\/revisions"}],"predecessor-version":[{"id":482,"href":"https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-json\/pressbooks\/v2\/chapters\/28\/revisions\/482"}],"part":[{"href":"https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-json\/pressbooks\/v2\/parts\/204"}],"metadata":[{"href":"https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-json\/pressbooks\/v2\/chapters\/28\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-json\/wp\/v2\/media?parent=28"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-json\/pressbooks\/v2\/chapter-type?post=28"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-json\/wp\/v2\/contributor?post=28"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/skylightonlineteachingguide\/wp-json\/wp\/v2\/license?post=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}