You’ve Got the Look
Principles of Effective
Graphic & Publication Design
Four Basic Principles
•
•
•
•

Contrast
Repetition
Alignment
Proximity
Proximity
• Group Related Items Together

• Keep space between unrelated items
Bad Proximity Example

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

What must Mike “The Eye” do to make it around
this card?
Misused Proximity

• None related objects in proximity gain an
unwanted relationship
Correct Proximity

• Grouping related objects corrects problem
Another Proximity Example
Bad
Everything close to everything

Good
Related things in close
proximity to each other
Another Proximity Example
White Space
Active White Space:
-Provides the eye a “breath” while reading the
design.
-Breaks up ideas
Passive White Spac...
White Space
White Space
White Space
Check Your Proximity
• Squint your eyes
– Less the 3-5 is good

• Group with purpose
Another Proximity Example
Alignment
• Not just left, right, center, anymore

Apurposee n t
lI g m
• Place with
• Visual connections
Alignment Example
Right Alignment Example
Alignment in Web Design
Center Alignment = Bad
• Formal
• Sedate
• Amatuer
• Boring!
Which looks more
professional???
Centering with Style
You
You
are
are

You

You

are

are

warmly
warmly
invited
invited

warmly

warmly

invited

invited
...
Justified text
• Spaces letters so they fill the text box
• Hard to use, hard to master
This text is being
justified insid...
Justified text
Justified text
White Space
• Don’t trap white space
White Space
• If you have a line use it
Summing Up Alignment
• Find the lines and use them
• Stay away from Center
• Everything has a purpose
Another Proximity Example
Contrast
Contrast
Definition
The difference in visual properties that makes an
object (or its representation in an image)
distingui...
Color Contrast
• 1/8 male colorblind
• I don’t want to “really” look
• Use “Complimentary” Colors
Color Contrast

(examples)

It is

It is

Hard to

Easy to read

Read

Complimentary colors
together

Similair colors
Toge...
Color Contrast

(examples)
Color Contrast

(examples)
Color Meaning

(color break)

The following site has an incredible (and incredibly
fun) look into colors, their meaning, a...
Size Contrast
• Differences effect where and how we look
• Big objects demand attention
• Small objects can be overlooked
...
Size Contrast

(examples)
Size Contrast

(examples)
Size Contrast

(examples)
Size Contrast

(examples)
Shape Contrast
• Shapes can hide or highlight
• Shapes guide us through the document
Shape Contrast

(examples)
Shape Contrast

(examples)
Shape Contrast

(examples)
Contrast
• Keep color, size and shape in mind always
• When in doubt Switch it out
Another Proximity Example
Repetition
• Repeat some aspect of the design
throughout the entire piece.
• Repeat some aspect of the design
throughout t...
Repetition Basics
• Repeat formatting/color for related
sections of a publication
Repetition = Review
• No repetition your eyes just wander
off the page
Repetition = Review
• Repeating an element makes the
eyes bounce.
Repetition = Identity
• Use the same/similair objects to tie
your pieces together.
• Typeface
• Film Reel
Another Proximity Example
CARP – Grading
• PS – Proximity Space
• PO – Proximity Objects
• CS – Contrast Shape
• CC – Contrast Color
• CZ – Contrast...
Upcoming SlideShare
Loading in...5
×

Design principles

2,323

Published on

A slideshow highlighting key features of design. As utilized in Mr. Johnson's Graphic Design class.

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,323
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Design principles

  1. 1. You’ve Got the Look Principles of Effective Graphic & Publication Design
  2. 2. Four Basic Principles • • • • Contrast Repetition Alignment Proximity
  3. 3. Proximity • Group Related Items Together • Keep space between unrelated items
  4. 4. Bad Proximity Example What must Mike “The Eye” do to make it around this card?
  5. 5. Good Proximity Example What must Mike “The Eye” do to make it around this card?
  6. 6. Misused Proximity • None related objects in proximity gain an unwanted relationship
  7. 7. Correct Proximity • Grouping related objects corrects problem
  8. 8. Another Proximity Example Bad Everything close to everything Good Related things in close proximity to each other
  9. 9. Another Proximity Example
  10. 10. 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
  11. 11. White Space
  12. 12. White Space
  13. 13. White Space
  14. 14. Check Your Proximity • Squint your eyes – Less the 3-5 is good • Group with purpose
  15. 15. Another Proximity Example
  16. 16. Alignment • Not just left, right, center, anymore Apurposee n t lI g m • Place with • Visual connections
  17. 17. Alignment Example
  18. 18. Right Alignment Example
  19. 19. Alignment in Web Design
  20. 20. Center Alignment = Bad • Formal • Sedate • Amatuer • Boring!
  21. 21. Which looks more professional???
  22. 22. Centering with Style You You are are You You are are warmly warmly invited invited warmly warmly invited invited to to attend! attend! to to attend! attend! • Make it obvious • experiment with the centered block • Add drama another way
  23. 23. 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
  24. 24. Justified text
  25. 25. Justified text
  26. 26. White Space • Don’t trap white space
  27. 27. White Space • If you have a line use it
  28. 28. Summing Up Alignment • Find the lines and use them • Stay away from Center • Everything has a purpose
  29. 29. Another Proximity Example
  30. 30. Contrast
  31. 31. 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
  32. 32. Color Contrast • 1/8 male colorblind • I don’t want to “really” look • Use “Complimentary” Colors
  33. 33. Color Contrast (examples) It is It is Hard to Easy to read Read Complimentary colors together Similair colors Together
  34. 34. Color Contrast (examples)
  35. 35. Color Contrast (examples)
  36. 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. 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. 38. Size Contrast (examples)
  39. 39. Size Contrast (examples)
  40. 40. Size Contrast (examples)
  41. 41. Size Contrast (examples)
  42. 42. Shape Contrast • Shapes can hide or highlight • Shapes guide us through the document
  43. 43. Shape Contrast (examples)
  44. 44. Shape Contrast (examples)
  45. 45. Shape Contrast (examples)
  46. 46. Contrast • Keep color, size and shape in mind always • When in doubt Switch it out
  47. 47. Another Proximity Example
  48. 48. Repetition • Repeat some aspect of the design throughout the entire piece. • Repeat some aspect of the design throughout the entire piece.
  49. 49. Repetition Basics • Repeat formatting/color for related sections of a publication
  50. 50. Repetition = Review • No repetition your eyes just wander off the page
  51. 51. Repetition = Review • Repeating an element makes the eyes bounce.
  52. 52. Repetition = Identity • Use the same/similair objects to tie your pieces together. • Typeface • Film Reel
  53. 53. Another Proximity Example
  54. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×