This document discusses optical alignment in user interfaces for frontend developers. It defines geometric and optical alignment and describes typical algorithms for each. Optical alignment helps define the proper center of shapes by accounting for their actual visual balance rather than just geometry. The document provides an algorithm for optical alignment using JavaScript and math formulas to calculate centroids. It also discusses existing solutions for optical alignment in tools like Photoshop and Sketch and libraries like D3.js.

1. Optical alignment
in user interfaces
For frontend developers
Ivan Grekov 2018-03-15

2. Alignment of two
layers in icons
● Simple icons with background of
different shapes,
● icons consisted of 2 shapes,
● icons with sufficient paddings
inside main container
Transfer from geometric to optical alignment

3. Optical imbalance
Caused by geometric alignment
Can be fixed with optical alignment
Defining problem
Geometric alignment Optical alignment

4. Typical algorithm
For geometric
alignment
● Definition of center of first shape
● Definition of center of second shape
● Comparison of centers
● Implementation.

5. Typical algorithm
For geometric
alignment
● Definition of center of first shape
● Definition of center of second shape
● Comparison of centers
● Implementation.

6. Typical algorithm
For geometric
alignment
● Definition of center of first shape
● Definition of center of second shape
● Comparison of centers
● Implementation.

7. Typical algorithm
For geometric
alignment
● Definition of center of first shape
● Definition of center of second shape
● Comparison of centers
● Implementation.

8. The solution is clear
Define center of shapes properly

9. Optical alignment
It helps us to define proper center of shapes

10. Javascript + maths = optical alignment
Implementation of solution
“ - For frontend developers

11. We will use simple formula
Formula for finding centroid of polygon
We need to integrate it in project
and make use of it auto & simple

12. Algorithm
For optical
alignment
● Definition of center of first shape
● Definition of geometric center of
second shape
● Definition of optical center of second
shape
● Comparison of centers
● Implementation of new position for one
of the shapes.

13. Algorithm
For optical
alignment
● Definition of center of first shape
● Definition of geometric center of
second shape
● Definition of optical center of second
shape
● Comparison of centers
● Implementation of new position for one
of the shapes.

14. Algorithm
For optical
alignment
● Definition of center of first shape
● Definition of geometric center of
second shape
● Definition of optical center of second
shape
● Comparison of centers
● Implementation of new position for one
of the shapes.

15. Algorithm
For optical
alignment
● Definition of center of first shape
● Definition of geometric center of
second shape
● Definition of optical center of second
shape
● Comparison of centers
● Implementation of new position for one
of the shapes.

16. Algorithm
For optical
alignment
● Definition of center of first shape
● Definition of geometric center of
second shape
● Definition of optical center of second
shape
● Comparison of centers
● Implementation of new position for
one of the shapes.
Before After

17. Optical alignment algorithm
● loop iteration for each svg layer.
● loop iteration for each svg path on layer.
● loop iteration for each point in svg path.
● get area of svg path.
● get centroid for it.
● visualize new center of shape on screen.

18. With help of Javascript
It is much easier
Existing ready to go solutions - plugins for graphic editors:
1. Photoshop
○ https://gist.github.com/Winner95/0cdf485bf45a04dbc6fd63afdc7836
21
2. Sketch
○ http://sketchhunt.com/2016/06/02/optically-sketch-plugin-automated-
optical-adjustments-mathematical-precision/
3. D3.js - centroid
○ https://github.com/d3/d3-polygon/blob/master/src/centroid.js#L1
4. Offline-Events:
○ BeerJS - https://www.meetup.com/BeerJS-London/events/248742436/
5. Your favorite JS web-resources =)

19. This method has limits
● no intersections inside aligned shapes
● Gradient backgrounds are not
considered
● Similar colours of shapes aligned not
considered
● Two layers aligned to each other.
Optical alignment

20. Main benefits
● It solves problem.
● No additional maintenance
● No need in additional design iterations
● Easy to implement, easy to use
Optical alignment
With help of Javascript
You can do more:
● Extend shown solution, make it usable for
multi-layer icons, icons with cuts, etc
● Integrate optical alignment in process of
continuous deployment as a test or as a auto
tool with help of D3.JS function centroid

21. Thank you!
● ivan.grekov@corp.badoo.com
● twitter.com/igrekov
● facebook.com/iigrekov