Don’t Let Your Tools Control You
When to Use Optical Alignment — You’re the Designer. You Know What’s Best.
Let’s talk about the tools the vast majority of us use on a day to day basis… These tools are Incredibly powerful, and offer so many things to make our workflow faster and simpler. However, I think it’s important that we take a step back sometimes and realize that from time to time, we know better than what our design tools are suggesting we do.
I’m going to make a case for why you don’t always want to rely on tools like Sketch or Adobe’s Creative Suite programs when it comes to alignment. Alignment is obviously a foundational and crucial element in our day-to-day design work. Without proper alignment, the things we design would look sloppy, and likely would be unintuitive to interact with.
But Can We Do Better?
The tools we are all familiar with can easily get us to a state in our designs where things are aligned. There are features that make objects snap to each other without us even having to put in much thought at all. But what if we did put more thought into it from time to time? Could we make our designs even better? I think so.
There are occasions when our tools give us suggested alignment or spacing, but those can be improved upon. That’s where the concept of optical or visual alignment comes into play. In the right situations, a little finessing can elevate your designs.
This is definitely subjective in many cases, so don’t take this as something that must be applied to anything and everything. When executed appropriately, your designs will not only look great, but they will also feel great as well.
Let’s take a step back before we dig too much into this technique. We need to first clarify what optical alignment is, and when it’s most effective.
Looking At Some Examples
So what is optical alignment? It’s all in the art of “eyeballing it.” You’d be surprised how often, in your everyday life, you come in contact with optically aligned things. The reason it’s probably not immediately apparent when you see it is for the same reason you should implement the principle into your design work. It feels natural. It looks right.
The physical shape of the rounded letterforms (like the lowercase E shown here) in typefaces like Helvetica extend slightly outside the bounds of the x-height and baseline. Logically, this might sound strange, but visually, it makes the rounded letters feel more appropriately sized, and increases readability. This form of optical alignment is great to keep in mind when placing circular objects next to square/rectangular ones. This is one of the ways our design tools can mislead us. Just because the tool snaps the height and width of a circle to be the exact same height as the square next to it doesn’t mean it will visually appear the right size.
As I’m sure many designers out there are aware, asymmetrical objects can sometimes be a nightmare to work with. Especially when we are talking about centering them within a container like the circle in this example. These situations are when our ability to eyeball it really come in to play. The bounding box that tools like Sketch use to determine the size of an object can often leave a lot to be desired. In cases like a triangle, this invisible bounding box can’t be trusted to give you an accurate center alignment.
Depending on the content you are working with, there could very likely be opportunities for optical alignment. In this example, the faint gray containers in the bottom section are far less visually prominent (and important) than what they contain. Aligning the form fields to the content within those containers adds a far better visual structure to the page than if you were to align the faint gray containers to those form fields above.
Applying These Principles
There are a few basic rules that will go a long way when using optical alignment within your workflow.
• It’s more of an art than a science.
• Don’t let your tools dictate everything about your designs.
• Take a step back and look at the bigger picture.
• Get out of your own head.
It’s more of an art than the science.
Design is a fusion between art and engineering. We are creative problem solvers. It’s about metrics, grids, and proportions. Sometimes however, it’s much more organic than it is technical. Optically aligning things is one of the best examples of this. Sometimes you need to eyeball it.
Don’t let your tools dictate everything about your designs.
Although our various design tools are very powerful, and can help in numerous ways, sometimes you have to ignore the tool’s recommendation. Don’t just go with whatever Sketch (or whatever program you are using) automatically does. Sketch’s snap to center functionality can be super helpful, but it can actually cause problems sometimes. Particularly with asymmetric icons, and text. Text boxes in Sketch are very rarely the optimal thing to base your spacing on. You’re the designer. You know best.
Take a step back and look at the bigger picture.
When in doubt, sometimes all you need to do is take a step back, and take a look at the layout/screen from a distance. Alternatively, squint at your design. Make sure you really just see fuzzy shapes, and not the actual content. That can really help give you an idea of the visual weights of objects in the design, and if they are optically balanced/aligned.
Get out of your own head.
I promise, it’s okay to bend the rules from time to time. A good design is more than just a bunch of measurements. It’s an art form. Don’t be afraid to be an artist in your day-to-day work.
