M2 – Explain the tools and techniques used in the creation of an interactive website

M2 – Explain the tools and techniques used in the creation of an interactive website

Introduction
Within this documents I will be highlighting the tools and techniques one can use to be able to create an interactive website. There are various tools and techniques that can be used in order to manipulate a fully functioning interactive website; these will all be stated below with examples of how they can be used and how these tools and techniques can be used in a variety of different ways. The following tools that I will be mainly describing within this document are the QSEE Superlite, Colour Palette, Fonts, Wireframe, and Graphic Programme.

QSEE Superlite

This software is technical software which gives individuals the ability to understand the entire process of a fully functioning website. It is a type of flow diagram that outlines the layout of how a website actually works. When developing the creation of the website the QSEE Superlite allowed me to be able to plan efficiently how the website would actually look like before actually implementing the website. This particular software also helped with the creation of the sitemap, as this showed me the way each page would link to another page which was a main priority within my website as the navigation was the first thing that was needed to be implemented during the creation of my website.. For example, from the QSEE Superlite software I was able to create all the necessary links to each webpage that I was going to be creating which gave me a very detailed insight of how the entire website would look from the home page to the purchase page. (An example of the flow diagram created in QSEE Superlite is below).

 

 

 

 

 

 

 

 

 

Colour Palette

When implementing my website, I had to use software that generalised the colour of my website for me. There were several of colour palette software to choose from but I decided to go with ‘Coolors’ as this was very easy to use and to understand. This software gave me the ability to choose from a range of different colours for me to use during the creation of my website. This particular software was very good as it had a range of different palettes in each type of colour which other software did not have. When using this particular software it was very easy to choose a colour that suited my website as I was able to use my mouse and select the colour that I wanted. Another tool that allowed this software to be much easier than other software was that I could copy the code of the colour that I had chosen and paste it into my coding which proved the easiness of the software.

Fonts

When creating the website, I had to ensure that I had planned the different types of fonts that I will be using. The font on a website is very important as it shows the style of the website, and it is very vital to have a type of font that can be read and understood by a variety of different people. You also need font that will be able to stand out on a variety of different devices, from computer systems to smartphones, to tablets. When implementing my fonts, I used the Google Web Fonts which gave me the ability to see how the font would look on my webpage by simply copying a piece of coding from both the HTML and CSS of the font and then inputting it into my website. This was very easy as I could also change the sizes of the font that was selected. To be able to get a better range of the different types of fonts that were available, I also used the Adobe Edge Web Fonts which is very similar to the other font selection tool. However, the Adobe Edge Web Fonts was much easier than the other software as I was able to easily drag and drop the font into my coding without any difficulties.

Wireframe

Wireframe is very good for helping me plan the creation of my website; there are several different tools and techniques that can be used on this particular software. This software basically allowed me to create each webpage that was going to be in my website which provided me with a better understanding of how the entire website was going to look like. The wireframe software had different templates that I could select from, which allowed the use of the software to be very easy. The tools that were on Wireframe were very straightforward which also allowed me to understand the processes of a website. I was able to drag and drop different types of shapes onto the page which is basically the implementation of my website just without any CSS or HTML. I could also include images onto the page which I found very useful, however I did not need to use many of the tools and techniques on Cacoo simply because I only wanted to create a basic format and representation of how my website would look like, which I believe I completed through the use of this software.

 

Graphic Programme When implementing my website, there were a variety of different programs that were used during this stage. One of the main programs/software that was used is the Adobe Photoshop CS6, this program was used to implement my logo which was created for my website. I firstly hand drew my logo and then imported it into the program and then used all the different tools and techniques to be able to implement a very good logo. I also ensured that I used another program which was Microsoft Paint to be able to change the image sizes of the images that were put into my website.