Business and Computing Deanery

Multimedia

Week 3 Design principles

Introduction to computer graphics

Multimedia 2

Last week Enabling technologies

Digital representations Hardware and software requirements Networks Standards

Multimedia 3

Todayrsquos Contents Introduction to computer graphics

Chapter 3 Design principles

Chapter 13

Look at Flash

Multimedia 4

Computer Graphics Production and display of still

images stored in digital form Digitize printed image with a scanner Capture image from digital camera Grab frame from video camera Create in digital form using graphics

package Generate visual representation of data

64

Chapman N and Chapman J (2004)

Multimedia 5

Rendering Image is displayed on monitor etc as

array of pixels Rectangular (usually square) dots of colour

Program (eg Web browser) sets pixels to an appropriate colour to produce desired image Pixels merge optically to produce effect of

continuous tone Program must maintain a model of the

image May be stored in a file and read by program

66ndash67

Chapman N and Chapman J (2004)

Multimedia 6

Bitmapped and Vector Graphics Bitmapped graphics ndash image is

modelled as an array of pixel values Render by direct mapping of logical

pixels to physical pixels of screen May need scaling and clipping

Vector graphics ndash image is modelled as mathematical description of curves shapes Render by computing pixels from

description

67ndash68

Chapman N and Chapman J (2004)

Multimedia 7

Memory Requirements Bitmapped ndash any picture of w x h

pixels using c bytes per pixel occupies whc bytes

Vector ndash space required depends on complexity of picture (how many shapes segments of path etc) Usually vector graphics smaller than

bitmapped

68ndash69

Chapman N and Chapman J (2004)

Multimedia 8

Memory Requirements 128 px square with 20px blue outline

filled in red Bitmap using 24 bits per pixel

128x128x3 = 48kbytes Vector specified in SVG ltpath fill=F8130D stroke=1E338B

stroke-width=20 d=M118118H10V10h108V118zgt

86 bytes (plus 198 bytes SVG boilerplate)

68ndash69

Chapman N and Chapman J (2004)

Multimedia 9

Image Editing Vectors ndash drawing programs

Select individual graphic objects (shapes paths ampc)

Transform size position angle ampc Change attributes stroke and fill ampc

Bitmaps ndash painting programs Select areas of pixels Apply effects and filters

70ndash71

Chapman N and Chapman J (2004)

Multimedia 10

Scaling Vectors

Scaling is a simple mathematical operation on stored description (before rendering)

Curves and lines remain smooth at all sizes Bitmaps

Interpolate pixel values More or less sophisticated algorithm

Usually produces loss of quality blurring jaggedness ampc

71

Chapman N and Chapman J (2004)

Multimedia 11

Combining Vectors amp Bitmaps Rasterize vectors

Lose all their vector properties Trace bitmaps

Difficult and can only produce an approximation (parameterized)

Import bitmaps into vector drawing programs Treated as indivisible objects

Apply complex strokes to vectors to approximate bitmapped appearance

73ndash75

Chapman N and Chapman J (2004)

Multimedia 12

Layers Organizational device used in both sorts

of graphics Permits separation and manipulation of

different parts of a bitmapped image Digital version of clear sheets of acetate

stacked on top of each other Areas without coloured pixelsgraphic objects

are transparent so lower layers show through Compositing ndash combine layers using

different blending modes (digital collage)

75ndash78

Chapman N and Chapman J (2004)

Multimedia 13

File Formats Many different graphics file formats in

existence Different ways of encoding image data Different amountsform of supplementary

data (Bitmaps) Different compression methods

Lossless ndash image can be reconstructed exactly from compressed version

Lossy ndash some information discarded image can only be reconstructed approximately

78ndash79

Chapman N and Chapman J (2004)

Multimedia 14

WWW Bitmapped Formats GIF (Compuserve Graphics Interchange

Format) Lossless 256 colours (indexed)

transparency JPEG (Joint Photographic Experts Group)

Lossy (variable quality) millions of colours PNG (Portable Network Graphics)

Lossless variable number of colours W3C standard

79ndash80

Chapman N and Chapman J (2004)

Multimedia 15

Vector Formats SVG (Scalable Vector Graphics)

W3C standard not presently widely used SWF (Flash)

Primarily for vector animation but can be used for still vector graphics de facto standard

EPS (Encapsulated PostScript) Primarily print use declining

superseded by PDF

81ndash82

Chapman N and Chapman J (2004)

Multimedia 16

Development Stages Information Gathering Prototyping Implementation Testing Distribution

Multimedia 17

Rules and Principles A rule says You must do it this way

A principle says This workshellipand has through all remembered time [hellip] Anxious inexperienced writers obey rules Rebellious unschooled writers break rules Artists master the form

Robert McKee Story

As with writers so with multimediahellip

412

Chapman N and Chapman J (2004)

Multimedia 18

Multimedia Structures Totally connected Hierarchical Sequential Hybrid

413ndash418

Chapman N and Chapman J (2004)

Multimedia 19

Totally Connected Every page has a link to every other page

Even for a small movie this structure requires a lot of links and is hard to make sense of

May be appropriate for a movie where visitors may want to look at some or all of the pages in any order

Provide a standard navigation bar (navbar) on each page containing links to each of the others Indicate current location (You are here)

413ndash415

Chapman N and Chapman J (2004)

Multimedia 20

414

Chapman N and Chapman J (2004)

Multimedia 21

Hierarchical Most popular organization for larger

sites Home page contains pointers to a

subset of other pages in the site Each page directly accessible from

home page can be considered the home page of its own sub-site May contain links to home pages of sub-

sub-sites and so on Sub-sites devoted to sub-topics of main

site

415

Chapman N and Chapman J (2004)

Multimedia 22

415

Chapman N and Chapman J (2004)

Multimedia 23

Hierarchical Navigation Essential structure is hierarchical

but there may be additional links (eg to each 2nd level page from every page)

Use main navbar to access major sub-sites plus 2nd level of navbar within each sub-site Hierarchical drop-down menus

415ndash416

Chapman N and Chapman J (2004)

Multimedia 24

Sequential May be appropriate when pages

naturally form a linear sequence Sequence of images in a gallery

Usual navigation consists of Next and Previous buttons often augmented with links to every page in (short) sequence

417ndash418

Chapman N and Chapman J (2004)

Multimedia 25

417

Chapman N and Chapman J (2004)

Multimedia 26

Time-Based Structures Traditional time-based media esentially

linear Digital media linear order can be altered

by scripts and in response to input from the user If script controls playback by computation but

without accepting input (eg counts frames) structure is deterministic

To accept user input there must be some controls to accept input

May also exhibit parallelism

420

Chapman N and Chapman J (2004)

Multimedia 27

Loops Simple loop script attached to final

frame sends playback head back to first frame

Introduction plus loop script on final frame sends playback head to some earlier frame (not first)

Counted loops Script counts number of times round the loop does something different after a certain number of loops (eg stop)

420ndash421

Chapman N and Chapman J (2004)

Multimedia 28

Branching Common case set of selections on a menu

Menu is a single stopped frame with buttons for each menu selection

Movie is divided into sections each of which jumps back to the menu frame at the end

Script attached to each button causes a jump to the corresponding section when pressed

General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (eg interactive narrative)

422ndash423

Chapman N and Chapman J (2004)

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 2

Last week Enabling technologies

Digital representations Hardware and software requirements Networks Standards

Multimedia 3

Todayrsquos Contents Introduction to computer graphics

Chapter 3 Design principles

Chapter 13

Look at Flash

Multimedia 4

Computer Graphics Production and display of still

images stored in digital form Digitize printed image with a scanner Capture image from digital camera Grab frame from video camera Create in digital form using graphics

package Generate visual representation of data

64

Chapman N and Chapman J (2004)

Multimedia 5

Rendering Image is displayed on monitor etc as

array of pixels Rectangular (usually square) dots of colour

Program (eg Web browser) sets pixels to an appropriate colour to produce desired image Pixels merge optically to produce effect of

continuous tone Program must maintain a model of the

image May be stored in a file and read by program

66ndash67

Chapman N and Chapman J (2004)

Multimedia 6

Bitmapped and Vector Graphics Bitmapped graphics ndash image is

modelled as an array of pixel values Render by direct mapping of logical

pixels to physical pixels of screen May need scaling and clipping

Vector graphics ndash image is modelled as mathematical description of curves shapes Render by computing pixels from

description

67ndash68

Chapman N and Chapman J (2004)

Multimedia 7

Memory Requirements Bitmapped ndash any picture of w x h

pixels using c bytes per pixel occupies whc bytes

Vector ndash space required depends on complexity of picture (how many shapes segments of path etc) Usually vector graphics smaller than

bitmapped

68ndash69

Chapman N and Chapman J (2004)

Multimedia 8

Memory Requirements 128 px square with 20px blue outline

filled in red Bitmap using 24 bits per pixel

128x128x3 = 48kbytes Vector specified in SVG ltpath fill=F8130D stroke=1E338B

stroke-width=20 d=M118118H10V10h108V118zgt

86 bytes (plus 198 bytes SVG boilerplate)

68ndash69

Chapman N and Chapman J (2004)

Multimedia 9

Image Editing Vectors ndash drawing programs

Select individual graphic objects (shapes paths ampc)

Transform size position angle ampc Change attributes stroke and fill ampc

Bitmaps ndash painting programs Select areas of pixels Apply effects and filters

70ndash71

Chapman N and Chapman J (2004)

Multimedia 10

Scaling Vectors

Scaling is a simple mathematical operation on stored description (before rendering)

Curves and lines remain smooth at all sizes Bitmaps

Interpolate pixel values More or less sophisticated algorithm

Usually produces loss of quality blurring jaggedness ampc

71

Chapman N and Chapman J (2004)

Multimedia 11

Combining Vectors amp Bitmaps Rasterize vectors

Lose all their vector properties Trace bitmaps

Difficult and can only produce an approximation (parameterized)

Import bitmaps into vector drawing programs Treated as indivisible objects

Apply complex strokes to vectors to approximate bitmapped appearance

73ndash75

Chapman N and Chapman J (2004)

Multimedia 12

Layers Organizational device used in both sorts

of graphics Permits separation and manipulation of

different parts of a bitmapped image Digital version of clear sheets of acetate

stacked on top of each other Areas without coloured pixelsgraphic objects

are transparent so lower layers show through Compositing ndash combine layers using

different blending modes (digital collage)

75ndash78

Chapman N and Chapman J (2004)

Multimedia 13

File Formats Many different graphics file formats in

existence Different ways of encoding image data Different amountsform of supplementary

data (Bitmaps) Different compression methods

Lossless ndash image can be reconstructed exactly from compressed version

Lossy ndash some information discarded image can only be reconstructed approximately

78ndash79

Chapman N and Chapman J (2004)

Multimedia 14

WWW Bitmapped Formats GIF (Compuserve Graphics Interchange

Format) Lossless 256 colours (indexed)

transparency JPEG (Joint Photographic Experts Group)

Lossy (variable quality) millions of colours PNG (Portable Network Graphics)

Lossless variable number of colours W3C standard

79ndash80

Chapman N and Chapman J (2004)

Multimedia 15

Vector Formats SVG (Scalable Vector Graphics)

W3C standard not presently widely used SWF (Flash)

Primarily for vector animation but can be used for still vector graphics de facto standard

EPS (Encapsulated PostScript) Primarily print use declining

superseded by PDF

81ndash82

Chapman N and Chapman J (2004)

Multimedia 16

Development Stages Information Gathering Prototyping Implementation Testing Distribution

Multimedia 17

Rules and Principles A rule says You must do it this way

A principle says This workshellipand has through all remembered time [hellip] Anxious inexperienced writers obey rules Rebellious unschooled writers break rules Artists master the form

Robert McKee Story

As with writers so with multimediahellip

412

Chapman N and Chapman J (2004)

Multimedia 18

Multimedia Structures Totally connected Hierarchical Sequential Hybrid

413ndash418

Chapman N and Chapman J (2004)

Multimedia 19

Totally Connected Every page has a link to every other page

Even for a small movie this structure requires a lot of links and is hard to make sense of

May be appropriate for a movie where visitors may want to look at some or all of the pages in any order

Provide a standard navigation bar (navbar) on each page containing links to each of the others Indicate current location (You are here)

413ndash415

Chapman N and Chapman J (2004)

Multimedia 20

414

Chapman N and Chapman J (2004)

Multimedia 21

Hierarchical Most popular organization for larger

sites Home page contains pointers to a

subset of other pages in the site Each page directly accessible from

home page can be considered the home page of its own sub-site May contain links to home pages of sub-

sub-sites and so on Sub-sites devoted to sub-topics of main

site

415

Chapman N and Chapman J (2004)

Multimedia 22

415

Chapman N and Chapman J (2004)

Multimedia 23

Hierarchical Navigation Essential structure is hierarchical

but there may be additional links (eg to each 2nd level page from every page)

Use main navbar to access major sub-sites plus 2nd level of navbar within each sub-site Hierarchical drop-down menus

415ndash416

Chapman N and Chapman J (2004)

Multimedia 24

Sequential May be appropriate when pages

naturally form a linear sequence Sequence of images in a gallery

Usual navigation consists of Next and Previous buttons often augmented with links to every page in (short) sequence

417ndash418

Chapman N and Chapman J (2004)

Multimedia 25

417

Chapman N and Chapman J (2004)

Multimedia 26

Time-Based Structures Traditional time-based media esentially

linear Digital media linear order can be altered

by scripts and in response to input from the user If script controls playback by computation but

without accepting input (eg counts frames) structure is deterministic

To accept user input there must be some controls to accept input

May also exhibit parallelism

420

Chapman N and Chapman J (2004)

Multimedia 27

Loops Simple loop script attached to final

frame sends playback head back to first frame

