Designing An Icon Without Having A Clue About Icon Design
I love design. From typography to user interface, I love every aspect of it. But I’m not a designer. At least, not yet. So while building my new app, I finally reached a hurdle that I knew I’d have to overcome, and that was designing the icon. (Note: I used Sketch while designing the icons)
So, to give you a clue about my icon-design amateur level, here is the first one I tried:
It actually started as just the horizontal line, without the “S”. The app’s name is Shelf, so I tried being clever. However, I quickly saw that a single horizontal line looks ridiculous. So I added an “S”. There was literally no way I could have been lazier.
Moving on from that, I decided that I didn’t want my icon to contain any letters, unless it was used a bit artistically (kind of like Runkeeper’s icon). I still liked the idea of the shelf being represented in the icon. So a few minutes later, this is what I came up with:
This looked amazing to me. Now, you have to understand that I was learning almost everything as I was going. And, also, kind of like how anything you yourself cook would taste good to you, I think that the same effect occurs while designing something. When you create something from nothing, no matter how small, it’ll have a special place in your heart. Because it’s yours.
Anyway, after the initial excitement faded away, the icon started looking a bit stale. So, back to Sketch I went. I tried some variations of that idea, making the shelf thinner and adding other shelves.
Adding more shelves made the icon look a bit less empty, but it also made it confusing. And, most importantly, it didn’t look that visually appealing, especially on the small screen when I tried it as an actual icon.
But I needed something to make the icon seem less empty. Hmm, why not add a book on the shelf?
It wasn’t hard for me to ignore that icon. Maybe there actually was an appealing way to implement this idea. But I didn’t have the skills for it, especially that this whole process that I’m sharing was done in less than 12 hours, and that I’m in the middle of my finals as well. The last thing I tried was to stack a book on the shelf, but lying down instead of upright, which led to a concept that I actually liked.
It looked nice and simple. The rectangles kind of look like shelves, but they can also be seen as books (which are key in an app all about keeping track of the books you’re reading).
I loved it, but the shelves looked too condensed on the iPhone’s screen. Not a problem. Just a few tweaks, and I got the final version.
Who knows, I might hate this in a few weeks, or maybe in a few hours. It might even be a bad icon by other people’s standars. But for now, I’m pretty happy with what I’ve made.
There are two reasons I’m writing this post. The first being that I actually want to share my journey while I’m developing this app. I think by sharing and talking with the community, I can both learn a lot and, hopefully, also teach a bit. The second reason is, I’m kind of sick of all the excuses people make to avoid working on what they want to make. Whether it’s making an album, or finishing a painting. “I don’t have the time” is bullshit. Get to work, you’ll love the outcome.
If you liked this post and want to support what I’m doing, hitting the little heart button really helps. You can learn more about Shelf here, where you can also subscribe to the mailing list.
