M2 Unit 28 - Describe the main design tools used

Introduction

When designing and creating website there are various tools that are used to aid the planning, design and the actual developing stage of the website. When designing and developing my website, I have used a variety of tools in order to ensure that the website is successful. In this report I will be describing the tools that I have used, speaking about how I have used it and the purpose of the tool. Some of the main design tools I have utilized are colour palette, google fonts, etc.

QSEE Superlite

QSEE superlite is simply software which is equipped with sub-tools within the application to help in the analysis and design of systems. The sub-tools that are available with the software are beneficial to a lot of fields as it has several models that can be used as tools in the several fields. The sub-tools deliver a range of support techniques like entity-relationship models, dataflow diagrams, decision tree and the Unified Modelling Language (UML). In the design stage of my website I utilised one of the support techniques available, I used the decision tree support technique. The reason I have used this was to aid in the creation of the site map for the website. Creating and having a site map is essential and was crucial in the planning stages as this was a map that was followed when creating the navigation as the purpose of the site map is to know what the Webpages will be called and how the navigation through the site will be like. Using this to make the site map made it easy to understand due to the layout of the decision tree.

Colour Palette

A colour palette is another tool that I used when creating the website. There are a variety of colour palettes available but the one I used is called "Coolors". I have used a colour palette (Coolors) for the purpose of putting together a colour scheme that I will be using within the website. The colour palette used was beneficial to me as I had to save the colour scheme I selected and this simply allows the user to not only creates but to also save the colour scheme selected. When creating a website it is essential that the developer has a scheme to follow throughout the website to give it a professional look and the purpose of me using Coolors as a tool is to help in selecting the colour scheme I will be using throughout the website. The tool Coolors gives of the actual CSS reference/code of the colour which means that when it is included in the CSS I will get the exact colour as chosen without having to stress to find the colour code or name. The layout of the colour palette I used is efficient as the colours are placed side by side meaning that I could see the colour contrast of the colours that I was selecting to be part of the scheme.

 

Fonts

Fonts are a huge part of a website, especially with websites that have description and general information. The tool that was used for the selection of the font that I will be using in certain parts of the website was Google Web Fonts. The fonts available in the Google Web Fonts are open source fonts which means that they can be used free of charge. Knowing that they are open source fonts is one of the reasons why I have used Google Web Font as a tool, because I do not need permission nor do I need to pay to use the fonts available on the platform. Also the fact that there is a section when selecting the fonts that allow you to preview the font and also the size and weight of the font. The selling point that made me use this tool is the fact that it provides the HTML/CSS coding that is required when trying to format the code.

Wireframe

Wireframe is the basic design of the website. Wireframe is a model that is created in order to demonstrate how the website and individual webpages will look like. This simply acts like a guide to the developer, making the developer aware of how they need to format a page to look like. I have created and used a wireframe which was a guide for me when I was developing the website. The wireframe tool that I used is called Cacoo and this helped in the creation of a visual layout of the website. I have used Cacoo in order to let me have a design and also to let me know where content should be placed and images on the webpage when developing the website, this also played a huge part in the structure of the finished website as I could tell where and how I wanted the navigation bare to be placed and where the images and content should be. The tool Cacoo has various uses like it can be used in the creation of wireframes, network chart, diagram etc. This tool also has templates that can be used to give an idea for a website design.

Graphic Programme

Graphics in a website is essential as it makes the website more appealing. In the creation of my website I have used a graphic programme to create the logo for the website, the programme was Adobe Illustrator. This software is a vector based software which is my major reason for using this tool to design my graphic for the website as the logo had to be a vector. The logo will have to be scaled which is an advantage of having the logo as a vector which means it can be scaled without the quality of the image reducing. Another graphic programme that was used was Adobe Photoshop and the reason I used this was to create the design for the hoodies that will be sold on the website.

Conclusion

There are several tools needed when attempting to design and create a successful website and above are some of the essentials. I have used all of these tools in order to ensure that the success rate of my website is high. As seen above, some of the tools are needed if not the website will not be of a professional manner. An example will be wireframe, it is essential that a wireframe is created as then there will be somewhat of a design to be followed by the developer when creating the website. As a web designer it is important that you are aware of all the tools that are needed to plan and created a successful design.