business and computing deanery multimedia week 3 design principles introduction to computer graphics
Post on 21-Dec-2015
216 views
TRANSCRIPT
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]