Your FAB Icon Might Need Some Optical Alignment

FAB Icon Optical Alignment

Todoist recently have their major redesign using Material Design and I thought it was actually quite nicely done! Though I found one minor design issue that might worth a mention – did you manage to figure it out at the screenshot below?


It’s the FAB icon

If you felt there is something wrong with the FAB, you are definitely not alone. The placement of the send/save icon in the FAB doesn’t seems to be centred visually (the icon weight distribution seems to be more towards to the left), but actually it was programmatically centred.

I have made a simple comparison between the current FAB and the corrected FAB below:

FAB Comparison

As you can see, even though the asset of the icon are generated correctly and placed into the FAB at the centre, it is seems to be off from the centre to the left visually when I used a centred circle as a reference. In the corrected FAB above, the icon is optically aligned, so it looks perfectly centred even though the icon in the asset isn’t perfectly aligned to the centre (it is 2dp more to the right).

Do the Optical Alignment in the Asset

So what does it mean for designer? For situation like this where the icon visual weight distribution isn’t exactly symmetrical (like the usually + or x icon), we can do some optical alignment within the 24dp so when the developer uses the asset, they will just need to programmatically centre the icon in the FAB to achieve the perfectly aligned icon. It’s worth noting that using the centred circle as a reference doesn’t always work, especially for icon that is much more complex, but it can be used as a starting point, and align/adjust it optically (using the eyes) to achieve the most balanced placement.

More on Optical Alignment

There are already a few articles on this topic by other designers, like this and this, but I thought it would be useful to mention about this in the context of Material Design, since FAB is one of the most important elements in Material Design that the user will tend to interact with it quite often, so you definitely want it to be correctly done.

Until next time!

3 thoughts on “Your FAB Icon Might Need Some Optical Alignment

  1. How exactly do the designer need to change the PNG file, so that it will be aligned? Add extra empty spaces?
    Or is there something else?

    1. Hey LB,

      Instead of the relying on the usual centering feature in our tools in the 24dp icon asset, we need to move the icon (in this case) to the right for about 2dp within the 24dp asset (after the usual centering), so it will look as if the icon is not completely centred, but when it is used in FAB (or anything within a constraint that emphasise the visual balance), it will look perfectly centred, visually.

Leave a Reply

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

You are commenting using your 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 )

Google+ photo

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

Connecting to %s