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.
-
- The left play icon appears centrally-aligned, despite it being off-centre when wrapped in a rectangle
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.
-
- The left icon + text combo uses the same hex value, the right combo uses two different values. To achieve this, I decreased the brightness of the green in the âHSBâ values in Sketch.
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.
-
- I would recommend using the HSB colour values instead of RGB in your design application. One huge benefit is allowing a designer to swiftly change the brightness of a colour.
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.
-
- The left shapes are both 120 Ă 120 pixels, which makes the circle feel too small. The right circle is 126 Ă 126 pixels, to compensate for the larger surface area of the square
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.
-
- Notice how the tops/bottoms of curves on Didot go above the x-height and drop below the baseline. This can be seen on 7 different letters here
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.
-
- The uppercase text in the top example seems larger than the text it is next to, the uppercase text in the bottom example has been adjusted by 2 pixels to make it feel the same size
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!
This post was originally posted on Lukeâs Medium profile.
