website design 15/11/2016 - wordpress.com · website design 15/11/2016 1. introduction in this...
TRANSCRIPT
![Page 1: Website Design 15/11/2016 - WordPress.com · 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](https://reader035.vdocument.in/reader035/viewer/2022070805/5f03b8b27e708231d40a7229/html5/thumbnails/1.jpg)
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.
![Page 2: Website Design 15/11/2016 - WordPress.com · 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](https://reader035.vdocument.in/reader035/viewer/2022070805/5f03b8b27e708231d40a7229/html5/thumbnails/2.jpg)
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)
![Page 3: Website Design 15/11/2016 - WordPress.com · 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](https://reader035.vdocument.in/reader035/viewer/2022070805/5f03b8b27e708231d40a7229/html5/thumbnails/3.jpg)
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.
![Page 4: Website Design 15/11/2016 - WordPress.com · 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](https://reader035.vdocument.in/reader035/viewer/2022070805/5f03b8b27e708231d40a7229/html5/thumbnails/4.jpg)
Sarah Ameer
4 of 17
![Page 5: Website Design 15/11/2016 - WordPress.com · 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](https://reader035.vdocument.in/reader035/viewer/2022070805/5f03b8b27e708231d40a7229/html5/thumbnails/5.jpg)
Sarah Ameer
5 of 17
Moodboard:
![Page 6: Website Design 15/11/2016 - WordPress.com · 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](https://reader035.vdocument.in/reader035/viewer/2022070805/5f03b8b27e708231d40a7229/html5/thumbnails/6.jpg)
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.
![Page 7: Website Design 15/11/2016 - WordPress.com · 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](https://reader035.vdocument.in/reader035/viewer/2022070805/5f03b8b27e708231d40a7229/html5/thumbnails/7.jpg)
Sarah Ameer
7 of 17
![Page 8: Website Design 15/11/2016 - WordPress.com · 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](https://reader035.vdocument.in/reader035/viewer/2022070805/5f03b8b27e708231d40a7229/html5/thumbnails/8.jpg)
Sarah Ameer
8 of 17
![Page 9: Website Design 15/11/2016 - WordPress.com · 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](https://reader035.vdocument.in/reader035/viewer/2022070805/5f03b8b27e708231d40a7229/html5/thumbnails/9.jpg)
Sarah Ameer
9 of 17
6. Alternative Designs
![Page 10: Website Design 15/11/2016 - WordPress.com · 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](https://reader035.vdocument.in/reader035/viewer/2022070805/5f03b8b27e708231d40a7229/html5/thumbnails/10.jpg)
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.
![Page 11: Website Design 15/11/2016 - WordPress.com · 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](https://reader035.vdocument.in/reader035/viewer/2022070805/5f03b8b27e708231d40a7229/html5/thumbnails/11.jpg)
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
![Page 12: Website Design 15/11/2016 - WordPress.com · 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](https://reader035.vdocument.in/reader035/viewer/2022070805/5f03b8b27e708231d40a7229/html5/thumbnails/12.jpg)
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-
![Page 13: Website Design 15/11/2016 - WordPress.com · 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](https://reader035.vdocument.in/reader035/viewer/2022070805/5f03b8b27e708231d40a7229/html5/thumbnails/13.jpg)
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.
![Page 14: Website Design 15/11/2016 - WordPress.com · 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](https://reader035.vdocument.in/reader035/viewer/2022070805/5f03b8b27e708231d40a7229/html5/thumbnails/14.jpg)
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.
![Page 15: Website Design 15/11/2016 - WordPress.com · 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](https://reader035.vdocument.in/reader035/viewer/2022070805/5f03b8b27e708231d40a7229/html5/thumbnails/15.jpg)
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
![Page 16: Website Design 15/11/2016 - WordPress.com · 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](https://reader035.vdocument.in/reader035/viewer/2022070805/5f03b8b27e708231d40a7229/html5/thumbnails/16.jpg)
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.
![Page 17: Website Design 15/11/2016 - WordPress.com · 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](https://reader035.vdocument.in/reader035/viewer/2022070805/5f03b8b27e708231d40a7229/html5/thumbnails/17.jpg)
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.