Help Center
Woman eye measuring her UI composition.

Composition

Captivate and entice users with designed elements

The nuts and bolts: The way you arrange and place design elements on a page is referred to as composition. It can be thought of as the arrangement of elements according to design principles. The composition can refer to any aspect of a website or product’s design that is organized with conscious thought, ranging from music to writing to photography.


A sketching showing composition with the Mona Lisa and a crowd.

Ever heard this before: “Oh! The movement in this work is dreadful!” “The works of Kandinsky greatly surpass this abhorrent showcase.” “Postmodernism is the new black.” Sure, we can exaggerate the stereotype of the art snob but they do lurk amongst the users who view our sites. In fact, we may very well have found ourselves doing it. Though we may not be as snooty with our comments, it has happened. We need to be conscious of this mind-set when designing graphics for our pages.

We need to appease each and every viewer of our site and products. We need to give appealing graphics that not only draw in users but also have the ability to make the user want to continue their journey through the product.

You don’t want users to look at your site with scorn, solely because of some ill-designed graphics. You want them to be intrigued to read more and be pulled into your design. Your hard work should be admired, not laughed at.

You can pull in these users with well-designed graphics by implementing a few concepts that deal with graphics and images for your pages. These concepts are Rule of Thirds, Rule of Odds, Rule of Space, and Simplification.

These rules are to help your graphics look more natural and intriguing for the users. Determining which rules to implement in your design really depends on your project and the goals you wish to accomplish with your graphics. Different compositions set different moods.

So let’s subdue those web graphic snobs. Give them the best graphics they can stare at, contemplatively, for hours on end.

Rule of Thirds

The concept for the rule of thirds started with photography. The division of the image into thirds allows four separate spots as options to provide the best composition surrounding the subject matter. Like in this photo below:

Composition showing the Rule of Thirds.

Notice how we have placed our main subject, Chris, along the left division lines to give him more importance. He is the main subject of the photo and the eyes are instantly drawn to him due his placement impeding on the intersection points. Which creates something visually interesting.

You can generate some interest with an image by visually separating your image into thirds. Your image is then broken up nine times into equal parts, leaving you with four intersection points. When you align subject matter at any of the four cross points or on any of the separation lines, it generates tension, energy and interest in the image.

Rule of Odds

“Symmetry is so passé.” By having an even number of subjects the composition can feel unnatural and too planned. With even numbers, the eye attempts to organize and create pairs of similar objects. This creates a dullness to the overall graphic.

With a jarring asymmetric composition, which comes from an odd number of subjects, tension and interest will be created and may just be the extra punch your site needs.

Composition showing the Rule of Odds.

That’s where the rule of odds comes into play. With an odd number of subjects asymmetry is created. Asymmetry within your image is perfect for creating the right amount of tension. By having an odd number of subjects, your graphic creates more interest than a graphic with an even number of subjects.

Example of Rules of Odds on a website.

For example, FLITE, seen above, utilizes the rule of odds on their landing page. Let’s break it down. Underneath their hero image, they have three separate graphics. Those images directly support the hero. Even though they are symmetrical, they create tension. That’s because a user’s eyes will try to put the graphics in pairs, but can’t — there is an odd number.

Rule of Space

Space is magnificent. The mere notion of space can indicate emptiness, infinite, room to grow, etc. With our graphics, our negative space can indicate movement or it can be used to help give context to the image.

A way in which space conveys movement is by adding spacing ahead of a walking character to infer they are moving in that direction. To build context to an image, as with movement, the space added in front of the subjects indicates where the subjects are going or where they want to be going. In doing so helps the user understand the context of the graphic. For instance:

A composition showing the Rule of Space.

The picture above showcases the rule of space. He gazes off into the direction of the empty space. This causes the user to infer there is something of importance. The space adds context to the subject’s line of sight. It also adds a bit of drama that would otherwise be missing if the space beyond his eye line was smaller.

Simplification

“Minimalism is the new complexity.” Sometimes, these artsy folk have the right idea … in a way. Do you remember the old KISS (Keep It Simple, Stupid) principle? Simplification of graphics can be the best way to project meaning to the user. By eliminating superfluous content from the graphic, the user can focus on the sole subject matter.

Should the extra content be needed in the graphic for contextual reasons, there are ways to help showcase your main subject matter, which include, lighting, color, and limiting focus.

  • By differing the lighting the primary subject matter can be modified to be the brightest while the supporting matter can be darker.
  • By simply adding a contrast of colors to your primary subject matter and supporting content, you can draw the user’s eye to the primary content.
  • By putting your primary content in focus and the rest of the image out of focus you are limiting the focus in which the user views the image. This constraint really leaves the user with no option but to look at your primary subject.

A composition demonstrating focus with a man's face.

The above photo helps us emphasize the simplicity, and beauty, of Limiting Focus. If you ever find yourself struggling with a graphic, sometimes it’s best to pucker up and KISS.

Break Some Rules

Going against the grain of graphic rules can cause extra tension to your design. In doing so, this can create more dynamism to the users’ experience of your page. Breaking some rules can generate more interest in your product and your design.

The strongest examples of rule breaking, giving the user more interest, stem from the rule of thirds and the rule of odds.

  • By breaking the rule of thirds, the user wants to visualize the subject matter to be in line with the four intersection points. Moving a subject outside of the intersection points, a graphic attains new life. It gains more excitement and interest.
  • Breaking the rule of odds happens by adding a subject to the graphic and halving it, not by adding an even amount of subjects. By not incorporating the entirety of subjects, it causes interest in the user’s mind to want to follow through and see the rest of the graphic.

Composition Library

Netflix is the perfect example. They appropriately break the rules with their movie suggestions graphics. By purposely cutting the last movie off, it motivates the user to follow through and browse the rest of the list by creating tension.

It’s those rebellious rule breakers that often garner more attention than the rule abiding graphics.

That’s a Wrap

Creating the most compelling graphics is a crucial element to your product’s success. In order to achieve those eye-catching graphics, all you need are these rules tucked up your sleeve. Nothing can be quite as potent as well-composed graphics when it comes to mesmerizing and drawing your users’ attention.

So go ahead and use an out-of-focus or odd number of subjects, with stark lighting contrasts, running towards an in-focus trophy. Or pucker up and KISS that idea goodbye and make it a simpler composition, utilizing one subject and empty space.

Each project dictates the type of compositions you need to set the right mood. And these composition rules can help you implement the right mood and have the most critical web graphic snob grovel at your designs.

Make sure your composition is on point before you implement with our test template. Rapid concept testing helps you see any blind spots or imbalances before you code it all up. Just use your wireframes and load them up into Helio

Prototype Testing

Uncover potential problem areas early in the design process to avoid expensive, band-aid fixes in development and beyond.

Use this template for:

  • Product Development
  • See how an actual audience resonates with your composition
  • Find any blind spots before you implement the design
Use Template