The design principle of area alignment


8 of 365 - Area alignment design principle by John LeMasney via lemasney.com

Area alignment design principle cc-by lemasney.com

The design principle of area alignment says that when you have a series of objects to be aligned that do not have regular shapes, that it is more aesthetically pleasing to centrally align them according to their area and weight than by central alignment of the bounding boxes.

In the illustration I’ve made here, the birds to the left are centrally aligned according to the centers of the bounding boxes, and the birds to the right are centrally aligned according to their area, form, and weight. The area aligned images are more pleasing as a series of aligned objects. These are two different ways of thinking about layout of related objects in a design plane.

“Alignment based on the area of elements versus the edges of elements.  With the advent of professional design and engineering software, elements in a design can be aligned with exacting precision. However, the alignment supported by software is based on the edges of elements — including center alignment, which calculates a center based on the edges. This method works well when elements are relatively uniform and symmetrical, but less well when the elements are nonuniform and asymmetrical. In these latter cases, it is preferable to align based on the visual weight or area of the elements, a technique that must be performed using the designer’s eye and judgment. Using edge alignment when area alignment is called for is one of the …” found in Area Alignment – Universal Principles of Design, Revised and Updated: 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design [Book] at https://goo.gl/exykFB

This content is published under the Attribution 3.0 Unported license.


About lemsy

John LeMasney is an artist, graphic designer, and technology creative. He is located in beautiful, mountainous Charlottesville, VA, but works remotely with ease. Contact him at: lemasney@gmail.com to discuss your next creative project.

Leave a Reply