Intro to Design Composition

Design composition refers to the arrangement, alignment, and compilation of text, images, and other UI elements on a page. When composition is done well, designs are both aesthetically pleasing and highly effective. Designers also refer to composition as layout, design, or artwork.

As designers, we master composition by applying the principles of design.^[1] These include elements such as contrast, balance, white space, hierarchy, repetition, and rhythm, among others.

Composition is the practice of arranging elements with intent. It applies to any medium, music, writing, architecture, art, or design, where choices are made to guide meaning or emotion.

Two-dimensional compositions lay on a single plane — they have a length and width but no depth. They’re viewed from a single angle and don’t require side views. For example, a blueprint of a house would be a 2D composition. They’re commonly seen in paintings, photography, 2D computer graphics, and crafts like tapestries and stained glass windows.

3D objects have, as the name implies, three dimensions: height, width, and depth. They exist in a three-dimensional space, even when depicted on a two-dimensional display. In product design, you’re most likely to see them in 3D product views or in illustrative components. 

3D scenes are some of the most complex forms of design composition. They combine multiple 3D objects within a 3D scene. Because of that, they present additional challenges in regard to perspective and the relationship between objects that aren’t present in a 2D scene. 

Space is the key element in a 3D composition. When creating a 3D composition, it’s important to consider how objects appear in that space from multiple angles, as well as the positioning of the overall ensemble. Thankfully, we’re surrounded by 3D compositions in the real world, which we can use for inspiration.

Narrative composition tells a story.^[2] Like a novel, it has a setting, characters, and a plot that unfolds as users decipher it.

Every element in a narrative composition is intentional — nothing is random. Each piece is there to add information to the plot and move it forward. It can even include coded references, adding additional depth and interest for those viewing it.

One way of approaching a composition is to build it around a prominent visual element. They draw the eye to a specific focal point within the composition. Unlike formal compositions that can easily be broken down into their basic elements, visual compositions should appear whole and indivisible.

Formal composition is the most important type of 2D composition and possibly the most difficult to really excel in. It starts with basic geometric shapes — squares, circles, triangles, etc. — arranged in a way that conveys a meaning or message. 

Many great compositions in design, photography, and fine art display a strong sense and understanding of formal composition.

Good composition requires a solid foundation. It allows you to engage users, help them find the information they need, and get your message across.

We’ve all come across websites that were poorly composed. Sites where we couldn’t find the information we were looking for and couldn’t wait to leave. Solid composition prevents your design from falling apart, creating a more pleasant experience for users.

Poorly designed websites appear cluttered, disorganized, confusing, or just not user-friendly. Bad composition causes frustration for users and leaves them never wanting to return to the site.

Here's a simple guide for creating a good composition:

1. Pick a format
2. Use a grid
3. Group elements
4. Define the interaction between elements

The purpose of composition in web design is to influence the user journey. Think about how users will interact with your design — which elements you want them to notice instantly and which are less important. Scale and visual hierarchy are your best friends for arranging elements to signal the focal point.

Position elements in ways to naturally lead users to the most important parts, such as the CTA button in the example.