Sarah Ameer

1 of 17

8034 - Level 2 IT - Unit 13

Website Design 15/11/2016

1. Introduction

In this document, I will be creating a website for Jacob McCarten. I am making him a

website because he wants to expand his career in photography and also wants to

showcase his work to people who are interested and will likely hire him to click photos

which will be of a value to them. He had come to Red Ransom to ask us to build a website,

so therefore in this document i will be showing the design element that is needed for the

website to be built.

Sarah Ameer

2 of 17

2. Intended Purpose

My audience is going 19+. This is because people may have important things going on in

their lives which they want to be photographed such as a wedding. Also the gender will be

both male and female so that it shows equality in his work. The styles and features which

may appeal to them are that he can add a different sort of dimension to photos which are

not like everyday photos. Also he would like to expand and website is a good form of

advertisement which is most commonly used in society today.

3. User Requirements.

This is from the project brief. Also add what the user will need to access your website.

The website will have the following pages;

● ‘Home’ page - contains a welcome to the site and an introduction from the

client. A summary of the site should also be included.

● ‘About Us’ page - content given below.

● ‘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

Also The header on each page may also include the company logo.

All web pages must have the following;

● A common colour theme, font style and layout, by using css style sheets.

● At least one graphic, in addition each page is to have a consistent header.

● A banner section that displays the website name and, optionally, a new logo

(designed by you)

Sarah Ameer

3 of 17

● A navigation section that allows each webpage to be accessed from any other

web page in the site

● A footer which includes ‘your name © copyright 2016’

● Some accessibility features (e.g. alternative text for images, zoom or text to

speech)

Your site should also contain some web features, such as;

● interactive components such as hotspots, pop-ups, buttons, radio buttons,

checkboxes etc

● A web form for collecting information

NB Ensure all images are optimised for download speed vs. image quality

The ‘About Us‘ page, will include the text below;

Jacob McCarten is a professional photographer, with a BA Honours degree

qualification in photography. From a young age he has always had a high

interest in the subject, and after studying it in various institutions he knew

the next step was to progress to his career.

Jacob has worked within many genres of photography, but also many

people, such as well known music artists, DJ’s, record labels, and various

companies. His work is always created with his own twist and flare on the

genre, and can clearly be seen apart from other photographers work.

Jacob offers work and services within many genres of photography, such

as portrait, corporate, architecture, landscape & fine art, advertising,

events and weddings.

Jacob will in no doubt satisfy your photographic needs, and add his own

personal touch to the work, that no other photographer can do.

4. Styles.

Sarah Ameer

4 of 17

Sarah Ameer

5 of 17

Moodboard:

Sarah Ameer

6 of 17

5. Storyboards.

Theses pages will have a consistent greeny, blue colour throughout and font style and

layout. The header on the homepage will contain a logo, made and created by me.

Also it will contain interactive features such as: hotspots, popups, buttons, radio buttons,

checkboxes, etc.

Sarah Ameer

7 of 17

Sarah Ameer

8 of 17

Sarah Ameer

9 of 17

6. Alternative Designs

Sarah Ameer

10 of 17

7. Justification.

I have not used the alternative designs as they have flaws in them.

Design 1:

The navigation bar is on the side, this will not be good for the website as the viewer may

scan past it and won't attract towards it. The second thing is that the image is at the top of

the webpage, this is confusing as viewers will expect to see the information first and then

look at the image for a reference.

Design 2:

The navigation bar is at the bottom of the webpage, this will make it difficult for users as

they have to scroll down each time to get onto another web page.

The 2nd thing is that the footer is on top of the page this will be very distracting as they will

more likely visit social media sites than take a look at the webpage.

Each of the pages are fit for their purpose as the layout is the same. This will make the

website look professional towards viewers. Also i have chosen this design as it will be

accessible to everyone and easy to use.

Sarah Ameer

11 of 17

8. Asset Registry.

Filename Webpage Description File type URI

weddingfood gallery jpg http://goodtimep

