Bradley Hosker

8034 - Level 2 IT - Unit 13

Website Design
15th March 2021

1. Introduction
Describe what you are going to write about in this document.

In this document I am going to write about different aspects of website development and

what each area involves, such as the intended purpose which tells me what I need to

include for who I am designing the website for. It also includes my thoughts on the design

process as it progresses and how I think when it comes to the layout and design.

1 of 20
 Bradley Hosker

2. Intended Purpose
The website is designed for Jacob McCarten and is designed for people with an interest in
photography. It is meant for people 24+ as they are most likely to be interested in this
hobby. The purpose is to showcase his skills to visitors and give them an opinion on his
work and if they like it.

Some features and styles that I may include on the website include a before and after
preview to allow people to see what the image looked like before all of the editing was
done.

The image could also be shown in different styles to give the viewer an easy way to pick
which is best and to give them a better opinion on how they like their images to look.

Making the website clean and minimal would also be a good idea because I don’t want to
make the website feel too crowded and overpowering as it needs to look professional and
well organized.

Most of the website has to be visual as that is what photography is about, you want to
embrace the nature of photography and compliment it. The images also give people much
more to look at instead of just text.

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

The user will need access to a device capable of accessing the internet so they can visit the

website.

Also an internet connection will be required to go online.

A browser will also be needed as that is how people will search the link and view the site.

The file formats would also have to match the website as that could cause incompatibility

with certain media.

2 of 20
 Bradley Hosker

original and ready-made digital assets (images, video, animations, audio). Sources of ready-

made assets must be documented and referenced

Storyboard, containing a number of panels, showing the intended content and structure of

the website

Home page and folder structure

Site map, to show how the web pages are interlinked

Styles, templates and formats (eg colours, font size, font type, text and image alignment,

page layouts)

4. Styles.
Include and describe your colour scheme and mood board.

3 of 20
 Bradley Hosker

I have chosen to include the images on the moodboard because it showcases the things

that I am most interested in such as gaming and photography. It shows people what I am

interested in and allows them to get a better opinion on who I am as a person.

The colour scheme that I have chosen to use to design the website is made to look

professional and clean because the colours don’t want to be overpowering and too bright

or too dark because it can make the website look rushed and unprofessional.

5. Storyboards.
Include an annotated storyboard for each of the eight webpages.

4 of 20
 Bradley Hosker

Home Header

Navigation

Main Content

Site welcome information Main Image

Introduction

Footer

5 of 20
 Bradley Hosker

About us Header

Navigation

Main Content

Text about his work Image Image

Image Image

Footer

6 of 20
 Bradley Hosker

History Header

Navigation

Main Content

Text Image

Footer

7 of 20
 Bradley Hosker

Packages Header

Navigation

Main Content

Text Text Text Text

Image Image Image Image

Footer

8 of 20
 Bradley Hosker

Testimonies Header

Navigation

Main Content

Text Text Text

Text Text Text

Footer

9 of 20
 Bradley Hosker

Gallery Header

Navigation

Main Content

Image Image Image

Text Text

Image Image

Text Text Text

Footer

10 of 20
 Bradley Hosker

Contact us Header

Navigation

Main Content

Text Contact box

Text

Text

Footer

11 of 20
 Bradley Hosker

Feedback Header

Navigation

Main Content

Text Form

Text

Footer

6. Alternative Designs

12 of 20
 Bradley Hosker

Home

Header

Navigation

Main Content

Text

Footer

13 of 20
 Bradley Hosker

Home Header

Navigation

Main Content

Text Image

Footer

I rejected these 2 designs because they feel too crowded and unprofessional. There also

isn’t a variety of information on the pages and the space could be used much more wisely

to add more information and also makes the website feel more finished and thought out.

Also the elements are set up very poorly and make certain aspects of the website such as

the header very poor because there isn’t enough space for what is needed to make a good

page.

Show at least two alternative designs you considered and say why you rejected them.

I rejected these 2 designs because they feel rushed and unprofessional which could make

any potential visitor think that I don’t care about how my website is presented to them. I

14 of 20
 Bradley Hosker

want people to understand that I have thought about their needs and designed the website

to make it easy to navigate and understand.

The elements of the 2 designs are very confusing because nothing feels well thought out or

