Devdelly

Elevation Design Principle

January 22, 2020

As developers we often struggle with design, but there are some principles we can follow and techniques that we can use to create better designs. In this post we will look at the principle of elevation in a design. When we design pages and apps we often think only of the two-dimensional space for our layout, but by using the third dimension with elevation we can create better designs for our products.

Elevation

Elevation describes the distance between surfaces on the z-axis.

We as users are used to elements being placed and moving in a 3 dimensional space. Therefore adding depth to our user interfaces creates a more natural and logical feel to the whole UI of the application. In order to achieve the illusion of an element bein closer or further away on the screen, we can employ a few simple techniques such as:

  • Transparency
  • Overlap
  • Shadow

In the following we will have a closer look at these techniques and how we can use them to improve our user interface design.

Transparency

Transparency can help us to create the perception of an element being in front of another one.

Items
Item1
Item2
Item3
Item4
Item5
Item6
Items
Item1
Item2
Item3
Item4
Item5
Item6
Item1 Detail
Lorem

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Ipsum

Lorem ipsum dolor sit amet.

In this case we have a list of items and selecting an item opens the details of that item. By adding a bit of opacity to the newly opened detail page, this page appears to be on top of the list.

Overlap

Overlapping elements create a sense of depth in the application. The element that hides away parts of the underlying element appears to be closer to us. Additionally, this technique allows for a more dense layout.

A great example for this is a card layout:

Dreamaway Villa

Lorem ipsum dolor sit amet consectetur elit. Sequi reprehenderit tempore ipsa.

Instead of the usual card layout where both text and the image lie on the same plane, we create an effect of dimension by overlapping the description box and the image on the card.

Shadow

Shadow indicates that an element is elevated from the area it casts its shadow on. The larger and more diffused the shadow, the further appears its distance to the underlying element.

Close to its Parent
Further from its Parent

In this example we can also observe an interesting side effect of using shadows. If the element that casts the shadow is of a bright color, the element starts to appear brighter with a large shadow. We can take advantage of this effect for call to actions on a page and if we have multi step interaction such as opening a context menu upon a click.


A blog by Manuel about everything related to software development