1. Elements of Design:
The 4 Basic Principles

2. Four Elements of Design
Contrast
Repetition
Alignment
Proximity

3. This ad was taken right out of a newspaper.
Problems:
all caps
information is in one big chunk
too hard to read
The Non-Designer’s Design Book by Robin Williams

4. Principle of Contrast …really different!
If two items are not exactly the same, then make them different…
…really different!

5. Contrast: Add visual appeal creates organization Prevents skimming…
it’s what makes a reader look at the page.

6. Contrast:
add visual interest contrasting type, color, size, line thickness, shape, space, etc.
Contrast is the beginning place for the eye.

7. Use of color in type for contrast.
Traditional Home, July 2005

8. Creating Contrast: Large type with small type,
graceful oldstyle font with a bold san serif font,
a thin line with a thick line,
a cool color with a warm color,

9. smooth texture with a rough texture,
horizontal element with a vertical element,
widely spaced lines with closely packed lines,
large graphic with a small graphic.

10. W I M P — not a contrast. 12-point type with 14-point type
D O N ’ T BE A
W I M P
12-point type with 14-point type
Half-point rule with one-point rule ― not a contrast.
Dark brown with black ― not a contrast.
— not a contrast.

11. The Non-Designer’s Design Book by Robin Williams

12. CONTRAST

14. Principle of Repetition
Repeat some aspect of the design throughout the entire piece.
For example, adding a thick line at the top and bottom of a page.

15. The repetitive element may be:
a bold font
a thick rule (line)
a certain bullet
color
a design element

16. Repetition can be thought of as “consistency”.
The Non-Designer’s Design Book by Robin Williams

17. The Oprah Magazine, March 2007
Repeating Color
The Oprah Magazine, March 2007

18. The Oprah Magazine, March 2007
Repeating Color
The Oprah Magazine, March 2007

19. The Oprah Magazine, March 2007
Repetition
The Oprah Magazine, March 2007

20. Principle of Alignment
Nothing should be placed on the page arbitrarily (randomly).
Every item should have a visual connection with something else on the page.

21. Alignment:
Always find something else on the page to align with, even if the two objects are physically far away from each other.

22. Alignment: Use only one text alignment per page.
Avoid centering text – choose a stronger alignment/connection.

23. The Non-Designer’s Design Book by Robin Williams

24. The Non-Designer’s Design Book by Robin Williams

25. The Non-Designer’s Design Book by Robin Williams

26. Alignment:
Remember people tend to read from upper left to lower right in a Z pattern.
Avoid filling the four corners and center of a page.

27. Alignment is what tells the reader that even though these items are not close, they belong to the same piece.

28. Where does the ad direct your eye?

29. And this one?

30. The Non-Designer’s Design Book by Robin Williams

31. Principle of Proximity
Group related items together.
Move them physically close to each other, so the related items are seen as one cohesive group rather than a bunch of unrelated bits.

32. Proximity
creates one visual unit rather than several separate units
creates organization and reduces clutter

33. Use the element proximity to separate items that are different and unite those that are similar.

34. White Space… unite elements separate elements encourages reading
creates a sense of openness

35. White space isn’t always white.

36. Another excellent use of white space.

37. Remember this flier?
The Non-Designer’s Design Book by Robin Williams

38. Contrast Repetition Alignment Proximity
The Non-Designer’s Design Book by Robin Williams

39. Design Pitfalls to Avoid:
Rivers of white space. Rivers of white space. Rivers of white space. Rivers of white space. Rivers of white space. Rivers of white space. Rivers of white space.
Design Pitfalls to Avoid:
too much text, not enough white space and graphics
rivers of white space

40. More Design Pitfalls to Avoid:
widows - fewer than seven characters on the last line of a paragraph.
Example: The word itself is only 6 characters on a line by itself.
orphans - the last line of a paragraph at the top of a new column or page.
Example:
Nothing should be place on the page randomly. Every items should have a visual connection with something else on the page.
A reader’s natural tendency is to read from upper left to
lower right.
Generally, use one of the four alignment choices on a page: left, right, centered, or justified. Align separate elements on a page in the same way.
page 1
page 2