Design Basics
CRAP design
Color
Multimedia website critique
I I M M
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...
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...
Repetition
Repeat visual elements throughout the design
Communicates consistency and brand
Alignment
Where’s my boat? Dock 4, Slip 20.
Proximity
Similar items closer; different farther apart.
Multimedia website critique
Assignment
Practice
 Color theory is the study of how pure colors relate to
each other and the effect of their combinations.
 Developing a c...
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 w...
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
• ...
Color Relationships
• Complementary
• Two opposite colors in wheel
• Triads
• Triangle spacing around wheel
• Analogous
• ...
Color Relationships
• Complementary
• Two opposite colors in wheel
• Triads
• Triangle Spacing around wheel
• Analogous
• ...
Color Relationships
• Complementary
• Two opposite colors in wheel
• Triads
• Triangle Spacing around wheel
• Analogous
• ...
Color Relationships
• Complementary
• Two opposite colors in wheel
• Triads
• Triangle Spacing around wheel
• Analogous
• ...
Colors evoke feelings
Warm Cool
Warm colors
Top of the color wheel
Reds, oranges, yellows
Represent fire, fall leaves,
sunsets and sunrises
Can reflect en...
Cool colors
Bottom of the color wheel
Greens, blues, and purples
Represent night, water
and nature
Can reflect calmness,
r...
How colors are implemented?
Shark Week
Hyundai Veloster
Neutrals
Often serve as a backdrop.
Commonly combined with brighter accent colors, but
can be used on their own for sophis...
Color reference guide
 Red: Passion, love, anger
 Orange: Energy, happiness, vitality
 Yellow: Happiness, hope, deceit
...
Hex Values
0 = no color; F = full color
#000000
#000000 #FFFFFF
Hex Values
0 = no color; F = full color
#000000
#000000 #FFFFFF
What is the hex value for red?
Hex Values
0 = no color; F = full color
#000000
#000000 #FFFFFF
What is the hex value for red? #FF0000
Hex Values
0 = no color; F = full color
#000000
#000000 #FFFFFF
What is the hex value for red? #FF0000
What color is #0000...
Hex Values
0 = no color; F = full color
#000000
#000000 #FFFFFF
What is the hex value for red? #FF0000
What color is #0000...
Carolina blue!
Color Scheme Selection
http://kuler.adobe.com
Can create a color scheme and import it into Illustrator.
Upload a photo and...
Exercise
 Create Adobe Kuler account
 Click “Create” (on upper left)
 Choose a color relationship and play with the col...
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, cho...
Design principles and color presentation
Design principles and color presentation
Design principles and color presentation
Design principles and color presentation
Design principles and color presentation
Design principles and color presentation
Design principles and color presentation
Design principles and color presentation
Design principles and color presentation
Upcoming SlideShare
Loading in...5
×

Design principles and color presentation

1,015

Published on

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

Published in: Design, Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,015
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
47
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Design principles and color presentation

  1. 1. Design Basics CRAP design Color Multimedia website critique I I M M J187 Introduction to Interactive Multimedia
  2. 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. 3. CRAP Design C.R.A.P: • Contrast • Repetition • Alignment • Proximity
  4. 4. Contrast Use colors, shapes, sizes, fonts, space and imagery to create contrast in design. Avoid colors and typefaces that are similar.
  5. 5. Repetition Repeat visual elements throughout the design Communicates consistency and brand
  6. 6. Alignment Where’s my boat? Dock 4, Slip 20.
  7. 7. Proximity Similar items closer; different farther apart.
  8. 8. Multimedia website critique Assignment Practice
  9. 9.  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
  10. 10. CMYK or RGB? CMYK  For Print  DO NOT USE IN CLASS! RGB  For Screens  ALWAYS USE IN CLASS!
  11. 11. Color Wheel
  12. 12. Primary Colors Wheel is based on the equal spacing of the primary colors red, yellow and blue
  13. 13. Secondary Colors Equal combinations of those primary colors: orange, green, violet/purple
  14. 14. Tertiary (third) Colors The next level of equal combinations The color blue-green for example Change pure hues by adding white or black
  15. 15. Shades and Tints Add Black Add White
  16. 16. Color Wheel Relationships 16 million color possibilities!
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. Colors evoke feelings Warm Cool
  23. 23. 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
  24. 24. Cool colors Bottom of the color wheel Greens, blues, and purples Represent night, water and nature Can reflect calmness, relaxation, or professionalism
  25. 25. How colors are implemented?
  26. 26. Shark Week
  27. 27. Hyundai Veloster
  28. 28. Neutrals Often serve as a backdrop. Commonly combined with brighter accent colors, but can be used on their own for sophisticated layouts.
  29. 29. 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
  30. 30. Hex Values 0 = no color; F = full color #000000 #000000 #FFFFFF
  31. 31. Hex Values 0 = no color; F = full color #000000 #000000 #FFFFFF What is the hex value for red?
  32. 32. Hex Values 0 = no color; F = full color #000000 #000000 #FFFFFF What is the hex value for red? #FF0000
  33. 33. Hex Values 0 = no color; F = full color #000000 #000000 #FFFFFF What is the hex value for red? #FF0000 What color is #0000FF?
  34. 34. Hex Values 0 = no color; F = full color #000000 #000000 #FFFFFF What is the hex value for red? #FF0000 What color is #0000FF? Blue
  35. 35. Carolina blue!
  36. 36. 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
  37. 37. 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
  38. 38. Adobe Illustrator  Draw your tattoo design (or something else) and experiment with color schemes
  39. 39. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×