Introduction plus loop script on final frame sends playback head to some earlier frame (not first)

Counted loops Script counts number of times round the loop does something different after a certain number of loops (eg stop)

420ndash421

Chapman N and Chapman J (2004)

Multimedia 28

Branching Common case set of selections on a menu

Menu is a single stopped frame with buttons for each menu selection

Movie is divided into sections each of which jumps back to the menu frame at the end

Script attached to each button causes a jump to the corresponding section when pressed

General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (eg interactive narrative)

422ndash423

Chapman N and Chapman J (2004)

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 3

Todayrsquos Contents Introduction to computer graphics

Chapter 3 Design principles

Chapter 13

Look at Flash

Multimedia 4

Computer Graphics Production and display of still

images stored in digital form Digitize printed image with a scanner Capture image from digital camera Grab frame from video camera Create in digital form using graphics

package Generate visual representation of data

64

Chapman N and Chapman J (2004)

Multimedia 5

Rendering Image is displayed on monitor etc as

array of pixels Rectangular (usually square) dots of colour

Program (eg Web browser) sets pixels to an appropriate colour to produce desired image Pixels merge optically to produce effect of

continuous tone Program must maintain a model of the

image May be stored in a file and read by program

66ndash67

Chapman N and Chapman J (2004)

Multimedia 6

Bitmapped and Vector Graphics Bitmapped graphics ndash image is

modelled as an array of pixel values Render by direct mapping of logical

pixels to physical pixels of screen May need scaling and clipping

Vector graphics ndash image is modelled as mathematical description of curves shapes Render by computing pixels from

description

67ndash68

Chapman N and Chapman J (2004)

Multimedia 7

Memory Requirements Bitmapped ndash any picture of w x h

pixels using c bytes per pixel occupies whc bytes

Vector ndash space required depends on complexity of picture (how many shapes segments of path etc) Usually vector graphics smaller than

bitmapped

68ndash69

Chapman N and Chapman J (2004)

Multimedia 8

Memory Requirements 128 px square with 20px blue outline

filled in red Bitmap using 24 bits per pixel

128x128x3 = 48kbytes Vector specified in SVG ltpath fill=F8130D stroke=1E338B

stroke-width=20 d=M118118H10V10h108V118zgt

86 bytes (plus 198 bytes SVG boilerplate)

68ndash69

Chapman N and Chapman J (2004)

Multimedia 9

Image Editing Vectors ndash drawing programs

Select individual graphic objects (shapes paths ampc)

Transform size position angle ampc Change attributes stroke and fill ampc

Bitmaps ndash painting programs Select areas of pixels Apply effects and filters

70ndash71

Chapman N and Chapman J (2004)

Multimedia 10

Scaling Vectors

Scaling is a simple mathematical operation on stored description (before rendering)

Curves and lines remain smooth at all sizes Bitmaps

Interpolate pixel values More or less sophisticated algorithm

Usually produces loss of quality blurring jaggedness ampc

71

Chapman N and Chapman J (2004)

Multimedia 11

Combining Vectors amp Bitmaps Rasterize vectors

Lose all their vector properties Trace bitmaps

Difficult and can only produce an approximation (parameterized)

Import bitmaps into vector drawing programs Treated as indivisible objects

Apply complex strokes to vectors to approximate bitmapped appearance

73ndash75

Chapman N and Chapman J (2004)

Multimedia 12

Layers Organizational device used in both sorts

of graphics Permits separation and manipulation of

different parts of a bitmapped image Digital version of clear sheets of acetate

stacked on top of each other Areas without coloured pixelsgraphic objects

are transparent so lower layers show through Compositing ndash combine layers using

different blending modes (digital collage)

75ndash78

Chapman N and Chapman J (2004)

Multimedia 13

File Formats Many different graphics file formats in

existence Different ways of encoding image data Different amountsform of supplementary

data (Bitmaps) Different compression methods

Lossless ndash image can be reconstructed exactly from compressed version

Lossy ndash some information discarded image can only be reconstructed approximately

78ndash79

Chapman N and Chapman J (2004)

Multimedia 14

WWW Bitmapped Formats GIF (Compuserve Graphics Interchange

Format) Lossless 256 colours (indexed)

transparency JPEG (Joint Photographic Experts Group)

Lossy (variable quality) millions of colours PNG (Portable Network Graphics)

Lossless variable number of colours W3C standard

79ndash80

Chapman N and Chapman J (2004)

Multimedia 15

Vector Formats SVG (Scalable Vector Graphics)

W3C standard not presently widely used SWF (Flash)

Primarily for vector animation but can be used for still vector graphics de facto standard

EPS (Encapsulated PostScript) Primarily print use declining

superseded by PDF

81ndash82

Chapman N and Chapman J (2004)

Multimedia 16

Development Stages Information Gathering Prototyping Implementation Testing Distribution

Multimedia 17

Rules and Principles A rule says You must do it this way

A principle says This workshellipand has through all remembered time [hellip] Anxious inexperienced writers obey rules Rebellious unschooled writers break rules Artists master the form

Robert McKee Story

As with writers so with multimediahellip

412

Chapman N and Chapman J (2004)

Multimedia 18

Multimedia Structures Totally connected Hierarchical Sequential Hybrid

413ndash418

Chapman N and Chapman J (2004)

Multimedia 19

Totally Connected Every page has a link to every other page

Even for a small movie this structure requires a lot of links and is hard to make sense of

May be appropriate for a movie where visitors may want to look at some or all of the pages in any order

Provide a standard navigation bar (navbar) on each page containing links to each of the others Indicate current location (You are here)

413ndash415

Chapman N and Chapman J (2004)

Multimedia 20

414

Chapman N and Chapman J (2004)

Multimedia 21

Hierarchical Most popular organization for larger

sites Home page contains pointers to a

subset of other pages in the site Each page directly accessible from

home page can be considered the home page of its own sub-site May contain links to home pages of sub-

sub-sites and so on Sub-sites devoted to sub-topics of main

site

415

Chapman N and Chapman J (2004)

Multimedia 22

415

Chapman N and Chapman J (2004)

Multimedia 23

Hierarchical Navigation Essential structure is hierarchical

but there may be additional links (eg to each 2nd level page from every page)

Use main navbar to access major sub-sites plus 2nd level of navbar within each sub-site Hierarchical drop-down menus

415ndash416

Chapman N and Chapman J (2004)

Multimedia 24

Sequential May be appropriate when pages

naturally form a linear sequence Sequence of images in a gallery

Usual navigation consists of Next and Previous buttons often augmented with links to every page in (short) sequence

417ndash418

Chapman N and Chapman J (2004)

Multimedia 25

417

Chapman N and Chapman J (2004)

Multimedia 26

Time-Based Structures Traditional time-based media esentially

linear Digital media linear order can be altered

by scripts and in response to input from the user If script controls playback by computation but

without accepting input (eg counts frames) structure is deterministic

To accept user input there must be some controls to accept input

May also exhibit parallelism

420

Chapman N and Chapman J (2004)

Multimedia 27

Loops Simple loop script attached to final

frame sends playback head back to first frame

Introduction plus loop script on final frame sends playback head to some earlier frame (not first)

Counted loops Script counts number of times round the loop does something different after a certain number of loops (eg stop)

420ndash421

Chapman N and Chapman J (2004)

Multimedia 28

Branching Common case set of selections on a menu

Menu is a single stopped frame with buttons for each menu selection

Movie is divided into sections each of which jumps back to the menu frame at the end

Script attached to each button causes a jump to the corresponding section when pressed

General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (eg interactive narrative)

422ndash423

Chapman N and Chapman J (2004)

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 4

Computer Graphics Production and display of still

images stored in digital form Digitize printed image with a scanner Capture image from digital camera Grab frame from video camera Create in digital form using graphics

package Generate visual representation of data

64

Chapman N and Chapman J (2004)

Multimedia 5

Rendering Image is displayed on monitor etc as

array of pixels Rectangular (usually square) dots of colour

Program (eg Web browser) sets pixels to an appropriate colour to produce desired image Pixels merge optically to produce effect of

continuous tone Program must maintain a model of the

image May be stored in a file and read by program

66ndash67

Chapman N and Chapman J (2004)

Multimedia 6

Bitmapped and Vector Graphics Bitmapped graphics ndash image is

modelled as an array of pixel values Render by direct mapping of logical

pixels to physical pixels of screen May need scaling and clipping

Vector graphics ndash image is modelled as mathematical description of curves shapes Render by computing pixels from

description

67ndash68

Chapman N and Chapman J (2004)

Multimedia 7

Memory Requirements Bitmapped ndash any picture of w x h

pixels using c bytes per pixel occupies whc bytes

Vector ndash space required depends on complexity of picture (how many shapes segments of path etc) Usually vector graphics smaller than

bitmapped

68ndash69

Chapman N and Chapman J (2004)

Multimedia 8

Memory Requirements 128 px square with 20px blue outline

filled in red Bitmap using 24 bits per pixel

128x128x3 = 48kbytes Vector specified in SVG ltpath fill=F8130D stroke=1E338B

stroke-width=20 d=M118118H10V10h108V118zgt

86 bytes (plus 198 bytes SVG boilerplate)

68ndash69

Chapman N and Chapman J (2004)

Multimedia 9

Image Editing Vectors ndash drawing programs

Select individual graphic objects (shapes paths ampc)

Transform size position angle ampc Change attributes stroke and fill ampc

Bitmaps ndash painting programs Select areas of pixels Apply effects and filters

70ndash71

Chapman N and Chapman J (2004)

Multimedia 10

Scaling Vectors

Scaling is a simple mathematical operation on stored description (before rendering)

Curves and lines remain smooth at all sizes Bitmaps

Interpolate pixel values More or less sophisticated algorithm

Usually produces loss of quality blurring jaggedness ampc

71

Chapman N and Chapman J (2004)

Multimedia 11

Combining Vectors amp Bitmaps Rasterize vectors

Lose all their vector properties Trace bitmaps

Difficult and can only produce an approximation (parameterized)

Import bitmaps into vector drawing programs Treated as indivisible objects

Apply complex strokes to vectors to approximate bitmapped appearance

73ndash75

Chapman N and Chapman J (2004)

Multimedia 12

Layers Organizational device used in both sorts

of graphics Permits separation and manipulation of

different parts of a bitmapped image Digital version of clear sheets of acetate

stacked on top of each other Areas without coloured pixelsgraphic objects

are transparent so lower layers show through Compositing ndash combine layers using

different blending modes (digital collage)

75ndash78

Chapman N and Chapman J (2004)

Multimedia 13

File Formats Many different graphics file formats in

existence Different ways of encoding image data Different amountsform of supplementary

data (Bitmaps) Different compression methods

Lossless ndash image can be reconstructed exactly from compressed version

Lossy ndash some information discarded image can only be reconstructed approximately

78ndash79

Chapman N and Chapman J (2004)

Multimedia 14

WWW Bitmapped Formats GIF (Compuserve Graphics Interchange

Format) Lossless 256 colours (indexed)

transparency JPEG (Joint Photographic Experts Group)

Lossy (variable quality) millions of colours PNG (Portable Network Graphics)

Lossless variable number of colours W3C standard

79ndash80

Chapman N and Chapman J (2004)

Multimedia 15

Vector Formats SVG (Scalable Vector Graphics)

W3C standard not presently widely used SWF (Flash)

Primarily for vector animation but can be used for still vector graphics de facto standard

EPS (Encapsulated PostScript) Primarily print use declining

superseded by PDF

81ndash82

Chapman N and Chapman J (2004)

Multimedia 16

Development Stages Information Gathering Prototyping Implementation Testing Distribution

Multimedia 17

Rules and Principles A rule says You must do it this way

A principle says This workshellipand has through all remembered time [hellip] Anxious inexperienced writers obey rules Rebellious unschooled writers break rules Artists master the form

Robert McKee Story

As with writers so with multimediahellip

412

Chapman N and Chapman J (2004)

Multimedia 18

Multimedia Structures Totally connected Hierarchical Sequential Hybrid

413ndash418

Chapman N and Chapman J (2004)

Multimedia 19

Totally Connected Every page has a link to every other page

Even for a small movie this structure requires a lot of links and is hard to make sense of

May be appropriate for a movie where visitors may want to look at some or all of the pages in any order

Provide a standard navigation bar (navbar) on each page containing links to each of the others Indicate current location (You are here)

413ndash415

Chapman N and Chapman J (2004)

Multimedia 20

414

Chapman N and Chapman J (2004)

Multimedia 21

Hierarchical Most popular organization for larger

sites Home page contains pointers to a

subset of other pages in the site Each page directly accessible from

home page can be considered the home page of its own sub-site May contain links to home pages of sub-

sub-sites and so on Sub-sites devoted to sub-topics of main

site

415

Chapman N and Chapman J (2004)

Multimedia 22

415

Chapman N and Chapman J (2004)

Multimedia 23

Hierarchical Navigation Essential structure is hierarchical

but there may be additional links (eg to each 2nd level page from every page)

Use main navbar to access major sub-sites plus 2nd level of navbar within each sub-site Hierarchical drop-down menus

415ndash416

Chapman N and Chapman J (2004)

Multimedia 24

Sequential May be appropriate when pages

naturally form a linear sequence Sequence of images in a gallery

Usual navigation consists of Next and Previous buttons often augmented with links to every page in (short) sequence

417ndash418

Chapman N and Chapman J (2004)

Multimedia 25

417

Chapman N and Chapman J (2004)

Multimedia 26

Time-Based Structures Traditional time-based media esentially

linear Digital media linear order can be altered

by scripts and in response to input from the user If script controls playback by computation but

without accepting input (eg counts frames) structure is deterministic

To accept user input there must be some controls to accept input

May also exhibit parallelism

420

Chapman N and Chapman J (2004)

