Principles of Design

1
Principles of Design

• CRAP or PARC

2
The PARC or CRAP principles

• Proximity
• Alignment
• Repetition
• Contrast

3
Proximity

• Group related items together
• Do not group unrelated items
• this grouping gives the reader an instant clue to
  the organization pattern
• When items are spread out
• do not know where to start reading
• can not distinguish flow
• eyes tend to wander, cant be sure if everything
  has been read
• not sure when you are finished

4
Contd

• Closeness implies relationship
• By grouping
• More organized
• Know where to start reading
• Know when you are finished
• White space more effective
• Establish relationships through closeness, or
  lack of closeness

5
How to get effective Proximity

• Write items separately on paper, board, etc.
• Look at elements and group according to
  relationships
• After groups are formed, play with the
  arrangement of groups
• Make your design

6
(No Transcript)
7
Analyze Proximity

• Look at the garage sale flyer that you created.
  Analyze the proximities of your items and answer
  the following questions.
• Are there examples of good proximity in your
  flyer? Where?
• Explain why these are good uses of proximity.
• Are there examples of poor proximity?
• Where?
• Explain why these are poor uses of proximity.
• Make revisions the your flyer, improving your use
  of proximity.

8
Alignment
9
Alignment

• The principle of Alignment states that
• Nothing should be placed on the page arbitrarily
  (randomly).
• EVERY item on the page should have a visual
  connection with something else on the page.

Find a strong line and USE it.
10
Using alignment

• forces the designer to be conscious of what
  he/she is doing.
• When items are aligned, it creates a stronger,
  cohesive unit.

11
Example
12
Center Alignment

• Creates a more formal look
• Works well for invitations, greeting cards, etc.
• Safe, easy
• Sometimes it can be sedate and/or boring
• Be conscious and creative with centering.

13
(No Transcript)
14
Mixing Alignments

• This should be avoided at first.
• Stick to using left only, right only or centered
  only for now.
• Mixing can disconnect items on a page if it is
  done incorrectly.

15
Example
16
White Space

• Dont forget to watch your white space
• Outside white space can add an invisible border,
  strengthening alignment.
• Interior white space can strengthen lines, or
  push items apart if used incorrectly.

17
(No Transcript)
18
Summary of Alignment

• Every item on the page should have a visual
  connection with some other item.
• Find a strong line and use it.
• Basic purpose is to unify and organize.
• Be conscious of where you place things.
• Avoid using more than one alignment.
• Be careful with centering.
• Watch your white space

19
Analyze Alignment

• Look at the garage sale flyer that you created.
  Analyze the alignments that you used and answer
  the following questions.
• Are there examples of good alignment in your
  flyer? Where?
• Explain why these are good uses of alignment.
• Are there examples of poor alignment?
• Where?
• Explain why these are poor uses of alignment.
• Make revisions the your flyer, improving your use
  of alignment.

20
(No Transcript)
21
Repetition
22
The principle of Repetition states

• You repeat some aspect of the design throughout
  the entire piece.
• Examples include a bold font, and thick line, a
  color, a design element, a spatial relationship,
  or a particular format.
• Can be thought of as consistency.

23
What does it add?

• Adds cohesiveness to the look and feel of a
  multi-piece work.
• It is a conscious effort to unify all parts of a
  design

24
Where to find it?

• Take an existing element and push it further.
• Dont be afraid to be bold, creative and original.

25
Headlines, for instance
26
Multi-page publications

• Repetition is a major factor in the unity of
  pages throughout a multi-page publication.
• A reader should be able to instantly tell that
  pages 7 and 12 are from the same document.

27
What is the same?
28
Business packages

• Consistency is critical.
• Use a STRONG display of repetition within each
  piece and between each piece.

• When making your letterhead, create a layout that
  allows you to align the printed letter with some
  element in the design.

TIP
29
Letterhead basics
30
Organization

