DEV Community

ente
ente

Posted on • Originally published at ente.io

In search of the perfect app icon

We spent a long time designing our app icon, and we've spiralled back to somewhere near where we started. This journey is not over yet, but we'd like to tell about the trip so far.

โ€œBefore one studies Zen, mountains are mountains and waters are waters.โ€

When we had started, ente was a baby (still is for us!), and we were short of time. We did what we could - the word "ente" written in white color, on a black background.

This choice wasn't completely arbitrary! The black was intended to convey our focus on privacy and end-to-end encryption. And when ente had started it had only a dark design, and we felt that an icon with a black background would match the aesthetic inside the app.

ente icon pre redesign

Since then, we've seen the light ๐Ÿ˜‰ โ€“ now ente has separate light and dark modes. And on top of the base of end-to-end encryption and privacy, ente has built a layer of good looking and friendly user experience ("Encryption never looked so good!", said one of our users ๐Ÿ˜‡).

"After a first glimpse into the truth of Zen, mountains are no longer mountains and waters are no longer waters.โ€

So we sat down and thought about how to upgrade our app icon to reflect the upgrades inside.

The first line of attack was settling down on a brand color, and using that as the background of the icon. Like the Twitter blue, or the Discord purple.

There were murmurs of discontent about it being too early to settle on a single color, and about the choice of the color itself. But after seemingly never-ending discussions, we did somewhat agree to use a shade of green as the brand color for now.

With the background color settled, we moved on to the contents of the icon. At first we thought of coming up with a simplified graphic to convey what ente stood for. Like the Instagram camera, or the Tinder fire.

This proved harder. There is a obvious and natural option of using a camera, but then we thought that some of our users might be of a generation that doesn't have a strong association between cameras and photos. For many humans born in this day and age, the phone is the camera.

We tried other variations, like an illustration of a phone with the camera light flashing as it takes a photo. They looked good, but we weren't sure if it would get the point across.

Then there was this other thing - storing photos is one part of what makes ente ente. Sharing original quality photos has grown to be a pretty popular use case. Focusing on the camera or some variation thereof as the icon might not convey the sharing functionality that ente provides.

So we instead started thinking about using a mascot on the icon. Like the GitHub octocat or the Evernote elephant.

And ente actually already has a mascot (a duck!). The problem with this idea was that our mascot is a bit shy, and so far hasn't ever been used in our branding. As in, we're still iterating on a perfect duck ๐Ÿ˜‰. For the purpose of use in our icon, the mascot is not ready yet.

Meanwhile, as this process dragged on, the murmurs of dissent about the brand color became loud again. There were factions that wanted gradients of green, and more radical revolutionaries who wanted multi color gradients like those in Instagram's icon.

โ€œAfter enlightenment, mountains are once again mountains, and waters once again waters.โ€

Uber's app icon is white text on a black background.

There are very few things that translate to a global audience. Even basic color associations that we, the English speaking crowd, might take for granted. In some cultures, red means danger. In other cultures, red means celebration.

So it is easy to end up inadvertently alienating users by using symbols, colors and words that don't quite mean the same thing in a different culture. e.g. take the word "quite" from the previous sentence: the phrase "quite nice" has very different, almost opposite, meanings in British and American English (and this is just shades of English).

Uber doesn't have lack of designers, product people or A/B testing. While one doesn't know the real reasons why they ended up with a plain icon, one plausible guess is that for a utility app like Uber, functionality triumphed looks. With the app icon just set to the text "Uber", there is no mistaking the app, and it is easy to find in a crowded home screen; and there is no risk of the app icon accidentally alientating or confusing users in some market where Uber operates.

โ€œBefore one studies Zen, mountains are mountains and waters are waters; after a first glimpse into the truth of Zen, mountains are no longer mountains and waters are no longer waters; after enlightenment, mountains are once again mountains, and waters once again waters.โ€

โ€“ Dลgen

In the end, we thought it best to stick with (almost) the same icon we'd started with. An icon that is quite minimal, like Uber's.

icon bell curve meme

We did make one major (๐Ÿ˜’) change though. We switched to black text on a white background (from white on black).

This was done for two reasons:

We found that the app icon looks smaller (perceptually) than the surrounding icons if the background is black.

A white background is classier and conveys the changes in the redesigned version of the ente app better than a black one.

There are other minor changes in the font weight and size too. We'd also like to give a shout out to Montserrat - the amazing typeface we're using for the text in our icon. If a font can speak, Montserrat speaks of stability and quality, things we aspire ente to stand for.

ente icon post redesign

Ultimately though, we are not convinced of the arguments we've laid out in this post. All the threads we mentioned are still open, and we're still thinking and deliberating on what the next iteration of the ente icon will look like.

Even so, we thought we'll share the current checkpoint in this journey as it might be of interest to some of you.

On a personal note โ€“ of all the icons I've poured over in the recent past, the one that has absolutely nailed it (I feel) is Twitter. Recall. Branding. Locatability. Distinctness. And all of that using just two colors - white on blue. Or shall we say, Twitter blue.


Come say hi on Twitter or Discord. We'll be there, day dreaming of icons, unicorns and other creations of the human mind.

Till next time, friends. Have fun imagining the stories behind the other app icons on your phone's home screen โ˜บ๏ธ

Top comments (0)