1. Creating Strong Design
Putting it all together:
Screen Design
K.I.S.S.
C.R.A.P.

4. Screen Design Tips Your placement of elements on the screen should:
Direct the eyes around the screen
Be consistent in look and feel
Be easy to read and understand
Follow basic design principles

5. Information Placement
Take advantage of the natural scanning pattern of upper left to lower right by putting important information in the upper left "hot spot." 
Lower right can be used for continuing information such as "next page" or navigation buttons.

6. Keep It Simple Limit graphical elements to 2 to 5 per page.
One of the strengths of computer-based tutorials is the ability to focus the learner's attention. 
Too many buttons, text fields or graphics on a page distract the reader.

7. Create a Visual Grid
Divide the screen into horizontal and vertical zones and place certain types of information in the same portion of the grid on successive screens.
Consistency helps users locate information.
Grids help balance a screen.

8. Use Graphics Thoughtfully
Add relevant graphics to grab and hold attention
Types of graphics to use:
Realistic (photo or rendering of concept)
Analog (relates a concept to a more familiar, simple idea)
Logical (map or graph)
Use cueing techniques such as color, lines, arrows, shading to draw attention to what is most important.

9. Legibility or Readability
Try not to use more than 2 fonts per screen.  (Use different sizes and weights within a font family for variety).
Use at least 18-point type.
Use lower case text for readability.
Use no more than 8 to 10 words per line of text less for larger text.

10. Tips to Improve your Resources
Observe: Keep a file of design you like from magazines, ads, brochures, computer screens.
Analyze: Try to determine what makes a design work.
Practice: Visualize by sketching ideas.  (Should be quick and dirty to get the creative juices flowing.)

11. Keeping It Simple Using the Rules
Consistency
Consistent design is the key in formatting any multimedia project or Web page
Be consistent with headings, screen density, white space, color, placement, buttons, etc.

12. Keeping It Simple Using the Rules
Simplicity
Keep your message simple and to the point (KISS)—Keep It Simple
Use no more than 3 different fonts and 3 different colors
Don't add unnecessary graphics, animation, sound, etc. (distracts from the message)

13. Keeping It Simple Using the Rules
Clarity
Leave plenty of white space as computer screens are cheap
Use big fonts, so it's easy to see text
Use big pictures
Use bullets

14. Keeping It Simple Using the Rules
Clarity (continued)
Use short simple sentences or phrases, do not use compound construction sentences
Don't try and put too much info on one screen, spread info out onto the next slide
Use caps and lower case (not all one or the other)
Don't use fully justified text as it slows reading, use centered or left justified text.

15. Keeping It Simple Using the Rules
Aesthetically Pleasing
Keep the objects on your screens balanced, consider harmony and unity
Use blue for large areas, use red or green or other bright colors for the center of visual field
Do not use adjacent colors that differ only in the amount of blue in them.

16. Principles of Strong, Unified Visual Design
C.R.A.P.
Principles of Strong, Unified Visual Design

17. Contrast
Contrast on a page draws our eyes to it; our eyes like contrast. Two items on a page cannot be similar - for contrast to be effective, the two elements must be very different.
The basic purpose
To create interest on the page
To aid in the organization of information
To encourage readability
How to get it
Add contrast through your typeface choices, line thickness, colors, shapes, sizes, space, etc.
What to avoid
Avoid combining any two elements that are similar
If the items aren't exactly the same, make them very different.
Don't be a wimp!

18. Repetition
Be consistent! A repetition of visual elements throughout the design unifies and strengthens a piece by tying together otherwise separate parts.
The basic purpose
To unify
To add visual interest
To increase readability
How to get it
Find existing repetitions and strengthen them.
Create repetitions to enhance the design and the clarity of information.
Accent with contrasting colors, sizes, typefaces, etc.
What to avoid
Avoid repeating the element so much that it becomes annoying or overwhelming.
Be conscious of the value of contrast.

19. Alignment The basic purpose How to get it What to avoid
A visual tie is required to make all elements on the page appear to be unified.
The basic purpose
To unify and organize the page
To create a 'look' (fun, serious, sophisticated, formal, etc.)
How to get it
Be conscious of where you place elements
Find something else on the page to align with
What to avoid
Avoid using more than one text alignment on the page (i.e., centered vs. right or left)
Try to break away from a centered alignment (unless you are actually trying to create a more formal, sedate, effect).

20. Proximity
When several items are in close proximity to each other, they become one visual unit.
The basic purpose
To automatically organize by grouping related elements together
To encourage reading and remembering
To create more appealing white space
How to get it
Squint your eyes.
Count the number of times your eye stops.
No more than 3 to 5 elements, please.
What to avoid
Avoid too many separate elements on a page.
Don't stick things in the corners and in the middle.
Avoid leaving equal amounts of white space between elements unless each group is part of a subset.
Avoid confusion by creating a relationship among elements with close proximity. Don't create relationships with elements that don't belong together!

