In this assignment, I will be discussing the different tools and techniques I used to produce my website. I used many different tools in every step of the website production including the planning stage where I designed the website using tools and techniques. The tools helped me to have a better understanding about the audience of my website and how it should be laid out. I will be describing the following tools:
- Draw.io
- Adobe color pallet
- Google fonts
I will also describe the following techniques:
- Wire-frame
- Graphic program
Draw.io
One of the tools I used for my website designing is draw.io. This tool is a free online diagram editor which is built on cloud services like One Drive and Google Drive where users can conveniently store their files created on the website. With the cloud services rather than being a native one, using trusted services like Google Drive makes it more secure for the users to store their files. This websites allows the users to create flowcharts, data flow diagrams and all kinds of useful diagrams. Some of the diagrams have presets that the users can drag and drop entities onto the main screen or sheet which then the user can further edit to precisely fit thee diagrams that they would like to create.
One of the tools I used for my website designing is draw.io. This tool is a free online diagram editor which is built on cloud services like One Drive and Google Drive where users can conveniently store their files created on the website. With the cloud services rather than being a native one, using trusted services like Google Drive makes it more secure for the users to store their files. This websites allows the users to create flowcharts, data flow diagrams and all kinds of useful diagrams. Some of the diagrams have presets that the users can drag and drop entities onto the main screen or sheet which then the user can further edit to precisely fit thee diagrams that they would like to create.
It allowed me to create a basic design of my website, giving me a wider understanding about the different elements in my website such as where the different pictures will go and what should be the general layout of the website. Using draw.io, I created 5 webpages for my website which allowed me to design navigation buttons accordingly. I decided to add a navigation bar at the top of the website which would be visible on every page of the website for the ease of the users to navigate through the website.
Adobe color pallet
The second I tool used was a color pallet by Adobe. This is an online tool which gives the user a full RGB color pallet out of which they can choose five different color which suits best for their needs. In my case, I used the color pallet to choose a color scheme for my website. I decided to have a much darker tone than usual, so instead of going with different shades of grey, I went for dark blue being my color scheme. I chose 4 different shades of blue, each for different elements in my website and the fifth color was white which was the text color, as light text goes well with a darker background and makes it easier for the user to read the text.
Google fonts
Google fonts is an interactive online directory of different fonts that Google provides its users for free. These fonts are often used by developers such as web developers to implement these provided fonts onto their projects which would give them a much wider amounts of fonts to choose from compared to the handful provided by Microsoft or Apple in their respective operating systems. My website required a uniform font in order to make the website look clean and organised. I chose one of the fonts from Google fonts to use on my website called Bitter which was a Serif font. Google fonts is a free service provided by Google which gives everyone access to fonts by Google. I used this service because it has a wide variety of fonts, compared to the Microsoft's built in fonts which are very limited and widely used. I chose Google fonts because it gave me access to filter fonts out according to my will such as it gave me an option to choose what type of fonts I would like to see such as Serif or Sans Serif which are the two main types of fonts available. Google service was also very detailed and gave me proper instructions about how to implement it into my website.
Wire-frame (Draw.io)
I created my wire-frame on Draw.io which as I previously mentioned is an online tool which allows the user to connect their cloud drive to create various kinds of charts and web designs. It enabled me to create wire-frames of my website with ease due to its easy to understand user interface. The website allowed me to drag and drop different entities onto the board where I created the wire-frames. Adding text onto the wire-frames was very easy to, it required me to double click on any shape on the screen and it provided me with a text-box on top of that shape which made it much easier for me to create the wire-frames. The creation of wire-frames allowed me to understand how the website will operate and how the navigation of the website will operate. It gave me a clear understanding of all of the webpages and how they must be linked together in order to achieve what I was aiming for with my website.
Graphic software (Adobe Photoshop)
Photoshop is a professional graphic creation software. Photoshop has a lot of different tools and those tools aided me with the editing of the images that I used in my website. This application is used by many developers to create graphical images which can then be used in their projects. This application provides the best tools for bitmap image manipulation, hence why I chose this application to be the one to create my logo and other graphical images shown on my website. With the variety of tools that it has, such as box creation tools and circle creation tools, Photoshop was very useful for me when I was creating my website logo as it gave me the correct tools I required in order to create an animated image of a camera, which is what my website is based on. For the images I was implementing on the website require resizing and cropping which was also done in Photoshop. All images on my website required having a transparent background and Photoshop has a useful tool called the background removal tool which allowed me to do exactly so and successfully implement the images onto my website.
Komodo Edit
Komodo edit is a free text editor for different programming languages. Komodo edit has support for many programming languages including HTML 5, which is the programming language I used to create my website. With its support for error correction, it allowed for me to easily find bugs in my website and tackle those bugs. My website was created oin Komodo edit from strat to finish and the improvements that I have implemented on the website is using Komodo edit as well. Komodo edit also has an in built browser which allowed me top conveniently check the changes I am making to my website which helped me save time and create a website which was precisely what I first intended for.
In conclusion, I used a variety of different tools and techniques for the creation of my website. These tools and techniques have aided me to their full potential to help me create a fully functional website with everything working as intended.
Bibliography
http://www.draw.io
https://color.adobe.com/
https://en.wikipedia.org/wiki/Adobe_Photoshop
https://en.wikipedia.org/wiki/Komodo_Edit
The second I tool used was a color pallet by Adobe. This is an online tool which gives the user a full RGB color pallet out of which they can choose five different color which suits best for their needs. In my case, I used the color pallet to choose a color scheme for my website. I decided to have a much darker tone than usual, so instead of going with different shades of grey, I went for dark blue being my color scheme. I chose 4 different shades of blue, each for different elements in my website and the fifth color was white which was the text color, as light text goes well with a darker background and makes it easier for the user to read the text.Google fonts
Wire-frame (Draw.io)
Graphic software (Adobe Photoshop)
Photoshop is a professional graphic creation software. Photoshop has a lot of different tools and those tools aided me with the editing of the images that I used in my website. This application is used by many developers to create graphical images which can then be used in their projects. This application provides the best tools for bitmap image manipulation, hence why I chose this application to be the one to create my logo and other graphical images shown on my website. With the variety of tools that it has, such as box creation tools and circle creation tools, Photoshop was very useful for me when I was creating my website logo as it gave me the correct tools I required in order to create an animated image of a camera, which is what my website is based on. For the images I was implementing on the website require resizing and cropping which was also done in Photoshop. All images on my website required having a transparent background and Photoshop has a useful tool called the background removal tool which allowed me to do exactly so and successfully implement the images onto my website.
Komodo Edit
Komodo edit is a free text editor for different programming languages. Komodo edit has support for many programming languages including HTML 5, which is the programming language I used to create my website. With its support for error correction, it allowed for me to easily find bugs in my website and tackle those bugs. My website was created oin Komodo edit from strat to finish and the improvements that I have implemented on the website is using Komodo edit as well. Komodo edit also has an in built browser which allowed me top conveniently check the changes I am making to my website which helped me save time and create a website which was precisely what I first intended for.In conclusion, I used a variety of different tools and techniques for the creation of my website. These tools and techniques have aided me to their full potential to help me create a fully functional website with everything working as intended.
Bibliography
http://www.draw.io
https://color.adobe.com/
https://en.wikipedia.org/wiki/Adobe_Photoshop
https://en.wikipedia.org/wiki/Komodo_Edit
No comments:
Post a Comment