Content

Color

Color can enhance learning by helping to increase memory of the material covered and improving the material aesthetics. It can be used to create visual cues for the viewer, help categorize related information, identify specific information, create information hierarchy, and for many other reasons.

However, using several colors isn’t always necessary. So it is best to analyze your design needs while considering the material content and carefully determine if your design plan enhances both aesthetics and learning. A designer should always maintain consistency of style and layout throughout the entire design.

It is best not to use colors with high intensities next to each other. This can cause a “vibrating” effect which can strain the eyes. If that happens, that could have an adverse effect on learning. Colors that are highly contrasting to each other (i.e. black and white) are recommended but make sure there is enough contrast. Generally colors that are opposite of each other are good combinations of highly contrasting colors. You may need to choose a color with less saturation to create the right combination of color usage. For example, a light orange (low saturation) background with dark blue (high saturation) typeface.

Color can also have an emotional or mood effect on the viewer. Take into consideration what “mood or emotion” you could evoke with your color choices. More information on color and emotion is provided in the slideshow link at the end of this page. This link will give you visual definitions of the color wheel and show examples of good and bad color design choices.

Sometimes color can clutter your design. Do not waste time adding colors that do nothing for the message you are trying to facilitate and do not improve the quality of the design. Simple designs can be very effective visually and educationally.

Questions to ask when you are deciding on what colors to use:

1. Does using color make the educational material more effective?
   • Adding color can make a design more interesting but don’t overdo it or choose colors that repel the viewer rather than enhance the material.
   • Adding highlighting to a line of text may be good if you want the user to really notice something important but using bold type and/or changing the size of the type instead may be just as effective without cluttering up your page design.
2. If color is necessary, can a color blind person understand the educational message?
   • If it is necessary to use color in order to facilitate what the user is to learn, make sure when necessary to accommodate a color blind viewer’s needs.

Line

There are two types of line: actual and implied. Actual line is exactly what it sounds like, a line. And an implied line is a series of points, gestures, or patterns that make our eyes “see” a line that doesn’t fully or actually exist.

When designing, think about how you might use line to improve your instruction. You can use line as an organizing tool by using a straight line to divide up information, creating text boxes or tables, or for concept mapping. Line can also be used to make connections between content or to point out important information either by using arrows or other types of actual or implied (dots, dash marks, etc...) line to create direction.

Shape

In design, shape can represent graphics, objects, or even the complete design of the page. These shapes create messages. It is important to make sure that you use shapes in the best ways possible, aesthetically and contextually, to convey your messages successfully.

Size

Be careful when choosing size of visual information (text, media, or graphics). Sizing your visual content is an important feature in design because it is part of organization and creates hierarchy within the design. However, it is easy to use size inappropriately or ineffectively and in turn over emphasize or under emphasize information. Instead of making something larger to stand out, sometimes all it takes is just a little color or styling. For example, putting a thin black border around a table or adding a text box for a side note. Readability and aesthetics are key. Always be consistent with the sizing of your visual elements throughout your design.

Typography

It is important to choose your typeface style and sizing with care to ensure the content is easily readable. Ways that typeface can be styled is through font and color. There are many font styles available for the designer to choose from. The styles fall into two categories: Sans Serif and Serif.

Sans Serif

Fonts that do not have small lines accenting the characters. Sans Serif fonts are best reserved for body text.

Serif

Fonts that have small lines accenting the characters. Serif fonts are best reserved for headers.

Keep font style and sizes for the header and body similar enough to each other and related to the context of the message. Do not use overly large headers or body type. Do not go too small with your sizing either. Remember readability is the goal. Do not use serif fonts for the body. Too much wording in a serif font can tire the eyes. You can use a serif style header with a sans serif body font. Another way you can style your design is by using one type of sans serif font for the header and the same or a different one for the body. Remember though you are trying to add interest to the page, not make it boring or difficult.

Body typeface is most readable at a 10 or 12 point depending on the font style. Pick one font style and size for the body and stick to it throughout the design.

Headers should be large enough to distinguish between it and the body. Headers should also be in bold to cue the viewer of its importance. Again pick one header style and stick to it. Only change the sizing depending on hierarchy of your heading. Use a sequential level of header sizes for your main header and each sub header (i.e. main header – 20 point, sub header 1– 18 point, sub header 2 – 14 point, etc...).

The example below shows you bad usage of typography. There are several problems with this example.

1. The Old English Text MT and the Chiller font do not fit well with biology theme of the content.
2. The text for both the header and the body styles are difficult to read.
3. The body text is too small for that style of font.
4. The header is way too big for the page.
5. The sizes between the header and the body have too large of a variation.

For fonts, it is not always necessary to use other styling features for extra visual cues. Use extra styling for fonts cautiously. Extra styling examples include italics, all caps, and underlining. It is recommended to limit visual cues to one or two.

Italics are generally reserved for fancy design materials (i.e. wedding invitations) and referencing titles (books, articles, movies, etc...) or names of vehicles (Titanic). Reading text in italics can make the eyes tired. Be very thoughtful about using italics outside of standard grammar usage when designing educational materials. It may be possible to use bold type or another type of visual cue instead of italics and achieve better results. Read this page on underlining and italic usage.

Never use all caps unless it is for a standard usage of caps (i.e. acronym), header/title, or representing actual way of spelling of the name of something (i.e. brand names). Using all caps for writing represents yelling and is harder to read. It too can make the eyes tired easily. Again, bold type or color can serve the need for emphasizing important words. Or if your design benefits from it, you can opt for bullets, text boxes, speech bubbles, diagrams, or tables depending on the message you are trying to convey. Read this article on alternatives to bullets.

Copyright © 2015 Angela Lenz