design principles and color presentation

Download Design principles and color presentation

Post on 21-Oct-2014

626 views

Category:

Design

1 download

Embed Size (px)

DESCRIPTION

Includes the elements of C.R.A.P. design and the role of color in web design.

TRANSCRIPT

Design Part 3: Layout

Design Basics

CRAP designColorMultimedia website critique

IIMM

J187 Introduction to Interactive Multimedia

1

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:CommunicationCreating InterestSolving Problems

2

CRAP Design

C.R.A.P:ContrastRepetitionAlignment Proximity

Contrast

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

Avoid colors and typefaces that are similar.

4

Repetition

Repeat visual elements throughout the designCommunicates consistency and brand

9

Alignment

Wheres my boat?

Dock 4, Slip 20.

12

Proximity

Similar items closer; different farther apart.

14

Multimedia website critique

Assignment

Practice

16

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 PrintDO NOT USE IN CLASS!

RGB

For ScreensALWAYS USE IN CLASS!

18

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 combinationsThe color blue-green for example

Change pure hues by adding white or black

22

Shades and Tints

Add Black

Add White

Color Wheel Relationships

16 million color possibilities!

24

Color Relationships

Complementary Two opposite colors in wheelTriads Triangle Spacing around wheelAnalogous Adjacent HuesMonochromatic Single color, varied intensityCompound Combines colors from various hues

Color Relationships

Complementary Two opposite colors in wheelTriads Triangle spacing around wheelAnalogous Adjacent huesMonochromatic Single color, varied intensityCompound Combines colors from various hues

Color Relationships

Complementary Two opposite colors in wheelTriads Triangle Spacing around wheelAnalogous Adjacent HuesMonochromatic Single color, varied intensityCompound Combines colors from various hues

Color Relationships

Complementary Two opposite colors in wheelTriads Triangle Spacing around wheelAnalogous Adjacent HuesMonochromatic Single color, varied intensityCompound Combines colors from various hues

28

Color Relationships

Complementary Two opposite colors in wheelTriads Triangle Spacing around wheelAnalogous Adjacent HuesMonochromatic Single color, varied intensityCompound Combines colors from various hues

Colors evoke feelings

Warm

Cool

Warm colors

Top of the color wheelReds, oranges, yellowsRepresent fire, fall leaves, sunsets and sunrisesCan reflect energy, passion, happiness, enthusiasm, positivity, but also danger

Cool colors

Bottom of the color wheelGreens, blues, and purplesRepresent night, water and natureCan 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, angerOrange: Energy, happiness, vitalityYellow: Happiness, hope, deceitGreen: New beginnings, abundance, natureBlue: Calmness, responsibility, sadnessPurple: Creativity, royalty, wealthBlack: Mystery, elegance, evilGray: Moody, conservative, formalWhite: Purity, cleanliness, virtueBrown, Natural, wholesome, dependableTan or beige: Conservative, pious, dullCream or ivory: Calm, elegant, pure

Hex Values

0 = no color; F = full color

#000000

#000000

#FFFFFF

38

Hex Values

0 = no color; F = full color

#000000

#000000

#FFFFFF

What is the hex value for red?

39

Hex Values

0 = no color; F = full color

#000000

#000000

#FFFFFF

What is the hex value for red? #FF0000

40

Hex Values

0 = no color; F = full color

#000000

#000000

#FFFFFF

What is the hex value for red? #FF0000

What color is #0000FF?

41

Hex Values

0 = no color; F = full color

#000000

#000000

#FFFFFF

What is the hex value for red? #FF0000

What color is #0000FF? Blue

42

Carolina blue!

Color Scheme Selection

http://kuler.adobe.comCan create a color scheme and import it into Illustrator.Upload a photo and it picks the dominant colors.http://colorschemedesigner.com/Great color wheel

45

Exercise

Create Adobe Kuler accountClick Create (on upper left)Choose a color relationship and play with the color wheelFind an image or logo with lots of colorClick Create from image (in the footer)Choose a mood to see different color schemesDownload 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 weekAssignment: Website redesignFor now, choose which website you will redesign and create three possible color schemes

48