Contents
Background ............................................................................................................................................. 5
Introduction ............................................................................................................................................. 5
P2 Produce designs for a website that meet client requirements. ......................................................... 6
Introduction ............................................................................................................................................. 6
Problem definition statement requirements ........................................................................................... 6
Client Needs .............................................................................................................................................. 6
Target audience ........................................................................................................................................ 7
Identification of user requirements ......................................................................................................... 7
The Website themes ................................................................................................................................. 7
Logo ........................................................................................................................................................... 7
Cascading Style Sheet (CSS) .................................................................................................................... 8
Rollover images ........................................................................................................................................ 8
Graphical and Textual Hotspots............................................................................................................... 9
User Friendly ........................................................................................................................................... 10
House styles ............................................................................................................................................ 11
Banner and pop-ups ............................................................................................................................... 12
Feedback form ........................................................................................................................................ 13
File formats ............................................................................................................................................. 13
Security W3C Compliance ...................................................................................................................... 13
Buttons & Navigation.............................................................................................................................. 14
Animations .............................................................................................................................................. 15
Consistency ............................................................................................................................................. 16
Accessibility options ............................................................................................................................... 17
Copyright issues ...................................................................................................................................... 17
Software .................................................................................................................................................. 17
Constraints for website ........................................................................................................................ 17
Benefits ................................................................................................................................................ 19
Initial design ideas/prototypes: ............................................................................................................ 20
Site Map for website ............................................................................................................................... 20
Mind Map ................................................................................................................................................ 21
Rough Sketches ...................................................................................................................................... 22
Home Page .......................................................................................................................................... 22
Home Page (Game) ............................................................................................................................. 22
,Aqsa Tabrez – BMC202113315 – Unit 6 Website Development – Assignment 2 – Fredricka McFarlane
Maps Page........................................................................................................................................... 23
............................................................................................................................................................. 23
Modes Page......................................................................................................................................... 23
Gallery Page ........................................................................................................................................ 24
............................................................................................................................................................. 24
About Us .............................................................................................................................................. 24
Mood board ............................................................................................................................................. 25
Storyboards – INDIVIDUAL INTERFACE................................................................................................. 26
Screen Sketch ......................................................................................................................................... 26
Storyboards – INDIVIDUAL INTERFACE................................................................................................. 27
Screen Sketch ......................................................................................................................................... 27
Storyboards – INDIVIDUAL INTERFACE................................................................................................. 28
Screen Sketch ......................................................................................................................................... 28
Storyboards – INDIVIDUAL INTERFACE................................................................................................. 29
Screen Sketch ......................................................................................................................................... 29
Storyboards – INDIVIDUAL INTERFACE................................................................................................. 30
Screen Sketch ......................................................................................................................................... 30
Storyboards – INDIVIDUAL INTERFACE................................................................................................. 31
Screen Sketch ......................................................................................................................................... 31
Storyboards – INDIVIDUAL INTERFACE................................................................................................. 32
Screen Sketch ......................................................................................................................................... 32
Storyboards – INDIVIDUAL INTERFACE................................................................................................. 33
Screen Sketch ......................................................................................................................................... 33
Storyboards – INDIVIDUAL INTERFACE................................................................................................. 34
Screen Sketch ......................................................................................................................................... 34
Storyboards – INDIVIDUAL INTERFACE................................................................................................. 35
Screen Sketch ......................................................................................................................................... 35
Storyboards – INDIVIDUAL INTERFACE................................................................................................. 36
Screen Sketch ......................................................................................................................................... 36
Storyboards – INDIVIDUAL INTERFACE................................................................................................. 37
Screen Sketch ......................................................................................................................................... 37
Storyboards – INDIVIDUAL INTERFACE................................................................................................. 38
Screen Sketch ......................................................................................................................................... 38
Storyboards – INDIVIDUAL INTERFACE................................................................................................. 39
Screen Sketch ......................................................................................................................................... 39
Flow chart ................................................................................................................................................ 40
1|Page
,Aqsa Tabrez – BMC202113315 – Unit 6 Website Development – Assignment 2 – Fredricka McFarlane
Pseudocode ............................................................................................................................................ 42
Wire Frame design .................................................................................................................................. 43
Home Page .......................................................................................................................................... 43
Battlefield Home Page ........................................................................................................................ 43
Battlefield Maps Page ........................................................................................................................ 44
Battlefield Modes Page ...................................................................................................................... 44
Battlefield Gallery Page ...................................................................................................................... 44
Gran Turismo Home ............................................................................................................................ 45
Gran Turismo Tracks........................................................................................................................... 45
Gran Turismo Modes .......................................................................................................................... 46
Gran Turismo gallery ........................................................................................................................... 46
World of Warcraft Home ..................................................................................................................... 47
World of Warcraft Maps ...................................................................................................................... 47
World of Warcraft Characters ............................................................................................................. 48
World of Warcraft gallery .................................................................................................................... 48
Gantt chart .............................................................................................................................................. 49
Legalisation ............................................................................................................................................. 49
Copyright, Designs and Patents Act....................................................................................................... 49
Date Protection Act 1998 ...................................................................................................................... 49
Ethical issues related website design ................................................................................................... 50
Summary ................................................................................................................................................. 50
P3: Review the website design proposals with others to identify and inform improvements. ............. 51
Improvements ......................................................................................................................................... 52
Bf2 Home ............................................................................................................................................ 52
Bf2 maps ............................................................................................................................................. 52
Bf2 Modes ........................................................................................................................................... 53
Bf2 gallery ........................................................................................................................................... 53
Gt3 Home ............................................................................................................................................ 53
Gt3 tracks ............................................................................................................................................ 54
GT3 Modes .......................................................................................................................................... 54
Gt3 Gallery........................................................................................................................................... 54
WOW Home ......................................................................................................................................... 55
WOW Maps .............................................................................................................................................. 55
WOW Characters ................................................................................................................................. 55
WOW Gallery ........................................................................................................................................ 55
2|Page
,Aqsa Tabrez – BMC202113315 – Unit 6 Website Development – Assignment 2 – Fredricka McFarlane
M2: Justify the design decisions, explaining how they will meet the user’s needs and be fit for
purpose. ............................................................................................................................................... 56
Features .............................................................................................................................................. 56
Content ................................................................................................................................................ 56
Legal and ethical considerations ....................................................................................................... 58
Software .............................................................................................................................................. 58
Hardware and software ...................................................................................................................... 58
Constraints .......................................................................................................................................... 58
Copyright.............................................................................................................................................. 59
D2: Evaluate the design and optimised website against client requirements. .................................... 59
Introduction ............................................................................................................................................. 59
Evaluation ............................................................................................................................................... 59
Conclusion............................................................................................................................................... 60
P4: Produce a website for an intended audience and purpose. .......................................................... 60
Home Page .......................................................................................................................................... 61
Battlefield Home Page ........................................................................................................................ 61
Battlefield Maps Page ........................................................................................................................ 61
Battlefield Modes Page ...................................................................................................................... 62
Battlefield Gallery Page ...................................................................................................................... 62
Gran Turismo Home ............................................................................................................................ 63
Gran Turismo Tracks........................................................................................................................... 63
Gran Turismo Modes .......................................................................................................................... 64
Gran Turismo gallery ........................................................................................................................... 64
World of Warcraft Home ..................................................................................................................... 65
World of Warcraft Maps ...................................................................................................................... 65
World of Warcraft Characters ............................................................................................................. 66
World of Warcraft gallery .................................................................................................................... 66
About Us .............................................................................................................................................. 67
Code ..................................................................................................................................................... 68
P5: Test the website for functionality, compatibility and usability. .................................................... 111
Introduction ........................................................................................................................................ 111
Test plan ................................................................................................................................................111
General Tests ....................................................................................................................................111
Test results............................................................................................................................................113
P6: Review the extent to which the website meets client requirements. ........................................... 119
What the client wanted .....................................................................................................................119
3|Page
,Aqsa Tabrez – BMC202113315 – Unit 6 Website Development – Assignment 2 – Fredricka McFarlane
What I made ......................................................................................................................................120
M3: Optimise a website to meet client requirements. ....................................................................... 122
D3: Demonstrate individual responsibility, creativity and effective self-management in the design,
development and review of a website. ............................................................................................... 126
Conclusion .......................................................................................................................................... 128
Bibliography........................................................................................................................................ 128
4|Page
,Aqsa Tabrez – BMC202113315 – Unit 6 Website Development – Assignment 2 – Fredricka McFarlane
Background
You have recently joined a web development company, In the Zone Classic Games/films Company as a junior web
developer. You have been approached to create a website that promotes Classic Games/films for In the Zone Company.
The purpose for this website is to actively promotes and encourage more people to come gain and appreciation of
Classic Games/films. The company wants you to include the following things:
Introduction
▪ Hand drawn design, containing Layout, positioning, colours [hexadecimal], font styles, font colour
[hexadecimal], names of any background image used, names of Banner and logo to be used
▪ Original Banner & Logo
▪ Menu(s)
▪ Last update:
▪ Six linked pages of content, [text & images]
▪ Appropriate dynamic content of your choice
▪ Cascading Style Sheet
▪ Use of Alt tags
▪ External links
▪ Email link
▪ Shopping cart
▪ Completed Test plan [college]
▪ Completed Test plan [external]
▪ Evidence meeting the Clients requirements
5|Page
, Aqsa Tabrez – BMC202113315 – Unit 6 Website Development – Assignment 2 – Fredricka McFarlane
P2 Produce designs for a website that meet client
requirements.
Introduction
This piece of work is my assignment 2 for unit 6. The assignment was to create a website for a company called in
the zone. The company had requested that I created a website about three classical games or movies of my choice.
For my choice I chose Battlefield 2, Gran Turismo 3 and World of Warcraft. All these games are classical and are
made for users who are aged 16+.
Problem definition statement requirements
In The Zone has asked me to design and create a website about three different classical games or movies of my choice.
The website that I am going to create is going to be about the classical games: Battlefield 2, Gran Turismo 3 and World
of Warcraft. The games I have chosen were all created before 2005 and are made for players under 18.
The website that I am going to create will show an overview page of each game, the over view page will contain an
overview of the game, three different links which take the users to the different pages linked to that game, the system
requirements for that game and images of the reviews of the game and the trailer of each game. The reviews will be
pictures but when clicked, they will take the user to the page the review is from.
The website will also contain a gallery page which shows any in game images or any concept art created for the game.
There will also be a maps page which will show the different maps inside the game and there will be a game modes page
which will show the different game modes. One exception is World of Warcraft, in this page there will be a link to a
character’s page as the game does not have any game modes.
Another feature that my website will have is that each page will have its own theme according to the game that is being
talked about. For example, the Battlefield 2 pages will all have a grey theme because the game is mainly grey. The Gran
Turismo game pages will be red and blue because the game icon is red and blue and the World of Warcraft pages will
be a mix of all colours because it is a colourful game.
There will also be a menu bar on each page. To get to the menu bar the user will have to click the menu button. When
the menu button is pressed, a side menu will appear. The side menu will contain links which allow the user to navigate
between the pages for that specific game, it will also contain the links needed to change between the game pages. For
example, the World of Warcraft pages will have the link: Overview, Map, Characters and Gallery. When the user selects
a page, the name of the page they are on will grey out to show that they are on that page. The side menu will show on
the left of the page and will be a colour which matches the theme.
On the right side of the page, there will be a ‘Buy Now’ button. When pressed another side menu will appear on the right
side of the page. This side menu will contain links to the pages where the user can buy that specific game.
I will also have a navigation bar between the different games at the top of the page, the buttons for each game will be
the game logo. The home page will be a home icon.
The website I create will be very user friendly as the users will be able to navigate through all the pages without having
to press the back button.
Client Needs
The client has requested a website which is about three classical games of my choice. The website I created
needs to have at least six pages. There needs to be a home page and a welcome message which explains
what the site is about. There also needs to be a profile of the company, an about us page, a gallery page,
interactive slide shows and images, a shopping cart, an online application form and a form for the user to
complete.
The client wants a website which helps users to learn about classical games or movies.
6|Page
Background ............................................................................................................................................. 5
Introduction ............................................................................................................................................. 5
P2 Produce designs for a website that meet client requirements. ......................................................... 6
Introduction ............................................................................................................................................. 6
Problem definition statement requirements ........................................................................................... 6
Client Needs .............................................................................................................................................. 6
Target audience ........................................................................................................................................ 7
Identification of user requirements ......................................................................................................... 7
The Website themes ................................................................................................................................. 7
Logo ........................................................................................................................................................... 7
Cascading Style Sheet (CSS) .................................................................................................................... 8
Rollover images ........................................................................................................................................ 8
Graphical and Textual Hotspots............................................................................................................... 9
User Friendly ........................................................................................................................................... 10
House styles ............................................................................................................................................ 11
Banner and pop-ups ............................................................................................................................... 12
Feedback form ........................................................................................................................................ 13
File formats ............................................................................................................................................. 13
Security W3C Compliance ...................................................................................................................... 13
Buttons & Navigation.............................................................................................................................. 14
Animations .............................................................................................................................................. 15
Consistency ............................................................................................................................................. 16
Accessibility options ............................................................................................................................... 17
Copyright issues ...................................................................................................................................... 17
Software .................................................................................................................................................. 17
Constraints for website ........................................................................................................................ 17
Benefits ................................................................................................................................................ 19
Initial design ideas/prototypes: ............................................................................................................ 20
Site Map for website ............................................................................................................................... 20
Mind Map ................................................................................................................................................ 21
Rough Sketches ...................................................................................................................................... 22
Home Page .......................................................................................................................................... 22
Home Page (Game) ............................................................................................................................. 22
,Aqsa Tabrez – BMC202113315 – Unit 6 Website Development – Assignment 2 – Fredricka McFarlane
Maps Page........................................................................................................................................... 23
............................................................................................................................................................. 23
Modes Page......................................................................................................................................... 23
Gallery Page ........................................................................................................................................ 24
............................................................................................................................................................. 24
About Us .............................................................................................................................................. 24
Mood board ............................................................................................................................................. 25
Storyboards – INDIVIDUAL INTERFACE................................................................................................. 26
Screen Sketch ......................................................................................................................................... 26
Storyboards – INDIVIDUAL INTERFACE................................................................................................. 27
Screen Sketch ......................................................................................................................................... 27
Storyboards – INDIVIDUAL INTERFACE................................................................................................. 28
Screen Sketch ......................................................................................................................................... 28
Storyboards – INDIVIDUAL INTERFACE................................................................................................. 29
Screen Sketch ......................................................................................................................................... 29
Storyboards – INDIVIDUAL INTERFACE................................................................................................. 30
Screen Sketch ......................................................................................................................................... 30
Storyboards – INDIVIDUAL INTERFACE................................................................................................. 31
Screen Sketch ......................................................................................................................................... 31
Storyboards – INDIVIDUAL INTERFACE................................................................................................. 32
Screen Sketch ......................................................................................................................................... 32
Storyboards – INDIVIDUAL INTERFACE................................................................................................. 33
Screen Sketch ......................................................................................................................................... 33
Storyboards – INDIVIDUAL INTERFACE................................................................................................. 34
Screen Sketch ......................................................................................................................................... 34
Storyboards – INDIVIDUAL INTERFACE................................................................................................. 35
Screen Sketch ......................................................................................................................................... 35
Storyboards – INDIVIDUAL INTERFACE................................................................................................. 36
Screen Sketch ......................................................................................................................................... 36
Storyboards – INDIVIDUAL INTERFACE................................................................................................. 37
Screen Sketch ......................................................................................................................................... 37
Storyboards – INDIVIDUAL INTERFACE................................................................................................. 38
Screen Sketch ......................................................................................................................................... 38
Storyboards – INDIVIDUAL INTERFACE................................................................................................. 39
Screen Sketch ......................................................................................................................................... 39
Flow chart ................................................................................................................................................ 40
1|Page
,Aqsa Tabrez – BMC202113315 – Unit 6 Website Development – Assignment 2 – Fredricka McFarlane
Pseudocode ............................................................................................................................................ 42
Wire Frame design .................................................................................................................................. 43
Home Page .......................................................................................................................................... 43
Battlefield Home Page ........................................................................................................................ 43
Battlefield Maps Page ........................................................................................................................ 44
Battlefield Modes Page ...................................................................................................................... 44
Battlefield Gallery Page ...................................................................................................................... 44
Gran Turismo Home ............................................................................................................................ 45
Gran Turismo Tracks........................................................................................................................... 45
Gran Turismo Modes .......................................................................................................................... 46
Gran Turismo gallery ........................................................................................................................... 46
World of Warcraft Home ..................................................................................................................... 47
World of Warcraft Maps ...................................................................................................................... 47
World of Warcraft Characters ............................................................................................................. 48
World of Warcraft gallery .................................................................................................................... 48
Gantt chart .............................................................................................................................................. 49
Legalisation ............................................................................................................................................. 49
Copyright, Designs and Patents Act....................................................................................................... 49
Date Protection Act 1998 ...................................................................................................................... 49
Ethical issues related website design ................................................................................................... 50
Summary ................................................................................................................................................. 50
P3: Review the website design proposals with others to identify and inform improvements. ............. 51
Improvements ......................................................................................................................................... 52
Bf2 Home ............................................................................................................................................ 52
Bf2 maps ............................................................................................................................................. 52
Bf2 Modes ........................................................................................................................................... 53
Bf2 gallery ........................................................................................................................................... 53
Gt3 Home ............................................................................................................................................ 53
Gt3 tracks ............................................................................................................................................ 54
GT3 Modes .......................................................................................................................................... 54
Gt3 Gallery........................................................................................................................................... 54
WOW Home ......................................................................................................................................... 55
WOW Maps .............................................................................................................................................. 55
WOW Characters ................................................................................................................................. 55
WOW Gallery ........................................................................................................................................ 55
2|Page
,Aqsa Tabrez – BMC202113315 – Unit 6 Website Development – Assignment 2 – Fredricka McFarlane
M2: Justify the design decisions, explaining how they will meet the user’s needs and be fit for
purpose. ............................................................................................................................................... 56
Features .............................................................................................................................................. 56
Content ................................................................................................................................................ 56
Legal and ethical considerations ....................................................................................................... 58
Software .............................................................................................................................................. 58
Hardware and software ...................................................................................................................... 58
Constraints .......................................................................................................................................... 58
Copyright.............................................................................................................................................. 59
D2: Evaluate the design and optimised website against client requirements. .................................... 59
Introduction ............................................................................................................................................. 59
Evaluation ............................................................................................................................................... 59
Conclusion............................................................................................................................................... 60
P4: Produce a website for an intended audience and purpose. .......................................................... 60
Home Page .......................................................................................................................................... 61
Battlefield Home Page ........................................................................................................................ 61
Battlefield Maps Page ........................................................................................................................ 61
Battlefield Modes Page ...................................................................................................................... 62
Battlefield Gallery Page ...................................................................................................................... 62
Gran Turismo Home ............................................................................................................................ 63
Gran Turismo Tracks........................................................................................................................... 63
Gran Turismo Modes .......................................................................................................................... 64
Gran Turismo gallery ........................................................................................................................... 64
World of Warcraft Home ..................................................................................................................... 65
World of Warcraft Maps ...................................................................................................................... 65
World of Warcraft Characters ............................................................................................................. 66
World of Warcraft gallery .................................................................................................................... 66
About Us .............................................................................................................................................. 67
Code ..................................................................................................................................................... 68
P5: Test the website for functionality, compatibility and usability. .................................................... 111
Introduction ........................................................................................................................................ 111
Test plan ................................................................................................................................................111
General Tests ....................................................................................................................................111
Test results............................................................................................................................................113
P6: Review the extent to which the website meets client requirements. ........................................... 119
What the client wanted .....................................................................................................................119
3|Page
,Aqsa Tabrez – BMC202113315 – Unit 6 Website Development – Assignment 2 – Fredricka McFarlane
What I made ......................................................................................................................................120
M3: Optimise a website to meet client requirements. ....................................................................... 122
D3: Demonstrate individual responsibility, creativity and effective self-management in the design,
development and review of a website. ............................................................................................... 126
Conclusion .......................................................................................................................................... 128
Bibliography........................................................................................................................................ 128
4|Page
,Aqsa Tabrez – BMC202113315 – Unit 6 Website Development – Assignment 2 – Fredricka McFarlane
Background
You have recently joined a web development company, In the Zone Classic Games/films Company as a junior web
developer. You have been approached to create a website that promotes Classic Games/films for In the Zone Company.
The purpose for this website is to actively promotes and encourage more people to come gain and appreciation of
Classic Games/films. The company wants you to include the following things:
Introduction
▪ Hand drawn design, containing Layout, positioning, colours [hexadecimal], font styles, font colour
[hexadecimal], names of any background image used, names of Banner and logo to be used
▪ Original Banner & Logo
▪ Menu(s)
▪ Last update:
▪ Six linked pages of content, [text & images]
▪ Appropriate dynamic content of your choice
▪ Cascading Style Sheet
▪ Use of Alt tags
▪ External links
▪ Email link
▪ Shopping cart
▪ Completed Test plan [college]
▪ Completed Test plan [external]
▪ Evidence meeting the Clients requirements
5|Page
, Aqsa Tabrez – BMC202113315 – Unit 6 Website Development – Assignment 2 – Fredricka McFarlane
P2 Produce designs for a website that meet client
requirements.
Introduction
This piece of work is my assignment 2 for unit 6. The assignment was to create a website for a company called in
the zone. The company had requested that I created a website about three classical games or movies of my choice.
For my choice I chose Battlefield 2, Gran Turismo 3 and World of Warcraft. All these games are classical and are
made for users who are aged 16+.
Problem definition statement requirements
In The Zone has asked me to design and create a website about three different classical games or movies of my choice.
The website that I am going to create is going to be about the classical games: Battlefield 2, Gran Turismo 3 and World
of Warcraft. The games I have chosen were all created before 2005 and are made for players under 18.
The website that I am going to create will show an overview page of each game, the over view page will contain an
overview of the game, three different links which take the users to the different pages linked to that game, the system
requirements for that game and images of the reviews of the game and the trailer of each game. The reviews will be
pictures but when clicked, they will take the user to the page the review is from.
The website will also contain a gallery page which shows any in game images or any concept art created for the game.
There will also be a maps page which will show the different maps inside the game and there will be a game modes page
which will show the different game modes. One exception is World of Warcraft, in this page there will be a link to a
character’s page as the game does not have any game modes.
Another feature that my website will have is that each page will have its own theme according to the game that is being
talked about. For example, the Battlefield 2 pages will all have a grey theme because the game is mainly grey. The Gran
Turismo game pages will be red and blue because the game icon is red and blue and the World of Warcraft pages will
be a mix of all colours because it is a colourful game.
There will also be a menu bar on each page. To get to the menu bar the user will have to click the menu button. When
the menu button is pressed, a side menu will appear. The side menu will contain links which allow the user to navigate
between the pages for that specific game, it will also contain the links needed to change between the game pages. For
example, the World of Warcraft pages will have the link: Overview, Map, Characters and Gallery. When the user selects
a page, the name of the page they are on will grey out to show that they are on that page. The side menu will show on
the left of the page and will be a colour which matches the theme.
On the right side of the page, there will be a ‘Buy Now’ button. When pressed another side menu will appear on the right
side of the page. This side menu will contain links to the pages where the user can buy that specific game.
I will also have a navigation bar between the different games at the top of the page, the buttons for each game will be
the game logo. The home page will be a home icon.
The website I create will be very user friendly as the users will be able to navigate through all the pages without having
to press the back button.
Client Needs
The client has requested a website which is about three classical games of my choice. The website I created
needs to have at least six pages. There needs to be a home page and a welcome message which explains
what the site is about. There also needs to be a profile of the company, an about us page, a gallery page,
interactive slide shows and images, a shopping cart, an online application form and a form for the user to
complete.
The client wants a website which helps users to learn about classical games or movies.
6|Page
