design principles - pasco county schoolsconnectplus.pasco.k12.fl.us/fwebster/wp-content/... ·...

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