Monodraw: Birth of an App Icon
Making great software is very much an iterative process. While perfection is unattainable, we can get incredibly close by having great attention to detail and by always striving to create better products for our customers.
At Helftone, we never stop at the first iteration because we can do so much better, every single time. "Good enough" is simply not an option. I want to give you an inside look at the process of creating Monodraw's app icon.
Even though I have been designing icons for many years now, it is still quite challenging when you start and all you have in front of you is a blank canvas. Over time, I have learned to never throw away ideas and to not be afraid of drastically changing directions in the middle of the creative process – great designs can emerge by combining diverse ideas from across a range of concepts.
It is always best to start simple in the early stages when we are trying to come up with a metaphor for the app and get a feel for what might be appropriate. There is no need to show many details at this point because the primary aim is to brainstorm and visualise as many simple concepts as possible.
The Asterisk
The very first builds of Monodraw could only display a single character on the screen – the asterisk (*). Consequently, I decided to incorporate it into the app icon, as it is also a widely recognised character. Following Yosemite's design language, we experimented with three variations: a circle, a rounded rectangle and a stack of rounded rectangles.
While the concepts looked quite clean and fit well in the Dock, they lacked any real character and contrast due to being monochrome – a bit too bland for our tastes. It was time to go in another direction.
The Grid
Brainstorming sessions have one main goal and that is to produce a lot of concepts by ignoring their superficial quality – a diamond in the rough can usually be found in there. It is also useful to try to think out of the box by approaching the problem from another point of view. It might be beneficial to even take a break for a few days and return with a fresh mind.
It is important to challenge ourselves as part of our daily work, so that we can become better at what we do. Background research can immensely help in steering the art direction. Feedback from other people can be a valuable source of inspiration, too – especially when it comes in the form of constructive criticism.
For our next set of concepts, we took inspiration from the interface itself. We decided to show the monospaced character grid and the page guide. Unfortunately, most of the concepts did not result in a compelling app icon. For example, concept 7 even looks like an iMac with its Apple logo replaced with an "M" – clearly, we needed to iterate more and come up with a better result.
The Robot
The next experiment was to try to incorporate a robot into the concept – a recurring theme at Helftone. I started off by drawing a robot on the character grid itself. Afterwards, some colour was added to give it a bit more personality and vibrancy. The result was quite good as it included important elements and looked satisfying to the eye but it did not scale very well at lower sizes.
We continued to dig deeper by further exploring the robot theme. While using my Mac, I had an interesting idea – could we make a robot that included features from Happy Mac? I created another concept but the end result did not turn out as good as I had hoped.
It is important to experiment with different directions even though almost all of them would not lead anywhere – the journey is almost as important, if not even more so than the destination. Through our experiences we gain a deeper understanding of the problem at hand, which subsequently helps us deliver a much better solution, much more quickly.
The Terminal
We were back at the drawing board after a few failed attempts to produce a compelling icon. We then tried turning to history for some inspiration – ASCII art dates back to the late 1970s when it was on used on BBSs. We wanted to create an icon that brought back the feeling of nostalgia and paid homage to the old times – so we settled on a terminal. We knew that ours users would feel an emotional connection to the icon, just like we do.
I started out with a plain yellow-ish terminal and produced two concepts: the first one printing out a text drawing and another one with just an "M" at the front ("M" for Monodraw). We were not entirely happy with either, so I tweaked the concept by changing the colour scheme a little bit, adding the character grid, the page guide and a few more details. The resulting icon looked and felt much better than the other two.
After letting things sink in for a few days, we felt that using a terminal to represent Monodraw was the wrong approach – we want to be looking into the future, not the past. It was time for another line of action.
The Octagon
Before we continued any further, we took a step back and asked ourselves what lessons we learned so far and what kind of elements we want to be incorporated into the icon. We wanted something modern that fits right in with Mac OS X's design language, we wanted something that was vibrant and evoked emotion, we wanted to incorporate a basic geometric shape as a metaphor for our quest to achieve perfection. Finally, there needed to be a clear sign that the app dealt with text art – an asterisk was therefore a must-have.
We decided to go with an octagon and make it resemble a precious gem – evoking the feeling of high quality and worth. I put together three concepts – a purple-blue one, an orange-red one and a less saturated version of the purple-blue.
Our favourite was the purple-blue, so we decided to focus on it and try to improve it. I made a few variants with different characters, just to make sure that using the asterisk was really what we wanted. I also experimented with reducing the number of inner octagons as it felt a bit busy.
We really liked the concept with the points and asterisks, so we continued to work on it. We felt that the inner asterisks made the central one stand out a lot less and were also clashing with the points. We had to see whether we should remove them altogether or replace them with points.
It was obvious that having less points made the icon easier on the eyes and less busy – an added bonus was having a circular outline inside the icon, which we thought was a nice touch.
Final Result
The app icon was almost ready but we needed to give it a few more final tweaks, namely:
- Adjust the angle of the asterisk to be at 45° and be aligned with the points
- Remove lines from top, bottom, left and right edges going into the circle
- Sharpen up colours and make them more satured
- Add slight glow around the points
And that's how we arrived at the final app icon. It represents our passion for precision and perfection in everything we do and we could not be happier with the end result. Even though it took a considerable amount of effort, it was completely worth it. If you want to check out the latest design work on Monodraw, you can head over to Dribbble.
We hope you enjoyed this article giving you a behind the scenes look of our development process. We have been diligently working on getting closer to the beta and will have another update with more details soon. Stay tuned – be sure to reserve your place in the beta by signing up below!
You should follow @amahony for more.