32px
200px
process_record_off


As always when introducing a new icon in the UI for ossia score, the first draft is the most simple and straight forward idea, then some different less common icons are designed and I go straight back to the first idea but improving it using the “bad examples” I made. This time it was for the icon for recording process and the requirements were:

  • not larger than 16 x 16 px
  • on and off state
  • not confusing with the existing elements

This third point was the main issue I had as the circle plain red circle was already used for the audio ports. Therefore, the classic record icon could not be used as it was too confusing with the audio port just a few pixel away.

Classic record button too confusing with the audio port

To avoid the confusion, I tried the second idea which was to use the microphone icon which is often use as the record icon .

This idea was better than the previous one in regards to the issue with the audio port but now the problem was with the camera icon which was the icon for snapshot: it was hardware against hardware with neither of them connected to actual hardware and I found it confusing.

Microphone icon on and off, next to the "new" issue: the camera icon

The third idea was a suggestion made by someone else: it was an icon of a tape recorder . When in the UI, it just did not fit right and again it was the hardware against hardware.

Tape recorder icon on and off, just did not fit

Finally, I came back to the first idea, and just thought that I should have a filled circle which would appear more clean and simple, giving this

Simple and clean !

As simple as an icon can be, I always have to make different variations before landing on the final icon but it is so satisfying when getting the final result !