imm: design basics and color

25
Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia

Post on 22-Oct-2014

2.569 views

Category:

Technology


0 download

DESCRIPTION

Basics of Color theory

TRANSCRIPT

Page 1: IMM: Design Basics and Color

Design BasicsIntroduction

Color

Type

J187 Class 2

IIMMJ187 Introduction to Interactive Multimedia

Page 2: IMM: Design Basics and Color

Problem Solving

Visual or Design Element: Anything on the page

as well as the lack of anything (space).

Images, text, lines, shapes, graphics, spacing, etc.

Design is about:

• Communication

• Creating Interest

• Solving Problems

Page 3: IMM: Design Basics and Color

CRAP Design

C.R.A.P:

• Contrast

• Repetition

• Alignment

• Proximity

Page 4: IMM: Design Basics and Color

Contrast

Use colors, shapes, sizes, fonts, space and imagery to create contrast in design.

Avoid colors and typefaces that are similar.

Page 5: IMM: Design Basics and Color
Page 6: IMM: Design Basics and Color

RepetitionRepeat visual elements throughout the designCommunicates consistency and brand

Page 7: IMM: Design Basics and Color
Page 8: IMM: Design Basics and Color

Alignment

Where’s my boat? Dock 4, Slip 20.

Page 9: IMM: Design Basics and Color
Page 10: IMM: Design Basics and Color

Proximity

Similar Items Closer, Different farther apart.

Page 11: IMM: Design Basics and Color
Page 12: IMM: Design Basics and Color

Color

Page 13: IMM: Design Basics and Color

CMYK or RGB?

CMYK

For Print

Pigment

DO NOT USE IN CLASS!

RGB

For Screens

Light

ALWAYS USE IN CLASS!

WE WILL NEVER USE OR SPEAK OF CMYK IN THIS CLASS AGAIN!

Page 14: IMM: Design Basics and Color

Color Wheel

Page 15: IMM: Design Basics and Color

Primary Colors

Wheel is based on the equal spacing of the primary colors Red, Yellow and Blue

Page 16: IMM: Design Basics and Color

Secondary Colors

Equal combinations of those primary colors

Orange, Green, Violet/Purple

Page 17: IMM: Design Basics and Color

Tertiary (third) Colors

The next level of equal combinations

The color blue-green for example.

Page 18: IMM: Design Basics and Color

Color Relationships

• Complementary • Two opposite colors in

wheel

• Triads • Triangle Spacing around wheel

• Analogous • Adjacent Hues

• Monochromatic • Single color, varied intensity

• Compound • Combines colors from various

hues

Page 19: IMM: Design Basics and Color

Color Relationships

• Complementary • Two opposite colors in wheel

• Triads • Triangle Spacing around

wheel

• Analogous • Adjacent Hues

• Monochromatic • Single color, varied intensity

• Compound • Combines colors from various

hues

Page 20: IMM: Design Basics and Color

Color Relationships

• Complementary • Two opposite colors in wheel

• Triads • Triangle Spacing around wheel

• Analogous • Adjacent Hues

• Monochromatic • Single color, varied intensity

• Compound • Combines colors from various

hues

Page 21: IMM: Design Basics and Color

Color Relationships

• Complementary • Two opposite colors in wheel

• Triads • Triangle Spacing around wheel

• Analogous • Adjacent Hues

• Monochromatic • Single color, varied

intensity

• Compound • Combines colors from various

hues

Page 22: IMM: Design Basics and Color

Color Relationships

• Complementary • Two opposite colors in wheel

• Triads • Triangle Spacing around wheel

• Analogous • Adjacent Hues

• Monochromatic • Single color, varied intensity

• Compound • Combines colors from

various hues

Page 23: IMM: Design Basics and Color

Shades and Tints

Add Black Add White

Page 24: IMM: Design Basics and Color

Warm and Cool Colors

Warm Cool

Page 25: IMM: Design Basics and Color

Color Scheme Selectionhttp://kuler.adobe.com/#themes/rating?time=30

http://colorschemedesigner.com/

Image Selection in Photoshop