design basics introduction color type j187 class 2 iimm j187 introduction to interactive multimedia

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

Upload: nancy-copeland

Post on 29-Dec-2015

212 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia

Design BasicsIntroduction

Color

Type

J187 Class 2

IIMMJ187 Introduction to Interactive Multimedia

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

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: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia

CRAP Design

C.R.A.P:

• Contrast

• Repetition

• Alignment

• Proximity

Page 4: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia

Contrast

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

Avoid colors and typefaces that are similar.

Page 5: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia
Page 6: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia

RepetitionRepeat visual elements throughout the designCommunicates consistency and brand

Page 7: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia
Page 8: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia

Alignment

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

Page 9: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia
Page 10: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia

Proximity

Similar Items Closer, Different farther apart.

Page 11: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia
Page 12: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia

Color

Page 13: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia

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: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia

Color Wheel

Page 15: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia

Primary Colors

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

Page 16: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia

Secondary Colors

Equal combinations of those primary colors

Orange, Green, Violet/Purple

Page 17: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia

Tertiary (third) Colors

The next level of equal combinations

The color blue-green for example.

Page 18: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia

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: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia

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: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia

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: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia

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: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia

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: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia

Shades and Tints

Add Black Add White

Page 24: Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia

Warm and Cool Colors

Warm Cool

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

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

http://colorschemedesigner.com/

Image Selection in Photoshop