Contributing to Gridicons

Designing an icon might appear super easy, perhaps because of the size of it, some people may think there’s only minimal work involved.

Screenshot 2017-09-01 20.43.46.png

Very recently, I was working on a set of icons for WordPress.com’s Reader. For the uninitiated, Reader is a tool for you to be able follow all your favorite sites (even ones that aren’t on WordPress.com) and find great new reads conveniently in one place.

Guidelines

We have our own icon set called Gridicons and our guidelines, I would say, are slightly stringent — which is a good thing as it helps ensure uniformity and consistency. Take for example how we need to make sure that it stays within the 24dp grid and that angles be kept at 45 degrees.

Screenshot 2017-09-01 10.45.56

Contributing to the Set

These were some of Reader’s current icons. One is the main Reader icon, the rest are “Follow site”, and “Following” a site (which I had created a while back), Comment, and Conversations.Screenshot 2017-09-01 11.40.40

What we needed were new icons (Follow and Following Conversation) for Conversations, a new feature we are currently working on where you can follow comments that are happening within a post.

I quite liked the uniqueness of our current Comment icon so I tried to make it work using the same plus signs that are in Follow/Following, flipping the icon, moving the plus sign around, etc. but it just wouldn’t work!

Screenshot 2017-09-01 20.22.53.pngSo I had to redo it and make the pointer more angled and sharp because it was the only it would work for all different variations of the bubble.Screenshot 2017-09-01 20.38.10.png

 

Screenshot 2017-09-01 20.25.32.png

It never is a clean process for me!

Getting Feedback

People often say, “two heads are better than one”. This is also particularly true in design. A lot of times, even when a design feels like it’s “perfect” the way it is, there’s always room for improvement!
This was the first set I came up with. To the non-designer eye, these all probably look the same.
Screenshot 2017-09-01 11.42.18
But one feedback that my co-worker, Davide, gave was how it still didn’t feel consistent. The pointers weren’t in the same place. Admittedly, I was a bit hesitant at first because I didn’t want to flush the pointers of the standard bubble and overlapping bubbles towards the left.
But after a few iterations, I was able to make it work.
Screenshot 2017-09-01 20.38.10.png
In conclusion, I don’t think I would’ve arrived at the solutions I did without several iterations and feedback.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s