The following are some general best practices related to visual design that you may want to consider while utilizing styles in your course. These recommendations were created in consultation with a multimedia specialist.
Color
We cover accessibility standards related to color in the next section of this module, but there are a few tips to keep in mind related to visual design, including the following best practices:
- Use a color theme—Pick a color theme for your course that can be incorporated into text choices, graphics, and other design elements. A theme should have a main color with a few accent colors.
- Use dark text on a light background for most content—Dark text on light background is generally easiest to read than the other way around. Use inverse colors (light font on a dark background) sparingly—for instance, to draw attention to a key piece of content. (Use the accessibility checker to verify good contrast when changing font or background colors.)
Best Practice: Use a Color Palette
Use the core colors with one or two accent colors to create a consistent visual theme. In this case, less is more when it comes to the number of colors in your palette. Accent colors should be used sparingly—in a box border or horizontal rule, for instance. Background colors should be used sparingly as well—use them inside a color box or table rather than the whole page. Once you've selected a color palette, it's a good idea to document the colors and styles you use in your design, and where and how colors will be used, in addition to fonts and examples of icon styles, so that you have them handy when accomplishing color-related tasks, like creating custom art or running accessibility checkers.
Example Color Palette
Table 1 contains an example of a color palette showing the mix of core and accent colors and uses for each.
| Color | Purpose | Suggestions for Use |
|---|---|---|
| #BE0000 Utah Red | Primary Color | Prominent use of Utah Red reinforces the University Brand. |
| #FFB81D Wasatch Sunrise | First accent color |
May be used minimally where appropriate. They are not to usurp the core colors but are used to: Enhance charts, graphs, and info graphics. Accent colors should not be used in conjunction with university logos and should never be used to represent the brand. |
| #890000 Red Rocks | Second and accent color | Use less often in smaller elements, such as horizontal rules or bullets in lists. |
| #6CC24A Mountain Green | Second and accent color | Use less often in smaller elements, such as horizontal rules or bullets in lists. |
| #3ABFC0 Great Salt Lake | Second and accent color | Use less often in smaller elements, such as horizontal rules or bullets in lists. |
| #708E99 Granite Peak | Second and accent color | Use less often in smaller elements, such as horizontal rules or bullets in lists. |
| #E2E6E6 Salt Flat Grey | Second and accent color | Use less often in smaller elements, such as horizontal rules or bullets in lists. |
| #707271 Zion Cinder Cone | Second and accent color | Use less often in smaller elements, such as horizontal rules or bullets in lists. |
Page Layout
White Space
White space is defined as the space between elements. Good use of white space helps create page layouts that are easier to view, improve readability, and lessen cognitive load. This can help keep learners stay engaged with the content. If elements like callout boxes, tables, and headings aren't clearly separated, readers may have difficulty understanding where one section begins and another ends.
Readability
Centered and right-aligned text can be used for a small amount of text, such as a heading or a short quote, but in general body text should be left-aligned because that is easier to read and helps those with print disabilities, such as dyslexia.
Page Length
Chunk content into multiple pages, and use headings and design elements to break up large blocks of text to lessen vertical scrolling and keep page layouts simple.
0 Comments
Add your comment