Image for post
Image for post

Icon Snack 02: Designing chubby icons for Marvel

Budi Tanrim
Oct 5, 2016 · 3 min read

by Budi Tanrim — first appeared on my newsletter.

I have teamed up with Marvel to create 90 free icons that you’ll enjoy.

First of all, I’m sorry this series has been rolled out quite slow — all these client works really slammed me out! Anyway, I’m excited to share my process on this one.

Image for post
Image for post

Marvel approached me back in March 2016 to design this small set, specifically for their audience. And it took me a couple of weeks to finish it.

“Make the icon looks Chubby”

Murat, the Co-Founder of Marvel, personally, wanted to have the icon that looks somewhat chubby. The word of “chubby” has been repeatedly used and be one of my concern.

I’ve never done this before. I was worried about a lot of things, but better get myself together. So, I start with a simple goal. How to make square looks chubby?

Image for post
Image for post
Image for post
Image for post

The square has conquered! Now, knowing that the squircle shape and rounded corner can help to give the chubbiness effect, I move on to the next step.

Prototyping

With the same principle, I showed a couple of icons to Marvel team. They like it, but thought it’s too much curve and wanted to reduce it a little bit.

Image for post
Image for post

Snap! The curvy line is half-pixel. Not perfect!

We found that the icon is not pixel perfect and has decimal numbers. This is a serious problem, potentially make the icon looks blurry and not sharp. Especially when the icon moved a lot.

Later on, after quick investigation — I find that the curve has caused this problem.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

With a simple fix can make it perfect, by manually adjusting and ensure the curvy line is not floating in between the grid line, we have been able to make everything perfect without loosing the chubbiness feeling. And that’s what bring us to the final set.

Now, the icon is released and can be downloaded on Marvel Blog. Please check them out, and let me know how do you like this set!

Download the icons on Marvel Blog (For Ai & Sketch)

Like this article will support me to write and share more design ideas.

Warmest,
Budi

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

yellowstroke

Design ideas, product tips, icon tutorials, and stories…

Budi Tanrim

Written by

buditanrim.co — Currently leading Design @Bukalapak. Previously @Shopify. I’ve had an opportunity to work with Yahoo, Palantir, Marvelapp.

yellowstroke

Design ideas, product tips, icon tutorials, and stories written from Budi Tanrim’s brain

Budi Tanrim

Written by

buditanrim.co — Currently leading Design @Bukalapak. Previously @Shopify. I’ve had an opportunity to work with Yahoo, Palantir, Marvelapp.

yellowstroke

Design ideas, product tips, icon tutorials, and stories written from Budi Tanrim’s brain

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store