Working with Design Composition

Building your compositions around the screen’s geometric center is a simple, safe way to arrange elements. It gives users a sense of stability, while also capturing their attention effectively. It’s a great option for landing pages or posters but may lack vibrancy and energy. That said, the geometric center isn't always appropriate for some design elements.^[1]

When defining a compositional center, decide where your users' eyes should go first. You can achieve balanced and stable compositions, overlapping compositional and geometric centers, or you can spice things up by moving the center further away. Don't forget to use larger fonts, accent colors, or distinct shapes to make elements stand out.

A visually centered composition is generally preferable over a geometrical one because it appears more balanced without looking boring.^[2] Users’ eyes generally gravitate toward the top of the composition, so positioning the center of your composition just above the geometrical center is more aesthetically pleasing.

Which element within a composition immediately grabs your attention? The dominant element on a page dictates the alignment and tone for all of the other elements and, of course, stands out the most. 

For example, a landing page may include a lot of elements — headline, subhead, image, signup button, etc. — but the headline is the first thing that stands out to users. Set your dominant element apart from the rest of the page via scale, color, and placement.

Symmetrical compositions work like mirror images, creating designs with equal visual weight on both sides of the center axis. Symmetrical designs feel natural and graceful, but be careful that they don’t appear too stagnant. 

Symmetrical interfaces are well-suited to particular digital projects, such as a website devoted to one product or an artist’s portfolio. They’re an elegant solution and also easier to create than asymmetrical compositions.

Asymmetrical compositions are well-suited for more complex and exciting designs with several focal points. They’re also more difficult to do well than symmetrical compositions since there’s no mathematical formula for creating them — they rely on a designer’s eye instead.

In this example, the headline on the left is the main focal point for the design, while less significant focal points — the subhead and CTA button — are on the right. Achieving an asymmetrical composition like this that’s still aesthetically pleasing and balanced requires more practice.

Closed compositions arrange all elements within a (mostly invisible) frame.^[3] They provide a sense of completeness. When users look at a closed composition, their eyes focus on the main elements and don’t wander. Such designs feel finished and stable.

Open compositions have no boundaries or defined borders.^[4] Elements can be placed without regard to the frame of the screen, providing a feeling of freedom and movement. 

Open compositions are like ongoing stories that intrigue users to scroll and explore. They’re perfect for pages with a lot of content. Using leading lines, unfinished shapes and images, and unusual orientations, designers can make their interfaces more dynamic and inviting. 

Static compositions appear calm and pleasant to the eye. They’re usually symmetrical in structure, lack movement, and feel safe and predictable. 

Use static compositions to organize blocks of information that need to be easy to scan, like forms or infographics. Because of their stable nature, they’re well-suited to activities users might consider high risk (such as making a purchase or reservation). 

Our eyes instinctively look for balance, and unbalance unsettles us. The irregularities of dynamic compositions take advantage of this to add a sense of depth and movement. They can even create feelings of tension (not always a bad thing). 

Dynamic compositions are a powerful tool that can guide users through your design and help them embark on an exciting user journey. Use them when you want your users to feel energized by your products.

Compositional balance is about an even distribution of visual weight. To achieve it, play with the size, shape, and color of your elements, as well as the negative space between them. Large, heavy elements, like a hero image, can be balanced out with negative space or a few smaller features on the opposite side of the center vertical axis. 

The rule of thirds is a fantastic compositional tool that came to digital design from the world of photography. Imagine the screen divided into equal horizontal and vertical thirds by invisible lines. Our gaze intuitively gravitates toward the intersections of those lines. 

According to the rule of thirds, those intersection points are the ideal spots to place key elements, like CTA buttons, headlines, and hero images. They’re most likely to grab users’ attention in these focal points.^[5]

Designers use leading lines — similar to grid lines — as a scaffold to build their compositions around. They work because our eyes are naturally drawn to follow the lines within a design, even when the lines themselves are invisible.^[6]

Unlike grids, leading lines provide more freedom in creating unconventional, outstanding layouts. It’s up to you to set the rules for arranging and grouping content along these lines, making them a very flexible tool in your design toolbox.

As the name suggests, a 1-point composition has only one compositional center, where most of a user’s attention goes. It makes for simple, straightforward layouts and allows users’ gaze to float around and explore the design in more detail. Elements aren't fighting for a user’s attention with this type of composition, making it ideal for landing pages or websites focusing on a single product.

Designs with 2 compositional centers convey a sense of balance and harmony. In our example, you can notice that elements on the left and right sides work to counterbalance each other, creating an asymmetrical yet harmonious composition.

3-point compositions generally create a triangle within your design. Depending on its orientation, that triangle can be either stable or unstable. 

Upward triangles create a sense of stability and strength and can provide a sense of unity to your design. Downward triangles, on the other hand, are exciting and create a sense of movement and even urgency.

4-point compositions generally create a frame on the page, resulting in a closed composition. They allow users to concentrate on the elements within the page without their attention wandering out of the frame.

The different focal points can compete for user attention, so use this type of composition with care. They’re great for things like product listings or other pages where content should all carry equal weight.