Criterion D: Product design Overall structure. Navigation. General outline

Transcription

1 Criterion D: Product design Overall structure Navigation General outline

2 Overall structure of website Background will be this colour Navigation bar will be this Box will be this colour Home page

3 Box will be this Navigation bar will be this Background will be this colour Biography

4 Navigation bar will be this Background will be this colour Albums page

5 Navigation bar will be this Background will be this colour Pictures page

6 Navigation bar will be this colour Background will be this colour Picture

7 Box will be this colour Navigation bar will be this colour Background will be this colour Contact Info

8 Internal structure List of resources and techniques Resources Details Images Image files: Luis Peralta to provide these files. Luis Peralta s Autobiography Data: Luis Peralta to provide these files. Video on Luis A montage of clips involving past interviews with the clients, and clips of him in a normal day, a shooting day and several of his best work. Photo Details Allows the navigator to know more details about the image, such as its resolution, the date taken, and location. This will be provided by Luis. Contact Information Luis to provide this data so prospective customers can easily contact him. It Website Helpers - Stevemccurry - Andrew Gransden Photography - Guidelines for design Andrew Gransden Photography - Laing, R and Lewis, R, Design your own website, FLAME TREE PUBLISHING, 2010,

9 Techniques Details Manipulation of graphics Resizing of images to reduce file space and speed up loading to Internet Use of cascading style sheets To ensure consistency across each of the WebPages Availability of link To make sure prospective customers are able to contact Luis Use of rollover image Provide information about the image when the user hovers the mouse over them Navigation To make sure pages take you from one place to another Combining text and graphics This involves captions for the graphics Use or tables or layers for layout The tables or layers will ensure the data doesn t move and changes layout Use of headers, footers, watermarks or footnotes Headers and footers will contain hyperlinks to other pages on the website. The watermarks will protect the images to they are not stolen. The footnotes will contain details of the images like resolution Navigation using frames and customized buttons This will make the layout look more professional and organized Edited video clips The video clips contain information on Luis and a montage of his work Manipulation of codes such as HTML, XML, Java, JavaScript or Visual Basic to customize pages or improve functionality The codes will make the layout look customized

10 Test plan Test item Test data Part of system tested Expected outcome Actual outcome Comments Cover page testing REQUIRED ELEMENT FOR CRITERION G Web pages load from the cover page in three different locations File naming to ensure home page is called Index.htm Links on cover page are relative Loads as required from 3 different locations Loads as required and expected from 3 different locations Load Page Page is loaded without problems Page is loaded on the web browser Page is loaded Clicking on the banner To provide instant access to the home page To be taken to the accurate page or page desired It takes you to the home page Clicking on the introductory video The video needs to start downloading to work The introductory video should start loading A pop-up box appears asking what format you would like to view the video, and then plays it It downloads really fast Display images The correct image should be displayed Image correctly displayed The correct image is displayed each time It doesn t take long for the image to download link The link should be up to date and working Outlook should be opened and Luis Peralta s will appear in the To: box Product testing Microsoft Outlook is opened ready to write an Page loads quickly, images move from chosen place Ref in product

11 Agreement of client I confirm that the requirement specification meets my needs and the designs above are appropriate for the creation of the product. (Client)