Skip to main content

Even the finest of details can be important

Posted in Brand and Design

Since my post on refining my brand, I’ve encountered a tiny issue that I wasn’t able to ignore.

With a circular crop, which is what services like Twitter do, the 8 × 8 grid the icon uses leaves the rectangular underscore too close to the edge of the circle. I mean, it looks fine, but it could be better.

The position on the x-axis is fine; it’s the height. It just needs lifting slightly. Lifting it a row on the 8 × 8 grid is too much – that brings the top of the rectangle onto the centre, which is too high. Half of that amount works really well, which is where a 16 × 16 grid comes in.

The tempertemper icon before switching to a 16 × 16 grid, where the underscore sits too close to the edge of the circle, and after, where it's positioned nicely

It’s worth mentioning that the 16 × 16 grid doesn’t quite work on a square or rounded square canvas, so I won’t be switching to the new grid completely. The 8 × 8 grid is perfect for those uses – super simple and nicely positioned/proportioned.

But where I know a service will display my icon on a circular canvas, I’ll be using that 16 × 16 grid in order to raise the underscore up a tiny amount. It’s a shame there isn’t a one-size-fits-all, but if a service that currently uses a square avatar switches to a round one (or vice versa), it’s not the end of the world – the icon still looks fine; just not perfect.

I can feel my team-mates’ eyes rolling whenever I pick out minutia like this on the Government services I work on, but I’ll happily continue to do so – attention to detail can have a big impact on the confidence users have in the products we ship.

Get them delivered!

If you enjoyed this and want all the latest articles delivered to your inbox every month, pop your email in the form below.

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that's not enough, have a look at the full list.

  1. Opening links in a new tab or window is better avoided

    A link to an external source opening in a new tab or window is something that appears innocuous but really isn’t as straightforward it seems.

  2. First impressions of iOS 14

    After 24 hours using iOS 14, I’ve found some of the new features unexpectedly useful. Here are my first impressions.