1. Copyright © 2003 Bolton Institute Dept. of Computing and Electronic Technology - Multimedia Integration and Applications Lecture 5: Design and Prototype Damien Markey

2. Copyright © 2003 Bolton Institute Dept. of Computing and Electronic Technology - Multimedia Integration and Applications Lecture 5: Design and Prototype Good and bad design Major factors –Technical –Usability –Accessibility –Aesthetics Prototype building –Aims of a prototype –Client/User involvement

3. Copyright © 2003 Bolton Institute Dept. of Computing and Electronic Technology - Multimedia Integration and Applications Good and Bad Design This is mostly a subjective matter The perception of a “good” design should always come from the brand and your audience –If the brief is for a Skateboard manufacturer then “hip and animated” might be a good design –If the brief is for Fortnam and Masons then that will be bad design The final opinion on “Good Design” always be decided by the end user so get their feedback throughout the design process

4. Copyright © 2003 Bolton Institute Dept. of Computing and Electronic Technology - Multimedia Integration and Applications Good and Bad Design - 2 A good design is not necessarily any of the following (but a bad design can be) –the “coolest” one As it may not meet the Creative Brief –the most technologically advanced As your audience might not be able to view it (i.e low bandwidth, wrong browser) Remember you are designing for the user not awards!

5. Copyright © 2003 Bolton Institute Dept. of Computing and Electronic Technology - Multimedia Integration and Applications Major Factors There are several factors that must be borne in mind during the design process Technical –What bandwidth is the user connecting with? –Can this support animation/graphics based sites Accessibility –Does any of my audience have special needs? –Do they use text readers? (If so, certain technologies should be approached with caution!)

6. Copyright © 2003 Bolton Institute Dept. of Computing and Electronic Technology - Multimedia Integration and Applications Major Factors - 2 Usability –Can a user get an overall view of the site from the homepage? –Does the site allow them to complete their tasks as easily as possible? Aesthetics –Does the site promote the brand/identity/message of the client? –Is it easy on the eye?

7. Copyright © 2003 Bolton Institute Dept. of Computing and Electronic Technology - Multimedia Integration and Applications Technical Factors By this stage, through the creative brief and the Project Scope, you should have specified (amongst other details) the following: –Browsers; –Bandwidth; and –Audience Browser size/Platform All of these will have an effect on the designs you are going to create

8. Copyright © 2003 Bolton Institute Dept. of Computing and Electronic Technology - Multimedia Integration and Applications Technical Factors - 2 Questions need to be asked by the designers of the production team such as: –If they are looking at using DHTML layouts, can our end target browser support them? –If we are going to use Flash, should we have a low bandwidth HTML version of the site as well? –If we want use a certain font and size will these work well across PC, Mac, IE and Netscape?

9. Copyright © 2003 Bolton Institute Dept. of Computing and Electronic Technology - Multimedia Integration and Applications Accessibility Are you trying to reach an audience that may need to use text readers? Accessibility for a website is not only including those users with special needs in your audience Be aware of the literacy level of your audience and ensure the following match those levels: –Your navigation headings; and –Banner graphics See the www.thesun.co.uk and www.thetimes.co.ukwww.thesun.co.ukwww.thetimes.co.uk It is estimated up to 1 in 12 men are colour blind so try and avoid shades of green or red for distinguishing features

10. Copyright © 2003 Bolton Institute Dept. of Computing and Electronic Technology - Multimedia Integration and Applications Usability Usability is an aspect of the site that should be included from day one Always review the site as if you were a user to see how you can perform typical user tasks –Or better still get an actual user to review it Can a user get an overall view of the site from the homepage? If they are on lower levels can they navigate to different sections (or back out)?

11. Copyright © 2003 Bolton Institute Dept. of Computing and Electronic Technology - Multimedia Integration and Applications Aesthetics Aesthetics is like any art as it is can be a matter of opinion Always match the design to the users expectations and experience You may have the best, award winning designer in the world but if there work is more suited to an art gallery than a webpage they are not much use to a multimedia project! Simple layout is better than cluttered, busy pages unless you know your audience is very web savvy, runs large desktops and want that look!

12. Copyright © 2003 Bolton Institute Dept. of Computing and Electronic Technology - Multimedia Integration and Applications Prototype Site Building Aims of a prototype site –To produce a click able outline structure of the site and it’s main sections and pages –This should be a quick to create with no or very limited functionality built in –It should provide the user with an indication of the experience of using the site –It should not be completed pages with finished graphics and pages

13. Copyright © 2003 Bolton Institute Dept. of Computing and Electronic Technology - Multimedia Integration and Applications Prototype Site Building This can be a linked version of the paper prototype If you have already completed some preliminary design work then this can be incorporated but it is not a visual storyboard of the design for the site Can include client content, if it is prepared

14. Copyright © 2003 Bolton Institute Dept. of Computing and Electronic Technology - Multimedia Integration and Applications logo Menu Item Banner AD search Hot item Side AD Text Content Pic Width = 790 Height =480

15. Copyright © 2003 Bolton Institute Dept. of Computing and Electronic Technology - Multimedia Integration and Applications Text Content logo Menu Item Banner AD search Hot item Side AD Text Content section Pic Width = 790 Height =480 Story headline Story headline Buy Game Story headline Story headline related

16. Copyright © 2003 Bolton Institute Dept. of Computing and Electronic Technology - Multimedia Integration and Applications Prototype Building - Client/User Involvement The client should be able to view the site and provide feedback on the following –Structure They may now see that their content is too weak or too strong in certain areas –Tone/Style They may feel the look and feel is not suited to their identity Expect to go through the process two or three times but be wary of scope changes