Mujahid Shah

.8034 - Level 2 IT - Unit 13

Website Design
11/03/19

1. Introduction

I am a web developer that works for a company called red ransom. I have

been given a task to promote and advertise work. In this document i will be

creating a website that promotes and advertises work. He has been a

successful landscape photographer for over 10 years and now he intends to

1 of 16
 Mujahid Shah

branch out and take photographs for portraits and weddings targeting ages

around 24+.

2. Intended Purpose

The age group for the website will 24+ and the client intends to expand and

take photographs in weddings for portraits. The gender is intended for males

and females. In this website, I will be designing a gallery page layout that will

enlarge the image size when they are clicked on by the user. It will include a

consistent house theme so it follows throughout the whole website. I will be

using the same font size, colour and style so it also flows well. The features

that might appeal to the users is the gallery because it displays the

photographers’ work in a way where people can admire it. When the user

hovers over the buttons in the navigation bar, it will be move so the user

knows it is clickable.

3. User Requirements.

The website will be about the photographer called John McCarten. The user

will need a smartphone, tablet, laptop or a desktop PC to access my website.

The client will want a cost of how much the website is going to be. The user

requirements include: a footer at the bottom of the website that states your

name copyright 2019’, it must have a consistent house theme, font size, style

and layout and the website should include contact details for the

photographer so users can get in touch with him. The website will include 8

2 of 16
 Mujahid Shah

pages such as: Home page - contains a welcome to the site and an introduction

from the client. About Us’ page - content given. History’ page - brief history of

photography ‘Packages’ page - detail different packages which are available.

‘Testimonies’ page - provide quotes from previous customers. ‘Gallery’ page -

have at least one gallery page, which needs to have a minimum of four

images displayed in a table, that optionally link to full size images ‘Contact Us’

page - contact details for Mr McCarten ‘Feedback’ page - to contain a form

that users can fill out to directly provide feedback to the client

4. Styles.

The colour scheme that I will use in the website will depend on the images I

have picked for the mood board. The type of colours that I have picked out

will be based and influenced by the images/photographs that I choose. The

types of images that I have picked out was landscape pictures and the reason

why I have picked them was that they look appealing. Below is an image of

the shades of colours i have chosen for the colour scheme.

3 of 16
 Mujahid Shah

Mood Board: I have chosen the colour blue because it is my favourite colour and reminds

me of a peaceful sky.

4 of 16
 Mujahid Shah

5 of 16
 Mujahid Shah

5. Storyboards.

To see storyboard open the following link:

6 of 16
 Mujahid Shah

https://docs.google.com/presentation/d/13INQOySnANuw3b6Xk1Kg6IE

hHDjWdws3_04SprtbWE0/edit#slide=id.g506d4b9f53_0_7

6. Alternative Designs

The reason why I haven’t used this design was because this page has hardly

anything interesting on there and there is nothing to do much on it. Another

reason why I haven’t pick this design was because it looked too simple and it

didn’t have any exciting colours on it to make it look appealing. Also, I didn’t

pick this design was because the size of the font was too small making it

difficult to read

7 of 16
 Mujahid Shah

The reason why I haven’t picked this design was that it is like the first one too

simple and the image have no way to look through them for example a

slideshow and the number of pictures that was used was not enough. Also,

another reason why I haven’t pick this design was that it didn’t have any eye

catching colours on it. Another reason why I haven’t picked this design was

because of the the style that was used.

7. Justification.

The colour scheme that I have decided to use in the website is a grey/blue

colour, the reason i chose this is because it is simple and plain however eye

catching at the same time. The types of images that I am going to use will be

landscape pictures and the reason why I have picked them was that they look

appealing and professional compared to portrait ones. Below is the design of

my home page, this design will be carried throughout all the pages.

8 of 16
 Mujahid Shah

8. Asset Registry.

Filename Webpage Description File type URI

Wedding Gallery A couple getting JPEG https://common
married s.wikimedia.org
/wiki/File:Weddi
ng_Photograph
y_in_Paris,_Fran
ce.jpg

Wedding Field Gallery A couple getting JPEG https://pixabay.

married in a com/photos/we
field dding-wedding-

9 of 16
 Mujahid Shah

photography-
model-
2995646/

Fruit Gallery Image of fruit JPEG https://pixabay.

com/photos/ma
ngo-fruit-still-
life-1534061/

Prom Gallery A prom couple JPEG https://en.wikip

Motorcycle on a motorcycle edia.org/wiki/Tr
ash_the_dress#
/media/File:Tras
h_the_dress_wit
h_a_motorcycle.
jpg

9. Sitemap.

10. Folder Structure.

10 of 16
 Mujahid Shah

Below is how i have set out my unit 13 folder on my computer, i have named it unit 13 so i

know what the folder contains and when i need to look for my work it will be easier and

more efficient this way.

11. Hardware and Software used.

11 of 16
 Mujahid Shah

The hardware I have used whilst creating my website for Jacob McCarten

Photography was a laptop and a PC. The reason why I used a laptop to create the

website was because when i go home at the end of the day i could use it and I used

a PC in college. The software that I had used was wordpress and this is because I

could use css to edit the website to how i wanted it and I could do it anywhere in

the website to make it look appealing. I used Google Slides for my storyboard, my

moodboard and i used Google Docs for a document where I had to write about the

website.

12. Constraints.

The most constraints that I had whilst creating the website was time. The reason

why time was a constraint for me was because I have college during the week and I

have been given assignments to do for other courses. The second constraint for me

was experience designing a website. The reason why experience is a constraint was

because I didn’t really know how to code a website from scratch. Another constraint

that I have is costs. The reason why I have constraints with costs is because I had to

find software to create my website for free all over the internet as we was not

spending any money. The last constraint I had was network connections. The

reason for this was that my home wifi connection was not working properly while I

was using the computer and the internet would stop working sometimes resulting

in that i wouldn’t be able to use wordpress and I wouldn’t get much done in the

time frame for creating the website.

12 of 16
 Mujahid Shah

13. Test Plan.

Test Webpage Test Outcome Comment

Number
1 Home Page Does the Yes it works.
navigation bar
work ?

2 About Us Does this work Yes it works.

on other
devices ?

3 Gallery Page Do the images Yes

show up
correctly ?

4 History Page Does the Yes it does.

website show
all the
information
correctly ?

5 Package Page Are the prices Yes

correct ?

6 Testimonies Does this work Yes it works.

Page on other
devices ?

13 of 16
 Mujahid Shah

7 Feedback Page Does the Yes it does

website show
all the
information
correctly ?

8 Contact Page Is the Yes

information
correct ?

14. Timeline.

Phase Duration
Design 4 weeks

14 of 16
 Mujahid Shah

Develop 5 weeks

Test 4 weeks

Release 1 week

15. Interactive Features Used.

The interactive features that I would like to use in my website would be:

● Picture Enlargement so when the computer mouse has touched the image

● colours changing in the box when the mouse is on the navigation bar to

show it is interactive

● I would like to include a slideshow of all of the photographers work with a

click to enlarge feature so the user could look at the picture more clearly

● I would use an mailing button so the users could contact the photographer

16. Conclusion.

15 of 16
 Mujahid Shah

So far on this unit i have learnt many things such as, How to plan a design for a website so

it can help me when it comes to producing it and how to design a website and make it look

professional.

16 of 16