Illustration by Simona Toader
Designs often have many combined elements from type and imagery to graphics and colors. Whether you’re designing for print or screen, understanding a few composition rules can be vital in balancing each element into one unified design to create a much better overall experience. In this article we are going to talk about Visual Composition, what it is, and a few principles you can learn to help your designs stand out and tell the right story.
What is visual composition in design?
You can think of visual composition as the building blocks of design. It is the layout you use to bring all the elements of your design together in harmony to convey one overall message. Take the word art below, for example. Each word as it stands alone is a very simple element, but when you compose these elements together, you can form a layout that helps your viewers perceive a butterfly.
Why design composition is so important
Not too long ago designers were able to design a static web page that worked across all computers, but today we live in an age of thousands of different screen sizes from our mobile phones and smart watches, to tablets and desktop computers. We can no longer assume our design fits a certain screen size, so laying out our design in a way that responds to any device has become very crucial.
By using a few visual composition best practices, we can still design our elements to respond to all sizes in a way that tells the same story, has the same style, and gives the viewers the same experience wherever they interact with our product or website.
Elements that can help your visual composition
When thinking about creating the most seamless experience for your viewers, there are a few principles you can learn to give your design some visual hierarchy and help guide viewers through the experience, while still having a pleasing aesthetic. I’m going to cover just a few of these principles you can apply to your next designs.
Visual hierarchy
Using visual hierarchy in your design will help rank elements in order of perceived importance for your viewers. It’s easy to understand when something is bigger it can draw more attention, but scale is just one area of visual hierarchy. You can also use color, weight, balance, and more to help impact the importance of each element and help your design tell the story you have in mind.
Screenshot of Slack’s homepage. Image credit Slack.In the example of Slack’s home page, you can see large typography attracts your eye first, but you instantly follow up with where to engage on the site because of the unique purple color applied to the main call to action. Slack also uses proximity and negative space to group elements together to help them feel more associated, and you can see more of this principle in action with these UX design examples.
Using a grid system
Keeping your composition simple and organized can help your viewers navigate through the design much easier. By using a grid system in your design, your elements will feel more aligned and in harmony with each other. Grids are especially important when thinking about responsive design. As you design for a desktop, your elements may be able to take advantage of a 6 column layout, but as the design narrows in width, you will want to think about how to layout those same elements in a 3 column grid, or 1 column for mobile devices.
Using Amazon as an example, you can see how many products and news elements are featured in a simple grid-system making it easy to navigate between each. This grid also updates as you resize your browser to give the best visual experience in a 3 grid-system so elements don’t feel too tight as the space shrinks.
Typography
The style of fonts you use in your design can really impact your visual composition. You can help a message stand out with heavier weighted fonts, or bring characters closer together to help the message feel more pronounced.
Pairing typefaces can also help viewers navigate through content and drill into exactly what interests them most.
Think about creating banners to help get the word out for a certain cause. You wouldn’t want to use a cursive or lightweight typeface because it would be more difficult to achieve the powerful message you want to convey and may be more difficult to read.
Color
Using colors in your design can help attract the eye to the right elements if used correctly. It’s best practice to use few colors in web or mobile design so when the color is used, the importance is more clear.
As you can see in the example above, the red heart is clearly where your eye will be drawn to at first. The other shapes around this recede in the background giving way to the importance of the colored heart.
Color treatment on the Pluralsight homepage, Image credit Pluralsight.In the example of the Pluralsight home page, even the desaturated hero image gives way to the colored elements. You immediately notice the “Try for free” call to action, and the word “Results” is even underlined with color. You’ll notice Pluralsight is very careful where this is used. If you try to apply too many colors in one design, your viewers can often get lost and confused.
Contrast
In addition to colors, we can also utilize contrast to help give a color more visual weight. Think of the yellow color in the example below. When placed on a lighter background, the color almost blends in and becomes unnoticed. But that same color on a dark background feels closer to you and stands out above the others.
This contrasting exercise can be applied to web and mobile designs by pairing contrasting colors together between two elements to help give more or less importance to that element.
Dropbox shows off a great example of utilizing contrast in their quick start layout by changing the background color to have an equal amount of contrast between each title.
Creating visual rhythms in your layouts
There are many visual rhythms or viewing patterns you can take advantage of in your layouts, but the two that are arguably the most popular are the Z-pattern and the F-pattern. These two patterns are simply a popular rhythm your viewers are more likely to follow through your design. By laying out elements along this pattern, it can help guide your viewers to find the most important content faster.
On this web page, Apple gracefully lays out elements to follow the Z-pattern to help viewers learn about their products and find the “Buy” button once they’ve scanned the product details.
The Verge takes a different approach, using the F-pattern instead. This pattern is more practical when designing a page with a lot of content, such as a blog.
Conclusion
Now that we’ve discussed what visual composition is, the importance of visual composition in web and mobile design and a few principles we can practice, it’s important to note that balancing these principles in your design can take a lot of practice.
I’ve demonstrated a lot of these principles separately, but as you browse around for design inspiration in your next design, try to notice what principles a designer is combining in their layout and ask yourself what their purpose might be for their layout choices. What is their goal for the viewer? This will help you grasp onto these concepts much quicker and learn how to use them to really nail down the visual composition in your next design.