The composition is something often associated with painting and architecture. However, mobile app and web designers also cannot go without knowing the rules of composition. This knowledge helps them to build attractive and intuitive products that are easy to use.

If you’re interested to know more about what composition is and what rules professional UX/UI design agencies use for great interface design, continue reading this post.

Contents:

• Types of composition
• Composition rules that apply in UI design
• Attention vector
• Visual object hierarchy
• Size
• Color
• Form
• Balance
• Results

Types of composition

Professional designers like this company use two main types of composition ‒ static and dynamic.

Static one is characterized by the calm arrangement of objects, the balance of forms, and the atmosphere of stability. It focuses the user’s attention on one key action. An example of a static composition is the Google search engine website or the ticket search page.

The dynamic composition can be described by a large number of elements and a sense of movement. There is a hierarchy of objects where the main elements are distinguished in the first place. It performs a more complex function than the static composition and shows the client several elements at once. When you know how to direct users’ attention, you can create an attractive product that stimulates them to buy or perform other target actions.

Having learned about the types of composition, let’s move on to the rules that are used with both types.

Composition rules

There are six basic things a designer needs to know how to operate. These are a vector of attention, visual hierarchy, size, color, shape, balance. Using them effectively will allow you to control the attention of users and make solutions that are more useful for businesses. When you know how to direct users’ attention, you can create an attractive product that stimulates to buy or perform other target actions.

You will also benefit the visitor. Following these rules, the product becomes easier to perceive. Let’s consider each component in more detail.

Attention Vector

The arrangement of materials can be made in an F-shaped or Z-shaped pattern. In the first case, the basic information is located in 2 horizontal blocks, and the basic information is descended further in a vertical row. In the second pattern, the user’s attention “jumps” over evenly distributed content like the letter Z.

With materials in place, it’s best to publish important marketing content and headlines using the F-pattern. For a different purpose, a Z-shaped model is suitable.

Tip: When reading a text, many people do it from left to right. If you place a large heading on the left side and other text on the right, the user’s attention will go through the heading, then go to the main part of the content.

Visual hierarchy

When creating objects, place them in a strict hierarchy. You can highlight important content in different ways: by changing its size, color, shape, adding a contrasting background, etc. But you should not select all of these methods at once, and this can lead to confusion and cause chaos on the page.

The size

The larger the size of the content, the more attention it will attract. Make the main part bigger. Side elements should be made smaller so that they visually didn’t stand out from the rest. So the user’s attention will immediately be riveted first to the largest element on the page, then to the smaller ones.

Colour

A color palette is a good way to highlight objects. Bright colors are often used for interface elements like buttons, switches. When highlighting, you can use contrast (for example, black and golden), saturation, brightness. Use more saturated and vibrant colors for important elements and leave paler colors for side information.

The form

The more complex the element, the more difficult it is for the user to understand it. By highlighting important elements in complex interfaces, you will help the user to more easily perceive information and save them time.

If your design is complex, try highlighting a button, title, or other users interface element in some way.

Balance

Elements of the composition should be balanced out in connection to each other. If you incorrectly place the icons or buttons, it may seem that they are higher in a hierarchy with respect to each other. Try to arrange the elements on the page carefully.

Conclusion

Composition plays an important role in user interface design. When designing a UI, decide which type you will use: static or dynamic. Decide what information the user will see first and what actions they need to perform.

Use composition rules when designing interfaces. Violation of these recommendations may be justified, but it is recommended that you conduct a split test and make sure that such intentions are appropriate.