task 2€¦ · web viewunit 13 - website development. task 2. unit 13 - website development. task...

Task 2

Unit 13 - Website Development

ContentsIntroduction...........................................................................................................................................2

Purpose.................................................................................................................................................2

Client Requirements..............................................................................................................................2

Website Pages.......................................................................................................................................3

Asset Table............................................................................................................................................4

Test Plan................................................................................................................................................6

Features to improve the look of the website........................................................................................7

Interactive Features...............................................................................................................................8

Site Map................................................................................................................................................9

Master Design.....................................................................................................................................10

Alternate Design..................................................................................................................................18

Constraints..........................................................................................................................................26

Justification..........................................................................................................................................26

1 | P a g e

IntroductionI have been asked to design a website for a company to show the British Values to the nation on a whole.

I have a list of requirements form the client on what the website needs to include and do.

The main message required to get across is that of information regarding the British Values and why we see them as being important to the British people.

PurposeThe purpose of designing the website regarding the British Values and why they are important to us as a nation.

I will need to provide information on British Values and what they are and why these are important to be able to acknowledge them in day to day life.

The aim to provide information to the nation about these values including the general public, students who can use this information to learn about the Values and why as a nation we are like we are. It is also aimed at teachers in education for them to teach the students of all educational levels (from primary school to college/university).

I also need to make people of different religions, faiths and beliefs to hopefully understand the Values of our country but not enforcing the countries beliefs/values on them to jeopardise their own beliefs, faiths and religions

Other purposes of the website will be need to be fulfilled for people who would like to know more about the British Values and they can contact us regarding more information and where we are based

Client Requirements Website on British Values – Providing information on an educational level for all ages

on the British Values and why these are not just part of British life but distinguishes us from all other countries around the world.

Information on British Values – Information on the British Values and why they are important to us a country and why they are important in the respect of history.

Effective Design – Colour scheme that matches the main purpose of the website but isn’t overbearing on the eye or brain.

Videos – Linking videos about British Values and Britain.

Images – Images of what British Values mean to us as a country and personally. What images resembles British Values in picture form?

2 | P a g e

Government Information – Information about our government and how you can access the information and what websites you can use.

Gallery – A gallery of images, videos providing information on British Values.

Sitemap – Links to all the different pages within the website i.e. Homepage, contact us pages.

Navigation Tabs – Providing an easy navigation around the site with tabs for each section of the website and easy to use.

Website Pages Home – This page will consist of background information, the main principal values About – This page will consist of information regarding British Values, what they are

and what the website is all about Contact Us – This page will consist of a links for email, head office site address to

contact us about anything regarding the website, more information about the company or website, to visit our main office.

Government Information – This page will consist of information about the British Government and how they have implemented the British Values in to British

Site Map – Links to all the different pages held within the website Video – Thumbnails (hopefully) and links for video(s) about British Values. Images – Thumbnails of different British images with the ability to enlarge the

images with a click of the mouse when hovering on the image. Resources – List of websites where user can gain more information or watch

more videos on British Values.

3 | P a g e

Asset TableNumbe

rImage Description Reference/Source

1 Image of silhouette London

https://pixabay.com/en/london-panorama-tower-bridge-311833/

2 Image of Eilean Donan Castle

https://pixabay.com/en/scotland-england-1607832/

3 Image of Red Phone boxes

https://pixabay.com/en/red-telephone-box-telephone-box-2497690/

4 Image of the Union Jack Flag

https://pixabay.com/en/flag-united-kingdom-england-london-1090955/

5 Image of London Bridge

https://pixabay.com/en/london-ball-round-westminster-2553841/

6 Video of British Values

https://youtu.be/UptHOWrcd9A

4 | P a g e

7 Video about British Values

https://youtu.be/UnSECCZokp0


https://youtu.be/Wk1vGq_J4D0


https://youtu.be/i4GRZbVSYls


https://youtu.be/yr06M6V0Ukc

5 | P a g e

Test PlanTestNumber

