Copyright © 2001 Bolton Institute Faculty of Technology Multimedia Integration and Applications Multimedia Integration and Applications Lecture 7 Design and Prototype II

Copyright © 2001 Bolton Institute Faculty of Technology Multimedia Integration and Applications Agenda For Today What is, and what is not, the effective use of the following –Colour –Layout of WebPages –Text –Video/Audio

Copyright © 2001 Bolton Institute Faculty of Technology Multimedia Integration and Applications Use of Colour Colour use is poor in some basic homepages – (this is an ironic site) Why is colour use so poor throughout sites? To understand colour you need to look at the “Colour Wheel” –Downloadable version at 8/plsql/tkco_html.OnDemand?filename=liv e/colorforcast2001.html 8/plsql/tkco_html.OnDemand?filename=liv e/colorforcast2001.html

Copyright © 2001 Bolton Institute Faculty of Technology Multimedia Integration and Applications Warm and Cool Colours Warm colours appear –Hotter, –Closer than cool colours to the viewer –More stimulating Cool colours appear –Colder –Further away than warm colours –More peaceful than warm colours

Copyright © 2001 Bolton Institute Faculty of Technology Multimedia Integration and Applications Four Types Of Colour Combinations Complementary colours –Face each other on the wheel Contrasting colours –Appear just over 90 degrees from each other on the wheel Harmonious colours –Appear just under 90 degrees from each other on the wheel Monochromatic colours allow the same range of variation within one colour

Copyright © 2001 Bolton Institute Faculty of Technology Multimedia Integration and Applications Website Colour Scheming All sites need to highlight key areas so the combination of colours used is very important Generally though –Cool colours tend to be used for backgrounds –Warm colours are used for headers/highlights/logos –For an online colour scheme producer to assist you with this try

Copyright © 2001 Bolton Institute Faculty of Technology Multimedia Integration and Applications Layout - Common Problems People have mental models that they use daily –In this culture we read left to right, top to bottom –The height, size and position of an object infers it’s importance compared to others

Copyright © 2003 Bolton Institute Dept. of Computing and Electronic Technology – module title Where do you click for the tour?

Welcome to my site It’s all about my favourite sports For a tour start here

Copyright © 2003 Bolton Institute Dept. of Computing and Electronic Technology – module title Which link is “Most important”?

Welcome to my site It’s all about my favourite sports

Copyright © 2001 Bolton Institute Faculty of Technology Multimedia Integration and Applications Which link is “Most important”?

Welcome to my site It’s all about my favourite sports

Copyright © 2001 Bolton Institute Faculty of Technology Multimedia Integration and Applications Reading Patterns When you read a page how do you read? –Top to bottom, left to right? The actual process is different –You scan the page, attempting to find the structure of the page –Then select the section that catches your eye –Then read that section

logo Menu Item Banner AD search Hot item Side AD Text Content

logo Menu Item Banner AD search Hot item Side AD Text Content Pic

Text Content logo Menu Item Banner AD search Hot item Side AD Text Content section Pic Story headline Story headline Buy Game Story headline Story headline related

Copyright © 2001 Bolton Institute Faculty of Technology Multimedia Integration and Applications Use of Text on the web Text is the major information provision medium on the Internet – –WebPages –Documents How text is used on a website shares some similarities with print but can also differ considerably from the printed page

Copyright © 2001 Bolton Institute Faculty of Technology Multimedia Integration and Applications Font Types Two groups of Fonts –Serif fonts such as Times New Roman, Courier –Sans Serif fonts Such as Arial, Verdana Serifs are the “curls” on the ends of text objects e.g. Serif font – N N - Sans Serif font

Copyright © 2001 Bolton Institute Faculty of Technology Multimedia Integration and Applications Text Types Printed text –Newspapers, magazines, brochures –Tend to use Serif fonts such as Easier for people to scan/read on a printed page Web/computer based text –Should use Sans Serif fonts Much easier to read on-screen than Serif fonts

Copyright © 2001 Bolton Institute Faculty of Technology Multimedia Integration and Applications Audio/Video Video/audio should be used where appropriate e.g. –Movie trailers –Training videos If it does not serve a purpose, don’t use it! As with other high bandwidth downloads offer the user the choice to download –No embedded plinky-plinky MIDI songs! With increase penetration of broadband you can offer a high and low bandwidth version