design principles and color presentation

Design BasicsCRAP design

Color

Multimedia website critique

IIMMJ187 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

CRAP Design

C.R.A.P:

• Contrast

• Repetition

• Alignment

• Proximity

Contrast

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

Avoid colors and typefaces that are similar.

RepetitionRepeat visual elements throughout the designCommunicates consistency and brand

Alignment

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

Proximity

Similar items closer; different farther apart.

Multimedia website critiqueAssignment

Practice

Color theory is the study of how pure colors relate to each other and the effect of their combinations.

Developing a color scheme – deciding which colors look best together in a design – is a key aspect of good design and can make or break a project.

Color

CMYK or RGB?

CMYK

For Print

DO NOT USE IN CLASS!

RGB

For Screens

ALWAYS USE IN CLASS!

Color Wheel

Primary Colors

Wheel is based on the equal spacing of the primary colors red, yellow and blue

Secondary Colors

Equal combinations of those primary colors:

orange, green, violet/purple

Tertiary (third) Colors

The next level of equal combinations

The color blue-green for example

Change pure hues by adding white or black

Shades and Tints

Add Black Add White

Color Wheel Relationships

16 million color possibilities!

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

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

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

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

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

Colors evoke feelings

Warm Cool

Warm colors

Top of the color wheel

Reds, oranges, yellows

Represent fire, fall leaves, sunsets and sunrises

Can reflect energy, passion, happiness, enthusiasm, positivity, but also danger

Cool colors

Bottom of the color wheel

Greens, blues, and purples

Represent night, water and nature

Can reflect calmness, relaxation, or professionalism

How colors are implemented?

Shark Week

Hyundai Veloster

Neutrals

Often serve as a backdrop.

Commonly combined with brighter accent colors, butcan be used on their own for sophisticated layouts.

Color reference guide Red: Passion, love, anger

Orange: Energy, happiness, vitality

Yellow: Happiness, hope, deceit

Green: New beginnings, abundance, nature

Blue: Calmness, responsibility, sadness

Purple: Creativity, royalty, wealth

Black: Mystery, elegance, evil

Gray: Moody, conservative, formal

White: Purity, cleanliness, virtue

Brown, Natural, wholesome, dependable

Tan or beige: Conservative, pious, dull

Cream or ivory: Calm, elegant, pure

Hex Values0 = no color; F = full color

#000000

#000000

#FFFFFF

Hex Values0 = no color; F = full color

#000000

#000000

#FFFFFF

What is the hex value for red?

Hex Values0 = no color; F = full color

#000000

#000000

#FFFFFF

What is the hex value for red? #FF0000

Hex Values0 = no color; F = full color

#000000

#000000

#FFFFFF

What is the hex value for red? #FF0000

What color is #0000FF?

Hex Values0 = no color; F = full color

#000000

#000000

#FFFFFF

What is the hex value for red? #FF0000

What color is #0000FF? Blue

Carolina blue!

Color Scheme Selectionhttp://kuler.adobe.com

Can create a color scheme and import it into Illustrator.

Upload a photo and it picks the dominant colors.

http://colorschemedesigner.com/

Great color wheel

Exercise

Create Adobe Kuler account

Click “Create” (on upper left) Choose a color relationship and play with the color wheel

Find an image or logo with lots of color

Click “Create from image” (in the footer) Choose a mood to see different color schemes

Download a color scheme of your choice

Adobe Illustrator

Draw your tattoo design (or something else) and experiment with color schemes

Project 1

Wireframes and color comprehensive layouts will be discussed next week

Assignment: Website redesign

For now, choose which website you will redesign and create three possible color schemes