1. Graphic Design Principles
CRAP (Contrast, Repetition, Alignment, and Proximity)
Graphic Design Principles

2. Once upon a time in a far away place called Media world
There were five royal hero’s across the land. So let us take a
wonderful journey to meet these hero’s.

3. King Contrast Contrast refers to the way in which
an element stands out above the
rest of the piece
Making Items distinct and
different from one another.
Avoid elements that are merely
similar – make them different,
very different
King Contrast

4. King Contrast When using contrast you will
notice that the page that one
is creating looks interesting
especially for the readers
One can use different colors,
fonts, shapes to grab the
attention of a reader.
Its function is to draw the attention
of the viewer, and create a focal
point to help the viewer determine
which part of the information is
important.
King Contrast

5. The Meeting of the century
Before using Contrast
After using Contrast
The Meeting of the century
Who:
The King
When:
March 17, 2007
Where:
At the royal palace
The Meeting of the century
Who: The King
When: March 17, 2007
Where: At the royal palace

6. Before using Contrast
After using Contrast

7. Contrast

8. Contrasting colors ALL CAPS vs. lowercase Contrasting fonts
Difference between elements
Adds visual interest
Organizes and guides
Approaches
Typefaces
Headings and subheads
Graphic elements
Direction
Size
White space
Contrasting colors
ALL CAPS vs. lowercase
Contrasting fonts
BOLD vs. regular
Contrasting shapes
Contrasting sizes

9. Queen Repetition “Repeat some aspect of the design
throughout the entire piece.”
When repeating throughout your
design it may signify something
important .
A conscious effort and willingness
to unite, join, fuse, the entire page
together (print or web based)
Queen Repetition

10. Queen Repetition You can repeat colors, shapes,
textures, spatial relationships, line
thickness, fonts, sizes, graphic
concepts, etc.
This helps organize the information,
reduces clutter, and give the
reader a clear structure
Thought of as Consistency,
Continuity of all pages
Queen Repetition

11. Example of Repetition I am the Queen of Repetition
And here is my crown to prove it
Crown

12. Before using Repetition After using Repetition
When you get to the end of the information, does your eye just wander off the card?
Repeated bold type encourages reader to “bounce” between the two dominant typefaces

13. Before using Repetition After using Repetition

14. Before using Repetition After using Repetition

15. Repetition
Repeat one or more design elements or portions of an element
Guides and organizes
Creates consistency and unity
Approaches
Headings, subheads
Page numbers
Rules, bullets
Typefaces
Margins, etc.

16. Sir Alignment “Nothing should be placed on
the page arbitrarily. Every item
should have a visual
connection with something
else on the page.”
Every element on a page should
have some visual connection with
another element on the page
Alignment means to align things
along a line, or side, or some
sort of edge.
Text or images that can be
centered, justified, right and left
aligned.
Sir Alignment

17. Sir Alignment The basic rule of thumb is to align
everything the same way. If one
part of the page is flushed left,
make sure every other part of the
page is also flush left.
When aligning text in center
the center please don’t write
a paragraph. Just write
something short and snappy.
Also correct alignment looks
neat and easy for the audience
to read.
Sir Alignment

18. The fight of the Century
Before using proper alignment
After using proper alignment
The fight of the century Sir
Alignment in a jousting Match
against black knight.
The fight will begin in the royal
court yard on march 12, 2007.
The fight of the Century
Sir Alignment vs. Black Knight
The fight begins:
March 12, 2007

19. Before using proper alignment After using proper alignment

20. Before using proper alignment After using proper alignment
No element has any connection
to the others.
Elements aligned

21. Before using proper alignment After using proper alignment

22. Before using proper alignment After using proper alignment
Trapped white space pushes
elements apart
“Find a strong line and use it.”
Flush right type makes use of
image’s border.

23. Alignment
Organize the elements on a page
Use the same alignment throughout the entire document
(right justify, left justify, or center align)
Do not place anything on the page arbitrarily
Do not center align everything.
Visually connect each element on the page to something else on
the page (Unity)

24. Duke Proximity Items that are close appear to
have a relationship, to belong
together
Be conscious of space between
items
When using proximity one will
noticed how organized it will
look.
Also, don’t group unrelated items
things will be confusing for the
reader.
Duke Proximity

25. Duke Proximity Keeping things at close proximity
to each other will create a link
between them, so that the reader
will know just by looking that they
are related.
When close enough -they
appear to have a belonging
to each other.
When physically far - they do
not appear to have a
relationship with each other.
Elements become visually
disconnected from each other.
Duke Proximity

26. Before proximity After proximity A Viewing Party
A viewing party at Duke
Proximity’s house it will be a
party to remember.
March 28, 2007
A Viewing Party
Who: Duke Proximity
When: March 28, 2007
Where: Duke Proximity’s house
why: New family crest

27. Reader’s eye must bounce all around card to obtain information
Before proximity
After proximity
Problem:
Reader’s eye must bounce all around card to obtain information
Solution:
Group together related elements

28. Before proximity
After proximity
Problems:
The two items in top left are in close proximity but not related
Gaps separate related items
Solution:
Regroup information
Change to caps/lowercase
Use squared edges
Let image break out of box

29. Before proximity
After proximity
Problem:
Everything is close to everything else
Solution:
Contents are grouped
Contrast is added with headlines/rules

30. Visual cues for organization and importance
Before proximity
After proximity
Visual cues for organization and importance

31. Before proximity
After proximity

32. I hope you enjoyed your journey. Don’t forget
to apply the principles you have learned here
Today.
CRAP
Contrast, Repetition, Alignment, and Proximity.