Tools used for Web Design (A2 Task 5)

Introduction:

In this blog post I will be describing and explaining the different tools used for the design of my web page, examples and presentations of these tools will also be shown. I will be first explaining the usage of QSEE Superlite and how it takes advantage of hierarchy charts to help design a website’s most basic layout. The colour palette that my website will use will also be presented using a programme called Adobe Colour CC, will also explain the reasoning behind the choice of colour.

Within this post the choice of font will also be explained and how I will be using the font I have chosen, in this case I will be using Google fonts for my website. Wireframes shall also be shown and explained how they help with web design as well as the programme that I used to create my Wireframes. Lastly I will also explain why it would be useful for web design to have a graphic programme to use e.g: Paint.NET.

QSEE Superlite:

QSEE Superlite is an old but very useful programme; it hasn’t been updated in a long time because it doesn’t need to be. As it is still compatible with current operating systems it’s remained the same for many years, it’s mainly used by programmers as it allows you to create a different range of charts easily. The main chart that I am focusing on is the hierarchy chart, and is great for laying out the website in the simplest format. This allows you to plan how your website will work and which pages are linked to each other.

Colour Palette:

The colour palette was an easy choice as I knew my target audience and subject matter, I decided to use a complementary colour range of yellows and blues. To help me with my decision I used a programme called Adobe Color’s Colour wheel which allows you to select one colour and the other colours are automated. This is dependant on which type of colour theme you have decided on though.

There will also be a beige sort of colour to be used as the main background as too many colours could make it seem too childish or too jarring to look at. I chose complementary colours because it will make the web page seem well designed and professional and looking at a web page that has complementary colours is a lot more relaxing and nicer to look at. The hex codes for the colours have also been displayed at the bottom of each colour, this will be used in the code for the website and will allow me to replicate this colour theme.

I believe I might use the dark blue as the text colour against a very bright background insuring that the text will stand out and will not be over ridden by a stronger colour. Later down the line I might change one of the colours to black to compensate for the text colour, this would be done to make sure people do not get confused when hyper-links are shown.

Fonts:

Fonts is a rather easy one as there is already a nice and quick way to get fonts that will definitely be viewable by everyone. There are two cloud fonts that you can use, one by Adobe and one by Google, for this website I will be using Google as I am more used to its interface and I like the vast library of fonts it contains. Google fonts allows you to select a certain font and then put a piece of code into your website to use the font that is retrieved directly from Google’s servers.

The reason this exists is because designers can run into problems when some fonts are not compatible with browsers. And since the user is downloading it from another source on the internet it will always show no matter what type of browser the user is using.

It’s important to note that depending on what settings are chosen for your font package it will increase the page load time of the website. Since its downloading data from Google’s servers before the user goes into the website, this is the only disadvantage to using cloud fonts for a replacement of your own fonts on your website. I chose Open Sans since it would fit in with the fit and feel of the website, I would also make sure to include a bold version of the font to be used for headings and sub-headings.  

Wireframes and Mockflow:

This was the key part of the web design process as it was the visual layout of the whole website and there is one wireframe representing each page of the website. The programme that I decided to use was MockFlow as it is easy to use and you’re able to log in with your Google account which increases the ease of use. This was done to get a basic idea of the visual design of the webpage before I start creating it, this is so that I know exactly what sort of website I want.

Mockflow:

First I want to explain the programme a little bit before I present the wireframes that will be used to represent the website. Mockflow is an easy to use tool that can be used to create wireframes, I have used this mainly because it can connect with a google account and I’m used to its interface. It does have a premium alternative if you want to pay to get more features and functions, but for now the free possibilities are enough for me.

This programme does have a learning curve as most wireframe programmes do, however once you get over it you’ll find the programme to be very intuitive.

Wireframes:

I have created a number of wireframes that represent each page that will be featured within the entire website. There are a total of five pages including the home page that have all been drawn in a wireframe using Mockflow, I will begin to list these wireframes and explain their design. Note that some things may change when the design gets implemented.

Page 1 “Home”:

As you can see here this is the home page of my website and is also the first webpage that will be seen by most users when they try to visit the website. I gave this a basic layout that allowed for an easy to read introduction and then two sections to the right for more information about recent events and/or more information about the website. Since we are looking at the whole website you may have noticed the top header that includes a space for the logo that will be included and the navigation menu. These two aspects and the footer will remain the same for the entire website, thought the navigation will show what webpage you are currently on. The sub-heading of each page name will also be placed under the main header to make sure most people can read and understand where they are.

Page 2 “Why a PC”:

This webpage will be explaining the reasoning behind the website’s intention which is to convince console gamers interested in PC gaming to switch. This is a basic format with two rows with a total of 3 possible images to be displayed to the user. There will also be a heading in the bottom row to notify the user as to what it is if they choose to continue reading beyond the first row.

Page 3 “Where to Begin”:

On this page a three-column layout will be used as a way to make it seem like a leaflet that is ordering the different sub-sections in an understandable order. Since the reader will be following this as a sort of tutorial as to find out where they should begin if they want to consider switching to PC gaming. Up to a total of three images may be used here, but most likely not, I do not want it using too much space or memory so it’s dependant on how much is being written.

Page 4 “The Store”:

This page is probably the most important of all five webpages as this will contain the main part of the JavaScript that I will be creating. This webpage will be used to display different products that the user should consider purchasing, there will be an easy to use interface that will allow the user to scroll between each individual profile of each item and can identify them via their corresponding picture. The box below this UI will provide all the information including the item name, price and type, a small description and thumbnail will be included.

Page 5 “Construction”:

This page will be the concluding point of the website and will let the user decide on what to do now that they have obtained all this information. This is also another important webpage as it will be used to make sure that the user is persuaded to switch to PC gaming over console gaming. Since this is the finishing point and the user will then leave. However this webpage will probably contain the most information as I am planning to create the whole tutorial of building a PC here, there will most likely be more than two rows and you will be able to scroll through these different sections.

Graphic Programme:

The graphic programme that I will be using mainly will be Adobe Illustrator, the reason behind using this programme is to create an eye-catching logo to attract the viewer and make the website seem professional. Illustrator is a vector-editing image software that is normally used for creating logos and simplistic art. So this is the main reason I chose to use it as I required a good quality and original logo.

The programme itself is a bit complicated and has a bit of a learning curve, but once you get over it you won’t want to use any other programme ever again. There are a number of tools and functions to use within the programme and they provide enough depth and functionality to be useful. The logo was created to represent angelic brightness and sleek practicality into one image. This logo allows itself to not bash consoles to fiercely and merely defends the concept of gaming on desktop PCs. The logo was also developed with the complementary colour them in mind, and matches with the black and yellow that may be on the website’s colour theme.