Robin Williams presents four elements of design - proximity, alignment, repetition, and contrast - that can be applied to make websites and other media look good. Proximity involves grouping related items together. Alignment means arranging elements so they have a visual connection. Repetition brings unity through consistent use of design characteristics. Contrast draws the eye by making two elements very different. The document discusses each element in more detail and provides tips for effective usage.

1. What makes website look good? Is it the color choices? Is it the visual layout? Is it the grouping of information? Is it the consistency throughout the site? Repetition PROXIMITY Alignment Contrast

2. Robin Williams presents to her readers four Elements of Design. These elements are the basic elements that can be applied to a variety of media formats.

3. Proximity Proximity Proximity Proximity Proximity Proximity Alignment Alignment Alignment Alignment Repetition Repetition Repetition Repetition Repetition Contrast Contrast

4. Proximity Proximity Proximity Proximity Proximity Proximity Alignment Alignment Alignment Alignment Repetition Repetition Repetition Repetition Repetition Contrast Contrast

5. Proximity Proximity is defined as the grouping of related items together , move them physically close to each other so the related items are seen as one cohesive group. Robin Williams explains how the basic purpose of proximity is to organize items together. This can be done by grouping related items together to be seen as one cohesive group.

6. Proximity How to get it: Squint and count the number of elements on a page. Limit yourself to between 3 and 5 elements. What to Avoid: Avoid corners and the middle of the page. Avoid equal amounts of white space between all elements Force relationships between headings and content Don’t put unrelated content elements together

7. Proximity Proximity Proximity Proximity Proximity Proximity Alignment Alignment Alignment Alignment Repetition Repetition Repetition Repetition Repetition Contrast Contrast

8. Alignment Alignment is defined as the element where nothing is placed on the page arbitrarily resulting in every item having a visual connection with something else on the page. Robin Williams explains how the basic purpose of alignment is to bring unity and organize items together. This can be done by creating a strong alignment create a variety of looks. Alignment allows the designer to create a sophisticated, formal, fun, or serious look.

9. Alignment How to get it: Always align elements on the page, even those that are far apart. What to Avoid: Don’t center some text and left align other text. Avoid centering anyway!

10. Proximity Proximity Proximity Proximity Proximity Proximity Alignment Alignment Alignment Alignment Repetition Repetition Repetition Repetition Repetition Contrast Contrast

11. Repetition Repetition is defined by some aspect of the design that is consistent throughout the entire piece . Robin Williams explains how the basic purpose of repetition is to bring unity and add visual interest. This element is important in one page pieces and is critical in multiple page pieces. This is called being consistent throughout the media piece.

12. Repetition How to get it: Choose design characteristics (type face, color, size, cartoon style, picture style) and repeat them. Find existing repetitions and strengthen them by contrast or uniqueness. Accent the repetition. Think black hat, black shirt, black pants, black shoes, white corsage. What to Avoid: Don’t keep repeating if it is becoming annoying. Don’t repeat mistakes. Don’t repeat phrases. Avoid R A N S O m N O T i n g

13. Proximity Proximity Proximity Proximity Proximity Proximity Alignment Alignment Alignment Alignment Repetition Repetition Repetition Repetition Repetition Contrast Contrast

14. Contrast Contrast is defined by creating two elements that are different and making them really different because they are not the same . Robin Williams explains how the basic purpose of contrast is to draw our eyes to the page. This element is important because it creates and interest on the page

15. Contrast How to get it: Be bold! Use color, size, and space to differentiate between content Break the rules when it works! This goes for all four elements. What to Avoid: Avoid wimpy contrast! Yellow and white don’t go together. Avoid two different fonts that look alike. Calibri and Arial.

16. Proximity Proximity Proximity Proximity Proximity Proximity Alignment Alignment Alignment Alignment Repetition Repetition Repetition Repetition Repetition Contrast Contrast

17. What makes website look good? Is it the color choices? Is it the visual layout? Is it the grouping of information? Is it the consistency throughout the site? Repetition PROXIMITY Alignment Contrast

18. Is it the color choices? Is it the visual layout? Is it the grouping of information? Is it the consistency throughout the site? Proximity Alignment Repetition Contrast What makes a website look good?

19. Next Steps It is time to critique websites on their design according to the Robin Williams Elements of Design using the four quadrant matrix. Contrast Repetition Alignment Proximity