Ad
More Related Content
What's hot (20)
Viewers also liked (14)
Ad
Similar to Design principles and color presentation (20)
Ad
More from kmcintyre3 (15)
Recently uploaded (20)
Design principles and color presentation
- 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.
- 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