Sorry for taking so much time to response, and I wanted to thank you for your comment. I’ll try to respond to it as best as I can.

Why the Content Layer bottom is off the metrics of the menu bar height at the side?

As I’ve tried to explain in this story, I’ve build those designs thinking about the structure of the different layers.

In this case, there are 3 layers: 2 which are at the same level, and the Content Layer which is ‘above’ (if you think about it in 3D).

Currently in most of UI, different levels are hinted by either shadow or transparency (transparency that I don’t use in the Content Layer to improve contrast) — so I’m left with just shadows to give the sense of depth.

I think shadows are enough to understand the depth, but I also think some other visual hints can help the user to understand the layering structure.

I’ve tried different things, and I’ve came up with the off-metric thing.

As you can see in the example below, in this case (without using shadow), it’s impossible to determine which square is above the three other.

4 squares without shadows without off-metric

But if you change slightly the size of one, it’s become clear that the bottom-right-square is above the three other squares.

4 squares without shadows with off-metric

And now and example with shadows and thinner strokes:

4 squares with shadows without off-metric
4 squares with shadows with off-metric

Again, I think it’s easier to understand in the second picture that the bottom-right-square is above the other.

This shows that the off-metric thing isn’t redundant, but enhance the understanding of the layering structure given by the shadow.

And it’s easy to understand why: if the bottom-right square is above the other squares, it should be closer to the eyes of the user, and therefore appear larger.

It’s the same situation for the design I’ve shown in the story: if you had to think about it in 3D, the Content Layer has the same height as the layer under it (menu layer), so if it was at the same level, there will be no off-metric.
But because the Content Layer is above, it should appear larger for the user, and therefore be off the metric of the Menu Layer.

Here a picture to help:

Layering structure of the music app concept

I hope this explanation is easier to understand, and give more legitimicy to the design I’ve made.

So no, it’s not just about eye-candy feature, but about user experience: to help the user to understand the layering structure of the app and thereby help the user to understand the hierarchy of the elements on the screen.
(I’m aware that the off-metric is quite exagerate when you compare to the shadow, maybe I could reduce it. And this gives me an other idea: I have to determine and fixe the size of the off-metric things — the size should not depend on visual purpose, it should be always the same)

I’d be glad to know your thoughts after this explanation,

Maël

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade