Page Design Tips

Design with a purpose! (Example:  Header Level 2)

There is much more to page design than just putting words on the page.  You must always consider your learners, how they learn, their ages, and their individual abilities. Here are some design tips that will help you design easier to read pages.

Use the built-in page styling tools. (Example:  Header Level 3)

For more accessible pages, build your page structure using the built-in styling tools on the drop down menu in the Rich Content Editor.  The page structure options in Canvas are similar to those in Word documents.  They are Paragraph, Header Level 1, Header Level 2 and so on.  Please note that the default page title in Canvas (top left in gray) will always be designated as Header Level 1.  Your next header title should be marked as Header Level 2 and so on.  All regular paragraph text should be marked as Paragraph text. I have indicated examples of these formatting options in light grey throughout this page. (Example:  Paragraph Text)

Use white space.

Your eyes need to rest when reading, so be sure to leave some unfilled negative space around the edges of your page (margins) and between your paragraphs.  If you look, you will see that all of the Content Pages in this course have left, right, top, and bottom margins. 

Choose 2-3 colors and use them consistently.

Canvas has already chosen one color for you...by default, all links will automatically be be formatted in a light aqua blue-ish color.  Changing this on every page is a pain, so it's a good idea just to work it into your color scheme.  If you look, you'll see that the color scheme for this course is gray with accents of Canvas default blue.  Also note that the default text color in Canvas is a very dark grey, not black.

Create a rhythm or flow in your design.

Repeated elements help students find and understand information faster.  The rhythm created by repeated elements will tell your reader were to go and what to do next.  Some ways repetition can be achieved are through consistent color use, using page banners, or always putting important text in the same distinct location and/or contrasting color.  Some rhythmic elements in this course include a repeated color scheme (gray and Canvas blue), custom page banners, headers, and the colored bars indicating the end of the text on each page. 

Use related images as needed.

Many people learn and remember information best by seeing pictures or other visuals, so include related images, charts, and graphs with your text when applicable.  Images can also increase the visual appeal or aesthetics of your page, but be sure to look for open source images that are not copyright protected.  All images should be appropriately cited and should also include alternative text descriptions. For more information on using open images and other open educational resources (OER), please visit SBCTC's public facing OER 101 course materials or register for SBCTC's free OER 101 Links to an external site. course.  To learn more about adding alternative text to images, please visit SBCTC's public facing Library of Accessibility Resources or register for SBCTC's free Accessibility micro courses Links to an external site..

Use a larger font size.

The smaller the text the more difficult it is to read and the faster your eyes get tired.  The default text size in Canvas is 12 pt. which is too small for most readers, especially those of us with aging eyes!  Most of the text in this course is 14 pt. with larger header titles.

Use contrast.

There are two types of contrast.  The first type of contrast has to do with using colors and/or font sizes that are easy to read like using a large font in a dark color on a light or white background.  The same text in yellow on a light background will be very difficult to read due to the low contrast between yellow and white.  The second type of contrast is used to create emphasis.  A contrasting color, underlining, bolded font, or an increased font size can help draw attention to the more important parts of your pages like section headers or new vocabulary words.

Beware of using red and/or green to draw attention to important information.  Because of red/green color blindness, many people cannot distinguish these colors and all they see is a murky grey-brown-green color.  For screen reader friendly pages, never use color alone to indicate importance, as color is not distinguished by screen readers. 

This course uses a dark gray 14 pt. font for normal text with 18 pt. dark gray for the headers on a white page background. Dark gray, not black, is the default text color in Canvas.

Avoid using too much text.

We have become a society of skimmers.  Students will not read every word you write, so keep it simple and tell them only the most important stuff.  The more text you have, the more white space you'll need and the larger and darker the font should be.  You should also try to avoid excessively long paragraphs.  With the exception of this page, most pages in this course have been kept short and sweet!

Group related items together.

Our brains are wired to organize, find patterns, and create relationships among elements, even when none may really exist.  Because of this, it is important to group related items together.  Proximity indicates relationship, so be sure that your grouped images, header titles, examples, and text all make sense together.

Learning Resources:

Explore the Guides links below.  Each link will open in a new tab.  You can return to Canvas by clicking on the Canvas tab in your browser. 

Watch

• Rich Content Editor (Video - All Users) Links to an external site.

Read

• How do I style text in the Rich Content Editor? Links to an external site.
• General Accessibility Design Guidelines Links to an external site.
• How do I use the Accessibility Checker in the Rich Content Editor? Links to an external site.

After exploring the Guides links, return to Canvas and click the "Next" button at the bottom right of the page to move to the next section of the module.