Criterion D: Product design—Overall structure

Figure 1: This shows the planned design for the "Index" page of the website. It also includes the information each separate page will include.

Overall structure of website

Figure 2: This shows the planned design of the layout of the pages.

Photo of each team logo will go at the top.

Colour of

the body

will be light

blue.

Colour will be a darker blue than that of the body

The colour of most of

the text will be white.

The text of the headings will be enlarged and most will be underlined.

Figure 3: This shows the layout for the "Gallery" page of the website.

Figure 4: This shows the planned design of the "Scores" page in the website.

Figure 5: This shows the planned design of the "Goals" page in the website.

Internal structure

List of resources and techniques

Resources Details

Design your own website-Roger Laing and Ryhs

Lewis I used this book to learn about CSS and design techniques.

Images of El Salvador Cricket Pictures where taken by several different people and were given to El Salvador Cricket with full

rights over the photos. El Salvador Cricket then provided me with the photos for the website.

El Salvador Cricket Video The video was taken by Benjamin Judge. He gave me full permission to modify it as I wished.

Techniques Details

Edited Original Sound I will edit the original sound in case it is hard to hear what is being said.

Edited Original Video I will edit the original video by cutting some parts as well as speeding or slowing them

down.

Manipulation of codes such as HTML Improve the layout

Search engine optimization techniques In order to improve the visibility to search engines

Use of tables or layers for layout In order for the information to be organized

Navigation(internal and external links) In order to quicken the shifting within the website

Combining text and graphics I will use this technique in order to make the website seem formal yet informative.

Cascading style sheets or schema This will be used in order to improve the overall layout, colors and styles of the website

Combining two software applications I will combine the text editing software, photo editing software and the website editing

software.

Test plan

Test item Test data Part of system tested Expected outcome Actual outcome Comments Ref 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

Product testing

Links within the website

Opening the site

Opening the link and making sure it directs me to the designated area

The links within the website

worked perfectly and my method

of checking whether they

were broken or not worked well.

Videos functioning Opening video Making sure that the links to the videos aren’t broken

The video works well since I can

play it and besides it has a link to the video

on YouTube.

Images appropriate resolution

Viewing image

Measuring the image size and seeing whether it is appropriate according to the size of the

Yes, the outcome worked out well

because the sizes of the images change as the

Agreement of client

computer. screen size changes.

CSS

I will open the website on different computer sizes to verify that the website borders open according to the computer size screen.

I expect the borders width and length to be suitable according to the computer screen size.

The position of the pages change as the size of the screen changes,

hence the outcome is

positive.

I confirm that the requirement

specification meets my needs and

the designs above are appropriate

for the creation of the product.

Signature Andrew Murgatroyd-El Salvador Cricket president: