Criterion D: Product design—Overall structure

Navigation

General outline

Overall structure of website

Home page

Navigation bar will be this Background will be this colour

Box will be this colour

Biography

Box will be this Navigation bar will be this

Background will be this colour

Albums page

Background will be this

colour

Navigation bar will be this

Pictures page

Background will be this

colour

Navigation bar will be this

Picture

Background will be this

colour

Navigation bar will be this colour

Contact Info

Background will be this

colour

Navigation bar will be this colourBox will be this colour

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 LuisA 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 DetailsAllows 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.

Guidelines for design

It Website Helpers - http://websitehelpers.com/design/

Stevemccurry - http://www.stevemccurry.com/main.php

Andrew Gransden Photography - http://www.andrewgransdenphotography.co.uk/

Andrew Gransden Photography - http://www.andrewgransdenphotography.co.uk/wildlife-

nature/index.php

Laing, R and Lewis, R, Design your own website, FLAME TREE PUBLISHING, 2010, 9 781847

867070

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 e-mail 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

Test plan

Test item Test data Part of system tested Expected outcome Actual outcome CommentsRef in

product

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

Product testing

Load PagePage is loaded without problems

Page is loaded on the web browser

Page is loadedPage loads quickly,images move from

chosen place

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 imagesThe 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

E-mail linkThe link should be up to date and working

Outlook should be opened and Luis Peralta’s e-mail will appear in the “To:” box

Microsoft Outlook is opened ready to write

an email

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)