Interaction design for multimedia composition and color
Download
1 / 46

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


  • 215 Views
  • Uploaded on
  • Presentation posted in: Internet / Web

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.

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

Download Presentation

Interaction Design for Multimedia: + Composition and Color

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


Interaction design for multimedia composition and color l.jpg

Interaction Design for Multimedia: + Composition and Color

CIS 421

color.ppt


Agenda l.jpg

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 l.jpg

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 l.jpg

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

    • http://www.csupomona.edu/~llsoe/42101/projects/proj1grade.xls

    • 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 l.jpg

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 l.jpg

GAS Analysis:Goals of Project

  • Answers the WHY? Of the project

  • Developer goals:

    • Branding company identity

    • Increasing traffic to website

    • Developer goals of nasa.gov?

  • User Goals

    • Communication medium (chat, bulletin board)

    • Getting something (entertainment, purchase, info)

    • User goals of nasa.gov? YouTube? MySpace?

  • Developer & user goals reciprocal & also diverge


Gas analysis a udience issues l.jpg

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 l.jpg

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 l.jpg

Personas & Scenarios

Personas:

  • Archetypal people who will be using product or service

  • Focus on their behaviors and motivations & not their demographics

    Scenarios

  • Stories about what it will be like to use the service or product.

  • W3C uses scenarios of People with Disabilities using the Web

    • Http://www.w3.org/WAI/EO/Drafts/PWD-Use-Web/Overview.html#usage


Sketches models for project design l.jpg

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


Layout l.jpg

Layout

  • 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:

    • http://www.archive.org/

    • http://www.macromedia.com or

    • http://www.adobe.com


Visual flow l.jpg

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.

      • http://www.youtube.com/watch?v=5PRHmzZQ4nE


Elastic layout width l.jpg

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

    • http://www.csszengarden.com/?cssfile=063/063.css

    • http://www.alistapart.com/articles/elastic/

  • Can use % to define width of 2 columns on page

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

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


Gui design heuristics l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 http://na.blackberry.com/eng/services/

  • 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


Readability l.jpg

Readability

  • Jakob Nielsen’s usability alertbox columns

    • “How users read on the web”

      • http://www.useit.com/alertbox/9710a.html

    • Writing for the Web

      • http://www.useit.com/papers/webwriting/

    • Eye tracking for reading on the web

      • http://www.useit.com/alertbox/reading_pattern.html

  • Eyetracking video

    • http://www.youtube.com/watch?v=bW_zDILeevY


Text titles use relative text sizing l.jpg

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


Backgrounds l.jpg

Backgrounds

  • 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


Slide21 l.jpg

Visual Design Issues: Composition & Color


Color theory use of color l.jpg

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:http://www.vischeck.com/vischeck/vischeckImage.php

    • http://colorfilter.wickline.org/

    • http://wellstyled.com/tools/colorscheme2/index-en.html

    • http://www.iamcal.com/toys/colors/

    • http://aspnetresources.com/tools/colorblindness.aspx


Facts about color l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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


Slide29 l.jpg

RGB

  • 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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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


Slide35 l.jpg

Backgrounds changes perception of colors.

Do the saturated colors below retain the same hue?


Slide36 l.jpg

Complementary colors change the perception of the color.

Red against a shade of itself versus its complement.

Notices how the red/green edges flicker


Slide37 l.jpg

Background & complementary colors change

perception of color value: which looks darker?


Slide38 l.jpg

Problem: Flicker in complementary colors

What does the gray page background do?


Potential problems with color l.jpg

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 l.jpg

Color Contrast Checkers

  • Test online:

    • http://juicystudio.com/services/colourcontrast.php

  • Download Firefox extension to check font/background colors

    • http://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php

  • Snook: On-line tool

    • http://www.snook.ca/technical/colour_contrast/colour.html


Perception of colors l.jpg

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 l.jpg

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 l.jpg

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 l.jpg

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


Slide45 l.jpg

Next

  • 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 l.jpg

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


ad
  • Login