interaction design for multimedia composition and color l.
Skip this Video
Loading SlideShow in 5 Seconds..
Interaction Design for Multimedia: + Composition and Color PowerPoint Presentation
Download Presentation
Interaction Design for Multimedia: + Composition and Color

Loading in 2 Seconds...

play fullscreen
1 / 46

Interaction Design for Multimedia: + Composition and Color - PowerPoint PPT Presentation

  • Uploaded on

Interaction Design for Multimedia: + Composition and Color. CIS 421 color.ppt. Agenda. Project 1 Analysis & Design of interactive multimedia websites GAS analysis Layout & composition decisions Text and fonts The uses of color. Project 1: Due: Week 4, Wed., before class.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Interaction Design for Multimedia: + Composition and Color' - PamelaLan

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
  • Project 1
  • Analysis & Design of interactive multimedia websites
    • GAS analysis
    • Layout & composition decisions
    • Text and fonts
    • The uses of color
project 1 due week 4 wed before class
Project 1:Due: Week 4, Wed., before class
  • Project standards = index page on projects folder
    • Project 1 requirements
    • Design the website according to your project plan, to suit & appeal to your specific persona
    • + Each website must pass accessibility & other standards
  • Website that fulfills project plan (50 points)
    • Accomplishes tasks outlined in project plan
    • Website Structure (5 points)
    • Testing & validation (8 points)
    • Website design –qualitative evaluations (16 points)
    • Website elements (13 points)
    • Other requirements (8 points)
project 1 due week 4 wed before class4
Project 1:Due: Week 4, Wed., before class
  • Make sure you get credit for the work you do – make as obvious as possible
    • Download a copy of grading sheet for project to your hard drive
    • fill in the details
    • post on your Web site in admin directory
    • Create a link to it from Webmaster page
    • Upload a copy to Blackboard under assignments
characteristics of good interaction design
Characteristics of good interaction design
  • Trustworthy
  • Appropriate
  • Smart – complexity handled by technology
  • Responsive – if slow let user know something is happening
  • Clever?
  • Ludic, which means that users can play with it
  • Pleasurable – appeals to emotions, is satisfying to use
gas analysis g oals of project
GAS Analysis:Goals of Project
  • Answers the WHY? Of the project
  • Developer goals:
    • Branding company identity
    • Increasing traffic to website
    • Developer goals of
  • User Goals
    • Communication medium (chat, bulletin board)
    • Getting something (entertainment, purchase, info)
    • User goals of YouTube? MySpace?
  • Developer & user goals reciprocal & also diverge
gas analysis a udience issues
GASAnalysis: Audience issues
  • Width of audience
    • Personalized to individual users?
    • Mass media aimed at wider audience?
    • Difficult to design for entire world
  • Creating website that is suitable to users with disabilities improves usability for everyone.
gas analysis s cope is critical
GASAnalysis:Scope is critical
  • What is the subject?
  • What are the boundaries around the subject?
    • What’s inside & included?
    • What’s outside and not included?
    • How will the user know the boundaries of the Website?
  • If the scope is
    • TOO LARGE: you get confused & cannot finished & users get confused as well
    • TOO SMALL: you may not be able to accomplish your goals
personas scenarios
Personas & Scenarios


  • Archetypal people who will be using product or service
  • Focus on their behaviors and motivations & not their demographics


  • Stories about what it will be like to use the service or product.
  • W3C uses scenarios of People with Disabilities using the Web
    • Http://
