9 Icons of Art Tools
Case Study
One of my assignments during the uni. The project requirement is to create a web with nine buttons with sound effects.
Year: 2021
Role: Illustrator & Programmer
Use of software/ languages: Illustrator HTML, CSS & JavaScript
The reason why I use art tools as my theme is because drawing is one of my hobbies and there was no one to choose this topic. Although my initial theme was about food and I also love eating, I do not want to have the same topic with others.
Style
I use the flat graphic as my style because I found that many companies tend to use this kind of style. It is simple and does not have any complicated shading.
​
Unlike in the 1990s, the trend of graphics is more complex than nowadays. More companies like to use gradients to do the shading, even on their logos. For example, Google's logo in the 1990s is a serif font with gradient colours. If I still use this style, I think my design would be quite overwhelming and outdated.
The design of my icons
Colour
Although I use flat graphics as my graphic style so that I can catch up with the trend, I only use primary colours as the background of the buttons, red, yellow and blue.
The impressions of these three colours are classic and simple. They make me think about an art style, Bauhaus. A style that is famous for simplicity. All the parts of the artwork are necessary and they only have primary colours. I think this art style is not only useful, but it is also playful because of the colour combination.
The colours of my icons
There are also some reasons why I arranged the background colours for each art tool.
Blue always means something professional and elegant. Therefore, All the tools that can make classic art (brush, pen and palette knife) with blue background.
Yellow always means energetic and delightful. So, All the art tools that children always use (crayon, pencils and chalk) are in yellow.
​
The meaning of red is courageous and passionate. So, the rest of the art tools (bucket, spray and tablet pen) would be suitable with red colour. You may want to know why the tablet pen is on this list because it would be a big challenge for people who get used to classic art tools. They must have a big passion to motivate them to use this alternative tool. I will not say this is the last art tool I can think about. After I arranged all the backgrounds for each art tool except for the tablet pen, red was the only one I could place because I did not want to choose another colour to ruin the design.
Design of interaction
Since it is also a programming project, one of the requirements is to design the hover and click mode.
I designed my icons with a grayscale effect because it would be like I was colouring the buttons. Also, I am influenced by the Flash game. Most of the time the interactive elements pop up when I hover over them. Therefore, they not only change colours, but they also pop up when people hover over them.
The colours of the icons when hovering over it
My lecturer taught us to do that by replacing another image. This means I have to create 27 icons, but I did not want to have much workload so I decided to use CSS to do the differences. The filter in CSS is the thing I learnt from another class. I was glad that I could use it in another class and project.