Proposal

In this unit I will be creating a website with bootstrap rules, these rules are
used to change a websites appearance from the perspective of the device
being used to view the website off of. An example of this is a phones view
of a website will be thin and long as the aspect resolution of the website
thins out the site allowing it to fit on screen, a computer/monitors view on
the same website would be different as there is enough room on screen to
fit all of the content on, the web page will also be a lot shorter. (Example
below)
(Phone view)

(Computer/monitor view)

(Website used above: http://plazaclassic.com/.)

The website I am making will follow standard bootstrap rules, it will have a
title and a main central image that is a slideshow of different images,
these will either be images of products or event details (Examples below)
This is a good example of the above as
the main central image is also the
header, also it has an animation cycle
where it moves, this is similar to
having different images appear
instead of one normal image.

With this website (http://xofestival.nl/en/home) the bootstrap animation

stays on the mobile version of the website instead of changing into mainly
text with drop down boxes.

I am planning to make a gothic style website selling

gothic products, therefore I will use a darker colour
scheme, darker style fonts and gothic styled images, e.g.
grainy images to add effect etc. (Examples below)
Most of the images
however will have
colour, the main central
image on the front page
will probably be in black
and white.

Because I am making the colour scheme quite low I will be using shades of
black, red and white, example shades below:
These are two colour
mixer tools online, I will
be using some of the
colours to the left on my
website, the site I have
used is below the images
in brackets. The
hexadecimal numbers I
will use are as followed:
#010101, #911D1D,
#FFFFFF and #6B0000. I
may add more shades of red to this list over time as currently there are
only a couple. In the website my idea is that the background can be ether
a paler red or white so that the black text can stand out. Light red would
be a better background colour as it will fil up some of the white space, or I
will try to find a background that fades from red to white to give a good

(http://paletton.com/#uid
=1000u0k00080Apb0Apb
8nhW8nhW) Effect.
(The hyperlink above is a
link to the website I made
the screen shots above
on).
The website above also
has different effects
(Screen shot below)
These all do different things to
the colour appearances, for
example the colour blind
effects will lose colour/wont
show any colour other than
black and white.

When making the website I will go back to this site and create different
shades of red, black and white to use.
I will also lay the products out in grids, this is so that when it is viewed on
mobile it still looks alright as the grid will shrink down to a list of products.
(23/2/16) aim: write about the product, make some decisions on the
aspects of the website like: fonts I am going to use, backgrounds I will use,
products I will sell etc. Also to update the source document if I use any
external resources and update the ILP at the end of the lesson.
The grid is a guide to the layout of the website, most bootstrap websites
look
similar as they all use the top boxes
for navigation,
Middle for the image (often called jumbotron
as it takes up a lot of the page and can be a
slideshow/can be animated.

The bottom row can be used for more content6 (if the page is longer
scrolling down the page) or it can just be a simple home page with contact
information at the bottom and all of the content being hyperlinked at the
top at the navigations bar.

The top bar is cropped down by changing out all the individual
buttons/hyperlinks for a list icon that when clicked shows a drop down

navigations bar with all of the hyperlinks.

The website I want to make will not have much colour, I am going to
create a darker website with a gothic theme, to achieve this in the colour
scheme I will need to use mostly black, white and red.

This is the theme I will try and get,

instead of yellow I will use red, I
will also have illustrations in my
website as I will need them to
advertise the products I am
selling.
To find the right font I will use
Windows Word 2016, this is
because I am there is a drop down
list of different fonts:

These are just a few examples of the different

fonts, there are too many to screen shot them all
as it would waste space. Below I will screen
shot/write down the names of the ones I am
interested in.
Brush Script MT and
Brush Script Std.
Forte would be a
good
button text and ether
Brush Script MT or
Brush Script would do
as
paragraph text, the headers can be written in
Goudy Stout as it is
a bigger
bolder text than all
of the
others and stands
out
well:

The layout of the website will be the same as the generic bootstrap
websites as it is a good layout to use because its simple, the layout will
have the navigations bar at the top, below will be the jumbotron which
can include images of products, then below that can be some content,
then at the bottom of all of the pages there will be contact information.
There are two elements on the home screen that will appear in all of the
pages, the navigations bar and the contact information at the bottom.
An idea would be to sell gothic artwork, that way I dont need much colour
on the site as the images/products would be drawing in the most
attention, also I would have a lot of good images to use on the jumbotron
e.g. expensive/best art goes on the jumbotron to get the most
advertisement.
https://www.google.co.uk/search?
hl=en&site=imghp&tbm=isch&source=hp&biw=851&bih=494&q=gothic
+art&oq=gothic+art&gs_l=img.3..0l10.3538.6443.0.7203.10.9.0.1.1.0.88.
451.9.9.0....0...1ac.1.64.img..0.10.452.ryUhm9KVu8g
By searching gothic art on google I found a lot of images, I could use some
of these on the website, to refine the search further I will search key words
like canvas or painting etc. The prices can be copied from similar paintings

online as they would probably be sold for similar prices. (Below is a

detailed idea of the website I have so far)
Navigations bar
Jumbotron (Slideshow of images
with button navigation ether side.

Contact information

I could use an image as the background,

way I could include red into the background,
this could be by adding a patterned into the
site, the pattern would have to be simple
and not to eye catching as it could draw
attention away from the products/images
which are the main elements of the website.

Examples below:
This would be good, however it is too small and would
pixelate, however to avoid and copyright5s I could use
Photoshop to
edit it slightly before use.

(Image to the right)

meant above, most
quite
busy
and
with the images on
is because they are
will only need a
pattern
for
the
way I can get the
colours in and have
connote the theme
website.

This is what I
of these are
would clash
the site, this
too busy. I
simple
website, that
three
main
them
all
of
the

(Image to the right) This image is great

as it is a simple pattern, it would go
around the navigation bar and contact
information mostly. It also adds red t6o
the colour scheme but doesnt interfere
with the images on the site.
I am going to use a simple name
Gothic art work works well as it its
simple and informs, this is because
strange names wouldnt make much sense, by keeping a simple name it is
easy to see what the website is about.

(Image to the right) This is a good

representation of what I am going to
make my website look like, Most of the
fonts I spoke about above are included,
the only two that arent included are
Forte as there arent any paragraphs on
the main page, only hyperlinks to the
next pages, contact details, jumbotron
and a background. The other font style
that wasnt used was the Brush Script
MT as it was a decision between MT and
Std and Std looked better so MT will not
be used in this website. (Brush script Std is used in the contact details,
this will also be used in some of the paragraphing prices and brief
descriptions etc.
Learnt: I learnt more about what I want my website to look like and I chose
a few elements to use in the website.
Legal considerations:
There are a set of laws to follow when creating a website, these are things
like font sizes and subtitled videos, these are made to ensure everyone
can access and read the content on the website.
https://www.w3.org/WAI/intro/wcag. The hyperlink to the right shows the
laws/rules when making a website, it basically states that the website
should be accessible to everyone and tell you everything it is doing e.g. if
it uses the details you enter to: email you, give information to other
companies etc. It also says the website needs to inform people if it uses
cookies by ether having a heading with the option to agree/not agree to
cookies or a pop up that only lets you enter the website if you accept
cookies. There are 12 guidelines that are organized under 4 principles:
perceivable, operable, understandable, and robust. Under each of the
guidelines there are a list of standards that need to be net by the website,
the first guide line is compulsory, the first three are expected if the first
three guidelines arent met the company can be sued.
Other rules include non-discrimination, meaning the website isnt allowed
to discriminate anyone based on: race, gender, religion etc. The company
can be sued if there is any discriminating content on the website.
To avoid being sued when making a website it just has to be easily
accessible all videos subtitles, bootstrap would be a good idea as it
scales the website so text is easy to read if not bootstrap make sure text

is very easy to read large text or able to zoom in on website etc. It also
cannot discriminate against anyone.
When collecting data, the website needs to inform people on how it will
use this date e.g. email, name, address, phone number, personal data etc.
This is so people know why they are giving in personal data e.g. email to
email people about new deals and offers etc.
All of the guidelines/rules are to ensure everyone has the ability to access
websites, not have their data stolen/taken without permission and to
ensure no one is discriminated against online.
A good example of these guidelines being used in YouTube as it has easy
read text, clear images, clear videos, optional subtitles for videos and the
ability to flag a video meaning if three people flag a video with a reason
it will be assessed by the company and if it has discriminated people it will
be taken down, also if a YouTuber get so many videos flagged the channel
gets shut down as it keeps posting discrimination.
These are a few options on YouTube there is also a
flag icon (Image below) that is under the video
panel:

Before creating the website, I will go over all of the guidelines and try and
cover as many as I can, there are 12 in total, most websites cover the
minimum first three, to keep the website ethical I will try and cover as
many as I can.