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

DESIGN PRINCIPLESDigital Design 1

DIGITAL DESIGN PRINCIPLES

•Contrast•Repetition•Alignment•Proximity


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.



What is wrong with these business cards?



Center Align & Proximal Information



• 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.



Right Aligned



Use Headings – Avoid Redundancy



Proximity

Alignment

Grouping like elements

Location of elements



Types of Contrast



• 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.



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.)



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.



AVOID ALL CAPS



Better Contrast, Larger Title, Mixed Case, Not all Caps



• 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.



TypicalResume



ImprovedResume



TypicalResume

ImprovedResume



TypicalReport



Proximity

Alignment

Repetition

Contrast

Grouping like elements

Location of elements

Use and formatting of elements

The separation of elements



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


• Lines can be straight or curved.• How are lines used in the

composition on this slide?


•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.


•Hueis another word for color


•Chromais the intensity or purity of color


•Tint is a color mixed with white.•Shade is a color mixed with black.


•Toneis a color mixed with gray.


•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.


Combining Colors•Analogous•Monochromatic•Triad•Complementary•Compound


Combining Colors


Combining Colors•Analogous


Combining Colors•Monochromatic


Combining Colors•Triad


Combining Colors•Complementary


Combining Colors•Compound


Combining Colors•Analogous•Monochromatic•Triad•Complementary•Compound http://kuler.adobe.com/

http://paletton.com

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

Documents