Description of Test Expected Outcome Actual Outcome

1 Does the slideshow function correctly (correct timings)?

I hope to be allowed to see the images for enough time and that I can move each image along by the means of a click of the mouse.

2 Hyperlinks – do they take you to the correct pages of the website?

I hope to be able to click on each hyperlink and it will take me to the correct corresponding page for example if I click on the About Us link it will take to information about the page or company.

3 Alt Text – is it present and loads when the images do not appear or load up.

I hope to see that of an image does not load up or images have been disabled that a description of the image is displayed/read out aloud via the computer’s narrator or website narrator.

4 Load Speed – Do the pages load in a respectable time?

I am aiming to see each of the webpages load within a few seconds of clicking on the link to the webpage

5 Google Maps – does it display correctly and is it interactive, i.e. being allowed to zoom in and out etc.

Does the map load correctly and at your location designated? Can I look around the map and zoom in and out.

6 Images – do they load correct and are they viewable in their normal ratio size

Do they load up correctly when clicked on to enlarge and are at a decent viewing

6 | P a g e

ratio to be able to view it properly.

7 Cross Browser Testing – Does the website look and work in the same manner in different web browsers.

Will it work on all major internet browsers i.e. Chrome, Edge, IE, Firefox and load up fully and correctly.

8 CSS – is the layout and colours ok for the purpose of the website.

Do the colours look right for the designed purpose and are they right for people with colour blindness. Is the flow and layout of the website as a whole easy to follow.

9 Video – does the video load and play perfectly fine without any hiccups other than buffering.

Clicking on the required video does it start with no problems. Can you make it full screen for better viewing?

10 Dropdown menus – do they work and allow you to see further options within the menu.

Hovering over the site map link, does it show the dropdown list of links.

Features to improve the look of the websiteFeature How does it improve the look?

Slideshow This will display the main elements/images of the website. Space saving, organised, and interactive. It will have roughly 5-10 images. This will give the user little glimpse of the different landmarks. If the user was to click on the particular image within the slideshow it would enlarge and possibly take them to the image page within the website.

Dropdown It is more organised and compact with links to other pages in one place. It is also interactive for the user.

Whitespace Highlights the main area of the webpage. It gives the user space to think about what they are reading. Everything is not just jammed in to the page and separates each section/headline of the page.

Google Maps Interactive (allows the user to look where the company is in relation to their position), it is professional looking and will update itself when required.

Video This will keep each user interested and will give the user a variety of options to take in the information, this also helps with the accessibility of the website for people with disabilities and difficulties reading etc.

7 | P a g e

Interactive Features.Interactive

Component.Function (How it

works).Link.

Slideshow This will provide the users with more interaction, information. This can be used in different ways. The main aspect of using a slideshow would be for showing more images and possibly giving a brief glimpse of information and links to other webpages relating to the main purpose of the website.

https://github.com/leemark/better-simple-slideshow

Google Maps Provides an easy mapping system/vision of where the head office is based and easy directional service for finding us.

https://www.google.co.uk/maps/place/Cheshire+College+-+South+%26+West/@53.279424,-2.9106067,17z/data=!3m1!4b1!4m5!3m4!1s0x487ac2ba530c0d13:0x664d2cf2994b7043!8m2!3d53.279424!4d-2.908418

Video This will provide a interaction for the user to click play and find out more information and to understand what people of different cultures and beliefs within the UK think of British Values.

https://www.youtube.com/results?search_query=British+Values

Light box This will provide the users an enlargement of the images and videos for better viewing.

https://www.w3schools.com/howto/howto_js_lightbox.asp

Dropdown Menu

This provides not only the user with an easy selection of links to click and navigate to but also gives the website a clean and tidy look.

https://www.w3schools.com/howto/howto_js_dropdown.asp

8 | P a g e












Site MapThis site map shows the layout of what order the webpages will be in and how the navigation will hopefully look within the webpages.

The site map also shows how each link for each page will be including the dropdown menu navigation link.

9 | P a g e

