Visual Design Guidelines
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
To create a color palette, we recommend using the Penn State brand colors on the Color Codes page of this course. 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 |
|---|---|---|
| #001E44 Nittany Navy | Primary color | Use for backgrounds in elements like callout boxes that use white or light text for good contrast, as well as the main color for bolder design elements. |
| #009CDE Pennsylvania Sky | Second primary color | Use for accent areas, such as wide borders or icons, when you want to align closely with Penn State core colors. |
| #E98300 Invent Orange | First accent color | Use less often in smaller elements, such as horizontal rules or bullets in lists. |
| #99CC00 Future's Calling | Second accent color | Use less often in smaller elements, such as horizontal rules or bullets in lists. |
| #E9F7FE | Background color | Use for backgrounds with darker font colors. |
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.