Design 2 – Color & Layout Basics

SBM 338

Lanny Wilke

Colors

Primary and secondary Warm and cool Complementary or contrasting

Here are some common color wheels based on subtractive color and familiar colors like red, blue and yellow:

Color wheel with primaryand secondary colors

Color wheel with primary, secondary and intermediate (or tertiary) colors

Another color wheel with primary, secondary and intermediate (or

tertiary) colors

Secondary colorsThe secondary colors are green, orange and violet (purple). A secondary color is made by mixing two primary colors. Each secondary color is made from the two primary colors on either side of it in the color wheel.

Two colors on opposite sides of the color wheel, which when placed next to each other make both appear brighter. The complementary color of a primary color (red, blue, and yellow) is the color you get by mixing the other two (red + blue = purple; blue + yellow = green; red + yellow = orange). So the complementary color for red is green, for blue it's orange, and for yellow it's purple.

Color Considerations

Culture – know & respect cultural connotations

AgeChildren – bright & solidsYoung – muted pastels & shades

of gray

ClassWorking class – primaryMore educated – more obscure

GenderMen – cool colorsWomen – warmer colors

Trends

Color Terms

RGB – primary colors – red, green, blue

CMYKCyan, magenta, yellow, & black

The colors of a four-color layout PMS colors (no, that’s not what it

means)Custom colors used by designers

Spot colorThe use of one or more colors in

an otherwise black & white layout Ghosting

An image is reproduced at less than 100% of the color density (watermarks)

GradationThe color shifting from a greater to

a lesser intensity or completely fading as it moves across.

Bleed Color or type runs to the very edge

of the page.

Layout Basics

Visual flow patternsTop-down

Elements are centered.Z or backward S

Logo in lower right cornerUpper left to lower right – the

shortcut

Layout PatternsGrids

Dividing up the space using geometric patterns.

ColumnsChaotic (circus or field-of-tension)

Alignment and proximity are the organizing principles

Building the Layout Edges

The negative space of edges Gutter – where the pages are bound

Blocks and shapes Used to organize elements in your

layout Copy as graphic

Copy body as a block or shape

On to Part 3 we go.