Principles of Design Composition

Design composition, in simple terms, refers to how elements are placed on a page. Successful composition means arranging your design in a manner that not only looks good but also serves its purpose. To achieve that, follow the principles of design composition: harmony, visual hierarchy, balance, scale, repetition, contrast, emphasis, and unity, among others.^[1]

Every shape has a geometric center. For basic shapes — like rectangles, ovals, and squares — it’s the point where the axes of symmetry meet. For a circle with an infinite number of symmetry axes, a center is a point equally distant from all edge points. Placing vital elements in a geometric center makes for the easiest, although not the most imaginative composition. It feels stable, static, and unchanging.

The geometric center of your design will always be in the same place. The compositional center, however, is located based on how your design is organized. It could be a point, several points, or a line along which you place elements.

If you ask someone to point to the center of a shape, they’ll generally point to a spot slightly above the geometric center. Because of the emphasis we place on the top of a composition or element, we perceive the visual center to be slightly higher than the actual center.^[2]

In design, that means that if we place elements at the geometric center, they can actually appear to be unbalanced and slightly too low. Placing elements in the visual center gives a more balanced and harmonious look to your designs.

In many compositions, one element will dominate over the others, through some combination of size, shape, color, texture, or space. This dominant element carries more visual weight and gets noticed first. Think of it as the entry point to your design or the starting point for the story you’re telling. 

When designing a composition, make sure that the most important elements are dominant. The goal is for them to stand out among surrounding elements and grab the user’s attention.

The perceived weight of a visual element is called its visual weight. A composition with equal visual weight on all sides is considered symmetrical. Symmetrical balance feels formal and elegant, but is also predictable and sometimes boring.

Asymmetry occurs when there's unequal visual weight on each side of the composition. For example, we can balance a dominant element on one side by adding several secondary elements on the other side. Asymmetrical balance is more dynamic and exciting, as it offers more variety and feels modern and energetic.

A closed composition occurs when all elements work together to create a frame. Generally, we’ll position the primary element near or overlapping the middle of the composition, while the secondary elements, acting as complementary features, close the frame.

Open compositions encourage the eye to move from one area to the next. They create a feeling of movement and, unsurprisingly, a sense of openness. Elements in open compositions do not form a frame, giving the impression that the composition continues beyond the edge.

Static compositions appear orderly, poised, and geometrically stable. The compositional center usually coincides with the geometric center or one of the axes of symmetry. Static compositions are usually closed, have subdued color and tonal contrasts, and use straight horizontal and vertical lines crossing at 90-degree angles.

Dynamic compositions feel energetic and exciting — there’s an illusion of movement, activity, or even conflict. To achieve this effect, use open composition, intersecting diagonals of various angles, vigorous contrasts of color, and light and dark accents. Irregularities attract our attention and invite us to examine the composition further.

Balanced composition occurs when all elements work together — the design is both stable and aesthetically pleasing. While some elements may be more prominent, no single one draws our attention away from the composition as a whole. In turn, in an unbalanced composition, individual elements dominate the whole, leading to tension and uneasiness.