Adam Mckeating 114394

8034 - Level 2 IT - Unit 13

Website Design
Today’s Date

1. Introduction
In this document, I am going to be planning a website for a company called
RedRansom. My customer is Jacob Mccarton. I am going to design the
website for the client, using the website design skills I have learnt on the
website.

1 of 23
 Adam Mckeating 114394

2. Intended Purpose
The intended use of this website is to create a website based on his
photographer business. The targeted age group is 24 or older. The websites
interested in showing customers what he is capable of creating. He takes
landscaping photographs of portraits and websites. He wants to create a
website to give him exposure and promote his business to attract more
customers. The style of the website wants to show off what he is capable of
producing straight away, almost grabbing the viewers attention. If there are
people who are looking for a photographer, they will find this type of
approach eye catching and a good way of promoting their service. The colour
scheme is going to be light. Such as a light blue or even crystal white.

3. User Requirements.
The following text shows what the user wants in the website:

Home page

This will include information about what to expect on this website.

About Us

This will include information about what Jacob Mccarten has done and it will talk about who

he is.

History

This will include information based on the history of photography.

Gallery

This will include pictures of landscapes that Jacob Mccarten has done

Packages

2 of 23
 Adam Mckeating 114394

This will include information about the prices.

Testimonies

These are reviews that customers have given to Jacobs business

Contact Us

The contact us page will include links to his social media, phone number and his email

address etc.

Feedback

This is a form that customers can fill out to leave feedback. Then the owner of the website

can see the feedback and act on it.

The users will need to have a computer or a mobile phone that can access the internet to

access the website. They are also going to need to have access to the internet.

4. Styles.

3 of 23
 Adam Mckeating 114394

This is the colour that I want to choose for the website. I want the website to

be a light blue as it makes the website look appealing to all types of age

groups, however my target audience is 24 or older meaning that the older

generation that are around 60+ will like the use of bright colours.

This is my moodboard. This is what my website will be based around. The

pictures are what I am going to include. I chose pictures of landscapes

4 of 23
 Adam Mckeating 114394

because they are what photographers take pictures of. I also got a picture of

a camera due to the fact that photographers take pictures with cameras.

5. Storyboards.

This is my homepage and I will be talking about what to expect on this website. Jacob

Mccarten is a photographer and in this website you can find out information based on

photography itself and the history behind it as well as what he can produce.

The title is in font size 14 in arial. I have centralised the text and changed the background

colour. It is a light blue throughout the whole website, giving it that consistent and

professional feel to it. The text in the middle is font size 13 and it is in arial too. The bottom

5 of 23
 Adam Mckeating 114394

text is bold and in text size 13. I have added 8 buttons to the website and each of these

buttons takes me to a new page. They have been centralised and have a colour of light grey

1. It has the text size of 10.

6 of 23
 Adam Mckeating 114394

The about us page is going to talk about Who Jacob Mccarten is and what his occupation is.

This is the section that goes into detail about himself. He is going to tell you what he can

create such as the landscape pictures. The about us page had a picture of what Jacob

Mccarten looks like and a brief about his life. I have also added a map which shows where

he is based around, which is Bradford.

7 of 23
 Adam Mckeating 114394

The history page features information based on photography when it first started. I

have used a consistent design throughout the whole website which makes it look

professional. I have added a picture of the very first picture and I plan to add a

hyperlink to this picture so that when you click on the image, it will take you to the

website that talks about this picture in full detail. This feature is good for those who

like to get to know the backstory of photography.

The packages page features information based on the prices. As you can see in this

picture above, I have 3 different types of packages that you can pay for. This is good

because it allows the viewers to have a look at the different choices that they have

and make a decision. I have again used the same design and the layout is more or

less the same as the other pages. However there are pictures here. It only features

the prices.

8 of 23
 Adam Mckeating 114394

The gallery page features 3 different images that allow the viewers to see what type

of pictures Jacob Mccarten can produce. I have centred the pictures which allows

them to stand out. I have also added a text box at the top of the page which tells you

what to find in this web page. The colour scheme and the font size is the same as all

of the other webpages.

9 of 23
 Adam Mckeating 114394

The testimonies page features information based on the recent feedback that the

business has got. I have added the most recent reviews and as you can see from the

picture above, there are 3 reviews and all of them are positive. I have also added a

picture to the side of the reviews which gives the business a review out of ten. So far

Jacob Mccarten photography has a review of 4.5/5.

This is the contact me page and it features links to external websites where you can

reach Jacob Mccarten to inform him if anything is wrong or if you have a question

about bookings etc. there are 3 pictures and all of them have been centred. The

background colour is the same as the rest.

10 of 23
 Adam Mckeating 114394