sketches models for project design
Sketches & Models for project design
  • Task Analysis – user & developer goals
  • Task flows – Site narrative
  • Use cases
  • Storyboards showing site hierarchy (Stylin’, p. 236
  • Wireframe showing page layout (Stylin’, p. 238
  • Prototypes
  • Grid systems
    • Rows & columns
    • gutters or white space between grids let the eye perceive/scan chunks of information
  • Layout structures, fashions, browser size, liquid or fixed width layout, tables/frames/CSS
  • Use Wayback machine to look back:
    • or
visual flow
Visual Flow
  • Western cultures:
    • read from left to right, top to bottom
    • eye comes in at upper left, goes across, then down
    • Lines lead eye
    • Bright colors or high contrast draws eye
    • Certain iconic images draw our attention.
    • Need only ONE focal point so eye can stay on it
  • Positioning of elements important– most important elements at top/center
    • Objects that are aligned are related
    • Objects that are below/indented are subordinate
    • Presidential Candidates Web Site Usability.
elastic layout width
Elastic layout width
  • Use % to define default font size in body style:
    • body {font-size:90%;}
  • Use em units to define width
    • em is the width of the letter “m” in default font – use em unit to define font size and widths and heights of block elements
    • 1 em = 12 pixels
    • When default font size increases width of page increases – elastic lawn design
  • Can use % to define width of 2 columns on page

#side {float:left; width:26%;}

#mainContent {float:right; width:75%;}

gui design heuristics
GUI Design Heuristics
  • The most important object, idea, should coincide with focal point of display -- the entire design should lead to it.
  • In Western culture, eye usually begins at upper left
    • Easiest place to put focal point: the middle
    • Make it the brightest color, with sharpest contrast to background
    • Too many focal points mean eye cannot rest
composition work first on black grey white patterns
Composition: Work first on Black, Grey, & White patterns
  • Squint at your design (or take off your glasses if you are nearsighted.
  • Look at the space around the items
  • Pay as much attention to the blank space as to the items in the space.
  • Follow the direction the eye follows as it travels around the surface.
  • Examples of different kinds of layout on following slides
typographic guidelines
Typographic Guidelines
  • Typefaces for web – How many web fonts – available to browsers on Mac & PC (UDWA, p. 45)?
    • Sans-serif best for shorter passages of text & text meant to be scanned quickly
    • Examples of sans-serif fonts?
  • Size: use relative sizing for accessibility so fonts can be resized.
  • Alignment: left, NOT justified/right/centered
  • Avoid “rivers” – what are they?
  • Avoid widows/orphans
  • Line length of 55-75 characters
  • Leading: Line height 20% more than font size
when you design pick the background first
When you design, pick the background first
  • If you use a patterned background, make sure that text is visible on it
  • If you use a colored background, make sure that text is visible on it
  • Look at Blackberry website
  • Think of your audience and the types of colors they prefer
  • Remember -- less is more, you want people to be able to look at your page
  • Jakob Nielsen’s usability alertbox columns
    • “How users read on the web”
    • Writing for the Web
    • Eye tracking for reading on the web
  • Eyetracking video
text titles use relative text sizing
Text & Titles: use relative text sizing
  • Convey content message –
    • Use correct spelling
    • Have to fit style, background
  • Bitmapped text looks better but
    • it cannot be “searched” as text
    • it takes up more memory
    • is harder to revise
  • Easy to Read to get your message:
    • Use relative font sizes so viewers can change font size
    • Contrast values (light & darkness) of Text & background so can be read
    • Watch out for flicker from complementary colors
  • Create areas of emphasis
  • Influences look, balance, location of elements on screen
  • Fill up empty spaces
  • Provides context for screen
  • Background color and wallpaper can be set on web site -- check effects in different browsers & computers
  • BE CAREFUL that users CAN READ the TEXT!
    • Text has to be large enough to read
    • Text has to contrast with background – juicy colour contrast analyser test
color theory use of color
Color Theory: Use of Color:
  • Color is a sensation of light that is experienced through sight (on the retina)
  • Colors are continually changing
  • Design is determined by patterns of light and dark values – design light/dark patterns first
  • 12% of males colorblind –design w/that in mind
    • color blindness tests:
facts about color
Facts about Color
  • Light generates color as waves of light energy with different wavelengths measured in nanometers (nm)
    • Some wavelengths are discrete colors (red=720 nm):
    • Humans can sense light wavelengths (and the colors they represent) from 380 nm to 720 nm -- only a part of the color spectrum
    • ROYGBIV (Red, orange, yellow, green blue, indigo, violet) are the discrete colors visible to humans
mixing colors
Mixing Colors
  • Computer displays use Additive Colors:
  • Mixtures of light waves
    • Primary colors of light: Red, Green & Blue
    • Secondary colors of light mixed from the Primary colors: Yellow, Cyan & Magenta
    • White = equal wavelengths of Red + Green + Blue (fully saturated colors)
    • Yellow = equal wavelengths of Red + Green
    • Black = the absence of color
    • Yellow-Green = 2 parts Green + 1 part Red
color defined by three qualities
Color defined by three qualities
  • hue -- the NAME of the color (e.g., red, blue, green, yellow)
  • saturation or chroma -- the color's dullness or vividness
  • value or brightness -- the color's relative lightness or darkness
  • Definitions of these terms can be found at Definitions of Hue, Saturation and Brightness
why use color in a web site
Why Use Color in a Web Site?
  • Color is more interesting, exciting, inviting that black & white
  • Color can provide signals:
    • problems -- Negative numbers on a spreadsheetare red: $5,000,000 deficit!
  • ColorsconveyStyle!
    • Hip colors, sedate colors, serious colors
computers display raster images or bitmaps
Computers Display Raster Images or Bitmaps
  • Made up of pixels or dots arranged in grid
    • x pixels wide, y pixels high, z pixels deep
    • z is number of possible colors for each pixel
      • One-bit images have only 2 states: white & black
  • File size depends on size/resolution of image - but file size depends on compressibility of image--and all images are compressed
  • Video RAM (VRAM) determines color depth & resolution you can display--trade-offs
indexed rgb color
Indexed & RGB Color
  • Indexed colors use 256 colors - gifs
    • Pixel color in image is matched to one of available colors in indexed color palette
  • RGB format - Full or True color – jpg & png
    • uses 8 bits (0 to 255) of Red, Green, & Blue values to form a 24-bit pixel (over 16 M colors)
  • WEBSAFE colors: 216 colors
    • Netscape reserved 20 colors for itself + 20 other colors for backgrounds & programs
  • RGB often written in hexadecimal format:
    • Saturated Red: FF0000
    • Saturated Green: 00FF00
    • Saturated Blue: 0000FF
    • Black: 000000
    • White: FFFFFF
  • CLUT (Color Look-Up Table): 216 “Browser-safe” colors
dithering or texture mapping
Dithering or Texture Mapping
  • A type of optical illusion
  • If you put 2 colors next to one another, the human eye automatically combines them into a 3rd color
  • The way most color printing is done
complementary colors
Complementary colors
  • Lie directly opposite each other on the standard color wheel
  • Avoid--very difficult to look at for very long - flickers
    • Red & blue-green
    • orange & blue
    • yellow & blue-violet
    • chartreuse & violet
    • green & red-violet
different wavelengths of color come into focus at different points in the eye
Different wavelengths of color come into focus at different points in the eye

Yellow and green wavelengths

  • come into focus at the retina
  • require little accommodation
  • are just as visible at the periphery as they are in the center of a visual field
  • Easy to look at for long periods
different wavelengths of color come into focus at different points in eye
Different wavelengths of color come into focus at different points in eye
  • Red wavelengths
    • come into focus a little behind the retina
    • eyes have difficulty focusing on red
    • Red font is very hard to read so should be avoided in large quantities
    • Therefore reds pop out from background
    • Use to make something pop out
different wavelengths of color come into focus at different points in the eye34
Different wavelengths of color come into focus at different points in the eye

Blue wavelengths

  • Come into focus in front of retina
  • eyes cannot focus clearly on blue
  • blues seem to fade into the background
    • blues are a good background color
    • blues are not a good foreground color

Backgrounds changes perception of colors.

Do the saturated colors below retain the same hue?


Complementary colors change the perception of the color.

Red against a shade of itself versus its complement.

Notices how the red/green edges flicker


Background & complementary colors change

perception of color value: which looks darker?


Problem: Flicker in complementary colors

What does the gray page background do?

potential problems with color
Potential problems with color
  • Complementary colors next to each other change each other’s hue
  • Complementary colors flicker
  • Contrasting colors create intense edges that draw your attention to edge of image
  • Colored typeface does not stand out against background.
color contrast checkers
Color Contrast Checkers
  • Test online:
  • Download Firefox extension to check font/background colors
  • Snook: On-line tool
perception of colors
Perception of Colors
  • Human visual sense first senses light and dark patterns and shapes, before it perceives colors
  • Adaptation: The retina adapts to the amount of light -- color is brighter at higher lighting levels
  • Lateral inhibition: The retina distinguishes dark/light edges -- a dark area next to a light area appears darker than it actually is
  • Memory Color -- color is learned by experience
    • We see the color we have learned to see, which means we may perceive an orange we see in dim light as the same color as the orange we see in bright light
color effects
Color Effects
  • Colors affect hormonal balances
    • An elevated red wavelength increases hormone production and raises blood pressure
    • An elevated blue wavelength depresses hormone production and lowers blood pressure
  • Symbolic colors
    • Red usually means what? Blue? Green?
critical tasks of presentation design
Critical Tasks of Presentation Design
  • Define a visual theme and style
  • Design a system of screen layouts
    • cascading style sheets
    • Design page in Photoshop or Fireworks as a graphic file that you slice into components
  • Create structural elements for each screen (background, windows, etc.)
  • Create control elements (buttons, arrows, hyperlinks)
multimedia style
Multimedia Style
  • The content of your project defines the style
    • Can be serious, fun
  • Project style must be unified
    • Background colors, Text, Graphics
    • But don’t make it too boring!
  • Unify multiple screens
    • images, colors, navigational tools may be repeated
  • Use Page titles to facilitate navigation
  • Week 3
    • Monday Accessibility Accessibility quizzes on Blackboard due before class:
    • ADOBE Bridge & Photoshop
  • Week 4
    • Monday Blackboard quizzes
    • Wednesday: Project 1 due posted on website, with grading sheets posted to Blackboard assignment & website
this week
This week …
  • Due Wednesday before class: Exercise 1 posted on Blackboard
  • Wednesday: Start Hands-on Photoshop
  • Rest of class – learn your names
    • Pair up with a student you do NOT KNOW in the class
    • Learn one thing INTERESTING about that student’s name (5 minutes for both of you to do this)
    • Stand up in pairs and introduce one another to the class, saying the ONE INTERESTING THING you learned about the student’s name