hotographychica

go.com/good-

looking-wedding-

food/

djmusic gallery jpg

http://www.myu

niqueevent.com

/affordable-

wedding-dj/

weddingpic gallery Jpg https://www.pint

erest.com/explor

e/wedding-

poses/

car1 gallery Jpg http://www.goo

dwp.com/cars/1

8029-

lamborghini-

lp2310-

lamborghini-

street.html

firstcamera History Jpg https://en.wikip

edia.org/wiki/Hi

story_of_the_ca

mera

firstphoto History Jpg http://cool.cons

ervation-

us.org/byorg/ab

Sarah Ameer

12 of 17

bey/an/an26/an

26-3/an26-

307.html

Landscape1 Home Jpg http://feelgrafix.

com/group/land

scape.html

wedding1 Packages Jpg http://www.huff

ingtonpost.com

/rev-laurie-sue-

brockway/deali

ng-with-

wedding-

dram_b_567637

3.html

dj1 Packages Jpg https://www.the

knot.com/mark

etplace/dj-

music-

professionals-

fort-wayne-in-

481217

weddingfood2 Packages Jpg http://www.wed

dingcaterers.ie/

wedding-day-

mains.php

landscape2 Packages Jpg http://combiboil

ersleeds.com/k

eywords/landsc

ape-1.html

Family1 Packages Jpg http://carpedie

motivation.com

/importance-of-

Sarah Ameer

13 of 17

family/

car2 Packages Jpg http://combiboil

ersleeds.com/k

eywords/cars-

1.html

sciencephoto Packages Jpg http://www.lhp5

thgrade.com/sci

ence.html

pets1 Packages Jpg http://cravenho

use.net/pets-

welcome-in-

select-suites-at-

craven-house/

9. Sitemap.

10. Folder Structure.

Sarah Ameer

14 of 17

11. Hardware and Software used.

Hardware:

● Operating System

● Router

● switch

Software:

● Windows 7

● Google Chrome

12. Constraints.

The constraints I have had is that I am not able to make the website the way I want it to

look as it has to be the clients requirements.

The other constraints i have had is that i have to make it in the time limit which is given and

I might not have enough time to create which could lose me money as website designer.

Another constraint is that i might not have power over the website once created, which

means any changes needed somebody else will be payed for it.

Sarah Ameer

15 of 17

13. Test Plan.

Test

Number

Webpage Test Outcome Comment

1 All pages The text is easy

to see

2 All pages Colours are not

too vibrant

3 All pages Image is big and

bold

4 All pages All logos fit onto

one screen and

all right size

5 All pages Check to see if

the website

doesn't crash

6 All pages Check to see if

hyperlinks,

hotspots all

work

14. Timeline.

Fill in how long each phase will take you to complete - remember to say if you are using

hours, days or weeks.

Phase Duration

Sarah Ameer

16 of 17

Design 7 days

Develop 2 weeks

Test 1 week

Release 4 days

15. Interactive Features Used.

Which interactive features have you used? Include details of which page they are used on.

Homepage: Hotspots will be on the image and text

About Us page: Buttons and hyperlinks to all of his social media accounts, so people can

grasp his personality in terms of a photographer.

Testimonies: This will have forums which will enable people to express their view on his

work and how it has affected them. This will also include surveys and polls so if any

changes are needed to be made, then they can.

History: this will have a multiple choice test and this will enable users to test their

knowledge and learn a bit more about what goes into photography.

Gallery:

Packages: This will have hotspots, the images will take them to to another webpage that

contains information about the image they clicked on.

Contact Us: This will have FAQ’s, which will help people if theses are the question the may

want to ask him.

Feedback Page: This will contain a forum so that feedback can be given to the client directly

and to no one else, e.g. using google forums.

Sarah Ameer

17 of 17

16. Conclusion.

I have learned that it takes a long process to make a website as there are different

elements to them. You need to make sure that you plan out everything so that the client is

happy with their requirements and that they are no complaints which could affect you as a

website designer.