Optical alignment for frontend developers:
Part I — why is it not the same as it is for designers?
Hi, my name is Ivan Grekov and I work in the front-end team at Badoo. My primary responsibilities entail looking after the user interfaces for a variety of projects. More specifically, this involves working with optical alignment of user interfaces.
In this article, I’d like to share with you why it is important and discuss the role it plays in user interface development.
Moreover, I will talk about what frontend developers need to know about ensuring the optical alignment across icons as a process for their routine work, in the aim of finding solutions to help develop new, high-quality user interfaces without slowing down the development process.
What is optical alignment and what is the problem that it aims to solve?
Let’s start by defining the problem, which arises between the design and development stages and with many well-known softwares.
When working with user interface templates, I use graphics editors just like any frontend developer: in my case, Adobe Photoshop and Sketch. By default, all layers are configured as rectangular containers. When we align objects at their centres, we use the respective mid-points of the rectangular containers for the purpose of alignment.
When working with icons, however, this approach may be misleading as the rectangular containers and the shapes they contain may not be aligned consistently. In addition, non-symmetrical shapes differ significantly more in terms of surface area and coordinate points within the rectangular container. The greater the divergence, the greater the optical imbalance within the interface icons.
This means that we cannot rely on auto-alignment of certain shapes (icons) inside graphic editors, which constitutes a problem.
Graphic and web designers may recognise these situations, which they usually solve manually, relying on their particular skill sets and knowledge. This is why front-end developers may encounter problems in deciphering the proper alignment of icons as they try to resolve the problem using the tools available to them. As mentioned above, this reliance on the standard tools can lead to alignment problems.
Let me give the following example of how we can face this problem by using an illustration of an icon in a graphics editor: an auto-aligned diamond positioned inside a circle. However, it looks out of place when we view it in relation to the centre of the container. If we divide the diamond into quarters, it is apparent that the bottom halves take less space within the container when compared with the top halves. This results in the diamond appearing to be shifted upward relative to the centre of the circle, even though technically, this is not the case. The container of diamond is perfectly aligned to the centre of circle.
The above is an example of an imbalance between two shapes. It usually becomes noticeable at the code writing stage for user interface elements. In order to identify this problem earlier, it is essential to pay attention to the optical alignment of shapes during the design process. If elements of the design can be seen to be visually imbalanced after the design stage is complete, you should use optical compensation to resolve this.
Optical compensation is the distance by which the shape needs to be positioned to restore optical balance. In order to achieve optical alignment, we move the centre point of the container by the amount of optical compensation required in order to match the centre of the shape.
Thus, optical alignment in this article is defined as a search for the coordinates at the centre of a shape that resulting in its layers being aligned. It is essential to define it correctly for the purposes of software architecture.
However, the term “optical alignment” is widely used by graphic designers to denote the task of balancing the size of letters and distances between them in fonts. Although several articles on ‘Medium’ (Article 1 and Article 2) refer to this method as being suitable for the alignment of shapes in user interfaces, there are stark differences in the ways in which optical alignment is implemented in each cases and the ways in which it’s useful to frontend developers.
Optical alignment may be performed manually; highly experienced designers and a highly developed sense of balance are able to do this quickly, with clean results. There are no strict criteria for acceptable distances and the dimensions of shapes when this approach is taken; designers themselves determine how far to move the shape, and how much to alter its size, in order to achieve optical balance. However, this approach often leads to subjectivity: the designer’s opinion may not coincide with that of the users or the client. How, therefore, can we ensure that an image is optically aligned (and agreed upon) rather than misplaced due to manual adjustment causing misalignment of the central point? In graphic design the grid, distances, alignment and borders are determined by a ‘brand book’ — a set of guidelines that describes the project’s style and design elements. This helps to resolve disagreements in relation to optical alignment within branding materials. Sadly, this solution is not universally practiced within user interface development.
However, if there is no documentation available within any given project for user interfaces, and particularly where design systems have not been applied, optical alignment becomes the responsibility of the designer. It is important for frontend developers to raise and discuss alignment issues with designers whenever they arise.
Nevertheless, for various reasons, this approach is not always feasible: there may not be enough allotted for the redesign effort and the project deadlines may have already been determined; designers may be busy with other tasks; the design project may have been outsourced and the third-party company is no longer available, etc. I have come across quite a few situations where a “finished” design was supplied and needed to be deployed in clearly defined terms that allowed no room for any redesign effort. As previously described, this poses certain challenges for frontend developers.
Various approaches to optical alignment
Let’s start by considering existing solutions. This means exploring what has already been written on the subject of optical alignment. In 2015 there were several articles about this topic published on Medium (Article 1 and Article 2). The first article provides general information about the subject, while the second gives examples of simple icons and proposes two ways to align the layers: placing the shape in a circle or rotating it around its own axis. The main advantage is that both approaches are noticeably simple to apply. In fact, I fortunately decided to try these out when I first encountered problems with optical alignment. In my current projects I am dealing with hundreds of different icons across various user interfaces, which means that I have to keep them supportable and ready to use on regular basis.
Instructions for optical alignment
How to draw an owl
You might ask what the previously described methods of optical alignment have in common with the drawing of an owl pictured above. In both cases, the most interesting aspects remain opaque. When I tried to describe the reasons behind both approaches I received lots of questions about why and how each is used.
In the case of optical alignment, one of the aspects that remains unclear is how and where to place the centre point of the shape for further alignment. How do we solve the issue of determining where the centre of the shape actually is? The aforementioned articles often refer to the fact that positioning of the shapes is performed manually, at the reader’s discretion.
As mentioned before, graphics editing software defines the centre point of the shape as the centre of the shape’s container by default. This centre point is used to align different shapes automatically, but in fact does not align the actual shapes, but rather their containers. What can we do in this situation? We need to find one of the many ways to define the point of the shape. Only once we have done this we can perform an alignment with respect to that central point.
If you try to write instructions for ‘day-to-day’ optical alignment for your team, you only need to follow these three simple steps:
- Determine the type of shape we are dealing with — simple or complex;
- Find the centre point of the shape;
- Perform alignment.
Nevertheless, this approach is slightly different for simple and composite figures, which is reflected in the second step of the instructions.
Thus, the first step is to determine what type of shape we are dealing with, according to the article mentioned above. Let’s try to provide the details of each step so that — having applied it once — frontend developers and junior web designers will be able to get to grips with how optical alignment works.
Optical alignment of simple shapes
Step 1
When we are dealing with a simple shape, its centre can be found using a special formula for determining its barycentre. There are separate formulas for triangles, parallelepipeds and other non-composite shapes; these help us to find the point in relation to which icons need to be centred.
What about methods from the articles mentioned before? Let’s try to analyse them step-by-step for a better understanding.
We now turn to the second method contained in the articles detailed above. We start by placing the triangle inside the boundaries of the circle that encloses it. The centre of the circle can be aligned in relation to the other shapes, which gives an effective optical alignment. This approach works well if the chosen shape — a triangle in this case — is symmetrical in at least one plane.
Let’s provide an example: the play button for a video. I opened linkedin.com and facebook.com, and found an optically aligned icon to use as an example:
This icon is pretty basic and is often used as an example of optical imbalance. We’ll now remove all extra context from the icon and will try to retrace our steps through a typical alignment process. Open any graphics editor, create a triangle and a circle shape and try to align the two shapes automatically. This is the result:
There is a clear visual imbalance within the icon. You can tell that the left side of the triangle has more visual weight, giving the impression of the triangle being positioned slightly to the left. Let’s try to figure out the rationale behind this visual effect in the second step.
Step 2
The illustration below shows equal distances between the sides of the triangle.
Let’s analyse it by using different shape containers as seen below. In the left-hand illustration we use a rectangle as a shape container, which is the default for the alignment algorithms in graphics editing software. In this case, the geometric centre of the triangle clearly does not coincide with the centre point of its rectangular container.
We can correct this by using a circle as a container, as shown in the illustration on the right. We place the triangle in the circle and group the two elements, then align the group of elements in relation to the background circle.
Let’s now check the new positioning and composition of our shape:
The shapes are optically aligned in relation to each other. This means that the container of the triangle is still equidistant from all sides of the background circle, but we no longer perceive the visual imbalance. We can now remove the circular container and compare these two icons:
The right-hand icon appears optically aligned. We have therefore achieved a quick solution to the problem of simple shape alignment.
Complex shapes
Step 1
When dealing with complex shapes (such as composite shapes), there is another action we need to perform to complete the alignment. This approach should be followed when working with shapes that do not exhibit marked symmetry, such as logos for companies or social networking sites. In order to illustration this, I will use an icon from the “Hot or Not” app.
In the case of a complex shape you need to determine the minimum necessary radius of the circular container: it must contain the coordinates of the shape. As was the case when working with simple shapes, we first place the shape in a circular container. The required radius for the complex shape is then determined by rotating the shape around its axis vis-à-vis its centre.
When rotated, the shape must stay within the confines of the circle. If the shape extends beyond the boundaries of the circle, the radius of the circle must be extended. The circular container for such shapes is always larger than containers for simple shapes of the same surface area.
Step 2
In the second step, we align the circular container of the shape in relation to the parent element, after which the icon should now be aligned. Let’s check.
In each container, the shape is positioned at the centre point, equidistant from the borders of the container. This technique is therefore useful in checking the alignment of complex icons.
Outcomes of a design-based approach to optical alignment
When working with particular icons, these approaches make it possible to align shapes relatively quickly and efficiently. However, when checking them using a large sample of icons for the desktop version of the Badoo site, I found that:
- The articles do not specify any criteria for determining which method to use when finding the centre point for the shapes (which method is ideally suited to triangles, or which for a multi-sided logo?);
- The use of these methods results in variable coordinates of the centre point, and therefore require manual verification;
- There is no description in the articles as to how and why these methods work. These methods do work, but not in all cases and not for all icons;
- There is no specific list of shapes and their characteristics for which the optical alignment methods will definitely work as described; nor is there any information about when you need to choose a particular method. In fact, in some cases, none of the methods are suitable.
Thus, I recognised that I needed to find more reliable solutions for when working with different shapes on a routine basis. Of course, it seems unlikely that someone might use a triangle placed in a circle or a multi-sided shape with no visual significance as an icon within a user interface.
Nevertheless, it would be good to understand how and why various types of icons are aligned (leaving no room for any doubt). The approaches given above do not solve all possible problems and seem as though they would be very time consuming, particularly if you are not a graphic design guru.
In this article we have defined the problem and described the solutions from the perspective of the designer — and also identified the drawbacks of these approaches for frontend developers.
Ultimately, the best outcome for front end designers would be to find an automated solution that works in the same way as the existing, widely used techniques for aligning rectangular shapes. As a result, I continued my research to find a way to make this routine job easier, and I would like to share the results of this search in the second part of my article.