Multimedia 27

Loops Simple loop script attached to final

frame sends playback head back to first frame

Introduction plus loop script on final frame sends playback head to some earlier frame (not first)

Counted loops Script counts number of times round the loop does something different after a certain number of loops (eg stop)

420ndash421

Chapman N and Chapman J (2004)

Multimedia 28

Branching Common case set of selections on a menu

Menu is a single stopped frame with buttons for each menu selection

Movie is divided into sections each of which jumps back to the menu frame at the end

Script attached to each button causes a jump to the corresponding section when pressed

General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (eg interactive narrative)

422ndash423

Chapman N and Chapman J (2004)

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 5

Rendering Image is displayed on monitor etc as

array of pixels Rectangular (usually square) dots of colour

Program (eg Web browser) sets pixels to an appropriate colour to produce desired image Pixels merge optically to produce effect of

continuous tone Program must maintain a model of the

image May be stored in a file and read by program

66ndash67

Chapman N and Chapman J (2004)

Multimedia 6

Bitmapped and Vector Graphics Bitmapped graphics ndash image is

modelled as an array of pixel values Render by direct mapping of logical

pixels to physical pixels of screen May need scaling and clipping

Vector graphics ndash image is modelled as mathematical description of curves shapes Render by computing pixels from

description

67ndash68

Chapman N and Chapman J (2004)

Multimedia 7

Memory Requirements Bitmapped ndash any picture of w x h

pixels using c bytes per pixel occupies whc bytes

Vector ndash space required depends on complexity of picture (how many shapes segments of path etc) Usually vector graphics smaller than

bitmapped

68ndash69

Chapman N and Chapman J (2004)

Multimedia 8

Memory Requirements 128 px square with 20px blue outline

filled in red Bitmap using 24 bits per pixel

128x128x3 = 48kbytes Vector specified in SVG ltpath fill=F8130D stroke=1E338B

stroke-width=20 d=M118118H10V10h108V118zgt

86 bytes (plus 198 bytes SVG boilerplate)

68ndash69

Chapman N and Chapman J (2004)

Multimedia 9

Image Editing Vectors ndash drawing programs

Select individual graphic objects (shapes paths ampc)

Transform size position angle ampc Change attributes stroke and fill ampc

Bitmaps ndash painting programs Select areas of pixels Apply effects and filters

70ndash71

Chapman N and Chapman J (2004)

Multimedia 10

Scaling Vectors

Scaling is a simple mathematical operation on stored description (before rendering)

Curves and lines remain smooth at all sizes Bitmaps

Interpolate pixel values More or less sophisticated algorithm

Usually produces loss of quality blurring jaggedness ampc

71

Chapman N and Chapman J (2004)

Multimedia 11

Combining Vectors amp Bitmaps Rasterize vectors

Lose all their vector properties Trace bitmaps

Difficult and can only produce an approximation (parameterized)

Import bitmaps into vector drawing programs Treated as indivisible objects

Apply complex strokes to vectors to approximate bitmapped appearance

73ndash75

Chapman N and Chapman J (2004)

Multimedia 12

Layers Organizational device used in both sorts

of graphics Permits separation and manipulation of

different parts of a bitmapped image Digital version of clear sheets of acetate

stacked on top of each other Areas without coloured pixelsgraphic objects

are transparent so lower layers show through Compositing ndash combine layers using

different blending modes (digital collage)

75ndash78

Chapman N and Chapman J (2004)

Multimedia 13

File Formats Many different graphics file formats in

existence Different ways of encoding image data Different amountsform of supplementary

data (Bitmaps) Different compression methods

Lossless ndash image can be reconstructed exactly from compressed version

Lossy ndash some information discarded image can only be reconstructed approximately

78ndash79

Chapman N and Chapman J (2004)

Multimedia 14

WWW Bitmapped Formats GIF (Compuserve Graphics Interchange

Format) Lossless 256 colours (indexed)

transparency JPEG (Joint Photographic Experts Group)

Lossy (variable quality) millions of colours PNG (Portable Network Graphics)

Lossless variable number of colours W3C standard

79ndash80

Chapman N and Chapman J (2004)

Multimedia 15

Vector Formats SVG (Scalable Vector Graphics)

W3C standard not presently widely used SWF (Flash)

Primarily for vector animation but can be used for still vector graphics de facto standard

EPS (Encapsulated PostScript) Primarily print use declining

superseded by PDF

81ndash82

Chapman N and Chapman J (2004)

Multimedia 16

Development Stages Information Gathering Prototyping Implementation Testing Distribution

Multimedia 17

Rules and Principles A rule says You must do it this way

A principle says This workshellipand has through all remembered time [hellip] Anxious inexperienced writers obey rules Rebellious unschooled writers break rules Artists master the form

Robert McKee Story

As with writers so with multimediahellip

412

Chapman N and Chapman J (2004)

Multimedia 18

Multimedia Structures Totally connected Hierarchical Sequential Hybrid

413ndash418

Chapman N and Chapman J (2004)

Multimedia 19

Totally Connected Every page has a link to every other page

Even for a small movie this structure requires a lot of links and is hard to make sense of

May be appropriate for a movie where visitors may want to look at some or all of the pages in any order

Provide a standard navigation bar (navbar) on each page containing links to each of the others Indicate current location (You are here)

413ndash415

Chapman N and Chapman J (2004)

Multimedia 20

414

Chapman N and Chapman J (2004)

Multimedia 21

Hierarchical Most popular organization for larger

sites Home page contains pointers to a

subset of other pages in the site Each page directly accessible from

home page can be considered the home page of its own sub-site May contain links to home pages of sub-

sub-sites and so on Sub-sites devoted to sub-topics of main

site

415

Chapman N and Chapman J (2004)

Multimedia 22

415

Chapman N and Chapman J (2004)

Multimedia 23

Hierarchical Navigation Essential structure is hierarchical

but there may be additional links (eg to each 2nd level page from every page)

Use main navbar to access major sub-sites plus 2nd level of navbar within each sub-site Hierarchical drop-down menus

415ndash416

Chapman N and Chapman J (2004)

Multimedia 24

Sequential May be appropriate when pages

naturally form a linear sequence Sequence of images in a gallery

Usual navigation consists of Next and Previous buttons often augmented with links to every page in (short) sequence

417ndash418

Chapman N and Chapman J (2004)

Multimedia 25

417

Chapman N and Chapman J (2004)

Multimedia 26

Time-Based Structures Traditional time-based media esentially

linear Digital media linear order can be altered

by scripts and in response to input from the user If script controls playback by computation but

without accepting input (eg counts frames) structure is deterministic

To accept user input there must be some controls to accept input

May also exhibit parallelism

420

Chapman N and Chapman J (2004)

Multimedia 27

Loops Simple loop script attached to final

frame sends playback head back to first frame

Introduction plus loop script on final frame sends playback head to some earlier frame (not first)

Counted loops Script counts number of times round the loop does something different after a certain number of loops (eg stop)

420ndash421

Chapman N and Chapman J (2004)

Multimedia 28

Branching Common case set of selections on a menu

Menu is a single stopped frame with buttons for each menu selection

Movie is divided into sections each of which jumps back to the menu frame at the end

Script attached to each button causes a jump to the corresponding section when pressed

General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (eg interactive narrative)

422ndash423

Chapman N and Chapman J (2004)

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 6

Bitmapped and Vector Graphics Bitmapped graphics ndash image is

modelled as an array of pixel values Render by direct mapping of logical

pixels to physical pixels of screen May need scaling and clipping

Vector graphics ndash image is modelled as mathematical description of curves shapes Render by computing pixels from

description

67ndash68

Chapman N and Chapman J (2004)

Multimedia 7

Memory Requirements Bitmapped ndash any picture of w x h

pixels using c bytes per pixel occupies whc bytes

Vector ndash space required depends on complexity of picture (how many shapes segments of path etc) Usually vector graphics smaller than

bitmapped

68ndash69

Chapman N and Chapman J (2004)

Multimedia 8

Memory Requirements 128 px square with 20px blue outline

filled in red Bitmap using 24 bits per pixel

128x128x3 = 48kbytes Vector specified in SVG ltpath fill=F8130D stroke=1E338B

stroke-width=20 d=M118118H10V10h108V118zgt

86 bytes (plus 198 bytes SVG boilerplate)

68ndash69

Chapman N and Chapman J (2004)

Multimedia 9

Image Editing Vectors ndash drawing programs

Select individual graphic objects (shapes paths ampc)

Transform size position angle ampc Change attributes stroke and fill ampc

Bitmaps ndash painting programs Select areas of pixels Apply effects and filters

70ndash71

Chapman N and Chapman J (2004)

Multimedia 10

Scaling Vectors

Scaling is a simple mathematical operation on stored description (before rendering)

Curves and lines remain smooth at all sizes Bitmaps

Interpolate pixel values More or less sophisticated algorithm

Usually produces loss of quality blurring jaggedness ampc

71

Chapman N and Chapman J (2004)

Multimedia 11

Combining Vectors amp Bitmaps Rasterize vectors

Lose all their vector properties Trace bitmaps

Difficult and can only produce an approximation (parameterized)

Import bitmaps into vector drawing programs Treated as indivisible objects

Apply complex strokes to vectors to approximate bitmapped appearance

73ndash75

Chapman N and Chapman J (2004)

Multimedia 12

Layers Organizational device used in both sorts

of graphics Permits separation and manipulation of

different parts of a bitmapped image Digital version of clear sheets of acetate

stacked on top of each other Areas without coloured pixelsgraphic objects

are transparent so lower layers show through Compositing ndash combine layers using

different blending modes (digital collage)

75ndash78

Chapman N and Chapman J (2004)

Multimedia 13

File Formats Many different graphics file formats in

existence Different ways of encoding image data Different amountsform of supplementary

data (Bitmaps) Different compression methods

Lossless ndash image can be reconstructed exactly from compressed version

Lossy ndash some information discarded image can only be reconstructed approximately

78ndash79

Chapman N and Chapman J (2004)

Multimedia 14

WWW Bitmapped Formats GIF (Compuserve Graphics Interchange

Format) Lossless 256 colours (indexed)

transparency JPEG (Joint Photographic Experts Group)

Lossy (variable quality) millions of colours PNG (Portable Network Graphics)

Lossless variable number of colours W3C standard

79ndash80

Chapman N and Chapman J (2004)

Multimedia 15

Vector Formats SVG (Scalable Vector Graphics)

W3C standard not presently widely used SWF (Flash)

Primarily for vector animation but can be used for still vector graphics de facto standard

EPS (Encapsulated PostScript) Primarily print use declining

superseded by PDF

81ndash82

Chapman N and Chapman J (2004)

Multimedia 16

Development Stages Information Gathering Prototyping Implementation Testing Distribution

Multimedia 17

Rules and Principles A rule says You must do it this way

A principle says This workshellipand has through all remembered time [hellip] Anxious inexperienced writers obey rules Rebellious unschooled writers break rules Artists master the form

Robert McKee Story

As with writers so with multimediahellip

412

Chapman N and Chapman J (2004)

Multimedia 18

Multimedia Structures Totally connected Hierarchical Sequential Hybrid

413ndash418

Chapman N and Chapman J (2004)

Multimedia 19

Totally Connected Every page has a link to every other page

Even for a small movie this structure requires a lot of links and is hard to make sense of

May be appropriate for a movie where visitors may want to look at some or all of the pages in any order

Provide a standard navigation bar (navbar) on each page containing links to each of the others Indicate current location (You are here)

413ndash415

Chapman N and Chapman J (2004)

Multimedia 20

414

Chapman N and Chapman J (2004)

Multimedia 21

Hierarchical Most popular organization for larger

sites Home page contains pointers to a

subset of other pages in the site Each page directly accessible from

home page can be considered the home page of its own sub-site May contain links to home pages of sub-

sub-sites and so on Sub-sites devoted to sub-topics of main

site

415

Chapman N and Chapman J (2004)

Multimedia 22

415

Chapman N and Chapman J (2004)

Multimedia 23

Hierarchical Navigation Essential structure is hierarchical

but there may be additional links (eg to each 2nd level page from every page)

Use main navbar to access major sub-sites plus 2nd level of navbar within each sub-site Hierarchical drop-down menus

415ndash416

Chapman N and Chapman J (2004)

Multimedia 24

Sequential May be appropriate when pages

naturally form a linear sequence Sequence of images in a gallery

Usual navigation consists of Next and Previous buttons often augmented with links to every page in (short) sequence

417ndash418

Chapman N and Chapman J (2004)

Multimedia 25

417

Chapman N and Chapman J (2004)

Multimedia 26

Time-Based Structures Traditional time-based media esentially

linear Digital media linear order can be altered

by scripts and in response to input from the user If script controls playback by computation but

without accepting input (eg counts frames) structure is deterministic

To accept user input there must be some controls to accept input

May also exhibit parallelism

420

Chapman N and Chapman J (2004)

Multimedia 27

Loops Simple loop script attached to final

frame sends playback head back to first frame

Introduction plus loop script on final frame sends playback head to some earlier frame (not first)

Counted loops Script counts number of times round the loop does something different after a certain number of loops (eg stop)

420ndash421

Chapman N and Chapman J (2004)

Multimedia 28

Branching Common case set of selections on a menu

Menu is a single stopped frame with buttons for each menu selection

Movie is divided into sections each of which jumps back to the menu frame at the end

Script attached to each button causes a jump to the corresponding section when pressed

General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (eg interactive narrative)

422ndash423

Chapman N and Chapman J (2004)

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 7

Memory Requirements Bitmapped ndash any picture of w x h

pixels using c bytes per pixel occupies whc bytes

Vector ndash space required depends on complexity of picture (how many shapes segments of path etc) Usually vector graphics smaller than

bitmapped

68ndash69