• Helps guide the reader through the piece.
• Helps unify parts of the design that might
  otherwise be disconnected.

31
What elements are repeated?
32
Any element can work

• If there is an element that interests you, go
  with it. Try as many ideas as you can.
• Dont just use large or obvious elements. Using
  small elements can be just as effective.
• The objects do not have to be exactly the same,
  but they must be similar enough.
• You can even add something completely new just
  for the sake of repetition.

33

• Note the different sizes and orientation of the
  triangles.
• Also. Some are filled, some are empty.

34
New from old

• You can often pull an element from an existing
  design and create a new design based on that
  element.
• Just find an element that you like and play with
  it.

35
(No Transcript)
36
Less is more

• The suggestion of a repeated design can be
  enough. In other words, it may not be necessary
  to repeat the entire element, just a part of it.

37
(No Transcript)
38
Summary

• Basic purpose
• Unify and add visual interest
• Strengthen a piece and tie it together
• How to get it
• Take an existing element and push it further.
• Dont be afraid to experiment.
• What to avoid
• Avoid repeating the element so much that it
  becomes annoying, or overpowering.

39
Analyze Repetition

• Identify two types of repetition in your existing
  designs.
• Are these two examples of repetition used
  effectively? Could they be made more effective?
  If so, then do so.
• Create a new element in your design and repeat it
  in an effective way.

40
Contrast
41
The principle of Contrast states

• If two items are not exactly the same, make them
  different. REALLY DIFFERENT!!!
• DONT BE A WIMP!!!!
• Can be created many ways
• Font size (large and small)
• Font face
• (graceful old style serif against new bold sans
  serif)
• Thin lines and thick lines
• Cool colors against warm colors, dark against
  light.
• Shape (tall and narrow against short and wide),
  geometric.
• Wide and narrow spacing
• Smooth texture and rough texture

42
Which one would you look at first?
43
Compare/Contrast

• Both news letters are neat.
• Both are arranged the same.
• The info is the same.
• The difference is the contrast.

44
Organization

• A reader should be able to glance at a document
  and understand what is going on.
• Information can be organized, but blend together.
  This can make the content unclear at first.

45
To clear things up.
46
Make it obvious.

• Elements that are made to contrast may not
  contrast enough. To repeat, DONT BE A WIMP.
• Make the contrast as obvious as possible. Wimpy
  contrast can look like a mistake.

47
Make it obvious
48
Shapes can be fun

• Shapes can easily be contrasted. Circles against
  squares, for example.
• Shapes can also be found in other places. Columns
  of text, for example, are rectangles. Use these
  to your advantage.
• One way to do this would be to contrast vertical
  columns with horizontal rows.

49
Horizontal vs Vertical
50
Oh the Drama

• Contrast can be the most fun element to work
  with, and is usually the most dramatic by far.
• Simple changes in contrast can have a huge
  effect.
• High contrast can get the reader to give your
  piece a second look, which is what you want.

51
(No Transcript)
52
Emphasize the important things

• Find the most important things on the page and
  emphasize them.

53
When you do, this can happen
54
Review of critical design step tips

• Choose unusual font faces, go outside of times
  new roman, Arial, etc.
• Use stronger alignments, avoid centering.
• Emphasize the important elements and keep them
  together. This maintains the focus.
• Group related items together and use white space
  effectively between the groups.
• Find elements you like and repeat them. This
  includes elements of contrast.
• Add contrast through shapes, colors, textures,
  font faces, font/line weights, etc.

Work each element one at a time.
55
Analyze Contrast

• Look at the garage sale flyer that you created.
  Analyze the contrast that you used and answer the
  following questions.
• Are there examples of good contrast in your
  flyer? Where? What kind?
• Explain why these are good uses of contrast.
• Are there examples of poor contrast?
• Where?
• Explain why these are poor uses of contrast.
• Make revisions to your flyer, improving your use
  of contrast.