Lecture 3-Design Principles

C ontrast
R epetition
A lignment
P roximity

Using the principles of C.R.A.P. provides consistency and unity

Contrast

Avoid blending elements that are merely similar
If elements are not the same, then make them VERY DIFFERENT
This goes for typeface, color, size, spacing, line thickness, etc.
Contrast is often the most important visual attraction on the page
Go for bold contrasts

Repetition

Repeat visual elements of the design throughout the piece
Repeat color, shape, texture, spatial
relationships, line thickness, size, and typeface
Creates organization and unity across the design

Alignment

Nothing should be placed on the page arbitrarily
Every item should have a visual connection with something else on the page
Make sure each elements lines up with something else on the page (use a grid)
Aligning type and graphics adds readability and intentionality, and cohesiveness

Proximity

Group related items together
Place items physically close to each other, so the related items are seen as one cohesive group rather than a bunch of unrelated pieces
Proximity creates a bond between between elements on a page - establishes a visual hierarchy
Proximity organizes the design and content

Workflow Process

1. Define: design statement, vision board and creative brief
2. Architect
3. Design: mockup, site structure
4. Build: XHTML and CSS
5. Deliver: post online