Unit 20 Assignment 2 Task 5

Introduction

I am going to be describing the tools that I have used to create the main designs. The tools that I have used for this are: QSEE Superlite, Colour Palette(Adobe Kuler), Google Fonts, Wireframe(Cacoo) and Adobe Illustrator. I have decided to use these tools because I found that they are the easiest to use and will allow me to create the best looking work. 

QSEE Superlite

The pupose of this software is to allow people to design and model software type systems, for example diagrams such as Data Flow Diagrams. This software can help developers create flow diagrams for their website, such as the navigation. The software was useful for creating the navigation for my website because I was able to use the hierarchy template. I was able to layout the order in which the pages will be. I could then begin to describe what will be in each page.

Colour Palette

The tool Adobe Kuler is an online tool that can be used to create a colour scheme. Without using this tool, it would be harder to find colours that can match without looking off. The tool allows you to choose a colour rule, for example "Shades". It is possible to choose a colour and the tool will give you in return the various shades of that colour. The tool is a good way to get started creating a good colour house style.

At the bottom of each square that contains the colour, there is a text box called "Hex:". Following the text box you can find the the colour on the square; you are then able to use this Hex to change the colour in your HTML or CSS.

Fonts

I used the free online tool "Google Fonts". This tool allows you to obtain many different fonts for free and implement them into your code. For example, I implemented the font "Oswald" using the following code: <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>. To actually use the font, I inserted this line into my stylesheet: font-family: Oswald. Google Fonts is free to use and comes with many different fonts to use.

Wireframe

The purpose of wireframing is to allow the developer to create designs on how the site will look or software. Without wireframes, the developer would become lost and possible begin to edit other aspects of the site or software and potentially ruining it. For example, when creating a website, it is important to have a house style designed via the wireframe. By having wireframes, it saves a lot of time as you will know what needs to be created next.

Graphic Software

The purpose of graphic software in web design is to allow the developer to create an image that suits their needs. For example, if the developer created a website about racing games, and found an image of a car. The developer may want to edit the image to fit the house style of the website (copyright free), for example the website may be dark and gritty, however the image that was found contains bright colours and backgrounds. The software that I used when creating the graphic for my website was Adobe Illustrator.  I used this software because it came with many different tools that I can use to edit my graphic. The program is vector based, this means that I can scale any of the shapes and not lose any quality.