Icon Process

When discussing icons at different resolutions, there appears to be some debate. Should icons be the same, but scaled appropriately? Or, as shown here, should they vary based on resolution and what looks best at each resolution?

I think the best solution should be used for the resolution being viewed. It is unlikely that a user will see a @1x and @2x icon side by side where they can be compared. However, it is more likely (in my opinion), that a user will see that details are unevenly added, detail seems too high/low, or the “pixels seem blurry” because the solution is not a pixel perfect icon.

What do you think? You can view this icon (and others!) in a real living app and decide for yourself. Unfortunately, it’s only open for people located in SF, NYC or SLC (one of these is not quite like the others…). Contact us, youmapbeta@rallyinteractive.com, if you are interested.

One can see more examples of YouMap from some of our other dribbble posts.

Attached is a peek into my icon Sketch export process. I typically draw all my simple icons in Photoshop with the surrounding UI, but the Sketch mass export is so helpful that it’s worth the import process. Fun fact: by naming the Sketch layer group “Tab Bar/Icon@2x.png” it will export an icon named Icon@2x.png inside a folder called Tab Bar.