Design principles and color presentation
Upcoming SlideShare
Loading in...5
×
 

Design principles and color presentation

on

  • 648 views

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

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

Statistics

Views

Total Views
648
Views on SlideShare
627
Embed Views
21

Actions

Likes
1
Downloads
25
Comments
0

2 Embeds 21

http://steventking.com 20
http://www.slideee.com 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Design principles and color presentation Design principles and color presentation Presentation Transcript

  • 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, 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.
  • 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 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, but can 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 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 #0000FF?
  • Hex Values 0 = 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 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
  • 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