Optical Adjustment

Logic vs. Designers

In my early days as a designer, I relied on Photoshop or CSS to tell me whether something was right or wrong. If Photoshop indicated that two shapes were aligned, then they were aligned. If two different shapes were the same size, then that was the case. If two colours had the same hex values, then they looked the same colour.

This approach seemed logical, but it was an incorrect way of working.

The calculations software makes are rational, but software cannot take into account the way humans perceive shape, colour, and size — that is to say the software cannot understand the context of an object in relation to other objects, in the context of an overall visual language, or how a human would perceive the object.

The irrational mind of a human needs to decide whether something looks optically correct or not, because we can see and understand a context when a computer can’t. Understanding these subtle differences and knowing how to adjust them is what makes a good designer even better — few will notice if it has been considered, but many will notice if it hasn’t.

Let’s take a look at a small number of examples of this in action.

Alignment + Visual Weight

Computers cannot figure out where the weight of an object lies in an accurate way, it can only rely on certain information such as the width, height, or x/y position. As designers, we need to compensate for this through something called optical adjustment.

The triangle in a play icon is centre-aligned in the circle right? Wrong. Drawing a rectangle around the play icon reveals that it’s off-centre.

Whilst the ‘correct’ play icon doesn’t appear off-centre, it is clear here that it is, and not just by a little bit. Why? Visual weight. The weight or mass in the triangle lies in its left-hand side, this creates an optical illusion of being off-centre even when it isn’t.

To solve this, we have to manually nudge the triangle until it appears central.

Colour

Optical adjustments in colour are more subtle. Once again, it is about the weight of the object, and how much of the colour appears.

In short: the same green might be used for a filled-icon and some text, but one of them will look lighter than the other.

It is subtle, but you can see that the icon is heavier than that of the text. To adjust this, either make the icon colour lighter, or make the text darker — I suggest picking whichever colour will help you meet AA accessibility guidelines.

Scale

Scale is about how our brains perceive the size of objects, text included. If we think about this in terms of circles and squares, a 120 × 120 pixel square has a larger surface area than a 120 × 120 pixel circle, so the circle must be larger to compensate.

As with all other adjustments this is subtle, but the adjustments help the overall design look right. This is very much fine-tuning of an element — nudging values up and down by 1 pixel until it feels right.

This is also true in typography, where overshoots on curved letters drop or rise above the cap-height, baseline, etc. If you write a line of text in Garamond and draw a line on the baseline and x-height of the text, you would see the curved shapes overhanging these lines. If these overshoots didn’t exist, the individual characters would feel too small next to their siblings.

Uppercase text

A final, quick example of where optical adjustment is necessary: when setting uppercase text next to standard case text. Uppercase text is more prominent than standard case text, and needs to be adjusted to compensate.

Unless the aim of this design aspect is for the uppercase text to be more prominent, uppercase text should always be reduced by a small number of pixels, e.g. 16 pixels to 14 pixels or 12 pixels to 11 pixels.

When working on a large interface each of these tiny design details add up and will affect the overall feel of the website. This attention to detail is what makes a good design great.

Once it becomes part of a workflow, reducing text size by 2 pixels or nudging a triangle 10 pixels to the right takes moments, but these are the things that make a design feel pixel perfect.

Computers or even AI cannot understand the context of a piece of design, so it cannot make the accurate adjustments that a designer can make. Until a computer can make a rational judgement about an isolated component within the context of an entire visual language, it cannot be relied on to make complex design decisions.

We shouldn’t rely on computers to do all the thinking for us, we should rely on our eyes and our instincts. Designers hone their instincts with every working day, so we should trust them, even when a computer tells us otherwise.

I’m a bit of a nerd when it comes to stuff like this, so if you have any interesting examples that you’ve had to fix then please shoot me a tweet. Or is it that I am totally wrong? If I am, please call me out on it, I want to talk about it!

Thank you for reading my post! If you enjoyed it and want to stay in touch, let’s speak to each other in one of these places:

Like what you read? Give Luke Jones a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.