Introduction
In this blog entry, I will be describing the main design tools that I have used to produce the design for my website. The tools I have used and I will be describing are:- QSEE Superlite
- Colour Palette
- Fonts
- Wireframe
Another tool I haven't used yet, but will be describing is a Graphic Programme.
QSEE Superlite
QSEE Superlite is an integrated modelling tool, which supports variety of modelling techniques and is mainly used for producing different types of models and diagrams. Using QSEE Superlite you can create and maintain the following models: Network Chart, Structure Chart, Decision Tree and more.
QSEE Superlite may come handy in different situations especially when you need to create a navigation for a website. This tool is very simple and easy to use, which means anyone can produce at least a simple navigation for their website. The software has limited number of tools within itself, however they are more than enough to create an understandable and helpful navigation or model.
It's useful to produce navigation for a website, because in industry, if you are given a job to create a website, you must also create a navigation map. This navigation map will be presented to the client/s or people who have asked you to create the website, so that they get a better understanding of how the website will operate and navigate. This map could also be given to the users of the website, who may have very little knowledge about computers and websites specifically. This way they will know, which button will take them where and the overall link between pages.
Colour Palette
In order to generate the colour palette/scheme, I will be using in my website I decided to use the Adobe Kuler Colour wheel tool. The reason for choosing to use this tool is because of its simplicity and user friendly interface.
Adobe Kuler is an online colour scheme tool. The way it works is as follows. Once you have entered the website, you will be presented with a circle containing many different shades and hues of colours. You can the use and drag the 4 points located inside the circle to find the colour that best suits your needs.
Additionally, as you move each point within the circle, underneath it are different columns corresponding to the different points. They give you a better view and understanding of the colour you have selected, as well as information such as the RGB (Red, Green, Blue) and HEX values you will need when applying the colour in your CSS sheet.
Furthermore, to the side of the colour circle there's a colour rule tab, from which you can select the type of colours you are looking for. For example, if you are looking for colours that contrast each other you will need to select Complementary.
There are also themes created by other people that you can explore and choose from.
Additionally, as you move each point within the circle, underneath it are different columns corresponding to the different points. They give you a better view and understanding of the colour you have selected, as well as information such as the RGB (Red, Green, Blue) and HEX values you will need when applying the colour in your CSS sheet.
Furthermore, to the side of the colour circle there's a colour rule tab, from which you can select the type of colours you are looking for. For example, if you are looking for colours that contrast each other you will need to select Complementary.
There are also themes created by other people that you can explore and choose from.
Fonts
I had access to variety of fonts tools, from which I could choose the fonts I will be using in my website. After viewing number of them including Adobe Edge Web fonts and Google Web Fonts, I've decided to choose two fronts from the Google Web Fonts tool.
Google Web Fonts consists of hundreds of fonts for different purposes such as headings, sub headings, body text and more. You can add any combination of fonts to a collection, which you can then preview one by one either in a short sentence, word or a whole paragraph. This feature will give you an idea of what the text and paragraphs in your website will look like. You are also able to type in your own text (text you may actually want to use in your website) and see exactly what it would look like in the font style you have chosen.
This tool consists of multiple filter options such as thickness and width and preview options such as font size.
Furthermore, if you attempt to use a specific font you will be given the standard (HTML), @import and Javascript code for the font to place in your web development software.
Wireframe
The purpose of wire framing is to give you or the client a rough understanding and idea of what the website will look like, once it's finished.
Wire framing also gives the web developer a design or plan, which they should follow to ensure clients' or their own needs are met. Wire framing software consist of common tools such as text boxes/columns, images, navigation bar and other elements used in a website, which you can place and position according to clients' needs or your own preferences.
The structure and layout of a completed website should be as close as possible to the wireframe design created in the first place.
The wireframe tool I've used for my website is Lumzy. It is a free, online and pretty straightforward tool to use, which consists of most common elements found on a website such as navigation bar, images and text columns.
By simply dragging and placing an element from the tab on the right hand side onto your page, you begin to create the design for your website. You can also import your own images in order to make the design/plan even clearer and more professional.
There are multiple features and functions within this online tool, which allow you to get as real first impression of your website as possible. The simulate feature allows you to preview your website design, as if it actually is completed and working.
You can also save the design/plan at any point by registering for free and you can come back to it to edit or carry on with it.
Wire framing also gives the web developer a design or plan, which they should follow to ensure clients' or their own needs are met. Wire framing software consist of common tools such as text boxes/columns, images, navigation bar and other elements used in a website, which you can place and position according to clients' needs or your own preferences.
The structure and layout of a completed website should be as close as possible to the wireframe design created in the first place.
The wireframe tool I've used for my website is Lumzy. It is a free, online and pretty straightforward tool to use, which consists of most common elements found on a website such as navigation bar, images and text columns.
By simply dragging and placing an element from the tab on the right hand side onto your page, you begin to create the design for your website. You can also import your own images in order to make the design/plan even clearer and more professional.
There are multiple features and functions within this online tool, which allow you to get as real first impression of your website as possible. The simulate feature allows you to preview your website design, as if it actually is completed and working.
You can also save the design/plan at any point by registering for free and you can come back to it to edit or carry on with it.
Graphic Programme
The purpose of a graphic programme is to enable a person to manipulate visual images. The two main types of graphics are raster and vector graphics. These are the graphics seen on websites.
Graphic programme is important when it comes to web development. Any website has images of some sort on it. One type of graphics any website has is a logo. Every logo created must be a vector, which enables scaling with no quality loss.
Since websites are restricted in terms of space, image size is very important and must be considered thoroughly. Image size also impacts the time, it will take individual users to load up a website. Effectively, the more images you have on your website the longer it will take a user to load up your website/webpage.
This is why it's very important to keep the size of all your images to a minimum, so this will impact your web space and their loading time in a positive way.
Most graphic programs have the ability to import or export multiple graphics file formats. This is also very important when it comes to web development. This is because different file formats have different size and browser compatibility issues.
For example, old browsers may struggle or even not be able to load images in PNG format. GIF images on the other hand support transparency, which could be a requirement for a specific website, as you or a client may want to have an image on its own (without white space around it) behind a text.
Graphic programme is important when it comes to web development. Any website has images of some sort on it. One type of graphics any website has is a logo. Every logo created must be a vector, which enables scaling with no quality loss.
Since websites are restricted in terms of space, image size is very important and must be considered thoroughly. Image size also impacts the time, it will take individual users to load up a website. Effectively, the more images you have on your website the longer it will take a user to load up your website/webpage.
This is why it's very important to keep the size of all your images to a minimum, so this will impact your web space and their loading time in a positive way.
Most graphic programs have the ability to import or export multiple graphics file formats. This is also very important when it comes to web development. This is because different file formats have different size and browser compatibility issues.
For example, old browsers may struggle or even not be able to load images in PNG format. GIF images on the other hand support transparency, which could be a requirement for a specific website, as you or a client may want to have an image on its own (without white space around it) behind a text.
