Design insight from Revel design intern, Cameron Duneman
Picture this. You sit down at your computer at the start of your day— Your coffee in hand, a playlist of your favorite jams and you’re ready to crack into a new design project. You set up some gorgeous guides in Photoshop and think to yourself, “These are the most beautiful guides anyone has ever created.” The client specifically wants a square next to a circle, so you add the square to the guides and almost spill your coffee because of how good it looks. Then, it’s time for the circle. You place the circle and both are aligned perfectly to your guides (or so you think.) So there you are— ecstatic at your design skills. You fist pump. You gaze at the perfection of your design. The client is going to love it. You take away the guides to see the final product and your jaw drops.
You quickly turn the guides back on because you can’t believe your eyes. For a second it looked as if the square was bigger than the circle but the guides show you all the edges are aligned. You can’t believe what you are seeing. Someone has to be playing a trick on you (we did just celebrate Halloween after all) because when the guides are on, the shapes are aligned perfectly, but when they’re off, nothing looks aligned or even the same size!
This is where optical alignment comes in my friends.
Optical alignment: adjusting the alignment and/or visual mass of typography, shapes, graphic elements, white space, etc. to achieve visual balance.
Take a look at the square and the circle.
Here the top and the bottom of the two shapes are aligned exactly to the grid. When we take the grid away, the square has a visual mass slightly larger than the circle, even though the edges are aligned. To fix this, we will size the circle to be slightly larger than the guides that the square fits to.
After removing the guides again, we will see that the square and the circle seem to be aligned. We have created the perception of alignment and evened out the visual mass of the objects, which is what optical alignment is all about.
Here’s a typography example:
When the word Harvard is in all caps with guides in place shows that the distance between the characters is exactly the same. But again, when we take the guides away, the white space between the letters does not look even. The solution? We kern the letters (in layman’s terms, proportionally adjusting the spacing between characters) to even out the visual mass of the white space.
There isn’t a set of specific rules to achieve visual balance. There is a ton of talk in the design world regarding the topic because every scenario is different. It takes a lot of design intuition as well, which can always cause debate amongst designers. Some people may even say that optical alignment is something you should just naturally do. In ways, this is true, but giving it a name and understanding the basics allows us as designers to understand the reasons behind our “intuition,” making explaining our work and why we did it a certain way, a lot easier.
Is optical alignment a trick? Yes. Visually we are using optical alignment to trick the eyes into thinking our design elements are aligned. Is it a treat? Oh very much so. Using optical alignment to create visual balance creates a design that is nothing but sweet.
Want to read more from Revel’s design team? Here are a few other posts you might like: