We’ve just finished putting the final touches on our icon and we thought it would be fun to show it to you for the very first time, as well as chronicle the process we went through to get here.
While we love designing interfaces we are not expert icon designers. Icon design is an entirely different talent and we wanted to work with someone who could translate our vision into something awesome. We found our man in Mario Bieh. We came across Mario’s work on Dribbble (a site for designers of all stripes to give and receive feedback on their work). We reached out to Mario with the opportunity to help us out and he started work right away.
We wanted something bold, graphic, and polished. We wanted to stay away from cliche metaphors of communication or chat and instead center the design around something timeless and uniquely our own. We settled on a central ‘y’ with our blue and white colors. Then the fun began.
Mario quickly sent over a few different directions we could go,
The carved out design, while super cool, felt quite cold and sterile. The other challenge with this approach was it didn’t lend itself well to the white on blue color scheme of our logo. In this design, the ‘y’ would end up being blue, rather than white. A minor detail, but something we didn’t feel we needed to compromise on.
The glowing ‘y’ on a patterned background was interesting, but had similar shortcomings of being a bit too futuristic and sterile. However, the white ‘y’ was starting to head in the right direction. The defined border was appealing and an interesting concept.
Mario also sent another variation on the carved out design with a contrasting border. We really liked the border and how the ‘y’ felt much sturdier in this variation.
The last variations combined the concept of a light ‘y’, a patterned background, and a strong border. This icon stood out. It had the kernel of inspiration we were looking for, and thus it became our foundation.
We decided that we wanted to try a few different background patterns, as the mesh look reminded us too much of office supplies or a Mac pro. We also wanted to lighten the metal up.
The backgrounds Mario created were beautiful and ethereal, however they were too cosmic and ornate for the look we wanted. After discussing a few other options we sent Mario a linen texture we use in the app UI. Which lead to this version.
When we saw this we knew we were on the right path. The subtle linen texture lends tactility as well as warmth - in stark contrast to the inorganic materials we tried. The feedback on this version centered around the proportions of the ‘y’, so we decided to beef up the border to compliment the strong ‘y’.
We also felt the metal was a bit to dark still making the icon feel cold. We also came to the conclusion that shine was not a good fit for this icon. So Mario created another variation:
This solved many of the issues of balance and harshness, however at smaller sizes the inner shadow was too intense. We wanted to play with the shadow a bit more.
We really liked the new brighter overall coloring and the more subtle shadow still gave the realism we wanted without being intrusive.
Throughout the whole process there was something about the ‘y’ that had been bugging us, but we hadn’t been able to place it, but at this point we realized that having the ‘y’ connected to the outer frame made the whole icon feel a bit too futuristic and ‘machined’ as if it were a part created in a machine shop — not the look we wanted.
We decided to experiment with a detached ‘y’
We loved this. However, the icon still felt a bit ‘dirty’ when viewed on device, so we lightened the frame up a bit more and also reduced the shadow a tad since there was now more linen draped in shadow as a consequence of detaching the ‘y’.
And so we had it. We now have to optimize the icon for the various sizes used in iOS, but the core icon is done. In all, we created 29 variations and evolutions of the icon. While 29 variations of an icon may seem extreme to some, we believe in doing a small number of things very well, and that requires editing. The details matter.
