CRAP (Contrast, Repetition, Alignment, and Proximity)
description
Transcript of CRAP (Contrast, Repetition, Alignment, and Proximity)
![Page 1: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/1.jpg)
CRAP (Contrast, Repetition, Alignment, and
Proximity)
Graphic Design
Principles
![Page 2: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/2.jpg)
Once upon a time in a far away place called Media worldThere were five royal hero’s across the land. So let us take awonderful journey to meet these hero’s.
![Page 3: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/3.jpg)
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
![Page 4: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/4.jpg)
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.
![Page 5: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/5.jpg)
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 KingWhen: March 17, 2007Where: At the royal palace
![Page 6: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/6.jpg)
Before using Contrast After using Contrast
![Page 7: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/7.jpg)
Contrast
![Page 8: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/8.jpg)
Contrast
• Difference between elements• Adds visual interest• Organizes and guides• Approaches
• Typefaces • Headings and subheads • Graphic elements • Direction • Size • White space
Contrasting colorsALL CAPS vs. lowercaseContrasting fontsBOLD vs. regularContrasting shapes
Contrasting sizes
![Page 9: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/9.jpg)
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)
![Page 10: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/10.jpg)
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
![Page 11: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/11.jpg)
Example of Repetition
I am the Queen of RepetitionAnd here is my crown to prove it
Crown
![Page 12: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/12.jpg)
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
![Page 13: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/13.jpg)
Before using Repetition After using Repetition
![Page 14: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/14.jpg)
Before using Repetition After using Repetition
![Page 15: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/15.jpg)
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.
![Page 16: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/16.jpg)
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.
![Page 17: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/17.jpg)
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.
![Page 18: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/18.jpg)
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 royalcourt yard on march 12, 2007.
The fight of the Century
Sir Alignment vs. Black Knight
The fight begins:March 12, 2007
![Page 19: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/19.jpg)
Before using proper alignment After using proper alignment
![Page 20: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/20.jpg)
Before using proper alignment After using proper alignment
No element has any connection to the others.
Elements aligned
![Page 21: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/21.jpg)
Before using proper alignment After using proper alignment
![Page 22: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/22.jpg)
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.
![Page 23: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/23.jpg)
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)
![Page 24: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/24.jpg)
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.
![Page 25: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/25.jpg)
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.
![Page 26: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/26.jpg)
Before proximity After proximity
A viewing party at Duke Proximity’s house it will be a party to remember.
March 28, 2007
A Viewing Party
Who: Duke ProximityWhen: March 28, 2007Where: Duke Proximity’s housewhy: New family crest
![Page 27: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/27.jpg)
Before proximity After proximity
Problem:
Reader’s eye must bounce all around card to obtain
information
Solution:
Group together related elements
![Page 28: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/28.jpg)
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
![Page 29: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/29.jpg)
Before proximity After proximity
Problem:• Everything
is close to everything else
Solution:• Contents
are grouped
• Contrast is added with headlines/rules
![Page 30: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/30.jpg)
Before proximity After proximity
Visual cues for organization and importance
![Page 31: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/31.jpg)
Before proximity After proximity
![Page 32: CRAP (Contrast, Repetition, Alignment, and Proximity)](https://reader038.fdocuments.net/reader038/viewer/2022102819/5681423f550346895dae6249/html5/thumbnails/32.jpg)
I hope you enjoyed your journey. Don’t forget to apply the principles you have learned hereToday.
CRAPContrast, Repetition, Alignment, and Proximity.