design principles - pasco county schoolsconnectplus.pasco.k12.fl.us/fwebster/wp-content/... ·...
TRANSCRIPT
DESIGN PRINCIPLESDigital Design 1
DIGITAL DESIGN PRINCIPLES
•Contrast•Repetition•Alignment•Proximity
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
• Items 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.
• This helps organize information and reduces clutter.
• Items that are not related to each other should not be in close proximity.
• The closeness or lack of closeness indicates the relationship.
• Elements that are intellectuallyconnected should be visuallyconnected.
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
What is wrong with these business cards?
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
Center Align & Proximal Information
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
• Nothing should be placed on the page arbitrarily.
• Every element should have some visual connection with another element on the page.
• This creates a clean, sophisticated look.
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
Right Aligned
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
Use Headings – Avoid Redundancy
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
Use Headings – Avoid Redundancy
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
Proximity
Alignment
Grouping like elements
Location of elements
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
Types of Contrast
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
• Avoid elements on the page that are merely similar.
• If the elements (type, color, size, line thickness, shape, space, etc.) are not the same, then make them very different.
Contrast is often the most important visual element on the page.
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
AVOID ALL CAPS
•ALL CAPS TAKES UP MORE SPACE, FORCING YOU TO USE A SMALLER FONT TO PUT THE SAME AMOUNT OF INFORMATION
• (If you don’t believe me, this sentence has just the same number of letters as the previous one.)
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
AVOID ALL CAPS
• ALL CAPS ARE HARD FOR PEOPLE TO READ B/C THERE’S NO SHAPE TO THEM
• Mixed-case sentences have redundant shape coding that make them easier to read.
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
AVOID ALL CAPS
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
Better Contrast, Larger Title, Mixed Case, Not all Caps
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
• Repeat visual elements of the design throughout the piece. You can repeat color, shape, texture, spatial relationships, line thicknesses, sizes, etc.
• This helps develop the organization and strengthens the unity.
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
TypicalResume
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
ImprovedResume
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
TypicalResume
ImprovedResume
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
TypicalReport
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
TypicalReport
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
TypicalReport
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
TypicalReport
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
TypicalReport
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
TypicalReport
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
TypicalReport
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
TypicalReport
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
Proximity
Alignment
Repetition
Contrast
Grouping like elements
Location of elements
Use and formatting of elements
The separation of elements
DIGITAL DESIGN PRINCIPLES
Contrast | Repetition | Alignment | Proximity
Find four documents that show good use of C.R.A.P
- Print two page document- Write/Annotate on printout- Staple together and turn in
•Movement•Balance•Unity•Emphasis
•Line•Color•Shape•Texture
Movement | Balance | Unity | Emphasis | Line | Color | Shape | Texture
•Line•Color•Shape•Texture
Building BlocksOf Graphics
Movement | Balance | Unity | Emphasis | Line | Color | Shape | Texture
• Lines can be straight or curved.• How are lines used in the
composition on this slide?
Movement | Balance | Unity | Emphasis | Line | Color | Shape | Texture
•Hue is another word for color.•Chroma is the intensity or purity of color.•Tint is a color mixed with white.•Tone is a color mixed with gray.•Shade is a color mixed with black.
Movement | Balance | Unity | Emphasis | Line | Color | Shape | Texture
•Hueis another word for color
Movement | Balance | Unity | Emphasis | Line | Color | Shape | Texture
•Chromais the intensity or purity of color
Movement | Balance | Unity | Emphasis | Line | Color | Shape | Texture
•Tint is a color mixed with white.•Shade is a color mixed with black.
Movement | Balance | Unity | Emphasis | Line | Color | Shape | Texture
•Toneis a color mixed with gray.
Movement | Balance | Unity | Emphasis | Line | Color | Shape | Texture
•Hue is another word for color.•Chroma is the intensity or purity of color.•Tint is a color mixed with white.•Tone is a color mixed with gray.•Shade is a color mixed with black.
Movement | Balance | Unity | Emphasis | Line | Color | Shape | Texture
Combining Colors•Analogous•Monochromatic•Triad•Complementary•Compound
Movement | Balance | Unity | Emphasis | Line | Color | Shape | Texture
Combining Colors
Movement | Balance | Unity | Emphasis | Line | Color | Shape | Texture
Combining Colors•Analogous
Movement | Balance | Unity | Emphasis | Line | Color | Shape | Texture
Combining Colors•Monochromatic
Movement | Balance | Unity | Emphasis | Line | Color | Shape | Texture
Combining Colors•Triad
Movement | Balance | Unity | Emphasis | Line | Color | Shape | Texture
Combining Colors•Complementary
Movement | Balance | Unity | Emphasis | Line | Color | Shape | Texture
Combining Colors•Compound
Movement | Balance | Unity | Emphasis | Line | Color | Shape | Texture
Combining Colors•Analogous•Monochromatic•Triad•Complementary•Compound http://kuler.adobe.com/
http://paletton.com