It’s so important to communicate a strong professional message to online customers. One key way to do this is to present iconography that is uniformly crisp and clean right across your icon set.

In this article, Andy will explore how you can lay the groundwork for perfectly sized icon assets along with a few tips that will keep you right on track.

Points not pixels!

Following Apple Human Interface guidelines, if you’re developing assets for iOS-based icon/UI design, consider setting measurement units to points as opposed to pixels or physical measurements such as inches, centimetres or millimetres.

Why points? Well working in these units means you design independent of output pixel density, only concerning yourself with pixel density until export time (done by scaling your graphics to @2x Retina). In practical terms, this avoids designing the same icon at different pixel dimensions.

For most apps, setting the measurement unit to ‘Points’ is done at document setup.

Use 144DPI

As you’re not designing for print you don’t need worry unduly about working to a print resolution of >200DPI. However, you should keep to a DPI of 144DPI to attain an acceptable level of output quality for @2x Retina screens.

Like measurement units, you can set the DPI value on document setup.

Deliver on artboards

Instead of laying out multiple icons on a traditional grid, think about setting up an artboard per icon. You’ll end up with an array of easily identifiable labelled icons.

Here are a few things that make artboards ideal for icon design:

They’re discrete design areas so you can focus more easily on a specific icon.
You won’t need to spend precious time designing complex grids for hosting all your icons.
Think artboard size = icon size!
Rework your artboard (icon) dimensions easily—artboards are just objects.
Scale and snap design elements to horizontal and vertical centres of an artboard.
You can reorder or reposition your artboards anytime.
Each artboard can be labelled independently for easy icon identification.

You can create your initial artboard and set its dimensions at document setup, then duplicate it to the number of icon artboards you need.

Grid setup

This is easy! As you’re working on artboards that are sized to your icon dimensions you don’t need to consider setting fixed spacing or adding gutter areas to you grid. Just take advantage of the default automatic grid that displays grid divisions dynamically with the current zoom level, e.g. when zoomed to selected artboard.

Snapping designs to grid

Crucial point here. There’s little point in setting up a grid unless you want to design accurately on it. To do so, switch snapping on and ensure relevant Snap to grid and Force pixel alignment settings are active. In doing so, any start and end point when drawing curve or shapes will be locked into a half or whole point value; the same is true when repositioning them as you edit. This is vital for obtaining sharp results and avoiding blurred sub-pixel icon elements on resize.

So half points equals half pixels on output? Not true! If you use the principle of 0.5 point=1 pixel at 144DPI, then you’ll always be “on pixel” in your exported @2x Retina graphics.

““If you combine Point measurement units, 144DPI and forced pixel snapping, you’ll create whole-pixel hi-resolution icons every time!”

Artboards everywhere

As artboards are objects, just duplicate your artboard to the number of icons you want to design. All duplicates adopt the same dimensions, measurement units, DPI and grid setup as your first artboard. Naming each artboard (and hence icon) for easier identification is a cool feature too.

Get designing!

OK so you’re set up and working ‘on pixel’. Now set up correctly, the Transform panel will only report icon design elements at half or whole point values. Check the W and H values as you design if you don’t believe me!

As you design you can also take advantage of any Pixel Preview feature so you can visualise how each icon design looks without having to export your assets. If you like, you can stay in Retina preview mode all the time you design.

Side-by-side ‘vector - retina’ pixel preview showing half point x-position and selected object width

Once complete, artboards are all ready for export.

Export artboards as slices

With the hard work done, the export of your icons as slices to Retina (@2x) sizes will be straightforward. Retina images can be created from every artboard simultaneously—all at 80 pixel width (2x40pt) and with each file using the artboard’s name.

A word about Affinity Designer…

Here at Serif, we’ve thought about the user experience a lot when it comes to UI design. As a result, Affinity Designer serves up a Devices category on document creation that’s perfect for UI design. The simple grid and snapping setups are all that’s then needed to generate precise and crisp icons.

If you want to find out more, the Affinity Designer Workbook covers icon design in more detail in Tom Kosyck’s Tix App project. For more information, see affinity.serif.com.