Why Composition Matters

{ 🔺 } – How composition principles can help build a successful product

.LightUp by Cosmin Capitanu.

In this article, I am going to discuss web design for UX/UI designers from a technical point of view. This information will be useful for design tips, thought, design thinking, and just as a simple source of daily inspiration.

Original work can be found here on Dribbble

It is important to use composition principles to build a successful product. All designers use their knowledge and techniques to get better results. That`s why I have selected an amazing work from Cosmin Capitanu. This is a perfect example of how to use a big amount of elements on the layout and create a harmonic composition.

Design Composition — this is a way of how elements are placed and balanced according to each other.

The Structure

LightUp — Structure by Cosmin Capitanu.

The very first thing you need to understand it is the structure of your website or app. In the example above we see that there are four main parts of the design.

Each of these parts is responsible for its own functionality and information. Ther first left tab is a product library, the second part in the top shows the design accent and the most beautiful lamp, which should impress the client, third part in the bottom shows alternative products.

The right part stands separately and allow to switch between product types. Also, this part is highlighted with a color, which I am going to discuss later.

Design Accent

LightUp — Design Accent Part
LightUp — Design Accent Part by Cosmin Capitanu.

Design Accent is an element of design, which has the biggest attention. Why you should use accents at all? This is the best way to stimulate users’ eyes to a particular element. It might be a design part, product, shot, photo, basically anything.

Which ways will be the best to create this effect? Well, you can use color, size, or position in your design layout. In this particular example, the author uses size as a major way to emphasize an element.

Also, it is important to note that the selected lamp was the most amazing from the design point of view. It is good to present the best products on the front page to have a WOW effect on the target audience.

Color As a Divider

LightUp — Color Divider part
LightUp — Color Divider part by Cosmin Capitanu.

If you want to divide your layout into multiple functional spaces, it is good to use a color for this. In our example, the author used blue color for presenting products and yellow for functionality.

Why not vice versa? The blue color is way more neutral and products have good visibility on it. While yellow stands for functionality. Yellow is very bright for human eyes and if the design was vice versa it is really hard to concentrate user attention on products.

It is important to learn the psychology of colors and how people understand colors visually. Designers have only 3–5 seconds to impress new users, so we need to do our best work.

Conclusion

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

  • Think about the structure of your future design layout and place your design elements properly. Create a harmonic composition.
  • Design accents are important to use in your works. Direct user’s eyes on elements that you want to highlight.
  • Color is a great way not only to emphasize elements but divide your structure blocks.

This article was originally published on Medium.


If you want to contribute to Phase Magazine, write to us here:

Olha Bahaieva Avatar

Olha Bahaieva / UI/UX Designer, Medium Author, Public Speaker @ Toptal

Olha Bahaieva is a senior UI/UX designer, Medium author and public speaker at Toptal.

dribbble.com/leila_1605