! Contrast Repetition Alignment Proximity Underlying Principles of great design.
PRINCIPLES OF DESIGN Proximity, Alignment, Repetition Contrast.
-
Upload
kathlyn-thomasina-henry -
Category
Documents
-
view
297 -
download
0
description
Transcript of PRINCIPLES OF DESIGN Proximity, Alignment, Repetition Contrast.
![Page 1: PRINCIPLES OF DESIGN Proximity, Alignment, Repetition Contrast.](https://reader033.fdocuments.net/reader033/viewer/2022061418/5a4d1b8c7f8b9ab0599bf2dc/html5/thumbnails/1.jpg)
PRINCIPLES OF
DESIGNProximity, Alignment, Repetition & Contrast
![Page 2: PRINCIPLES OF DESIGN Proximity, Alignment, Repetition Contrast.](https://reader033.fdocuments.net/reader033/viewer/2022061418/5a4d1b8c7f8b9ab0599bf2dc/html5/thumbnails/2.jpg)
ProximityItems relating to each other should be grouped close together.
When several items are in close proximity to each other, they become one visual unit rather than several separate units.
![Page 3: PRINCIPLES OF DESIGN Proximity, Alignment, Repetition Contrast.](https://reader033.fdocuments.net/reader033/viewer/2022061418/5a4d1b8c7f8b9ab0599bf2dc/html5/thumbnails/3.jpg)
What does Proximity do for the overall design?
Helps organize informationReduces clutterGives the reader a clear structure.
![Page 4: PRINCIPLES OF DESIGN Proximity, Alignment, Repetition Contrast.](https://reader033.fdocuments.net/reader033/viewer/2022061418/5a4d1b8c7f8b9ab0599bf2dc/html5/thumbnails/4.jpg)
How to get it…
Squint your eyes and count the number of times your eye stops on the page (these are the major visual elements) .Does the organization of information make sense? Is there a way to group items together that would make more sense and help guide your viewers eye through the composition?
![Page 5: PRINCIPLES OF DESIGN Proximity, Alignment, Repetition Contrast.](https://reader033.fdocuments.net/reader033/viewer/2022061418/5a4d1b8c7f8b9ab0599bf2dc/html5/thumbnails/5.jpg)
Poor Proximity Good Proximity
![Page 6: PRINCIPLES OF DESIGN Proximity, Alignment, Repetition Contrast.](https://reader033.fdocuments.net/reader033/viewer/2022061418/5a4d1b8c7f8b9ab0599bf2dc/html5/thumbnails/6.jpg)
Simple, yet effective, steps toward GOOD Design…
Before After
![Page 7: PRINCIPLES OF DESIGN Proximity, Alignment, Repetition Contrast.](https://reader033.fdocuments.net/reader033/viewer/2022061418/5a4d1b8c7f8b9ab0599bf2dc/html5/thumbnails/7.jpg)
Help this designer…This designer needs to strengthen the proximity of this business card. Move the text boxes and graphics and show them how to fix their design…
(860)675-3456
www.JamDesign.com
60 Main st. Farmington, CT
06032 [email protected]
![Page 8: PRINCIPLES OF DESIGN Proximity, Alignment, Repetition Contrast.](https://reader033.fdocuments.net/reader033/viewer/2022061418/5a4d1b8c7f8b9ab0599bf2dc/html5/thumbnails/8.jpg)
AlignmentNothing should be placed on the page arbitrarily.
Every element should have some visual connection with another element on the page.
![Page 9: PRINCIPLES OF DESIGN Proximity, Alignment, Repetition Contrast.](https://reader033.fdocuments.net/reader033/viewer/2022061418/5a4d1b8c7f8b9ab0599bf2dc/html5/thumbnails/9.jpg)
This creates a clean, sophisticated, fresh look.
![Page 10: PRINCIPLES OF DESIGN Proximity, Alignment, Repetition Contrast.](https://reader033.fdocuments.net/reader033/viewer/2022061418/5a4d1b8c7f8b9ab0599bf2dc/html5/thumbnails/10.jpg)
Can alignment draw connections for my viewer?
Help this designer harness alignment to clean up their design and create visual connections in their design. You can use your alignment options in your formatting bar (right, left, center, justified) and you can move the text box and resize/rotate shapes.
SpecialtyEspresso
Café LatteCafé MochaCappuccino
Café Americano
Brewed CoffeeRegularDecaf
Iced CoffeeIced Latte
Tea
S M L$1 $2 $3$1.50 $2.50 $3.50$1.50 $2.50 $3.50$2 $3
$4
CAFÉ MENU
S M L$.75 $1.25 $2$.75 $1.25 $2$1 $1.75 $2.50$2 $3
$4$1 $1.75 $2.50
![Page 11: PRINCIPLES OF DESIGN Proximity, Alignment, Repetition Contrast.](https://reader033.fdocuments.net/reader033/viewer/2022061418/5a4d1b8c7f8b9ab0599bf2dc/html5/thumbnails/11.jpg)
Repetition
“Repeat visual elements of the design throughout the piece.”
![Page 12: PRINCIPLES OF DESIGN Proximity, Alignment, Repetition Contrast.](https://reader033.fdocuments.net/reader033/viewer/2022061418/5a4d1b8c7f8b9ab0599bf2dc/html5/thumbnails/12.jpg)
What is it & why does it work?
What can you repeat?• Color• Shapes• Textures• Spatial relationships• Line Thickness• Fonts • Sizes• Graphic Concepts• Ect…
Why to use repetition?• Consistency • Strength through
unity• Develops organization
![Page 13: PRINCIPLES OF DESIGN Proximity, Alignment, Repetition Contrast.](https://reader033.fdocuments.net/reader033/viewer/2022061418/5a4d1b8c7f8b9ab0599bf2dc/html5/thumbnails/13.jpg)
How is repetition being used in unique ways in this poster?
![Page 14: PRINCIPLES OF DESIGN Proximity, Alignment, Repetition Contrast.](https://reader033.fdocuments.net/reader033/viewer/2022061418/5a4d1b8c7f8b9ab0599bf2dc/html5/thumbnails/14.jpg)
What elements can be repeated in the layouts below?How can you unify this letterhead and business card? • Copy & Paste • Reuse/ change the colors
that are currently in the composition (you can not add new colors)
• Edit the size/boldness of text
Scotts Tree Service
212-555-643743 Penn rd. Waverly, PA
04568
Scott Alpine
![Page 15: PRINCIPLES OF DESIGN Proximity, Alignment, Repetition Contrast.](https://reader033.fdocuments.net/reader033/viewer/2022061418/5a4d1b8c7f8b9ab0599bf2dc/html5/thumbnails/15.jpg)
Contrast
“If the elements (type, color, size, line thickness, shape, space, etc.) are not the same, then make them VERY DIFFERENT.”
“Avoid elements on the page that are merely similar.”
![Page 16: PRINCIPLES OF DESIGN Proximity, Alignment, Repetition Contrast.](https://reader033.fdocuments.net/reader033/viewer/2022061418/5a4d1b8c7f8b9ab0599bf2dc/html5/thumbnails/16.jpg)
Which business cards below are demonstrating good or bad contrast?
Use the BLUE circles and select the good contrast Use the RED circles and select the bad contrast
![Page 17: PRINCIPLES OF DESIGN Proximity, Alignment, Repetition Contrast.](https://reader033.fdocuments.net/reader033/viewer/2022061418/5a4d1b8c7f8b9ab0599bf2dc/html5/thumbnails/17.jpg)
Applying all 4 Principles of Design