Chapman N and Chapman J (2004)

Multimedia 8

Memory Requirements 128 px square with 20px blue outline

filled in red Bitmap using 24 bits per pixel

128x128x3 = 48kbytes Vector specified in SVG ltpath fill=F8130D stroke=1E338B

stroke-width=20 d=M118118H10V10h108V118zgt

86 bytes (plus 198 bytes SVG boilerplate)

68ndash69

Chapman N and Chapman J (2004)

Multimedia 9

Image Editing Vectors ndash drawing programs

Select individual graphic objects (shapes paths ampc)

Transform size position angle ampc Change attributes stroke and fill ampc

Bitmaps ndash painting programs Select areas of pixels Apply effects and filters

70ndash71

Chapman N and Chapman J (2004)

Multimedia 10

Scaling Vectors

Scaling is a simple mathematical operation on stored description (before rendering)

Curves and lines remain smooth at all sizes Bitmaps

Interpolate pixel values More or less sophisticated algorithm

Usually produces loss of quality blurring jaggedness ampc

71

Chapman N and Chapman J (2004)

Multimedia 11

Combining Vectors amp Bitmaps Rasterize vectors

Lose all their vector properties Trace bitmaps

Difficult and can only produce an approximation (parameterized)

Import bitmaps into vector drawing programs Treated as indivisible objects

Apply complex strokes to vectors to approximate bitmapped appearance

73ndash75

Chapman N and Chapman J (2004)

Multimedia 12

Layers Organizational device used in both sorts

of graphics Permits separation and manipulation of

different parts of a bitmapped image Digital version of clear sheets of acetate

stacked on top of each other Areas without coloured pixelsgraphic objects

are transparent so lower layers show through Compositing ndash combine layers using

different blending modes (digital collage)

75ndash78

Chapman N and Chapman J (2004)

Multimedia 13

File Formats Many different graphics file formats in

existence Different ways of encoding image data Different amountsform of supplementary

data (Bitmaps) Different compression methods

Lossless ndash image can be reconstructed exactly from compressed version

Lossy ndash some information discarded image can only be reconstructed approximately

78ndash79

Chapman N and Chapman J (2004)

Multimedia 14

WWW Bitmapped Formats GIF (Compuserve Graphics Interchange

Format) Lossless 256 colours (indexed)

transparency JPEG (Joint Photographic Experts Group)

Lossy (variable quality) millions of colours PNG (Portable Network Graphics)

Lossless variable number of colours W3C standard

79ndash80

Chapman N and Chapman J (2004)

Multimedia 15

Vector Formats SVG (Scalable Vector Graphics)

W3C standard not presently widely used SWF (Flash)

Primarily for vector animation but can be used for still vector graphics de facto standard

EPS (Encapsulated PostScript) Primarily print use declining

superseded by PDF

81ndash82

Chapman N and Chapman J (2004)

Multimedia 16

Development Stages Information Gathering Prototyping Implementation Testing Distribution

Multimedia 17

Rules and Principles A rule says You must do it this way

A principle says This workshellipand has through all remembered time [hellip] Anxious inexperienced writers obey rules Rebellious unschooled writers break rules Artists master the form

Robert McKee Story

As with writers so with multimediahellip

412

Chapman N and Chapman J (2004)

Multimedia 18

Multimedia Structures Totally connected Hierarchical Sequential Hybrid

413ndash418

Chapman N and Chapman J (2004)

Multimedia 19

Totally Connected Every page has a link to every other page

Even for a small movie this structure requires a lot of links and is hard to make sense of

May be appropriate for a movie where visitors may want to look at some or all of the pages in any order

Provide a standard navigation bar (navbar) on each page containing links to each of the others Indicate current location (You are here)

413ndash415

Chapman N and Chapman J (2004)

Multimedia 20

414

Chapman N and Chapman J (2004)

Multimedia 21

Hierarchical Most popular organization for larger

sites Home page contains pointers to a

subset of other pages in the site Each page directly accessible from

home page can be considered the home page of its own sub-site May contain links to home pages of sub-

sub-sites and so on Sub-sites devoted to sub-topics of main

site

415

Chapman N and Chapman J (2004)

Multimedia 22

415

Chapman N and Chapman J (2004)

Multimedia 23

Hierarchical Navigation Essential structure is hierarchical

but there may be additional links (eg to each 2nd level page from every page)

Use main navbar to access major sub-sites plus 2nd level of navbar within each sub-site Hierarchical drop-down menus

415ndash416

Chapman N and Chapman J (2004)

Multimedia 24

Sequential May be appropriate when pages

naturally form a linear sequence Sequence of images in a gallery

Usual navigation consists of Next and Previous buttons often augmented with links to every page in (short) sequence

417ndash418

Chapman N and Chapman J (2004)

Multimedia 25

417

Chapman N and Chapman J (2004)

Multimedia 26

Time-Based Structures Traditional time-based media esentially

linear Digital media linear order can be altered

by scripts and in response to input from the user If script controls playback by computation but

without accepting input (eg counts frames) structure is deterministic

To accept user input there must be some controls to accept input

May also exhibit parallelism

420

Chapman N and Chapman J (2004)

Multimedia 27

Loops Simple loop script attached to final

frame sends playback head back to first frame

Introduction plus loop script on final frame sends playback head to some earlier frame (not first)

Counted loops Script counts number of times round the loop does something different after a certain number of loops (eg stop)

420ndash421

Chapman N and Chapman J (2004)

Multimedia 28

Branching Common case set of selections on a menu

Menu is a single stopped frame with buttons for each menu selection

Movie is divided into sections each of which jumps back to the menu frame at the end

Script attached to each button causes a jump to the corresponding section when pressed

General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (eg interactive narrative)

422ndash423

Chapman N and Chapman J (2004)

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 8

Memory Requirements 128 px square with 20px blue outline

filled in red Bitmap using 24 bits per pixel

128x128x3 = 48kbytes Vector specified in SVG ltpath fill=F8130D stroke=1E338B

stroke-width=20 d=M118118H10V10h108V118zgt

86 bytes (plus 198 bytes SVG boilerplate)

68ndash69

Chapman N and Chapman J (2004)

Multimedia 9

Image Editing Vectors ndash drawing programs

Select individual graphic objects (shapes paths ampc)

Transform size position angle ampc Change attributes stroke and fill ampc

Bitmaps ndash painting programs Select areas of pixels Apply effects and filters

70ndash71

Chapman N and Chapman J (2004)

Multimedia 10

Scaling Vectors

Scaling is a simple mathematical operation on stored description (before rendering)

Curves and lines remain smooth at all sizes Bitmaps

Interpolate pixel values More or less sophisticated algorithm

Usually produces loss of quality blurring jaggedness ampc

71

Chapman N and Chapman J (2004)

Multimedia 11

Combining Vectors amp Bitmaps Rasterize vectors

Lose all their vector properties Trace bitmaps

Difficult and can only produce an approximation (parameterized)

Import bitmaps into vector drawing programs Treated as indivisible objects

Apply complex strokes to vectors to approximate bitmapped appearance

73ndash75

Chapman N and Chapman J (2004)

Multimedia 12

Layers Organizational device used in both sorts

of graphics Permits separation and manipulation of

different parts of a bitmapped image Digital version of clear sheets of acetate

stacked on top of each other Areas without coloured pixelsgraphic objects

are transparent so lower layers show through Compositing ndash combine layers using

different blending modes (digital collage)

75ndash78

Chapman N and Chapman J (2004)

Multimedia 13

File Formats Many different graphics file formats in

existence Different ways of encoding image data Different amountsform of supplementary

data (Bitmaps) Different compression methods

Lossless ndash image can be reconstructed exactly from compressed version

Lossy ndash some information discarded image can only be reconstructed approximately

78ndash79

Chapman N and Chapman J (2004)

Multimedia 14

WWW Bitmapped Formats GIF (Compuserve Graphics Interchange

Format) Lossless 256 colours (indexed)

transparency JPEG (Joint Photographic Experts Group)

Lossy (variable quality) millions of colours PNG (Portable Network Graphics)

Lossless variable number of colours W3C standard

79ndash80

Chapman N and Chapman J (2004)

Multimedia 15

Vector Formats SVG (Scalable Vector Graphics)

W3C standard not presently widely used SWF (Flash)

Primarily for vector animation but can be used for still vector graphics de facto standard

EPS (Encapsulated PostScript) Primarily print use declining

superseded by PDF

81ndash82

Chapman N and Chapman J (2004)

Multimedia 16

Development Stages Information Gathering Prototyping Implementation Testing Distribution

Multimedia 17

Rules and Principles A rule says You must do it this way

A principle says This workshellipand has through all remembered time [hellip] Anxious inexperienced writers obey rules Rebellious unschooled writers break rules Artists master the form

Robert McKee Story

As with writers so with multimediahellip

412

Chapman N and Chapman J (2004)

Multimedia 18

Multimedia Structures Totally connected Hierarchical Sequential Hybrid

413ndash418

Chapman N and Chapman J (2004)

Multimedia 19

Totally Connected Every page has a link to every other page

Even for a small movie this structure requires a lot of links and is hard to make sense of

May be appropriate for a movie where visitors may want to look at some or all of the pages in any order

Provide a standard navigation bar (navbar) on each page containing links to each of the others Indicate current location (You are here)

413ndash415

Chapman N and Chapman J (2004)

Multimedia 20

414

Chapman N and Chapman J (2004)

Multimedia 21

Hierarchical Most popular organization for larger

sites Home page contains pointers to a

subset of other pages in the site Each page directly accessible from

home page can be considered the home page of its own sub-site May contain links to home pages of sub-

sub-sites and so on Sub-sites devoted to sub-topics of main

site

415

Chapman N and Chapman J (2004)

Multimedia 22

415

Chapman N and Chapman J (2004)

Multimedia 23

Hierarchical Navigation Essential structure is hierarchical

but there may be additional links (eg to each 2nd level page from every page)

Use main navbar to access major sub-sites plus 2nd level of navbar within each sub-site Hierarchical drop-down menus

415ndash416

Chapman N and Chapman J (2004)

Multimedia 24

Sequential May be appropriate when pages

naturally form a linear sequence Sequence of images in a gallery

Usual navigation consists of Next and Previous buttons often augmented with links to every page in (short) sequence

417ndash418

Chapman N and Chapman J (2004)

Multimedia 25

417

Chapman N and Chapman J (2004)

Multimedia 26

Time-Based Structures Traditional time-based media esentially

linear Digital media linear order can be altered

by scripts and in response to input from the user If script controls playback by computation but

without accepting input (eg counts frames) structure is deterministic

To accept user input there must be some controls to accept input

May also exhibit parallelism

420

Chapman N and Chapman J (2004)

Multimedia 27

Loops Simple loop script attached to final

frame sends playback head back to first frame

Introduction plus loop script on final frame sends playback head to some earlier frame (not first)

Counted loops Script counts number of times round the loop does something different after a certain number of loops (eg stop)

420ndash421

Chapman N and Chapman J (2004)

Multimedia 28

Branching Common case set of selections on a menu

Menu is a single stopped frame with buttons for each menu selection

Movie is divided into sections each of which jumps back to the menu frame at the end

Script attached to each button causes a jump to the corresponding section when pressed

General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (eg interactive narrative)

422ndash423

Chapman N and Chapman J (2004)

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 9

Image Editing Vectors ndash drawing programs

Select individual graphic objects (shapes paths ampc)

Transform size position angle ampc Change attributes stroke and fill ampc

Bitmaps ndash painting programs Select areas of pixels Apply effects and filters

70ndash71

Chapman N and Chapman J (2004)

Multimedia 10

Scaling Vectors

Scaling is a simple mathematical operation on stored description (before rendering)

Curves and lines remain smooth at all sizes Bitmaps

Interpolate pixel values More or less sophisticated algorithm

Usually produces loss of quality blurring jaggedness ampc

71

Chapman N and Chapman J (2004)

Multimedia 11

Combining Vectors amp Bitmaps Rasterize vectors

Lose all their vector properties Trace bitmaps

Difficult and can only produce an approximation (parameterized)

Import bitmaps into vector drawing programs Treated as indivisible objects

Apply complex strokes to vectors to approximate bitmapped appearance

73ndash75

Chapman N and Chapman J (2004)

Multimedia 12

Layers Organizational device used in both sorts

of graphics Permits separation and manipulation of

different parts of a bitmapped image Digital version of clear sheets of acetate

stacked on top of each other Areas without coloured pixelsgraphic objects

are transparent so lower layers show through Compositing ndash combine layers using

different blending modes (digital collage)

75ndash78

Chapman N and Chapman J (2004)

Multimedia 13

File Formats Many different graphics file formats in

existence Different ways of encoding image data Different amountsform of supplementary

data (Bitmaps) Different compression methods

Lossless ndash image can be reconstructed exactly from compressed version

Lossy ndash some information discarded image can only be reconstructed approximately

78ndash79

Chapman N and Chapman J (2004)

Multimedia 14

WWW Bitmapped Formats GIF (Compuserve Graphics Interchange

Format) Lossless 256 colours (indexed)

transparency JPEG (Joint Photographic Experts Group)

Lossy (variable quality) millions of colours PNG (Portable Network Graphics)

Lossless variable number of colours W3C standard

79ndash80

Chapman N and Chapman J (2004)

Multimedia 15

Vector Formats SVG (Scalable Vector Graphics)

W3C standard not presently widely used SWF (Flash)

Primarily for vector animation but can be used for still vector graphics de facto standard

EPS (Encapsulated PostScript) Primarily print use declining

superseded by PDF

81ndash82

Chapman N and Chapman J (2004)

Multimedia 16

Development Stages Information Gathering Prototyping Implementation Testing Distribution

Multimedia 17

Rules and Principles A rule says You must do it this way

