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

I will explain some tools that can be used in the process of creating an interactive website, including a tool to create designs for different pages, and tools to choose fonts and colour themes.



Draw.io is an online diagram software which can be used to create flowcharts, create UML online, design database schema and more. I used draw.io to create a sitemap and the wireframes for the website. The website is very easy to use and has google drive integration which allows you to save the designs and open them later to edit them. It has a drag and drop feature, making designing a site map very easy. The website also has a properties tab on the right where you can resize items, change the colour, adjust the shape and more, this is also very easy to use so creating the wireframes did not take very long. The website also has an export function which I used to export the designs and sitemap into an image which I used to import them into another blog post.

Adobe Color CC is an online tool used to create colour pallets that can be used for online form designs, website designs and more. I then created a colour palette using Adobe Color CC. Adobe Color allowed me to create a colour theme easily. After choosing a base colour, I was able the other colours which were mainly different shades of the base colour. This made sure that the colours will fit well together. When choosing the different colours, I made sure that the colours had good contrast so I the text will be readable. After choosing my palette I saved it and then went back to the wireframes and changed the colours to that of the palette I created.

Google fonts is a website used to find different fonts that can be used in websites, the huge library of fonts can be filtered to only display serif styled fonts for example or only handwriting style ones.The great thing about this website is that it tells you how to implement the font into your own website, it gives you both the html and css code. I used Google fonts to choose my font for my website. I could have used multiple fonts in the website but I decided to only use one so the general theme feels the same between different pages. 

Komodo Edit is a multi language editor used for programming in many languages including html, CSS, PHP and XML. I used the software to create the website. The good thing about this software is that you can see a small preview of the page which allows you to easier see what to change. This made following the wireframes much easier since I didn't have to alt+tab and refresh the page every time I made the smallest change to formatting.

Sources:

• Draw.io - www.draw.io (loading page description)
• Adobe Color CC - https://www.google.co.uk/search?q=adobe+color+cc&oq=adobe+color+cc&aqs=chrome..69i57j0l5.3520j0j7&sourceid=chrome&ie=UTF-8 (website description in google results) & https://color.adobe.com/
• Google fonts - https://fonts.google.com/ & https://fonts.google.com/about 
• Komodo Edit - https://www.activestate.com/komodo-ide/downloads/edit (description) & https://en.wikipedia.org/wiki/Komodo_Edit (supported languages)