Composition in Visual Design: How Design Influences User Perception

By

Composition is how we see information. It influences the relationships we see between objects, perceptions of complexity, and affects our desire to engage with content. Learning composition as a visual designer will allow you to make information appear in ways that convey different meanings, or leave different impressions, like sophistication, affluence, cleverness, or strangeness.

If someone asked you to write down your phone number, you might instinctively group the numbers into two groups of three and a group of four. This is a system developed by designer Ladislav Sutnar, who used the psychological principle of “chunking” to group information in ways that are easier to remember. Composition is constantly shaping our perceptions around familiarity, relationships, and ease of use. If you see a row of clickable buttons near the top of the web page, you might assume they share a common function, likely navigating through that website. Simply by placing the buttons in that location and in that proximity to one another, a designer has leveraged composition to imply function and orientation of the design.

The Gestalt Principles, Continuation, Complexity, and More

Let’s see composition in action: How many triangles are in the following image?

Optical illusions like this one use composition to subvert the mind’s expectations of how forms relate to one another.
Optical illusions like this one use composition to subvert the mind’s expectations of how forms relate to one another.

Many people guess three or more, but the real answer is zero. You’re looking at a series of V shapes and Pac-Man-looking figures. Your mind is following the Gestalt principles of proximity (which states that objects near one another share a common relationship) and figure-ground (which states that the mind will choose a foreground and background). Being aware of how the mind instinctively derives meaning from visuals is a critical part of understanding how to leverage composition in powerful ways.

The Gestalt principles were first developed in 1890 by a school of German experimental psychologists who were interested in qualifying how the mind perceives information. While their initial list of principles has since been greatly expanded, even learning the basics will help a visual designer think critically about compositions and how to influence perceptions.

Beyond simple optical illusions, composition affects things in our everyday lives. Consider the following designs.

In the first example, the design utilizes a phenomenon known as continuation. By deliberately cutting off the bottom row of images and text, it suggests to the user that there’s more to see below. Users know they can scroll, so they’re likely to do so instinctively and continue exploring.

Skills Composition
An example of continuation, a Gestalt principle that helps to inform a user there is more to interact with.

In the following example, however, the design neatly ends its grid within view. Many users in this scenario would not attempt to scroll. If this were the homepage design, some users may confuse an even grid of shows to be all the website has to offer if they aren’t familiar with the service.

Skills Composition
A complete grid view can imply that this is all of the content the products often…even if it isn’t.

As Steve Jobs said, “Design isn’t just what it looks like, it’s how it works.” The composition a designer chooses influences how a user perceives something works.

Like most elements of design, the more complexity you add to a composition, the more difficult it is to balance. Simple designs with large type and clear focal points are often perceived as more accessible and easier to understand. They are often faster to make. However, more complex compositions can also make for longer consumption.

A Skill for Many Careers

Combined with typography and color theory, a mastery of compositions can help a visual designer compete in a range of design job markets from editorial layouts to app design. For example, visual designers at large tech companies like Facebook and Google often specialize in designing icons, user interface details, and general page layouts. They collaborate with engineers, product managers, and other specialized designers (like user experience) to apply visual principles in ways that further the goals of the user and the business. Visual designers in publishing, advertising, and lifestyle brands often focus more on ads, page layouts, or book jackets. Using composition in these settings means a visual designer is either making an object more eye-catching or easier to digest dense information.

While the roles may have different mediums to focus on, the principles of composition remain true for all visual designers.

Composition in Visual Design at General Assembly

At General Assembly, we teach composition primarily in our part-time Visual Design course, which I teach at GA’s San Francisco campus. However, some of its concepts overlap with our user experience design courses, since composition can also implicate how something works to a user. Students can expect to learn by doing at GA: They’ll analyze their favorite web pages and apps to detect how subtle choices in composition influence their understanding of functionality and impact an interface’s feeling.

Meet Our Expert

Shawn Sprockett is a design manager at Postmates, design advisor to Axiom Zen, and an instructional lead for General Assembly’s Visual Design course in San Francisco. His work has spanned a wide breadth of industries over the last 10 years, having worked with brands including Victoria’s Secret and Airbnb, and trained under legendary designers like Milton Glaser and Stefan Sagmeister. Shawn has also been a part of big business transformations like Conde Nast’s shift to mobile publications and IBM’s implementation of design thinking at scale. Shawn has an MFA in design and entrepreneurship from the School of Visual Arts. His recent projects are at the intersection of artificial intelligence, behavioral psychology, and generative design.

Shawn Sprockett, Visual Design Instructor, General Assembly San Francisco

Disclaimer: General Assembly referred to their Bootcamps and Short Courses as “Immersive” and “Part-time” courses respectfully and you may see that reference in posts prior to 2023.

Leave a Reply