A principle says This workshellipand has through all remembered time [hellip] Anxious inexperienced writers obey rules Rebellious unschooled writers break rules Artists master the form

Robert McKee Story

As with writers so with multimediahellip

412

Chapman N and Chapman J (2004)

Multimedia 18

Multimedia Structures Totally connected Hierarchical Sequential Hybrid

413ndash418

Chapman N and Chapman J (2004)

Multimedia 19

Totally Connected Every page has a link to every other page

Even for a small movie this structure requires a lot of links and is hard to make sense of

May be appropriate for a movie where visitors may want to look at some or all of the pages in any order

Provide a standard navigation bar (navbar) on each page containing links to each of the others Indicate current location (You are here)

413ndash415

Chapman N and Chapman J (2004)

Multimedia 20

414

Chapman N and Chapman J (2004)

Multimedia 21

Hierarchical Most popular organization for larger

sites Home page contains pointers to a

subset of other pages in the site Each page directly accessible from

home page can be considered the home page of its own sub-site May contain links to home pages of sub-

sub-sites and so on Sub-sites devoted to sub-topics of main

site

415

Chapman N and Chapman J (2004)

Multimedia 22

415

Chapman N and Chapman J (2004)

Multimedia 23

Hierarchical Navigation Essential structure is hierarchical

but there may be additional links (eg to each 2nd level page from every page)

Use main navbar to access major sub-sites plus 2nd level of navbar within each sub-site Hierarchical drop-down menus

415ndash416

Chapman N and Chapman J (2004)

Multimedia 24

Sequential May be appropriate when pages

naturally form a linear sequence Sequence of images in a gallery

Usual navigation consists of Next and Previous buttons often augmented with links to every page in (short) sequence

417ndash418

Chapman N and Chapman J (2004)

Multimedia 25

417

Chapman N and Chapman J (2004)

Multimedia 26

Time-Based Structures Traditional time-based media esentially

linear Digital media linear order can be altered

by scripts and in response to input from the user If script controls playback by computation but

without accepting input (eg counts frames) structure is deterministic

To accept user input there must be some controls to accept input

May also exhibit parallelism

420

Chapman N and Chapman J (2004)

Multimedia 27

Loops Simple loop script attached to final

frame sends playback head back to first frame

Introduction plus loop script on final frame sends playback head to some earlier frame (not first)

Counted loops Script counts number of times round the loop does something different after a certain number of loops (eg stop)

420ndash421

Chapman N and Chapman J (2004)

Multimedia 28

Branching Common case set of selections on a menu

Menu is a single stopped frame with buttons for each menu selection

Movie is divided into sections each of which jumps back to the menu frame at the end

Script attached to each button causes a jump to the corresponding section when pressed

General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (eg interactive narrative)

422ndash423

Chapman N and Chapman J (2004)

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 10

Scaling Vectors

Scaling is a simple mathematical operation on stored description (before rendering)

Curves and lines remain smooth at all sizes Bitmaps

Interpolate pixel values More or less sophisticated algorithm

Usually produces loss of quality blurring jaggedness ampc

71

Chapman N and Chapman J (2004)

Multimedia 11

Combining Vectors amp Bitmaps Rasterize vectors

Lose all their vector properties Trace bitmaps

Difficult and can only produce an approximation (parameterized)

Import bitmaps into vector drawing programs Treated as indivisible objects

Apply complex strokes to vectors to approximate bitmapped appearance

73ndash75

Chapman N and Chapman J (2004)

Multimedia 12

Layers Organizational device used in both sorts

of graphics Permits separation and manipulation of

different parts of a bitmapped image Digital version of clear sheets of acetate

stacked on top of each other Areas without coloured pixelsgraphic objects

are transparent so lower layers show through Compositing ndash combine layers using

different blending modes (digital collage)

75ndash78

Chapman N and Chapman J (2004)

Multimedia 13

File Formats Many different graphics file formats in

existence Different ways of encoding image data Different amountsform of supplementary

data (Bitmaps) Different compression methods

Lossless ndash image can be reconstructed exactly from compressed version

Lossy ndash some information discarded image can only be reconstructed approximately

78ndash79

Chapman N and Chapman J (2004)

Multimedia 14

WWW Bitmapped Formats GIF (Compuserve Graphics Interchange

Format) Lossless 256 colours (indexed)

transparency JPEG (Joint Photographic Experts Group)

Lossy (variable quality) millions of colours PNG (Portable Network Graphics)

Lossless variable number of colours W3C standard

79ndash80

Chapman N and Chapman J (2004)

Multimedia 15

Vector Formats SVG (Scalable Vector Graphics)

W3C standard not presently widely used SWF (Flash)

Primarily for vector animation but can be used for still vector graphics de facto standard

EPS (Encapsulated PostScript) Primarily print use declining

superseded by PDF

81ndash82

Chapman N and Chapman J (2004)

Multimedia 16

Development Stages Information Gathering Prototyping Implementation Testing Distribution

Multimedia 17

Rules and Principles A rule says You must do it this way

A principle says This workshellipand has through all remembered time [hellip] Anxious inexperienced writers obey rules Rebellious unschooled writers break rules Artists master the form

Robert McKee Story

As with writers so with multimediahellip

412

Chapman N and Chapman J (2004)

Multimedia 18

Multimedia Structures Totally connected Hierarchical Sequential Hybrid

413ndash418

Chapman N and Chapman J (2004)

Multimedia 19

Totally Connected Every page has a link to every other page

Even for a small movie this structure requires a lot of links and is hard to make sense of

May be appropriate for a movie where visitors may want to look at some or all of the pages in any order

Provide a standard navigation bar (navbar) on each page containing links to each of the others Indicate current location (You are here)

413ndash415

Chapman N and Chapman J (2004)

Multimedia 20

414

Chapman N and Chapman J (2004)

Multimedia 21

Hierarchical Most popular organization for larger

sites Home page contains pointers to a

subset of other pages in the site Each page directly accessible from

home page can be considered the home page of its own sub-site May contain links to home pages of sub-

sub-sites and so on Sub-sites devoted to sub-topics of main

site

415

Chapman N and Chapman J (2004)

Multimedia 22

415

Chapman N and Chapman J (2004)

Multimedia 23

Hierarchical Navigation Essential structure is hierarchical

but there may be additional links (eg to each 2nd level page from every page)

Use main navbar to access major sub-sites plus 2nd level of navbar within each sub-site Hierarchical drop-down menus

415ndash416

Chapman N and Chapman J (2004)

Multimedia 24

Sequential May be appropriate when pages

naturally form a linear sequence Sequence of images in a gallery

Usual navigation consists of Next and Previous buttons often augmented with links to every page in (short) sequence

417ndash418

Chapman N and Chapman J (2004)

Multimedia 25

417

Chapman N and Chapman J (2004)

Multimedia 26

Time-Based Structures Traditional time-based media esentially

linear Digital media linear order can be altered

by scripts and in response to input from the user If script controls playback by computation but

without accepting input (eg counts frames) structure is deterministic

To accept user input there must be some controls to accept input

May also exhibit parallelism

420

Chapman N and Chapman J (2004)

Multimedia 27

Loops Simple loop script attached to final

frame sends playback head back to first frame

Introduction plus loop script on final frame sends playback head to some earlier frame (not first)

Counted loops Script counts number of times round the loop does something different after a certain number of loops (eg stop)

420ndash421

Chapman N and Chapman J (2004)

Multimedia 28

Branching Common case set of selections on a menu

Menu is a single stopped frame with buttons for each menu selection

Movie is divided into sections each of which jumps back to the menu frame at the end

Script attached to each button causes a jump to the corresponding section when pressed

General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (eg interactive narrative)

422ndash423

Chapman N and Chapman J (2004)

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 11

Combining Vectors amp Bitmaps Rasterize vectors

Lose all their vector properties Trace bitmaps

Difficult and can only produce an approximation (parameterized)

Import bitmaps into vector drawing programs Treated as indivisible objects

Apply complex strokes to vectors to approximate bitmapped appearance

73ndash75

Chapman N and Chapman J (2004)

Multimedia 12

Layers Organizational device used in both sorts

of graphics Permits separation and manipulation of

different parts of a bitmapped image Digital version of clear sheets of acetate

stacked on top of each other Areas without coloured pixelsgraphic objects

are transparent so lower layers show through Compositing ndash combine layers using

different blending modes (digital collage)

75ndash78

Chapman N and Chapman J (2004)

Multimedia 13

File Formats Many different graphics file formats in

existence Different ways of encoding image data Different amountsform of supplementary

data (Bitmaps) Different compression methods

Lossless ndash image can be reconstructed exactly from compressed version

Lossy ndash some information discarded image can only be reconstructed approximately

78ndash79

Chapman N and Chapman J (2004)

Multimedia 14

WWW Bitmapped Formats GIF (Compuserve Graphics Interchange

Format) Lossless 256 colours (indexed)

transparency JPEG (Joint Photographic Experts Group)

Lossy (variable quality) millions of colours PNG (Portable Network Graphics)

Lossless variable number of colours W3C standard

79ndash80

Chapman N and Chapman J (2004)

Multimedia 15

Vector Formats SVG (Scalable Vector Graphics)

W3C standard not presently widely used SWF (Flash)

Primarily for vector animation but can be used for still vector graphics de facto standard

EPS (Encapsulated PostScript) Primarily print use declining

superseded by PDF

81ndash82

Chapman N and Chapman J (2004)

Multimedia 16

Development Stages Information Gathering Prototyping Implementation Testing Distribution

Multimedia 17

Rules and Principles A rule says You must do it this way

A principle says This workshellipand has through all remembered time [hellip] Anxious inexperienced writers obey rules Rebellious unschooled writers break rules Artists master the form

Robert McKee Story

As with writers so with multimediahellip

412

Chapman N and Chapman J (2004)

Multimedia 18

Multimedia Structures Totally connected Hierarchical Sequential Hybrid

413ndash418

Chapman N and Chapman J (2004)

Multimedia 19

Totally Connected Every page has a link to every other page

Even for a small movie this structure requires a lot of links and is hard to make sense of

May be appropriate for a movie where visitors may want to look at some or all of the pages in any order

Provide a standard navigation bar (navbar) on each page containing links to each of the others Indicate current location (You are here)

413ndash415

Chapman N and Chapman J (2004)

Multimedia 20

414

Chapman N and Chapman J (2004)

Multimedia 21

Hierarchical Most popular organization for larger

sites Home page contains pointers to a

subset of other pages in the site Each page directly accessible from

home page can be considered the home page of its own sub-site May contain links to home pages of sub-

sub-sites and so on Sub-sites devoted to sub-topics of main

site

415

Chapman N and Chapman J (2004)

Multimedia 22

415

Chapman N and Chapman J (2004)

Multimedia 23

Hierarchical Navigation Essential structure is hierarchical

but there may be additional links (eg to each 2nd level page from every page)

Use main navbar to access major sub-sites plus 2nd level of navbar within each sub-site Hierarchical drop-down menus

415ndash416

Chapman N and Chapman J (2004)

Multimedia 24

Sequential May be appropriate when pages

naturally form a linear sequence Sequence of images in a gallery

Usual navigation consists of Next and Previous buttons often augmented with links to every page in (short) sequence

417ndash418

Chapman N and Chapman J (2004)

Multimedia 25

417

Chapman N and Chapman J (2004)

Multimedia 26

Time-Based Structures Traditional time-based media esentially

linear Digital media linear order can be altered

by scripts and in response to input from the user If script controls playback by computation but

without accepting input (eg counts frames) structure is deterministic

To accept user input there must be some controls to accept input

May also exhibit parallelism

420

Chapman N and Chapman J (2004)

Multimedia 27

Loops Simple loop script attached to final

frame sends playback head back to first frame

Introduction plus loop script on final frame sends playback head to some earlier frame (not first)

Counted loops Script counts number of times round the loop does something different after a certain number of loops (eg stop)

420ndash421

Chapman N and Chapman J (2004)

Multimedia 28

Branching Common case set of selections on a menu

Menu is a single stopped frame with buttons for each menu selection

Movie is divided into sections each of which jumps back to the menu frame at the end

Script attached to each button causes a jump to the corresponding section when pressed

General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (eg interactive narrative)

422ndash423

Chapman N and Chapman J (2004)

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 12

Layers Organizational device used in both sorts

of graphics Permits separation and manipulation of

different parts of a bitmapped image Digital version of clear sheets of acetate

stacked on top of each other Areas without coloured pixelsgraphic objects

are transparent so lower layers show through Compositing ndash combine layers using

different blending modes (digital collage)

75ndash78

Chapman N and Chapman J (2004)

Multimedia 13

File Formats Many different graphics file formats in

existence Different ways of encoding image data Different amountsform of supplementary

data (Bitmaps) Different compression methods

Lossless ndash image can be reconstructed exactly from compressed version

Lossy ndash some information discarded image can only be reconstructed approximately

78ndash79

Chapman N and Chapman J (2004)

Multimedia 14

WWW Bitmapped Formats GIF (Compuserve Graphics Interchange

Format) Lossless 256 colours (indexed)

transparency JPEG (Joint Photographic Experts Group)

Lossy (variable quality) millions of colours PNG (Portable Network Graphics)

Lossless variable number of colours W3C standard

79ndash80

Chapman N and Chapman J (2004)

Multimedia 15

Vector Formats SVG (Scalable Vector Graphics)

W3C standard not presently widely used SWF (Flash)

Primarily for vector animation but can be used for still vector graphics de facto standard

EPS (Encapsulated PostScript) Primarily print use declining

superseded by PDF

81ndash82

Chapman N and Chapman J (2004)

Multimedia 16

Development Stages Information Gathering Prototyping Implementation Testing Distribution

Multimedia 17

Rules and Principles A rule says You must do it this way

