Icons alignment issue

Question

I'm trying to find out another way to show the big icon (dumbbell) or re-arrange the rows, because the first icon from the third row (the clock) looks a bit strange when it's next to that big dumbbell icon, like the alignment & padding are off ... but I'm out of ideas and I'm not even sure if it's actually looking wrong or it's just in my head.

Any help is highly appreciated.

Answer 1

The most relevant problem and very common in the UI design is the absence of contrast.

I guess the image at the question is just a part of a whole design. Being just that part, it has five different shape typologies, talking just about shapes, not functionality:

1. An icon in a circle
2. Three "silhouetted" icons
3. A tiny inverted triangle
4. A blue rounded rectangle
5. A split bicolor square

A simple exercise is to see it without noise:

In a simple part of the design there is a whole circus! ;-)

I think you should find some way to unify all this, and perhaps the composition contrasts may be helpful. I add some examples, not designs:

Shape contrast

Color contrast

Weight contrast

Position contrast

Figure/Ground contrast

Harmony also make contrast:

The other contrast types are style, direction, space, texture... Maybe the best will be to sit down in front of a graphic application and make different designs. The trial and error aid to see better where the design weak points are and helps to find optimal visual solutions.