UI/UX series: Lights and shadows that illuminate the interface

Empty state, color, typography…slowly the mosaic is made up and we discover everything about the new design chosen for the Marketing Cloud platform. It is the turn of the elevation.

UX/UI series #4

Elevation

One of the principles of our visual language is to have a three-dimensional space, within which the elements can be inserted and moved. But just like in the physical world, the various elements have properties that must be respected.

They can be placed side by side, overlap or be positioned in a certain sequence, but they cannot pass through each other. For example, it is important to remember that objects cast shadows and reflect light. When choosing how to use them, keep in mind the effects they can produce and be careful that the result is not confusing and unclear.
In adopting these principles, we have decided to create a model that is known to users and consistently applicable throughout our system.

All precautions and principles that we have adopted in the re-design of the platform interface, imagining and creating a model that can be applied consistently throughout our system.

Elevation planes

The elevation is the relative depth, or distance, between two surfaces along the Z axis. If we take a screen as an example, the Z axis occupies the virtual space towards the front and back. The plane represented by the screen has an X,Y coordinate system, with 0,0 being at the top left. However, the Z elevation is represented by an imaginary line pointing towards the user, while -Z is the line in the opposite direction, behind the screen plane.

The elevation of an element is represented visually by a shadow, which is the only indicator that helps a user perceive the spatial elevation between multiple surfaces. Shadows provide important visual clues about the depth of objects and their movement.

The elevation of an object determines the appearance of its shadow.

Elevation Levels

Shadow

Each elevation level projects the same type of shadow on the plane below. This means that two elements on the same elevation plane will project shadows with the same characteristics.

We have defined the shadows for each elevation level, so they are distinguishable from each other and communicate a correct impression of depth, when compared with what we experience in the real world.

Shadow

How to use

Predefined elevations

Some elements have either a predefined or dynamic elevation level, which should not be altered in any way.

  • Do: If the interface component has a predefined elevation plane, this should not be changed at all. The snippets listed above should only be used in specific instances.
  • Don’t: Do not alter the elevation of components when it is already defined.

do_dont

Elements on the same level

Elements on the same elevation level cannot overlap. It is important to maintain an elevation hierarchy, within which the highest element is above the lower ones.

  • Do: When elevated elements overlap, the priorities must be managed so that the lower elevation level is displayed beneath the higher one.
  • Don’t: Do not overlap elements with a lower elevation level. These elements can be placed side by side, but not overlapped.

do_dont

Now

We could say much more and give many other examples on the topic of elevation and good practices. What emerges from this brief introduction and we want to emphasize is the importance of interpreting the principles of elevation and applying them without forgetting the impact they have on the user’s eye and navigation.

The position and movement options of the elements in the space on the screen contribute to enriching and facilitating the user experience in using our interface. We have created an orderly, clean and pleasant to navigate virtual place to make the use of the Marketing Cloud pleasant.

But it’s not over yet! We will further explore just why the new UI was designed and implemented as you see it today. Stay tuned!

 

__________________

Discover the UX/UI Marketing Cloud series!

Empty States Colors Typo Elevators Structure
EMPTY STATES COLOR TYPOGRAPHY
ELEVATION
STRUCTURE