A principle says This workshellipand has through all remembered time [hellip] Anxious inexperienced writers obey rules Rebellious unschooled writers break rules Artists master the form

Robert McKee Story

As with writers so with multimediahellip

412

Chapman N and Chapman J (2004)

Multimedia 18

Multimedia Structures Totally connected Hierarchical Sequential Hybrid

413ndash418

Chapman N and Chapman J (2004)

Multimedia 19

Totally Connected Every page has a link to every other page

Even for a small movie this structure requires a lot of links and is hard to make sense of

May be appropriate for a movie where visitors may want to look at some or all of the pages in any order

Provide a standard navigation bar (navbar) on each page containing links to each of the others Indicate current location (You are here)

413ndash415

Chapman N and Chapman J (2004)

Multimedia 20

414

Chapman N and Chapman J (2004)

Multimedia 21

Hierarchical Most popular organization for larger

sites Home page contains pointers to a

subset of other pages in the site Each page directly accessible from

home page can be considered the home page of its own sub-site May contain links to home pages of sub-

sub-sites and so on Sub-sites devoted to sub-topics of main

site

415

Chapman N and Chapman J (2004)

Multimedia 22

415

Chapman N and Chapman J (2004)

Multimedia 23

Hierarchical Navigation Essential structure is hierarchical

but there may be additional links (eg to each 2nd level page from every page)

Use main navbar to access major sub-sites plus 2nd level of navbar within each sub-site Hierarchical drop-down menus

415ndash416

Chapman N and Chapman J (2004)

Multimedia 24

Sequential May be appropriate when pages

naturally form a linear sequence Sequence of images in a gallery

Usual navigation consists of Next and Previous buttons often augmented with links to every page in (short) sequence

417ndash418

Chapman N and Chapman J (2004)

Multimedia 25

417

Chapman N and Chapman J (2004)

Multimedia 26

Time-Based Structures Traditional time-based media esentially

linear Digital media linear order can be altered

by scripts and in response to input from the user If script controls playback by computation but

without accepting input (eg counts frames) structure is deterministic

To accept user input there must be some controls to accept input

May also exhibit parallelism

420

Chapman N and Chapman J (2004)

Multimedia 27

Loops Simple loop script attached to final

frame sends playback head back to first frame

Introduction plus loop script on final frame sends playback head to some earlier frame (not first)

Counted loops Script counts number of times round the loop does something different after a certain number of loops (eg stop)

420ndash421

Chapman N and Chapman J (2004)

Multimedia 28

Branching Common case set of selections on a menu

Menu is a single stopped frame with buttons for each menu selection

Movie is divided into sections each of which jumps back to the menu frame at the end

Script attached to each button causes a jump to the corresponding section when pressed

General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (eg interactive narrative)

422ndash423

Chapman N and Chapman J (2004)

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 13

File Formats Many different graphics file formats in

existence Different ways of encoding image data Different amountsform of supplementary

data (Bitmaps) Different compression methods

Lossless ndash image can be reconstructed exactly from compressed version

Lossy ndash some information discarded image can only be reconstructed approximately

78ndash79

Chapman N and Chapman J (2004)

Multimedia 14

WWW Bitmapped Formats GIF (Compuserve Graphics Interchange

Format) Lossless 256 colours (indexed)

transparency JPEG (Joint Photographic Experts Group)

Lossy (variable quality) millions of colours PNG (Portable Network Graphics)

Lossless variable number of colours W3C standard

79ndash80

Chapman N and Chapman J (2004)

Multimedia 15

Vector Formats SVG (Scalable Vector Graphics)

W3C standard not presently widely used SWF (Flash)

Primarily for vector animation but can be used for still vector graphics de facto standard

EPS (Encapsulated PostScript) Primarily print use declining

superseded by PDF

81ndash82

Chapman N and Chapman J (2004)

Multimedia 16

Development Stages Information Gathering Prototyping Implementation Testing Distribution

Multimedia 17

Rules and Principles A rule says You must do it this way

A principle says This workshellipand has through all remembered time [hellip] Anxious inexperienced writers obey rules Rebellious unschooled writers break rules Artists master the form

Robert McKee Story

As with writers so with multimediahellip

412

Chapman N and Chapman J (2004)

Multimedia 18

Multimedia Structures Totally connected Hierarchical Sequential Hybrid

413ndash418

Chapman N and Chapman J (2004)

Multimedia 19

Totally Connected Every page has a link to every other page

Even for a small movie this structure requires a lot of links and is hard to make sense of

May be appropriate for a movie where visitors may want to look at some or all of the pages in any order

Provide a standard navigation bar (navbar) on each page containing links to each of the others Indicate current location (You are here)

413ndash415

Chapman N and Chapman J (2004)

Multimedia 20

414

Chapman N and Chapman J (2004)

Multimedia 21

Hierarchical Most popular organization for larger

sites Home page contains pointers to a

subset of other pages in the site Each page directly accessible from

home page can be considered the home page of its own sub-site May contain links to home pages of sub-

sub-sites and so on Sub-sites devoted to sub-topics of main

site

415

Chapman N and Chapman J (2004)

Multimedia 22

415

Chapman N and Chapman J (2004)

Multimedia 23

Hierarchical Navigation Essential structure is hierarchical

but there may be additional links (eg to each 2nd level page from every page)

Use main navbar to access major sub-sites plus 2nd level of navbar within each sub-site Hierarchical drop-down menus

415ndash416

Chapman N and Chapman J (2004)

Multimedia 24

Sequential May be appropriate when pages

naturally form a linear sequence Sequence of images in a gallery

Usual navigation consists of Next and Previous buttons often augmented with links to every page in (short) sequence

417ndash418

Chapman N and Chapman J (2004)

Multimedia 25

417

Chapman N and Chapman J (2004)

Multimedia 26

Time-Based Structures Traditional time-based media esentially

linear Digital media linear order can be altered

by scripts and in response to input from the user If script controls playback by computation but

without accepting input (eg counts frames) structure is deterministic

To accept user input there must be some controls to accept input

May also exhibit parallelism

420

Chapman N and Chapman J (2004)

Multimedia 27

Loops Simple loop script attached to final

frame sends playback head back to first frame

Introduction plus loop script on final frame sends playback head to some earlier frame (not first)

Counted loops Script counts number of times round the loop does something different after a certain number of loops (eg stop)

420ndash421

Chapman N and Chapman J (2004)

Multimedia 28

Branching Common case set of selections on a menu

Menu is a single stopped frame with buttons for each menu selection

Movie is divided into sections each of which jumps back to the menu frame at the end

Script attached to each button causes a jump to the corresponding section when pressed

General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (eg interactive narrative)

422ndash423

Chapman N and Chapman J (2004)

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 14

WWW Bitmapped Formats GIF (Compuserve Graphics Interchange

Format) Lossless 256 colours (indexed)

transparency JPEG (Joint Photographic Experts Group)

Lossy (variable quality) millions of colours PNG (Portable Network Graphics)

Lossless variable number of colours W3C standard

79ndash80

Chapman N and Chapman J (2004)

Multimedia 15

Vector Formats SVG (Scalable Vector Graphics)

W3C standard not presently widely used SWF (Flash)

Primarily for vector animation but can be used for still vector graphics de facto standard

EPS (Encapsulated PostScript) Primarily print use declining

superseded by PDF

81ndash82

Chapman N and Chapman J (2004)

Multimedia 16

Development Stages Information Gathering Prototyping Implementation Testing Distribution

Multimedia 17

Rules and Principles A rule says You must do it this way

A principle says This workshellipand has through all remembered time [hellip] Anxious inexperienced writers obey rules Rebellious unschooled writers break rules Artists master the form

Robert McKee Story

As with writers so with multimediahellip

412

Chapman N and Chapman J (2004)

Multimedia 18

Multimedia Structures Totally connected Hierarchical Sequential Hybrid

413ndash418

Chapman N and Chapman J (2004)

Multimedia 19

Totally Connected Every page has a link to every other page

Even for a small movie this structure requires a lot of links and is hard to make sense of

May be appropriate for a movie where visitors may want to look at some or all of the pages in any order

Provide a standard navigation bar (navbar) on each page containing links to each of the others Indicate current location (You are here)

413ndash415

Chapman N and Chapman J (2004)

Multimedia 20

414

Chapman N and Chapman J (2004)

Multimedia 21

Hierarchical Most popular organization for larger

sites Home page contains pointers to a

subset of other pages in the site Each page directly accessible from

home page can be considered the home page of its own sub-site May contain links to home pages of sub-

sub-sites and so on Sub-sites devoted to sub-topics of main

site

415

Chapman N and Chapman J (2004)

Multimedia 22

415

Chapman N and Chapman J (2004)

Multimedia 23

Hierarchical Navigation Essential structure is hierarchical

but there may be additional links (eg to each 2nd level page from every page)

Use main navbar to access major sub-sites plus 2nd level of navbar within each sub-site Hierarchical drop-down menus

415ndash416

Chapman N and Chapman J (2004)

Multimedia 24

Sequential May be appropriate when pages

naturally form a linear sequence Sequence of images in a gallery

Usual navigation consists of Next and Previous buttons often augmented with links to every page in (short) sequence

417ndash418

Chapman N and Chapman J (2004)

Multimedia 25

417

Chapman N and Chapman J (2004)

Multimedia 26

Time-Based Structures Traditional time-based media esentially

linear Digital media linear order can be altered

by scripts and in response to input from the user If script controls playback by computation but

without accepting input (eg counts frames) structure is deterministic

To accept user input there must be some controls to accept input

May also exhibit parallelism

420

Chapman N and Chapman J (2004)

Multimedia 27

Loops Simple loop script attached to final

frame sends playback head back to first frame

Introduction plus loop script on final frame sends playback head to some earlier frame (not first)

Counted loops Script counts number of times round the loop does something different after a certain number of loops (eg stop)

420ndash421

Chapman N and Chapman J (2004)

Multimedia 28

Branching Common case set of selections on a menu

Menu is a single stopped frame with buttons for each menu selection

Movie is divided into sections each of which jumps back to the menu frame at the end

Script attached to each button causes a jump to the corresponding section when pressed

General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (eg interactive narrative)

422ndash423

Chapman N and Chapman J (2004)

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 15

Vector Formats SVG (Scalable Vector Graphics)

W3C standard not presently widely used SWF (Flash)

Primarily for vector animation but can be used for still vector graphics de facto standard

EPS (Encapsulated PostScript) Primarily print use declining

superseded by PDF

81ndash82

Chapman N and Chapman J (2004)

Multimedia 16

Development Stages Information Gathering Prototyping Implementation Testing Distribution

Multimedia 17

Rules and Principles A rule says You must do it this way

A principle says This workshellipand has through all remembered time [hellip] Anxious inexperienced writers obey rules Rebellious unschooled writers break rules Artists master the form

Robert McKee Story

As with writers so with multimediahellip

412

Chapman N and Chapman J (2004)

Multimedia 18

Multimedia Structures Totally connected Hierarchical Sequential Hybrid

413ndash418

Chapman N and Chapman J (2004)

Multimedia 19

Totally Connected Every page has a link to every other page

Even for a small movie this structure requires a lot of links and is hard to make sense of

May be appropriate for a movie where visitors may want to look at some or all of the pages in any order

Provide a standard navigation bar (navbar) on each page containing links to each of the others Indicate current location (You are here)

413ndash415

Chapman N and Chapman J (2004)

Multimedia 20

414

Chapman N and Chapman J (2004)

Multimedia 21

Hierarchical Most popular organization for larger

sites Home page contains pointers to a

subset of other pages in the site Each page directly accessible from

home page can be considered the home page of its own sub-site May contain links to home pages of sub-

sub-sites and so on Sub-sites devoted to sub-topics of main

site

415

Chapman N and Chapman J (2004)

Multimedia 22

415

Chapman N and Chapman J (2004)

Multimedia 23

Hierarchical Navigation Essential structure is hierarchical

but there may be additional links (eg to each 2nd level page from every page)

Use main navbar to access major sub-sites plus 2nd level of navbar within each sub-site Hierarchical drop-down menus

415ndash416

Chapman N and Chapman J (2004)

Multimedia 24

Sequential May be appropriate when pages

naturally form a linear sequence Sequence of images in a gallery

Usual navigation consists of Next and Previous buttons often augmented with links to every page in (short) sequence

417ndash418

Chapman N and Chapman J (2004)

Multimedia 25

417

Chapman N and Chapman J (2004)

Multimedia 26

Time-Based Structures Traditional time-based media esentially

linear Digital media linear order can be altered

by scripts and in response to input from the user If script controls playback by computation but

without accepting input (eg counts frames) structure is deterministic

To accept user input there must be some controls to accept input

May also exhibit parallelism

420

Chapman N and Chapman J (2004)

Multimedia 27

Loops Simple loop script attached to final

frame sends playback head back to first frame

Introduction plus loop script on final frame sends playback head to some earlier frame (not first)

Counted loops Script counts number of times round the loop does something different after a certain number of loops (eg stop)

420ndash421

Chapman N and Chapman J (2004)

Multimedia 28

Branching Common case set of selections on a menu

Menu is a single stopped frame with buttons for each menu selection

Movie is divided into sections each of which jumps back to the menu frame at the end

Script attached to each button causes a jump to the corresponding section when pressed

General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (eg interactive narrative)

422ndash423

Chapman N and Chapman J (2004)

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 16

Development Stages Information Gathering Prototyping Implementation Testing Distribution

Multimedia 17

Rules and Principles A rule says You must do it this way

A principle says This workshellipand has through all remembered time [hellip] Anxious inexperienced writers obey rules Rebellious unschooled writers break rules Artists master the form

Robert McKee Story

As with writers so with multimediahellip

412

Chapman N and Chapman J (2004)

Multimedia 18

