Home > User Experience > How to Combine Multiple Elements in Astonishing Composition

How to Combine Multiple Elements in Astonishing Composition

How to Combine Multiple Elements in Astonishing Composition


Design review for successful design composition

Bento by Dash and Kirill Emelyanovk

The composition is what all UX/UI designers create when building their layouts. It is important to use correct principles to design astonishing web and app products.

I have selected a great work from Dash and Kirill Emelyanovk. This work includes a lot of elements and I am going to explain the principles of this web product.

Bento Design Part by Dash and Kirill Emelyanovk

The main principle is different elements size. It helps to identify the major and secondary parts of the design layout. The accent of the web page is directed into two parts — hand with the color picker and the screen.

These are the 2 biggest parts. To make them look not similar, authors used the watch for the left hand as an additional helpful element. Only this element is black, which gives it a massive weight visually.

As we go further in detail, we find a lamp and monitor elements as a secondary priority of the authors. The whole layout has a very detailed style, but the smaller are elements, the fewer are the details.

Bento Design Part by Dash and Kirill Emelyanovk

I found 3 colors for this design. These are green, orange-red, and white. Why there is such a choice? The answer is these colors are harmonized perfectly with each other.

F.e., green is a great solution for the background. It is neutral, quiet and all elements have good contrast with it. That means, active orange-red buttons have a clickable feeling, which is perfect for CTA.

White is amazing for typography. The text has good readability and can be used with almost any font.

Bento Design Part by Dash and Kirill Emelyanovk

There are 3 major sections with subsections inside of each of them. All major sections are perfectly stabilized with inner elements and there is no composition “falling” effect.

The header has a logo, 2 menu options, and the button. Left and right parts are orange-red, which is great uniform principle.

The left part under the header has enormous text, which placed almost in the center of this particular section. It has clickable minor elements and hand with the watch. These are the elements to balance the whole section.

Right section under the header has no color accents, but a lot of details. With a combination of the left part, it makes the whole layout look universal.

As a result of the design review, here are important tips for UX/UI designers:

  • Use the size of your elements as the main principle for composition harmony.
  • Select colors that have a great contrast according to each other.
  • Divide your design into sections and make them work as one unit.



Source link