View
633
Download
2
Tags:
Embed Size (px)
DESCRIPTION
Includes the elements of C.R.A.P. design and the role of color in web design.
Citation preview
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