Multimedia Structures Totally connected Hierarchical Sequential Hybrid

413ndash418

Chapman N and Chapman J (2004)

Multimedia 19

Totally Connected Every page has a link to every other page

Even for a small movie this structure requires a lot of links and is hard to make sense of

May be appropriate for a movie where visitors may want to look at some or all of the pages in any order

Provide a standard navigation bar (navbar) on each page containing links to each of the others Indicate current location (You are here)

413ndash415

Chapman N and Chapman J (2004)

Multimedia 20

414

Chapman N and Chapman J (2004)

Multimedia 21

Hierarchical Most popular organization for larger

sites Home page contains pointers to a

subset of other pages in the site Each page directly accessible from

home page can be considered the home page of its own sub-site May contain links to home pages of sub-

sub-sites and so on Sub-sites devoted to sub-topics of main

site

415

Chapman N and Chapman J (2004)

Multimedia 22

415

Chapman N and Chapman J (2004)

Multimedia 23

Hierarchical Navigation Essential structure is hierarchical

but there may be additional links (eg to each 2nd level page from every page)

Use main navbar to access major sub-sites plus 2nd level of navbar within each sub-site Hierarchical drop-down menus

415ndash416

Chapman N and Chapman J (2004)

Multimedia 24

Sequential May be appropriate when pages

naturally form a linear sequence Sequence of images in a gallery

Usual navigation consists of Next and Previous buttons often augmented with links to every page in (short) sequence

417ndash418

Chapman N and Chapman J (2004)

Multimedia 25

417

Chapman N and Chapman J (2004)

Multimedia 26

Time-Based Structures Traditional time-based media esentially

linear Digital media linear order can be altered

by scripts and in response to input from the user If script controls playback by computation but

without accepting input (eg counts frames) structure is deterministic

To accept user input there must be some controls to accept input

May also exhibit parallelism

420

Chapman N and Chapman J (2004)

Multimedia 27

Loops Simple loop script attached to final

frame sends playback head back to first frame

Introduction plus loop script on final frame sends playback head to some earlier frame (not first)

Counted loops Script counts number of times round the loop does something different after a certain number of loops (eg stop)

420ndash421

Chapman N and Chapman J (2004)

Multimedia 28

Branching Common case set of selections on a menu

Menu is a single stopped frame with buttons for each menu selection

Movie is divided into sections each of which jumps back to the menu frame at the end

Script attached to each button causes a jump to the corresponding section when pressed

General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (eg interactive narrative)

422ndash423

Chapman N and Chapman J (2004)

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 17

Rules and Principles A rule says You must do it this way

A principle says This workshellipand has through all remembered time [hellip] Anxious inexperienced writers obey rules Rebellious unschooled writers break rules Artists master the form

Robert McKee Story

As with writers so with multimediahellip

412

Chapman N and Chapman J (2004)

Multimedia 18

Multimedia Structures Totally connected Hierarchical Sequential Hybrid

413ndash418

Chapman N and Chapman J (2004)

Multimedia 19

Totally Connected Every page has a link to every other page

Even for a small movie this structure requires a lot of links and is hard to make sense of

May be appropriate for a movie where visitors may want to look at some or all of the pages in any order

Provide a standard navigation bar (navbar) on each page containing links to each of the others Indicate current location (You are here)

413ndash415

Chapman N and Chapman J (2004)

Multimedia 20

414

Chapman N and Chapman J (2004)

Multimedia 21

Hierarchical Most popular organization for larger

sites Home page contains pointers to a

subset of other pages in the site Each page directly accessible from

home page can be considered the home page of its own sub-site May contain links to home pages of sub-

sub-sites and so on Sub-sites devoted to sub-topics of main

site

415

Chapman N and Chapman J (2004)

Multimedia 22

415

Chapman N and Chapman J (2004)

Multimedia 23

Hierarchical Navigation Essential structure is hierarchical

but there may be additional links (eg to each 2nd level page from every page)

Use main navbar to access major sub-sites plus 2nd level of navbar within each sub-site Hierarchical drop-down menus

415ndash416

Chapman N and Chapman J (2004)

Multimedia 24

Sequential May be appropriate when pages

naturally form a linear sequence Sequence of images in a gallery

Usual navigation consists of Next and Previous buttons often augmented with links to every page in (short) sequence

417ndash418

Chapman N and Chapman J (2004)

Multimedia 25

417

Chapman N and Chapman J (2004)

Multimedia 26

Time-Based Structures Traditional time-based media esentially

linear Digital media linear order can be altered

by scripts and in response to input from the user If script controls playback by computation but

without accepting input (eg counts frames) structure is deterministic

To accept user input there must be some controls to accept input

May also exhibit parallelism

420

Chapman N and Chapman J (2004)

Multimedia 27

Loops Simple loop script attached to final

frame sends playback head back to first frame

Introduction plus loop script on final frame sends playback head to some earlier frame (not first)

Counted loops Script counts number of times round the loop does something different after a certain number of loops (eg stop)

420ndash421

Chapman N and Chapman J (2004)

Multimedia 28

Branching Common case set of selections on a menu

Menu is a single stopped frame with buttons for each menu selection

Movie is divided into sections each of which jumps back to the menu frame at the end

Script attached to each button causes a jump to the corresponding section when pressed

General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (eg interactive narrative)

422ndash423

Chapman N and Chapman J (2004)

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 18

Multimedia Structures Totally connected Hierarchical Sequential Hybrid

413ndash418

Chapman N and Chapman J (2004)

Multimedia 19

Totally Connected Every page has a link to every other page

Even for a small movie this structure requires a lot of links and is hard to make sense of

May be appropriate for a movie where visitors may want to look at some or all of the pages in any order

Provide a standard navigation bar (navbar) on each page containing links to each of the others Indicate current location (You are here)

413ndash415

Chapman N and Chapman J (2004)

Multimedia 20

414

Chapman N and Chapman J (2004)

Multimedia 21

Hierarchical Most popular organization for larger

sites Home page contains pointers to a

subset of other pages in the site Each page directly accessible from

home page can be considered the home page of its own sub-site May contain links to home pages of sub-

sub-sites and so on Sub-sites devoted to sub-topics of main

site

415

Chapman N and Chapman J (2004)

Multimedia 22

415

Chapman N and Chapman J (2004)

Multimedia 23

Hierarchical Navigation Essential structure is hierarchical

but there may be additional links (eg to each 2nd level page from every page)

Use main navbar to access major sub-sites plus 2nd level of navbar within each sub-site Hierarchical drop-down menus

415ndash416

Chapman N and Chapman J (2004)

Multimedia 24

Sequential May be appropriate when pages

naturally form a linear sequence Sequence of images in a gallery

Usual navigation consists of Next and Previous buttons often augmented with links to every page in (short) sequence

417ndash418

Chapman N and Chapman J (2004)

Multimedia 25

417

Chapman N and Chapman J (2004)

Multimedia 26

Time-Based Structures Traditional time-based media esentially

linear Digital media linear order can be altered

by scripts and in response to input from the user If script controls playback by computation but

without accepting input (eg counts frames) structure is deterministic

To accept user input there must be some controls to accept input

May also exhibit parallelism

420

Chapman N and Chapman J (2004)

Multimedia 27

Loops Simple loop script attached to final

frame sends playback head back to first frame

Introduction plus loop script on final frame sends playback head to some earlier frame (not first)

Counted loops Script counts number of times round the loop does something different after a certain number of loops (eg stop)

420ndash421

Chapman N and Chapman J (2004)

Multimedia 28

Branching Common case set of selections on a menu

Menu is a single stopped frame with buttons for each menu selection

Movie is divided into sections each of which jumps back to the menu frame at the end

Script attached to each button causes a jump to the corresponding section when pressed

General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (eg interactive narrative)

422ndash423

Chapman N and Chapman J (2004)

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 19

Totally Connected Every page has a link to every other page

Even for a small movie this structure requires a lot of links and is hard to make sense of

May be appropriate for a movie where visitors may want to look at some or all of the pages in any order

Provide a standard navigation bar (navbar) on each page containing links to each of the others Indicate current location (You are here)

413ndash415

Chapman N and Chapman J (2004)

Multimedia 20

414

Chapman N and Chapman J (2004)

Multimedia 21

Hierarchical Most popular organization for larger

sites Home page contains pointers to a

subset of other pages in the site Each page directly accessible from

home page can be considered the home page of its own sub-site May contain links to home pages of sub-

sub-sites and so on Sub-sites devoted to sub-topics of main

site

415

Chapman N and Chapman J (2004)

Multimedia 22

415

Chapman N and Chapman J (2004)

Multimedia 23

Hierarchical Navigation Essential structure is hierarchical

but there may be additional links (eg to each 2nd level page from every page)

Use main navbar to access major sub-sites plus 2nd level of navbar within each sub-site Hierarchical drop-down menus

415ndash416

Chapman N and Chapman J (2004)

Multimedia 24

Sequential May be appropriate when pages

naturally form a linear sequence Sequence of images in a gallery

Usual navigation consists of Next and Previous buttons often augmented with links to every page in (short) sequence

417ndash418

Chapman N and Chapman J (2004)

Multimedia 25

417

Chapman N and Chapman J (2004)

Multimedia 26

Time-Based Structures Traditional time-based media esentially

linear Digital media linear order can be altered

by scripts and in response to input from the user If script controls playback by computation but

without accepting input (eg counts frames) structure is deterministic

To accept user input there must be some controls to accept input

May also exhibit parallelism

420

Chapman N and Chapman J (2004)

Multimedia 27

Loops Simple loop script attached to final

frame sends playback head back to first frame

Introduction plus loop script on final frame sends playback head to some earlier frame (not first)

Counted loops Script counts number of times round the loop does something different after a certain number of loops (eg stop)

420ndash421

Chapman N and Chapman J (2004)

Multimedia 28

Branching Common case set of selections on a menu

Menu is a single stopped frame with buttons for each menu selection

Movie is divided into sections each of which jumps back to the menu frame at the end

Script attached to each button causes a jump to the corresponding section when pressed

General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (eg interactive narrative)

422ndash423

Chapman N and Chapman J (2004)

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 20

414

Chapman N and Chapman J (2004)

Multimedia 21

Hierarchical Most popular organization for larger

sites Home page contains pointers to a

subset of other pages in the site Each page directly accessible from

home page can be considered the home page of its own sub-site May contain links to home pages of sub-

sub-sites and so on Sub-sites devoted to sub-topics of main

site

415

Chapman N and Chapman J (2004)

Multimedia 22

415

Chapman N and Chapman J (2004)

Multimedia 23

Hierarchical Navigation Essential structure is hierarchical

but there may be additional links (eg to each 2nd level page from every page)

Use main navbar to access major sub-sites plus 2nd level of navbar within each sub-site Hierarchical drop-down menus

415ndash416

Chapman N and Chapman J (2004)

Multimedia 24

Sequential May be appropriate when pages

naturally form a linear sequence Sequence of images in a gallery

Usual navigation consists of Next and Previous buttons often augmented with links to every page in (short) sequence

417ndash418

Chapman N and Chapman J (2004)

Multimedia 25

417

Chapman N and Chapman J (2004)

Multimedia 26

Time-Based Structures Traditional time-based media esentially

linear Digital media linear order can be altered

by scripts and in response to input from the user If script controls playback by computation but

without accepting input (eg counts frames) structure is deterministic

To accept user input there must be some controls to accept input

May also exhibit parallelism

420

Chapman N and Chapman J (2004)

Multimedia 27

Loops Simple loop script attached to final

frame sends playback head back to first frame

Introduction plus loop script on final frame sends playback head to some earlier frame (not first)

Counted loops Script counts number of times round the loop does something different after a certain number of loops (eg stop)

420ndash421

Chapman N and Chapman J (2004)

Multimedia 28

Branching Common case set of selections on a menu

Menu is a single stopped frame with buttons for each menu selection

Movie is divided into sections each of which jumps back to the menu frame at the end

Script attached to each button causes a jump to the corresponding section when pressed

General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (eg interactive narrative)

422ndash423

Chapman N and Chapman J (2004)

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 21

Hierarchical Most popular organization for larger

sites Home page contains pointers to a

subset of other pages in the site Each page directly accessible from

home page can be considered the home page of its own sub-site May contain links to home pages of sub-

sub-sites and so on Sub-sites devoted to sub-topics of main

site

415

Chapman N and Chapman J (2004)

Multimedia 22

415

Chapman N and Chapman J (2004)

Multimedia 23

Hierarchical Navigation Essential structure is hierarchical

but there may be additional links (eg to each 2nd level page from every page)

Use main navbar to access major sub-sites plus 2nd level of navbar within each sub-site Hierarchical drop-down menus

415ndash416

Chapman N and Chapman J (2004)

Multimedia 24

Sequential May be appropriate when pages

naturally form a linear sequence Sequence of images in a gallery

Usual navigation consists of Next and Previous buttons often augmented with links to every page in (short) sequence

417ndash418

Chapman N and Chapman J (2004)

Multimedia 25

417

Chapman N and Chapman J (2004)

Multimedia 26

Time-Based Structures Traditional time-based media esentially

linear Digital media linear order can be altered

by scripts and in response to input from the user If script controls playback by computation but

without accepting input (eg counts frames) structure is deterministic

To accept user input there must be some controls to accept input

May also exhibit parallelism

420

Chapman N and Chapman J (2004)

Multimedia 27

Loops Simple loop script attached to final

frame sends playback head back to first frame

Introduction plus loop script on final frame sends playback head to some earlier frame (not first)

Counted loops Script counts number of times round the loop does something different after a certain number of loops (eg stop)

420ndash421

Chapman N and Chapman J (2004)

Multimedia 28

Branching Common case set of selections on a menu

Menu is a single stopped frame with buttons for each menu selection

