Interaction Design- Digital icons draft & final version (02/02/23)

My first attempt to digitalize the icon was done on clip studio paint. Although this app is great for drawing I felt it didn’t give me enough control over the distance between different elements and made it difficult to keep things consistent. Here I decided to round the corners as I wanted the icons to be very cute and soft, this also influenced my choice of colours as from the start i new i wanted to try a filled icon style but I wasn’t sure what aesthetic I wanted to follow. I initially opted for magenta-purple tones and a small heart to connect all the icons.

 

Although the designs had potential, they were messy, the lines were too thin and uneven so they couldn’t be seen well from afar, some corners weren’t rounded out and the keys weren’t that visible because there was not enough contrast between the base colour and the keys.

 

         

 

I made the main colour a dark purple and the accompanying colour a bright blue, the contrast between these colours made the icons stand out, I applied this to the background too as it made the icons more noticeable while also giving them a more polished appearance.

 

 

The first icon in this set is the monitor, I found it difficult to make it look different from a TV however I think the detail of the aqua-heart not only creates unity between it and the other icons but also doubles ad a power button or brand which are more commonly found in PC monitors in that location. To improve the design from the original I made sure to round all the corners and keep all the lines at a consistent thickness (1 pixel).

 

 

I continued with the keyboard replacing the escape key with a heart and the area the cable connect to the keyboard with another heart, tying it in with the other icons. I made the base rectangle longer and narrower as it differentiates the shape from the monitor. The main kays are all missing as it would make the icon too busy and only the enter, backspace and space keys are necessary to convey the concept of a keyboard.

 

The webcam model I chose was very different from the webcam I photographed. I chose an older version as I think it would be more recognizable and it has a different shape from the monitor and keyboard which would avoid any potential confusion between them.  I replaced the red- light , that indicates if the webcam is active, with a heart to continue the theme throughout the icon set.

 

The mouse icon was quite challenging because of it’s shape however I found that by keeping the scroll wheel and the wire I could keep a very simple oval shape while still being able to convey the idea of the object. The aqua-heart is seen at the end of the wire, following the theme.

 

The final icon is the headset. I looked at existing icons for this design as I struggled to convey the concept of the earmuffs, what I noticed is that most headphone icons split the earmuffs into two shapes whether they are connected or not, there’s usually a rectangular shape attached to a semi-circle or oval shape. I used this concept to make that part of my icon, splitting the two and rounding the edges. The final detail was the mic, this was created by joining two rectangles and rounding the corners, then attaching the signature heart at the end.

 

Overall I think the icons are quite successful and although they could be improved in certain aspects, my goal to have aesthetic unity and and recognizability were met.

Leave a Reply

Your email address will not be published. Required fields are marked *