Design principles and color presentation

1,409 views
1,181 views

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,409
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
50
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

×