Presentation Design: Starting Out

Color Basics There are two types of color models -- Reflective 1. CMYK Model Used in printing Stands for Cyan, Magenta, Yellow and Black 2. RGB Model Stands for Red, Green, Blue Non-reflective -- straight from light source Video and computer monitors use -- they emit combinations of these three primary colors

CMYK Model

RGB Model

With the RGB Model you will often see the following terms: Hue: tint of the color Saturation: how much white light is mixed in LessSaturation MoreSaturation Brightness: luminance LessLuminance MoreLuminance

I. Think About Color Decide on the basic colors you would like to work with Very generally, “opposite” colors on the color Very generally, “opposite” colors on the color wheel tend to dazzle the eyes to much; wheel tend to dazzle the eyes to much; “adjacent” colors do not stand out. “adjacent” colors do not stand out. That being said, the great majority of designers That being said, the great majority of designers do not use a “scientific” approach to the use of do not use a “scientific” approach to the use of color -- they experiment, using trial and error color -- they experiment, using trial and error (Williams). (Williams).

I. Think About Color Colors should create an overall feeling and personality for your site Colors can evoke feelings: blue=cold & far; Colors can evoke feelings: blue=cold & far; red=danger; black=sadness, etc. red=danger; black=sadness, etc. Colors can indicate associations: main Colors can indicate associations: main headings all same color; subheadings in headings all same color; subheadings in similar hue or shade of main heading. similar hue or shade of main heading. Colors can supply information: colors to Colors can supply information: colors to distinguish kinds of information; phrases like distinguish kinds of information; phrases like “in the red.” “in the red.”

I. Think About Color Avoid using too many colors Think in terms of no more than 3 to 5 colors Think in terms of no more than 3 to 5 colors unless circumstances absolutely call for it. unless circumstances absolutely call for it. Too many colors can distract and irritate Too many colors can distract and irritate learners. learners. Keep colors consistent Use one color for text, another for highlighting, Use one color for text, another for highlighting, another for prompts, etc. another for prompts, etc. Keep color usage consistent between pages. Keep color usage consistent between pages.

I. Think About Color Foreground/Background Contrast Use more dominant colors for information and Use more dominant colors for information and more subtle colors for backgrounds. more subtle colors for backgrounds. However, think carefully about using the However, think carefully about using the following combinations (they can be hard following combinations (they can be hard to read): to read): red with green blue with red blue with green blue with yellow

I. Think About Color Make limited use of fully saturated and especially bright colors Think about saving these for highlight colors. Think about saving these for highlight colors. They can appear less clear and “stable,” They can appear less clear and “stable,” or strain the reader’s eyes. or strain the reader’s eyes. Think carefully about the use of red and green 15% of the population has trouble seeing 15% of the population has trouble seeing colors, especially red and green colors, especially red and green

I. Think About Color Use browser-safe colors Most monitors can display 8-bit color (256 Most monitors can display 8-bit color (256 colors) but only 216 are common to browsers colors) but only 216 are common to browsers and operating systems of different computers. and operating systems of different computers. Constantly check out other sites for ideas A color outside this palette will convert to the A color outside this palette will convert to the closest color in its system palette. closest color in its system palette.

II. Think About Screen Layout Keep it simple to avoid overwhelming the user Approximately 3:2 Approximately 3:2 Determine horizontal and vertical layout Determine horizontal and vertical layout Experiment -- divide into halves, thirds, Experiment -- divide into halves, thirds, and fifths. and fifths. Think about the “Golden Ratio” Think about the “Golden Ratio”

II. Think About Screen Layout Set up basic functional areas and use setup consistently Presented material Presented material Direction and input Direction and input Control options Control options Feedback and error message area Feedback and error message area Option availability Option availability Icon prompts Icon prompts

III. Remember the Four Main Design Considerations Alignment Robin Williams term... meaning, are elements on the page lined up with one another? Relationship The relationships that elements have with one another, created by spacing

Unity and Harmony How all parts of the web site fit with each other to create a whole -- created by such techniques as repetition Visual Focus Guiding the eye to and through the web page -- created by techniques such as contrast, balance, and spatial positioning III. Remember the Four Main Design Considerations