This is the feedback page and as you can see it doesn't really feature much

information. There is a simple feedback form that viewers can fill out to leave a

drawback or an improvement needed on the website. This allows the creators to

understand where there are cracks in the website and understand how to improve

on it .

6. Alternative Designs

11 of 23
 Adam Mckeating 114394

This is the alternative contact us page and as you can see from the picture above, it

does not look appealing. It is very hard to make out what the information says and it

looks very unprofessional. This is the main reason why it was rejected. Another

reason is that because the buttons are not aligned and it can cause issues as some of

them are overlapping. Overall it is a bad design.

12 of 23
 Adam Mckeating 114394

This is a picture of the alternative gallery page and as you can see from the picture

above, the whole webpage has been jumbled up. In some cases you can say that it

was hacked as the images are not straight or the creator has not taken any time and

effort to make it look good. This is the main reason why this design was rejected

because of its lack of quality and some of the buttons are inaccessible as the picture

overlaps it.

13 of 23
 Adam Mckeating 114394

This is the feedback page. From the picture above you can see that this alternative

design lacks a quality. The user has not looked at the user requirements properly

and understood what the user wants. The colour scheme is very dark and it is hard to

make out what the text says. The layout is also very bad as the buttons are upside

down and the feedback form has not been properly aligned.

7. Justification.
Justify your design choice - refer to user requirements to do so. Say why each page is fit for

purpose and why you have not used the alternative designs.

I decided to choose my original design because it looked more professional and the colour

scheme looks a lot better here. The light blue looks more attractive and makes the website

stand out. The Buttons that go across the top of the page looks better than the alternative

as the alternative designs buttons are all muddled up and it doesn't look appealing or

professional. The alternative design has not been tested and taken seriously. The buttons

are not placed in a neat line, which makes the design look unprofessional. The gallery

pages pictures are not placed

Jacob Mccarten wanted a website that shows off his work and allows him to get more

exposure to potential customers which will help him with his photography and allow

him to get more creational and move onto more advanced pictures. He has been a

photographer for 10 years, and he is thinking about starting to create wedding

pictures, which is a very good idea. He also wanted a packages page which shows the

potential customers what the price range is for the pictures. This is good because the

customers have a wide range of packages that they can buy and it doesnt pressure

them into buying something that they will not be happy with.

8. Asset Registry.

14 of 23
 Adam Mckeating 114394

Filename Webpage Description File type URI

Landscape Pic 1 About Us This is a picture JPEG https://www.cn
of a House in et.com/how-
the mountain to/these-7-pro-
side covered tips-will-
with clear blue improve-
water. landscape-
photos-even-
on-phone-
camera/

Landscape Pic 2 Gallery Page This is a picture JPEG https://giphy.co

of a lightning m/gifs/landscap
outburst that e-
occured over a BFif4Uu3v5Dz2
city.

Landscape Pic 3 Gallery Page This is a picture JPEG https://www.pe

of a Wooden xels.com/search
Dock taken at /landscape/
sunset.

Email Logo Contact Us This is a logo of JPEG https://www.pn

the email gfuel.com/free-
png/ozoxe

Phone logo Contact Us This is a logo of JPEG https://www.kin

a Phone. dpng.com/imgv
/iRwhhoR_telep
hone-icon-png-
transparent-
contact-us-icon-
png/

Instagram logo Contact Us This is the JPEG https://medium.

instagram logo. com/@ianspalte
r/designing-a-
new-look-for-
instagram-
inspired-by-the-
community-
84530eb355e3

15 of 23
 Adam Mckeating 114394

1st picture History This was the JPEG https://en.wikip

taken very first picture edia.org/wiki/Hi
taken in 1827 story_of_photog
raphy

Package prices Packages This is a picture JPEG https://mr-and-

of the prices for mrs-wedding-
the pictures photography.co
.uk/details-
price-list/

5 star logo Feedback This is a logo of JPEG https://www.pn

the 5 star gfind.com/mpn
review. g/hTxRhhi_educ
ator-s-reviews-
intelligens-
transparent-
background-
rating-star/

9. Sitemap.

16 of 23
 Adam Mckeating 114394

This is my site map. This shows what the website will include and what else will show up

when you click on one of the buttons. For an example, on Packages when you click that it

will show you the prices.

10. Folder Structure.

17 of 23
 Adam Mckeating 114394

This is the folder structure of the website. As you can see all of the pages in the storyboard

are in here which is what allows you to see all of the pages on the website.

11. Hardware and Software used.

Notepad++

We used this to create the website. We used this to code the website.

Mouse

Keyboard

Google

Windows 10

18 of 23
 Adam Mckeating 114394

12. Constraints.

One constraint is that you may run out of time. When you are designing it, you may spend

