Style Guide

VISUAL ELEMENT WHAT TO SPECIFY

SCREEN LAYOUT Identify the types of templates in the course, describe their organization, show
screen shots and include as separate files when appropriate

*COLOR PALETTE Main Colors: identify two or three for the overall interface and background (often
related to branding)

Accent Colors: select one or two accent colors

Hyperlinks: specify the color of hyperlinks

TYPOGRAPHY **Titles or large text: specify typeface, style, color, size and alignment

Subtitles or second largest text: specify typeface, style, color, size and alignment

Body Text: typeface, style, color and size (will always be left-justified)

Captions; typeface, style, color and size (will typically be left-justified)

Labels: typeface, style, color and size (this may need to vary)

READABILITY Leading: identify how much space to allow between lines of text within a
paragraph

Paragraph Spacing: identify how much space to allow before and after
paragraphs

VISUALS Image Style: identify types of images to use, such as color photos, black and
white photos, illustrations or clip art

Image Sizes: specify standard sizes of images for each type of screen (example:

You may customize this template

 Style Guide
VISUAL ELEMENT WHAT TO SPECIFY

split screen photos will be 512x768)

Image Borders: identify whether images will have borders and the color and line
thickness of the border

LOGO Note which style of logo to use on the title screen (you won't be using it on other
screens, right?)

HIGHLIGHTS(for Type of highlight: arrows (show example of head and stem), hand-drawn circles,
emphasis) light band of color, etc. If using multiple highlights, specify when each type will
be used.

Color of each type of highlight

INTERFACE Identify the color and style of any user interface elements you control
ELEMENTS

Icons: style and size of icons for navigation or other UI purposes

STANDARD The navigation bar may have these navigation icons but there are times when
NAVIGATION you need to specify navigation tools such as symbol-based or text-based
ICONS navigation guides. Standard image or symbol as well as text size and color and
position on the slide should be set in the style guide.

Back arrow: color: green, txt: red font color: red font size 8,

You may customize this template