Unit 28 P4 - Website Design
In this post I will be talking about what my website is about.
My website is called FastBikes and is about selling different types of motorcycles, protective gear and accessories all over the UK. These motorcycles can be bought by using a finance options which allows people to pay in monthly installments or have the easier option by paying all upfront. The business itself runs completely online; the motorcycles are kept in garages and shipped of when bought using a third party courier. By not having a physical store where customers can come in and view the bikes we make huge savings and we pass these savings straight onto the customer ensuring very low prices!
Who it's for
My website is for people who have just passed their test or are long term Motorcycle enthusiast who want a new reliable motorcycle from a website that they can trust. The motorcycle that are for sale would suit anyone from a 17 year old beginner who has just started riding all the way up to 40 year old professional experienced riders. Our audience is mostly target at people who enjoy riding really fast bikes of its kind.
The structure of my website is as follows:
Navigation
Page design & content:
Homepage
The homepage has my massive logo as a header on the top of the website and right underneath it is my navigation bar which links to four other pages. The page content is just an introductions explaining what kind of bikes we sell, and to the left of the text there are two pictures of one of the bikes that we sell.
Motorcycles
The range of Motorcycles I will sell has four main areas which is as follows:
1: Yamaha YZF R125
2: Yamaha XJ6
3: Suzuki GSXR600
4: Kawasaki Ninja 250
In this page i showcase the motorcycles that are on sale; each are equally sized pictures I have split in 4 different locations on my website that make up my links which makes it very easy to navigate to.
Extras
The range of Extras I will be selling is as follows:
1: Helmets
2: Jacket & Gloves
3: Trousers & Shoes
4: Bike Accessories
Again I have four different pictures to clearly display what's on sale; each which have links. This page only sells accessories and that's what's displayed on this page.
Delivery
The range of Delivery I will provide is as follows:
1: International Delivery
2: UK & Mainland
This web page contains a phone number and e-mail for users who are interested in purchasing a motorcycle but would like to discuss delivery before hand. It doesn't have external links as it only gives users information on national and international delivery services.
About us
About us page will contain the following:
1: Who we are and what we do
2: Customer service phone number and e-mail
This webpage doesn't contain any external links as it only provides basic information of what my website is about (selling motorcycle, providing excellent delivery services) this is so that any potential customers will be satisfied not only after their purchase but also before they even buy one.
Unit 28 M2: Tools and Techniques used to create my website
Within this section I will talk about all of the tools and techniques that I have used to create my website and explain how I implemented each.
HTML
Hypertext Mark-up Language otherwise known as HTML is the
language in which web pages are written in. HTML is made up of elements called
tags that build the contents of a web page. It is designed to alter how text and
images are presented in web browsers.
These tags describe the contents of the web page; there
are various programs out there today that have an easy to use UI which pre-insert
these tags as you type them whilst having a split screen preview to make it
even easier to create websites. HTML is a fairly easy code to be learnt, HTML
can be read by people and not just computers for example: most people could
guess what the <img> tag does.
In my website I have used HTML to position my text and
images as well as my navigation bar and any other buttons. For example my
navigation is simply a list which has the following code:
<ul>
<li><a href="index.html">Home</a></li>
<li><a
href="bikes.html">Bikes</a></li>
<li><a
href="extras.html">Extras</a></li>
<li><a
href="delivery.html">Delivery</a></li>
<li><a
href="aboutus.html">About us</a></li>
</ul>
This would simply create a list with bullet points on my
web page; that’s where CSS comes in. To be able to turn this into a navigation,
I used CSS to alter the looks of the list.
CSS
Cascading Style Sheets otherwise known as CSS enables to
change the style of web pages. CSS is the technical specifications for a layout.
Every web page we look at has been altered by at least one style sheet. CSS is
created to make it easier for web developers to change the way websites look by
changing small factors such as font, padding and colors. Continuing from my previous example; If I have
a list of a items which are presented in bullets points which I want to remove
to make it only a list I would add the following code:
#navigation ul li
{
list-style-type:none;
display:inline;
}
This would remove all styles that are pre-attached when using <ul> <li> tags, leaving us with just a list of items which we then turn into navigation bars using more CSS.
Another example is my roll over buttons. In my website when a user rolls over one of my navigation buttons the button turns from orange to dark red. This makes it much easier for users to realize that it's a link. The code that is attached to this is in my style.css sheet which is as follows:
#navigation ul li a:hover
{
background:#930202;
text-decoration:underline;
}
What this does is that it changes the background color and underlines the text when the mouse is hovering over the button. Designers can also add further developments to this such as animation and other colors when clicking the buttons.
Komodo Edit
Komodo Edit is a free multi-language editor that has a sleek
interface which enables users to code in many web languages such as Python,
PHP, Ruby, Perl, HTML, CSS and JavaScript. The two that I have mainly
used are HTML and CSS. Komodo Edit is widely compatible with many different
operating systems including Windows, Linux and Macintosh. I have used Komodo
Edit to create my entire website using HTML and CSS. Komodo Edit assisted me in
doing so by allowing me to have a split screen between my code and a preview of
my website. This helped me allot as I could easily change code and see the
changes immediately. Komodo Edit also helped me insert code; it does this by
guessing what tag I’m about to write.
For example If I am writing <a hr… it will suggest
<a href =” so then I can start
typing the link to whatever it is I am linking straight away. Komodo Edit also
set me up with the basic templates that it provides. When I started of making
my websites I use a HTML 5 with CSS template which was very useful as it
already had the first few bits of code to set me up creating my website.
Here is a picture of how Komodo Edit looks like:
Gliffy (Wireframe tool)
Gliffy is a web-based application which enabled me to
create my website wireframes. It has a drag and drop user interface with the
ability to add boxes, buttons, and lines from the tool shape library to
anywhere on the page. You can also easily add mock-up text to create a clear
image of where things should be going without having to type it up. Gliffy
allowed me to have access to a massive library of shapes; I could even import my
own images such as logos and backgrounds. However I just used the library of
shapes to create the wireframe for my website as there was no need to add image to a wireframe of my website.
Photoshop (Graphics program)
Photoshop is a high end image editing / creation software. Because I was already skilled with using Photoshop I decided to use it. I used Photoshop to create various parts of my website including: My website design, my logos, re-sizing and cropping pictures. Photoshop has a whole variety of tools that enabled me to create boxes, shapes, customer colors, highlights, glows and so forth. One of the things that I did in Photoshop is that I removed the background of my motorcycle, which i then added to the massive logo of my website to give it a very clean look. I made my website design simply by using boxes and lines which I then colored accordingly.
Lorem Ipsum / lorem pixel
Lorem Ipsum is a group of text that people commonly use
as filler text, or dummy text. It’s
basically a bunch of text that doesn't make sense because it’s only used to
show what a design layout will look like when the actual text has been
inserted. Lorem Ipsum isn't really a program or software, it’s just a website
containing different samples of Lorem Ipsum text and users can copy as much or
as little as they want: short lists, long paragraphs etc.
Lorem Pixel is very similar; instead of text users can
simply generate pictures instead. Lorem Pixel is generated by using a URL
within the source of an image. To be able to get exact sizes designers simply
change the URL link which ends with /100/100 to whatever their dimensions are.
E.g. 500 pixels by 400 pixels. Lorem Pixel will simply generate a random
picture each time the page is refreshed or revisited. This make it easy to see
how picture will look like without actually having to manually get an image and
place it in your documents to be able to preview how it looks like.
References:
Lorem Pixel, 12/03/2013, http://bit.ly/pkNkXG
What is Photoshop, 12/03/2013, http://bit.ly/nmW38s
Gliffy, 12/03/2013, http://bit.ly/JfKbeo
Active state Komodo, 12/03/2013, http://bit.ly/10SZlW
Implementing CSS, 12/03/2013, http://bit.ly/Mps5rk
What is HTML, 12/03/2013, http://bit.ly/XbcRuF