Movie is divided into sections each of which jumps back to the menu frame at the end

Script attached to each button causes a jump to the corresponding section when pressed

General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (eg interactive narrative)

422ndash423

Chapman N and Chapman J (2004)

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 22

415

Chapman N and Chapman J (2004)

Multimedia 23

Hierarchical Navigation Essential structure is hierarchical

but there may be additional links (eg to each 2nd level page from every page)

Use main navbar to access major sub-sites plus 2nd level of navbar within each sub-site Hierarchical drop-down menus

415ndash416

Chapman N and Chapman J (2004)

Multimedia 24

Sequential May be appropriate when pages

naturally form a linear sequence Sequence of images in a gallery

Usual navigation consists of Next and Previous buttons often augmented with links to every page in (short) sequence

417ndash418

Chapman N and Chapman J (2004)

Multimedia 25

417

Chapman N and Chapman J (2004)

Multimedia 26

Time-Based Structures Traditional time-based media esentially

linear Digital media linear order can be altered

by scripts and in response to input from the user If script controls playback by computation but

without accepting input (eg counts frames) structure is deterministic

To accept user input there must be some controls to accept input

May also exhibit parallelism

420

Chapman N and Chapman J (2004)

Multimedia 27

Loops Simple loop script attached to final

frame sends playback head back to first frame

Introduction plus loop script on final frame sends playback head to some earlier frame (not first)

Counted loops Script counts number of times round the loop does something different after a certain number of loops (eg stop)

420ndash421

Chapman N and Chapman J (2004)

Multimedia 28

Branching Common case set of selections on a menu

Menu is a single stopped frame with buttons for each menu selection

Movie is divided into sections each of which jumps back to the menu frame at the end

Script attached to each button causes a jump to the corresponding section when pressed

General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (eg interactive narrative)

422ndash423

Chapman N and Chapman J (2004)

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 23

Hierarchical Navigation Essential structure is hierarchical

but there may be additional links (eg to each 2nd level page from every page)

Use main navbar to access major sub-sites plus 2nd level of navbar within each sub-site Hierarchical drop-down menus

415ndash416

Chapman N and Chapman J (2004)

Multimedia 24

Sequential May be appropriate when pages

naturally form a linear sequence Sequence of images in a gallery

Usual navigation consists of Next and Previous buttons often augmented with links to every page in (short) sequence

417ndash418

Chapman N and Chapman J (2004)

Multimedia 25

417

Chapman N and Chapman J (2004)

Multimedia 26

Time-Based Structures Traditional time-based media esentially

linear Digital media linear order can be altered

by scripts and in response to input from the user If script controls playback by computation but

without accepting input (eg counts frames) structure is deterministic

To accept user input there must be some controls to accept input

May also exhibit parallelism

420

Chapman N and Chapman J (2004)

Multimedia 27

Loops Simple loop script attached to final

frame sends playback head back to first frame

Introduction plus loop script on final frame sends playback head to some earlier frame (not first)

Counted loops Script counts number of times round the loop does something different after a certain number of loops (eg stop)

420ndash421

Chapman N and Chapman J (2004)

Multimedia 28

Branching Common case set of selections on a menu

Menu is a single stopped frame with buttons for each menu selection

Movie is divided into sections each of which jumps back to the menu frame at the end

Script attached to each button causes a jump to the corresponding section when pressed

General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (eg interactive narrative)

422ndash423

Chapman N and Chapman J (2004)

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 24

Sequential May be appropriate when pages

naturally form a linear sequence Sequence of images in a gallery

Usual navigation consists of Next and Previous buttons often augmented with links to every page in (short) sequence

417ndash418

Chapman N and Chapman J (2004)

Multimedia 25

417

Chapman N and Chapman J (2004)

Multimedia 26

Time-Based Structures Traditional time-based media esentially

linear Digital media linear order can be altered

by scripts and in response to input from the user If script controls playback by computation but

without accepting input (eg counts frames) structure is deterministic

To accept user input there must be some controls to accept input

May also exhibit parallelism

420

Chapman N and Chapman J (2004)

Multimedia 27

Loops Simple loop script attached to final

frame sends playback head back to first frame

Introduction plus loop script on final frame sends playback head to some earlier frame (not first)

Counted loops Script counts number of times round the loop does something different after a certain number of loops (eg stop)

420ndash421

Chapman N and Chapman J (2004)

Multimedia 28

Branching Common case set of selections on a menu

Menu is a single stopped frame with buttons for each menu selection

Movie is divided into sections each of which jumps back to the menu frame at the end

Script attached to each button causes a jump to the corresponding section when pressed

General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (eg interactive narrative)

422ndash423

Chapman N and Chapman J (2004)

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 25

417

Chapman N and Chapman J (2004)

Multimedia 26

Time-Based Structures Traditional time-based media esentially

linear Digital media linear order can be altered

by scripts and in response to input from the user If script controls playback by computation but

without accepting input (eg counts frames) structure is deterministic

To accept user input there must be some controls to accept input

May also exhibit parallelism

420

Chapman N and Chapman J (2004)

Multimedia 27

Loops Simple loop script attached to final

frame sends playback head back to first frame

Introduction plus loop script on final frame sends playback head to some earlier frame (not first)

Counted loops Script counts number of times round the loop does something different after a certain number of loops (eg stop)

420ndash421

Chapman N and Chapman J (2004)

Multimedia 28

Branching Common case set of selections on a menu

Menu is a single stopped frame with buttons for each menu selection

Movie is divided into sections each of which jumps back to the menu frame at the end

Script attached to each button causes a jump to the corresponding section when pressed

General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (eg interactive narrative)

422ndash423

Chapman N and Chapman J (2004)

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 26

Time-Based Structures Traditional time-based media esentially

linear Digital media linear order can be altered

by scripts and in response to input from the user If script controls playback by computation but

without accepting input (eg counts frames) structure is deterministic

To accept user input there must be some controls to accept input

May also exhibit parallelism

420

Chapman N and Chapman J (2004)

Multimedia 27

Loops Simple loop script attached to final

frame sends playback head back to first frame

Introduction plus loop script on final frame sends playback head to some earlier frame (not first)

Counted loops Script counts number of times round the loop does something different after a certain number of loops (eg stop)

420ndash421

Chapman N and Chapman J (2004)

Multimedia 28

Branching Common case set of selections on a menu

Menu is a single stopped frame with buttons for each menu selection

Movie is divided into sections each of which jumps back to the menu frame at the end

Script attached to each button causes a jump to the corresponding section when pressed

General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (eg interactive narrative)

422ndash423

Chapman N and Chapman J (2004)

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 27

Loops Simple loop script attached to final

frame sends playback head back to first frame

Introduction plus loop script on final frame sends playback head to some earlier frame (not first)

Counted loops Script counts number of times round the loop does something different after a certain number of loops (eg stop)

420ndash421

Chapman N and Chapman J (2004)

Multimedia 28

Branching Common case set of selections on a menu

Menu is a single stopped frame with buttons for each menu selection

Movie is divided into sections each of which jumps back to the menu frame at the end

Script attached to each button causes a jump to the corresponding section when pressed

General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (eg interactive narrative)

422ndash423

Chapman N and Chapman J (2004)

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 28

Branching Common case set of selections on a menu

Menu is a single stopped frame with buttons for each menu selection

Movie is divided into sections each of which jumps back to the menu frame at the end

Script attached to each button causes a jump to the corresponding section when pressed

General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (eg interactive narrative)

422ndash423

Chapman N and Chapman J (2004)

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 29

Parallelism Flash movie clips are self-contained

movies within a movie that can play back in parallel

Movie clips can be controlled by scripting Stopped started sent to a particular framehellip

Permits essentially infinite variations on playback of a finite collection of elements

Can respond to user input Interactive animation etc

423ndash425

Chapman N and Chapman J (2004)

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 30

Navigation Charts

Should represent the movement through the site

Can use multiple diagrams To identify movement through main

sections To identify movement within sections

Otherwise known as a structure chart

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 31

Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your

storyboad

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 32

Breadth v Depth

WrapsWrapsDrinksDrinksAbout usAbout usContactContactSandwichesSandwiches WhiteWhiteFrenchFrenchWholemealWholemeal

HerbalHerbalColdColdHotHot

HomeHome

DrinksDrinks

About usAbout us

ContactContactSandwichesSandwiches

WhiteWhite WrapsWrapsFrenchFrenchWholemealWholemeal HerbalHerbalColdColdHotHot

HomeHome

OrderOrder

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 33

Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 34

Structure and Navigation To help people with cognitive disabilities

use headings and sub-heading bulleted and numbered lists use one paragraph per idea

Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements

Make link text meaningful even in isolation Never use click here links

438ndash439

Chapman N and Chapman J (2004)

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 35

Navigation chart

Start with a list of pages organise into

groups

Groups become sections

Remember project details

Short meaningful names

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 36

Colour Roughly 5 of male population unable to

distinguish between certain colours (usually red and green) very small number of people cannot see colours at all

Old computers some PDAs only have black and white displays

Cannot rely on colour alone to convey information eg if you use colour to identify links

supplement it with some other styling Can distinguish between confusable

colours using brightness

439ndash440

Chapman N and Chapman J (2004)

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 37

Animation Rapidly flashing elements can

trigger epileptic attacks so avoid blinking text ampc

Movement may be an unwelcome distraction so always provide a way of turning off animated effects Flash add controls to movie to stop or

skip it

441

Chapman N and Chapman J (2004)

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 38

Content Most important thing about a piece of

multimedia is its content Most beautifully designed movie will

attract no visitors if the content is of no interest to anybody

Compelling content can overcome poor design

Good design practice can make compelling content more readable navigable welcominghellip

445ndash447

Chapman N and Chapman J (2004)

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 39

Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list

If not followed know why not

452

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 40

Guidelines Put the user first Put the user in control Dont provide too much choice Dont make assumptions about users

behaviour Use technology judiciously Understand your sites context Keep up with change Dont neglect aesthetics Know your limitations

452ndash456

Chapman N and Chapman J (2004)

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 41

Designing your layout Your usersrsquo computer - what is it What to consider

Colour covered in later week Size of screen

Prototyping Sketches and storyboards

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 42

Paper prototyping Main idea

Sketch out prototypes of the interface on paper

Potential users ldquowalk throughrdquo task scenarios using the paper interface

A designer ldquoplays computerrdquo Change the design on-the-fly if helpful

Widely practiced in industry Helps people work together on the

design Hearst M (2002)

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 43

Why Do We Prototype Get feedback on our design faster

saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the

user

Hearst M (2002)

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 44

Advantages of prototyping Takes only a few hours

no expensive equipment needed Can test multiple alternatives Can change the design as you test

If users are trying to use the interface in a way you didnrsquot design it ndash go with what they think Adapt

Allows designers to work togetherHearst M (2002)

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 45

Types of screen The display medium is important for

your design

Cathode ray tube LCD display

Name some examples

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 46

Monitor screen size Like televisions screen sizes are

measured in diagonal inches the distance from one corner to the opposite

corner diagonally A typical size for small VGA monitors is

14 inches Monitors can be either portrait or

landscape Or even widescreen

The resolution of a monitor indicates how densely packed the pixels are

In general the more pixels the sharper the image

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 47

Graphics adapter A contemporary 3D graphics card with 32

M memory may not be on your machine AGP

Accelerated Graphics Port being replaced by PCIX

Peripheral Component Interface Express Typical resolutions

800 x 600 1024 x 768 1280 x 1024 1600 x 1200

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 48

Producers Producers tend to have a significantly

higher specification computer why To produce

Flash 1024 x 768 16-bit display (32-bit recommended)

Macromedia (2005) 3ds max

OpenGLreg and Direct3Dreg hardware acceleration supported 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005)

Use the module website to check what you are currently using

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 49

Users Consider what your user might be

using to view your work Desktop PC with large high spec monitor Small lightweight laptop PDA

There is no right answer Up to you to decide what you are

designing for and to justify it in your documentation

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 50

Prototyping - Sketches Doodles Initial ideas The more the

better

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 51

Prototyping - Storyboards Used to indicate what users will see on a

screen Screen size

What size are you going to work to They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as

Layout and colour schemes Font size and style The use of other media elements (sound video)

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 52

StoryboardsPaper

Portrait layout

Hand-drawn contents

Screen proportions4 x 3 ()

Project details

Script

Project Title Date

Page Title Filename

Script

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 53

Storyboard Example

Project details

Hand-drawn contents

Script

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 54

Some questions Scenario You have been asked by

Hope to create an Library Induction for use by new students using Flash List and describe the stages in

designing your production What screen size would you design for

justify your choice What screen size would you prefer to

design on justify your recommendation

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 55

Some questions continued What are the important criteria in

designing navigation Describe the difference between

vector and bitmap graphics which would you use to create a multimedia interface for delivery over the web

Describe prototyping and give reasons for using it

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 56

For Next Week Your presentation Directed Reading

Digital Multimedia Second Edition Chapter 4 Vector graphics and Flash Chapter 6 Colour

Independent study Work on your presentation Get to know Flash

HelpHow Do I 1048707 Work with layers 1048707 Create a user interface

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 57

What have we covered today

Introduction to computer graphics Bitmaps Vectors

Design principles Rules Navigation Prototyping

Any questions

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]

Multimedia 58

References Chapman N and Chapman J (2004) Digital

Multimedia Second Edition London Wiley Robert McKee Story

httpmckeestorycomhomepagehtm [accessed 5102005]

Hearst M (2002) httpwwwsimsberkeleyeduacademicscoursesis213s02lecturesLecture10ppt [accessed 5102005]

Autodesk (2005) httpusaautodeskcom [accessed 5102005]

Macromedia (2005) httpwwwmacromediacomsoftwareflashflashproproductinfosystemreqs [accessed 5102005]