Written by Jotham Oakley
May 16, 2017

Assets: the preflight checks

The dull but powerful preflight checks for design assets.

Some things to consider when designing and exporting assets for a mobile interface

These may seem tedious, or even dull...some might even seem obvious or self-explanatory, but these tips are all guaranteed to provide your asset family with the polish it deserves.  

Specifically, I'll be talking about iconography (images are a slightly different kettle of fish).  

In this post, I'll share some thoughts on how to best prepare an icon to be export ready.

Asset management tips

1. 1x in Sketch

Always work at 1x size in Sketch. It'll make exporting so much easier.

2. Align correctly before export

If the asset includes multiple objects, make sure they are correctly aligned to each other before exporting.

For example, let's say you have a button that is made up of a coloured square with a plus icon inside.

You'll want to ensure that the plus icon is centred both horizontally and vertically to the square.

3. Use shapes instead of fonts

It is good practice to use shapes instead of fonts.

Sticking with the plus icon example, it’d be better if the plus icon was a drawn object (easily made from two rectangles joined together). Rather than a plus icon made from a font.

This allows us much more control of the object and makes it easier to scale and align.

4. Avoid using strokes

If at all possible, try to avoid using strokes and instead use shapes.

This makes for a cleaner export process when supporting some older versions of Android. It creates a better success rate for exporting SVGs.

5. Perfect pixel size

Make sure that the icon in question is a nice perfect pixel size, don’t let any decimals sneak in there.

If you need to resize it, make sure that your edit does not stretch your icon beyond the intended proportions. 

6. Check your dimensions

For certain elements, it is important that the dimensions of the icon file are actually larger than the shape itself.

For example, the plus shape might be 18x18 but the artboard of that shape should 24x24, and exported at that size.

This helps to layout a series of icons in a balanced way as all icons will have a common logic for their bounds.

7. Sketch symbols

Since Sketch 3.7 its become good practice to make all your icons and assets into Sketch symbols.

This allows for quicker changes to all instances of the asset during the design stage. It also makes for a better export process, because you can simply work through the symbols page.

Name the symbol the same as you intend for the final file. For example, don't call it "Plus Icon" in Sketch because you'll have to rename it to "ic_plus" or "PlusIcon" anyway.

8. Deeper levels

Doing all the above should give you a nice clean asset. But there are deeper level things to consider.

Your asset should feel like it belongs in your app. It should communicate appropriately and sit comfortably alongside the other icons in the project.

For more thoughts on that, read our Focus on iconography post.

Hope that helps!

/ Design
Top