Master DesignPage (In order of how it will appear online) Description

The font that will be used for the main bodies of text of the webpage Calibri with a Bold finish and with a font sizing of 18.

The Main Title will have a font of Britannic Bold with a sizing of 32.

The navigation bar links will have a font of Britannic Bold with a sizing of 16/18.

The colour I have used are ideal for every user are perfect for the page. The white header background fits perfect for the silhouette image of London, the blue separates the footer from the rest of the page.

The footer will have a font of Britannic Bold with a sizing of 16/18 for each piece of text inside.

10 | P a g e






11 | P a g e






12 | P a g e






13 | P a g e






14 | P a g e






15 | P a g e






16 | P a g e





Each video I’m hoping will show a thumbnail before you click on it to play it.


17 | P a g e

Alternate DesignPage (In order of how it will appear online) Description

The font that will be used for the main bodies of text of the webpage Century Gothic with a Bold finish and with a font sizing of 18.

The Main Title will have a font of Century Gothic in black with a sizing of 32.

The navigation bar links will have a font of Century Gothic in white with a sizing of 20

The colours I have used are ideal for every user are perfect for the page. The grey header background outlines the silhouette image of the Crown which symbolises the British Monarchy, Tower Bridge within the footer. The colour also makes the writing standout.

18 | P a g e





19 | P a g e





20 | P a g e





21 | P a g e





22 | P a g e





23 | P a g e





24 | P a g e





25 | P a g e

ConstraintsThe constraints of the task that I found were:

Photoshop knowledge – this was probably the hardest and one of the worst constraint I found because I hadn’t really used Adobe Photoshop before so learning my way around the program while trying to complete the work proved a little tricky.

Designing skills – I have lack of creativity ideas (in my opinion) for design work and tend to just put things together randomly or finding it hard putting my ideas into physical action. I also found it difficult to decide what to input on each design page and how the layout should be.

Time for completion - This was a big constraint as I didn’t have Photoshop at home and relied on doing all the design work during college time which seemed to go very quickly.

Copyright – trying to find images that were non-copyright and images that I deemed suitable for my website proved hard as I knew what pictures I wanted to use on my website, it was finding them that I found hard especially non-copyright images or videos.

JustificationThe overall feel of the designs is ease on the eye and has a flowing feel.

The introduction is brief but gets to the point of what is required by the client regarding what they require for the website build.

The text in each slide is clear and easy to read. The designs of each give it a continuous feel and pleasing on the eye.

With using the same colours and layout throughout the designs I felt it would make the users less confused and keeps the website clean and simple for the users to find their way around while keeping in with what the client’s requirements. I refrained from using the colours red and green on the basis of the public using the website they may be colour blind and these two colours are harder for them view.

The font used within each slide has been the same throughout the pages of the website. It was easy to read and distinguish each word and the clarity is perfect for the coloured backgrounds

Each picture used is just a little insight to various British landmarks and what people think of when they think of Britain.

The video(s) that are embedded within the website show what the general public think of the British Values and what they believe they mean, these fit in perfectly for the task in hand and give a little insight to how people value the British Values

26 | P a g e

The alternative design was rejected because even though it looked a lot more dynamic (in my opinion) I didn’t really see it as a website people would visit. There were positives I liked about this design which I implemented.

The one main thing that wasn’t implemented was the use of having the navigation bar at the side of the page. This wasn’t implemented on the basis of me not knowing how to do it but as well it being a little too complicated to code in to the website.

The design of the website kept within what the client required by having a colour scheme which I believe fits perfectly into not just British Values but colours that represent Britain as a country. The colours used within each of the website pages were blue, grey and white so that each and every user/visitor to the website would be able to see them. All the text had a font colour of black to make it stand out on each of the backgrounds.

There are the desired pages the client wishes to have in the website with information regarding each page for example on the Government Information Page there is information about the British Government and how you to find out more information.

27 | P a g e

task 2€¦ · web viewunit 13 - website development. task 2. unit 13 - website development. task...

Documents