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

1. Design Basics
CRAP design
Color
Multimedia website critique
I I M M
J187 Introduction to Interactive Multimedia

2. 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

3. CRAP Design
C.R.A.P:
• Contrast
• Repetition
• Alignment
• Proximity

4. Contrast
Use colors, shapes, sizes, fonts, space and imagery to create contrast in
design.
Avoid colors and typefaces that are similar.

9. Repetition
Repeat visual elements throughout the design
Communicates consistency and brand

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

14. Proximity
Similar items closer; different farther apart.

16. Multimedia website critique
Assignment
Practice

17.  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

18. CMYK or RGB?
CMYK
 For Print
 DO NOT USE IN CLASS!
RGB
 For Screens
 ALWAYS USE IN CLASS!

19. Color Wheel

20. Primary Colors
Wheel is based on the
equal spacing of the
primary colors red, yellow
and blue

21. Secondary Colors
Equal combinations of
those primary colors:
orange, green,
violet/purple

22. Tertiary (third) Colors
The next level of equal
combinations
The color blue-green for
example
Change pure hues by
adding white or black

23. Shades and Tints
Add Black Add White

24. Color Wheel Relationships
16 million
color possibilities!

25. 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

26. 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

27. 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

28. 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

29. 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

30. Colors evoke feelings
Warm Cool

31. 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

32. Cool colors
Bottom of the color wheel
Greens, blues, and purples
Represent night, water
and nature
Can reflect calmness,
relaxation, or
professionalism

33. How colors are implemented?

34. Shark Week

35. Hyundai Veloster

36. Neutrals
Often serve as a backdrop.
Commonly combined with brighter accent colors, but
can be used on their own for sophisticated layouts.

37. 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

38. Hex Values
0 = no color; F = full color
#000000
#000000 #FFFFFF

39. Hex Values
0 = no color; F = full color
#000000
#000000 #FFFFFF
What is the hex value for red?

40. Hex Values
0 = no color; F = full color
#000000
#000000 #FFFFFF
What is the hex value for red? #FF0000

41. Hex Values
0 = no color; F = full color
#000000
#000000 #FFFFFF
What is the hex value for red? #FF0000
What color is #0000FF?

42. Hex Values
0 = no color; F = full color
#000000
#000000 #FFFFFF
What is the hex value for red? #FF0000
What color is #0000FF? Blue

44. Carolina blue!

45. Color Scheme Selection
http://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

46. 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

47. Adobe Illustrator
 Draw your tattoo design (or something else) and
experiment with color schemes

48. 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