Contrast, Alignment, Repetition, and Proximity

1. You’ve Got the Look
Principles of Effective
Graphic & Publication Design

2. Fundamental Elements
LINK TO VIDEO

3. Four Basic Principles
• Contrast
• Repetition
• Alignment
• Proximity

4. Proximity
• Group Related Items Together
• Keep space between unrelated items

5. Bad Proximity Example
What must Mike “The Eye” do to make it around
this card?

6. Good Proximity Example
What must Mike “The Eye” do to make it around
this card?

7. Proximity Side by Side

8. Misused Proximity
• None related objects in proximity gain an
unwanted relationship

9. Correct Proximity
• Grouping related objects corrects problem

10. Another Proximity Example
Bad
Everything close to everything
Good
Related things in close
proximity to each other

11. White Space
Active White Space:
-Provides the eye a “breath” while reading the
design.
-Breaks up ideas
Passive White Space (2 kinds):
-Passive Object Space (like between letters)
-Space on a page that serves no design point

12. White Space

13. White Space

14. Check Your Proximity
• Squint your eyes
– Less the 3-5 is good
• Group with purpose

15. Another Proximity Example

16. A l g tI e
m n
Alignment
• Not just left, right, center, anymore
• Place with purpose
• Visual connections

17. Poor Alignment Example

18. Fixed Alignment

19. Alignment in Posters

20. Alignment in Web Design

21. Center Alignment = Bad
• Formal
• Sedate
• Amatuer
• Boring!

22. Which looks more
professional???

23. Centering with Style
You
are
warmly
invited
to
attend!
• Make it obvious
You
are
warmly
invited
to
attend!
• Add drama
another way
You
are
warmly
invited
to
attend!
• experiment with
the centered
block
You
are
warmly
invited
to
attend!

24. Justified text
• Spaces letters so they fill the text box
• Hard to use, hard to master
This text is being
justified inside a text
box. Because of the
wording it has all
sorts of funny
spacing

25. Justified text

26. Justified text

27. White Space
• Don’t trap white space

28. White Space
• If you have a line use it

29. Summing Up Alignment
• Find the lines and use them
• Stay away from Center
• Everything has a purpose

30. Another Proximity Example

31. Contrast

32. Contrast
Definition
The difference in visual properties that makes an
object (or its representation in an image)
distinguishable from other objects and the
background.
en.wikipedia.org/wiki/Contrast

33. Color Contrast
• 1/8 male colorblind
• I don’t want to “really” look
• Use “Complimentary” Colors

34. Color Contrast (examples)
It is
Hard to
Read
Similair colors
Together
It is
Easy to read
Complimentary colors
together

35. Color Contrast (examples)

36. Color Meaning (color break)
The following site has an incredible (and incredibly
fun) look into colors, their meaning, and the best
way to use them. Enjoy!
http://www.mariaclaudiacortes.com/colors/Colors.html

37. Size Contrast
• Differences effect where and how we look
• Big objects demand attention
• Small objects can be overlooked
• Great differences in size can draw extra
attention to objects

38. Size Contrast (examples)

39. Size Contrast (examples)

40. Size Contrast (hiearchy)

41. Size Contrast (examples)

42. Shape Contrast
• Shapes can hide or highlight
• Shapes guide us through the document

43. Shape Contrast (examples)

44. Shape Contrast (examples)

45. Shape Contrast (examples)

46. Contrast
• Keep color, size and shape in mind always
• When in doubt Switch it out

47. Another Proximity Example

48. Repetition
• Repeat some aspect of the design
throughout the entire piece.
• Repeat some aspect of the design
throughout the entire piece.

49. Repetition Basics
• Repeat formatting/color for related
sections of a publication

50. Repetition = Review
• No repetition your eyes just wander
off the page

51. Repetition = Review
• Repeating an element makes the
eyes bounce.

52. Repetition = Identity
• Use the same/similair objects to tie
your pieces together.
• Typeface
• Film Reel

53. Another Proximity Example

54. CARP – Grading
• PS – Proximity Space
• PO – Proximity Objects
• CS – Contrast Shape
• CC – Contrast Color
• CZ – Contrast Size
• RD – Repetition Design
• RF – Repetition Formatting/Font
• AO – Alignment of Objects
• AL – Alignment Using implied Lines