This document discusses basic principles of visual design for presentations and websites. It emphasizes grouping related items together through proximity and alignment. Elements should be repeated throughout the design for consistency, and contrast used to differentiate things that are not the same. Visual hierarchies should make more important items more prominent and relate logical groupings visually through positioning and spacing. Text elements like headings, lists, and formatting help provide clarity and emphasis. Dense blocks of filler text should be avoided in favor of well-structured paragraphs with appropriate line spacing.

1. Principles of Visual Design Instructional Technology & Design Dr. Toledo

2. First Decisions Decide the purpose/intent of the presentation or site Basis for content choices Basis for design Who is the intended audience? Characteristics Idiosyncrasies

3. First Decisions (con’t) Congruent with purpose: Organization Navigation Page layout Graphic content Multimedia

4. Basic Design Principles Proximity : Group related items together Alignment : Nothing should be placed on the page arbitrarily - every item should have a visual connection with something else on the page

5. Basic Design Principles (con’t) Repetition : Repeat some aspect of the design throughout the entire piece Contrast : If two items are not exactly the same, make them different Source: Robin Williams, Design for Non-Designers

6. Visual Hierarchies Things that are subordinate logically to others are subordinated visually Fruit apples pears oranges bananas

7. Visual Hierarchies (con’t) Things that fall into a classification are related visually Dessert cake cookies Ice cream Veggies tomatoes potatoes artichokes cabbage Fruit apples pineapple oranges bananas

8. Visual Hierarchies (con’t) Differentiation between classes can be emphasized, while maintaining coordination Dessert cake cookies Ice cream Veggies tomatoes potatoes artichokes cabbage Fruit apples pineapple oranges bananas

9. Visual Hierarchies (con’t) An overarching classification can be added to show subordinate classes Dessert cake cookies Ice cream Veggies tomatoes potatoes artichokes cabbage Fruit apples pineapple oranges bananas Groceries

10. Visual Hierarchies (con’t) Principles for creating clear visual hierarchies More important items - more visually prominent Items that are related logically - relate visually Nest elements visually to illustrate what belongs with what – create space to show non-relationship

11. Text Elements Headings and subheadings Lists Block indented text Bold, italics, underline Font face, font size, font color Links Notice how the author uses the above elements for clarity and emphasis in this example .

12. Being Kind with Text What not to do: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qu Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

13. Being Kind with Text What to do with a lot of text: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Note: Go to Format  Line Spacing and change the distance between lines and paragraphs.

14. Bad Design Check out the Bad PPT Design PowerPoint in the class site http://www.roman-britain.org / Examples from Web Pages That Suck