Task 1
Task 1
Introduction
In this
assignment I will need to design my website, my website is about guitars and is
targeted towards people who actually play the guitar. I am going to be
explaining who my target audience is and review a very popular guitar website,
GuitarCenter. I will create a site map outlining the pages and content in the
website.
Review
I have
looked at a popular guitar website called GuitarCenter. I noticed that the
website puts their logo at the top left of the page and they have the
navigation bar directly under. The colour of the website is bright (Red, White
and Black). The website also has lots of image after analysing this, I am going
to take a few aspects from this website and use it in mine, for example the
colour pallet and the logo/navigation position.
Description
& Target Audience
I will be
creating a website that is about guitars. The purpose of the website is to
inform people that visit the website about guitarists. The pages will talk
about the skill and genre of music the guitarists. Following the pages, it will
also explain the rig that they use and guitar. Finally, people that visit the
site can access the store to buy signature guitars or goodies.
Target
audience: The website is targeted towards people who are interested in guitars
and want to know more about them. It is also is targeted towards people who
might want to get into guitars. The website can be ideal for collectors as the
store sells signature items.
Page 1
will be the homepage. The home page will talk about what you will see in
the following pages.
Page 2
will be pointing out a few popular guitarists past and present; it will
describe the guitarist and their genre of style.
Page 3
will be the guitars that these guitarists use it will have photos of
various guitars that they use and the name of them.
Page 4
will talk about the guitarist's rigs; this page will have photos and full
description of all the gear in the rig. The page will also tell you when the
rig has been used.
Page 5
will be the history of guitar, for example it will talk about the evolution of
blues and then to rock and how these genres have influenced guitarists such as
the one example in page 2.
Page 6
this is the e-commerce page, this page will contain shirts, these shirts will
contain catchy names that revolve around guitars. The shirts will also contain
other various images that will be put on the shirts. Other merchandise will be
on this page to sell, for example, mugs, hats and signature guitars.
Site Map
(QSEE)
Colour
The first colour is black and I am going to use this colour
as the background colour of the navigation. The second colour is light orange.
I am hoping to use this colour as the image borders. This red colour is going
to be the background colour that surrounds the logo and navigation. This is the
entire content background colour. I have chosen this colour because it makes
text and other colours stand out. This green colour is going to be used as a
backup. This is because I don’t want to use too many colours. I want to keep
the page looking attractive. I have selected the colour rule compound. I have
chosen this rule because it allows me to select a wide range of colours instead
of only given me shades of colours.
Fonts
Oswald - https://www.google.com/fonts/specimen/Oswald
< link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
This font will be used with the navigation.
Montserrat – https://www.google.com/fonts/specimen/Montserrat
< link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
This font will be used with the navigation.
Montserrat – https://www.google.com/fonts/specimen/Montserrat
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'
type='text/css'>
This font
will be used with the content of the site.
Indie Flower - https://www.google.com/fonts/specimen/Indie+Flower
Indie Flower - https://www.google.com/fonts/specimen/Indie+Flower
<link href='https://fonts.googleapis.com/css?family=Bitter'
rel='stylesheet' type='text/css'>
This font is
being used when I type the guitarists name on a page, for example Eric Johnson.
Logo
Page
Design Wireframes
Images
This is
an image that I will be using on the guitarist page, this image will align with
the John Petrucci description
Alt -
johnpetrucci
I will be using this image on the Eric Johnson
guitarist part of the page Guitarists
Alt - ericjohnson
This is an image of Andy Timmons. I am going to be
using this on the guitarist page for the description of Andy Timmons
Alt – andytimmons
I am going to be using this image for the
guitars page, Eric Johnson is known for using this guitar
Alt – ericjohnsonguitar
I will
be using this image of a guitar. John Petrucci uses this most of the time
Alt – johnpetrucciguitar
This is Andy Timmons iconic guitar; I will be
using this image as he has used this in many live performances
Alt – andytimmonsguitar
http://www.gak.co.uk/en/ibanez-at100cl-andy-timmons-signature/19078?gclid=COS6mLjqtcsCFUQcGwodoDwGZw
I am going to be using this image of John Petrucci’s
set up for live performances or rig. This image will feature on the Rigs &
Setup page.
Alt – johnpetruccirig
I am going to be using this image of Eric
Johnsons rig for live performances. This image will be shown on the Rigs & Setup
page.
Alt - ericjohnsonrig
This is an image of Andy Timmons standing next to
one of his pedal boards that he used during a live performance. I am going to
use this image on the Rigs & Setup page.
Alt – andtimmonsrig
I am going to be using this image on the history
page. This image shows the evolution of electric guitar since 1931.
Alt – guitarevo
This is the shirt that I will put on the shop
page. The price will be set at £10.00
Alt -
guitashirtshop
This is an image of the Ibanez RG2550z. I am
going to set the price for this at £900.
Alt -
ibanezshop
Interactivity
I plan to
make the interactivity of the webpage very simple. In the home page I will have
an image box that is large; the interactivity part is when the user clicks on
either side of the image to move to another image. Clicking to the right of the
image will show the next image, clicking left will show the previous.
Other
interactive aspects of the site is the shop, the shop allows the user to select
the quantity of an item and allows they to buy it. The customer can select
their preferred payment method, i.e. PayPal, Debit Card.