too much time on one part and have not enough time for testing and planning etc. This is a

big constraint because if the designer does not organise how much time he spends on one

part of the project, you could end up with an incomplete website on the deadline date.

Another constraint is that if the designer is new to this sort of business they may not have

enough experience. This will result in a poor quality design which potentially could have

been a waste of money and time.

Some of the features may be unavailable. This could be due to a lack of components and

processing power to run the website as well as creating it.

Not enough experience, resulting in it taking more time to complete the website.

To create a website you need a series of programs installed on the creators computer

to ensure that the website looks it best. For example, the computer may need to

have a editing program, however if the computer is not up to date the creator will

not be able to proceed with the project. This results in the deadlines been pushed

further on which can be frustrating for both the creator and the client as the creator

will need to either update his system or find an alternative program which is elegible

of running on the computer.

Another drawback could be a natural disaster. The chances of this happening are

very low, however they are never zero. This will impact the project massively. For an

example, if there was a flood and it destroyed the house where the website was

getting made, all of the work that has been put into this project will have been wiped

as the creator will most likely not have a disaster recovery plan.

13. Test Plan.

19 of 23
 Adam Mckeating 114394

Test Webpage Test Outcome Comment

Number
1 Home page Does the The buttons Not tested yet.
buttons work need to redirect
properly? you to the page
that you have
selected.

2 Testimonies Does the page When you load Not tested yet.
page load up the the testimonies
reviews? page, you
should

3 Feedback Page Does the When the Not tested yet.

Website Lag? Feedback
button is clicked
it should take
you to a Form
that should load
straight away.

4 Gallery page Is the overall The Tested. The

performance performance of performance is
fast? the website very quick
should not drop throughout the
when on the whole website.
gallery page
and it should
load all of the
pictures without
any problems.

20 of 23
 Adam Mckeating 114394

14. Timeline.

Phase Duration
Design 2 weeks

Develop 3 weeks

Test 2 weeks

Release 3 weeks

It will take 2 weeks to design what the website will look like because you need to make sure

that the design is very good and it meets the users requirements.

The development stage also takes 3 weeks because it needs to be checked thoroughly to

ensure that everything has been created the way that the user wants. The test stage takes 2

weeks maximum so that you can check the website multiple times using different methods

to make sure that there are no weak spots in the website which hackers can access the

website personal data etc. you also need to check to make sure that the website performs

the way that it should otherwise the website could potentially fail to load on a large scale of

computers. Last of all the release stage takes 3 weeks because the creator needs to make

sure that everyone is happy with the website and there are no major concerns.

15. Interactive Features Used.

I have used a Feedback form which allows viewers to file a form regarding an issue with the

website or something that has been done properly.

To improve on this I should consider adding a Search bar where you can add keywords.

This will therefore allow viewers to go straight to a specific part of the website that is based

around that keyword if there is any information based on it.

21 of 23
 Adam Mckeating 114394

I have also added a Hyperlink that takes you straight to Jacob Mccartens email address on

the Contact Us page where you can easily file a complaint.

I have added a RSS feed, this is basically a news bar on the side of the website that

the users can look at whilst flicking through the website. This is good because it

keeps the users interested and you are potentially sharing important information,

depending on what your news feed is based on.

I have also added a pop up feature, which means that when the user clicks on the

packages page there will be a pop up on your computer almost like an ad, which will

feature discount codes. Nobody can turn down a discount code and if the website

becomes popular the use of a pop up is very useful.

The contact me form allows users to instantly send emails to Jacobs inbox or his

administrator so that he can read them without having any issues. This way is better

than a hyperlink to an external website as it shows that the website has had a lot of

work put into it and it looks professional.

The feedback form is a fom that the users can fill out if they witness any issues with

the website. I was thinking about adding a feature on this form which is a drop down

feature. On the drop down you can choose what your feedback is going to be based

on as not all feedback is negative. It also makes it easy for the admin as he can filter

the list of feedback to see which ones are the negatives.

16. Conclusion.
In this Document I have learned how to create a website based on a description of User

requirements that tells me to create a website for his photography business. I have learned

the steps of creating it and how to code. I have also learned how to create a sitemap, which

is basically how the website will work and what you can do on each page/ expect. I think

that this website will be a good way of helping Jacob Mccaren gain new customers and help

promote his photography business, as well as making it easier for people to get an

22 of 23
 Adam Mckeating 114394

impression on what he does. This is because of the testimonies page which features the

most recent reviews of his business based on how good he is. The website also features

pictures of what he has created and some background of photography itself.

To conclude, I have learnt how important it is to thoroughly check the product to ensure

that the results are perfect and suitable for what the customer wants, which is key when

creating a website.

23 of 23