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.

Subscribe

If you enjoyed reading this and want a monthly roundup of my articles delivered to your inbox, just enter your email 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. Using Pandoc to convert Markdown to Jira’s Textile in Sublime Text

    It’s a real pain that Jira’s plain text input isn’t Markdown. Here’s how to I write in Markdown and export to Jira’s version of Textile.

  2. Apple dials back the Safari 15 for macOS redesign

    The ultra-condensed tab bar in the up-coming Safari for macOS has been reverted in the betas; it’s now just an option in Safari’s Preferences.