21. Visual Tension
The objective is to create visual tension; to hold the eye of the viewer
 BORING!!!
Two examples:
 not interesting
 holds the eye, interesting

22. The Six Guidelines of Composition
Avoiding Mergers
Simplicity
Lines
The Rule of Thirds
Balance
Framing
Kodak’s Tutorial

23. Composition Avoid Mergers
Watch for objects that line up in undesirable ways (ex. tree “growing” out of someone’s head)

24. Composition Simplicity
A composition can be made simple in many ways – by limiting the number of objects, the number of colors used, the complexity of lines, etc.

25. Composition
Lines
Use line to create eye movement, shape, emphasis…

26. Composition Rule of Thirds:
Put objects of interest in centers of interest. Other objects cluster around hot spots, but aren’t on them.
• When composing your shots, use the “Rule of Thirds”
• The “Golden Mean”
• Odds Look Better Than Even
• Put focal point of interest in one of the four special spots (circled) or on the dotted lines.
• When composing your shots, use the “Rule of Thirds”
• The “Golden Mean”
• Odds Look Better Than Even
• Put focal point of interest in one of the four special spots (circled) or on the dotted lines.

27. Composition
Balance
Every composition should have some form of balance. Three types of balance:
Symmetrical has an axis of symmetry
Asymmetrical counterbalance (ex. Move large object toward center to counter balance smaller object further out)
Radial patterned in nature, like flowers, shells, etc.
Symmetrical = has an axis of symmetry
Asymmetrical = counterbalance (ex. Move large object toward center to counter balance smaller object further out)
Radial = patterned in nature, like flowers, shells, etc.

28. Composition
Framing
Pretend you are looking at your creation through the lens of a camera. Create an interesting composition by excluding and including the right objects.

29. Composition Pyramidal ex. portraits, renaissance
Utilize a method of composition to match your strategy of visual tension. Composition controls emphasis areas.
Utilize a method of composition to match your strategy of visual tension. Composition controls emphasis areas.

30. Composition
“L” Shape
Things that “pop” outside of the shape get noticed

31. Composition Golden Mean Specific Ratio = 1.6 x 1
There are many examples of the Golden Section or Divine Proportion in Nature. For example, the eye, fins and tail all fall at Golden Sections of the length of a dolphin's body. Phi is frequently expressed in many of Nature`s creations, and by varying the angle between adjacent radii, a number of Natural spirals and leaf shapes can be created. The Fibonacci numbers form the best whole number approximations to the Golden number. Plants illustrate the Fibonacci series in the numbers and arrangements of petals, leaves, sections and seeds. Plants that are formed in spirals, such as pinecones, pineapples and sunflowers, illustrate Fibonacci numbers. Many plants produce new branches in quantities that are based on Fibonacci numbers.
The DNA molecule, the program for all life, is based on the Golden section. It measures 34 angstroms long by 21 angstroms wide for each full cycle of its double helix spiral.34 and 21, of course, are numbers in the Fibonacci series and their ratio, closely approximates Phi,
There are many examples of the Golden Section or Divine Proportion in Nature. For example, the eye, fins and tail all fall at Golden Sections of the length of a dolphin's body. Phi is frequently expressed in many of Nature's creations, and by varying the angle between adjacent radii, a number of Natural spirals and leaf shapes can be created. The Fibonacci numbers form the best whole number approximations to the Golden number. Plants illustrate the Fibonacci series in the numbers and arrangements of petals, leaves, sections and seeds. Plants that are formed in spirals, such as pinecones, pineapples and sunflowers, illustrate Fibonacci numbers. Many plants produce new branches in quantities that are based on Fibonacci numbers.
The DNA molecule, the program for all life, is based on the Golden section. It measures 34 angstroms long by 21 angstroms wide for each full cycle of its double helix spiral.34 and 21, of course, are numbers in the Fibonacci series and their ratio, closely approximates Phi,

32. Principles of Readability
Readability strengthens design and speeds up the communication process. Enhance the readability of your design projects by applying these principles.
Factors to Consider When Displaying Text:
Words have shape. (TURTLE vs. turtle)
Lowercase is easier to read than uppercase because all uppercase words have the same shape.
The eye reads from left to right.
Left alignment/justification is easier to read than any other (e.g. centered).
Short lines are easier to read than long lines.
The smaller the text, the shorter the line (e.g. newspapers use columns).
Repetition simplifies the page and enhances readability.
Serif type fonts work better for text because the little “foot” helps guide the eye along. Use sans serif fonts for headings and sub-heads.
Typed fonts should contrast with background to increase readability.