organised making people think I Header

don’t know what I am doing.

7. Justification. Navigation
Justify your design choice - refer to user requirements to do so. Say why each page is fit for
Main
purpose and why you have not usedContent
the alternative designs.

The pages that I have designed are fit for purpose

Informatio Text because I have made sure that the pages
n
are easily usable for people, things such as a navigation bar on every page allow people to

easily switch from page to page without the need of going back to the homepage to access
Text
another part of the website. This means that people will save time and it will make the

website feel more well thought out.

All of my elements are placed in a way in which they don’t look too cramped meaning

people don’t have to search for the thing they need as everything is easily visible.
Footer
It also feels very boring and uninteresting because not much work has been done to make

the viewer feel like the developer has thought about how the design works in practice.

8. Asset Registry.
Filename Webpage Description File type URI
Picture01 Gallery 1 A landscape JPEG https://drive.go
image used to ogle.com/file/d/
show my 1xf9QrlHXp_K8
hobbies OS49tjzXyJ6lSrF
A_jVi/view?
usp=sharing

Picture02 Gallery 2 A landscape JPEG https://drive.go

15 of 20
 Bradley Hosker

image used to ogle.com/file/d/

show my 1RhK-
hobbies OGnhMsn0Y09X
zlpT7Map_Hs4F
dAC/view?
usp=sharing

Picture03 Gallery 3 A landscape JPEG https://drive.go

image used to ogle.com/file/d/
show my 10gwDKkzDmN
hobbies uG3Sw0WqcWz
1HS6AHpTo9K/
view?
usp=sharing

Picture04 Gallery 4 A landscape JPEG https://drive.go

image used to ogle.com/file/d/
show my 1uZ_WoyUw697
hobbies LVxpqsDqkwpYl
_HQMeZ6P/vie
w?usp=sharing

Picture05 Gallery 5 A landscape JPEG https://drive.go

image used to ogle.com/file/d/
show my 1al0CXlPnQ_jqu
hobbies WErxNmzfndcm
UEHp5UG/view?
usp=sharing

Picture06 Gallery 5 A landscape JPEG https://drive.go

image used to ogle.com/file/d/
show my 1XYWl-
hobbies 03YPcZuMzRLfJ
MdQehnezZUb
WRf/view?
usp=sharing

9. Sitemap.
Include a sitemap for your website.

16 of 20
 Bradley Hosker

10. Folder Structure.

Set up your folder structure and copy a screen print here.

17 of 20
 Bradley Hosker

11. Hardware and Software used.

List hardware and software used to create your website.

I used many things to create the website and some of them include:

A computer to be able to connect to the internet and use browser software to be able to

design the website.

A browser to be able to connect to the internet and load the required software to be able

to edit the website.

A website designer to allow me to customize and make the website something that I like

and make it look professional.

12. Constraints.
List constraints you have had - time, experience, costs, accessibility, compatibility, power,

network etc.

13. Test Plan.

Test Webpage Test Outcome Comment

Number
1 Google Chrome I checked to I found out that
make sure that all all of the
of the site functions
functions worked
worked as they
correctly.
should.

2 Safari on mobile I made sure The website

that the loaded as it
webpage should and all
loaded correctly content was still
with all of the available.
content.

18 of 20
 Bradley Hosker

3 Firefox Making sure The website

that the content content is all
scales on the scaled properly
page correctly. and is clearly
visible.

4 Tablet I want to make All of the

sure that all of interactive
the interactive features work
features such as well and
page links all redirect the
work correctly. user to the
required part of
the website.

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
Design 2

Develop 2

Test 1

Release 2

19 of 20
 Bradley Hosker

15. Interactive Features Used.

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

I have used many interactive features on my website and some of them are:

Hyperlinks to different pages of the website

Clickable images to load a larger version of the picture

Dropdown boxes to give more access to different parts of the website.

Embedded work to show previously completed work in a window easily viewable by anyone

on the website

Interactive contact elements

16. Conclusion.
Write about what you have learned.

I have learned many things and some of them are the fact that I now know how to

structure my documents and make sure that all required information is present and no

work is missed out of the document.

I have also learned how website designers work and how to effectively use them to create a

working and aesthetically pleasing website.

20 of 20