UI Design

Mastering Surface Elevation in UI Design

Surface elevation in UI design is the art of creating a visual hierarchy that gives the user interface a sense of dimension and structure. It involves layering elements to convey the illusion of proximity and importance.

By strategically using surface elevation, shadows, gradients, and spatial relationships, you can guide users’ attention and interactions, making the interface more intuitive and engaging.

3D illustration of stacked square surfaces with an upward red arrow and downward black arrow, representing UI elevation and depth, set against a red-to-yellow gradient background.

What is Surface Elevation in UI Design?

A user interface is a collection of surfaces, and elevating those surfaces helps communicate the activity and importance of elements. Surface elevation in UI design refers to the perceived distance between surfaces on the screen, enhancing the visual structure and user flow.

Diagram showing top, isometric, and side views of UI elevation. The top view displays two squares, the isometric view shows stacked squares indicating depth, and the side view highlights elevation levels from 1dp to 8dp for lowered and elevated elements.

Why Use Elevation?

Without surface elevation, interactive elements blend into the background, leading to poor usability. Elevation helps distinguish elements and guide users’ attention.

Comparison of two mobile UI designs. The left design uses color contrast to elevate elements, while the right design uses shadows to indicate elevation, with a card floating above the background.

UI DESIGN FOUNDATIONS

Kickstart your career in UI design by building solid UI foundations

Are you a beginner looking to start your journey into UI design? Or perhaps you’ve been self-learning for a while but aren’t quite confident you’ve grasped the basics?

View Details

Different Types of Elevation Levels

Using varying shadow spreads gives a clear sense of depth and hierarchy.

Furthest from the screen surface: No shadow spread
Medium distance: Small shadow spread
Closest to the screen surface: Large shadow spread

Illustration of UI element elevation with varying shadow spreads. Elements closest to the screen surface have the largest shadow spread, while those further away have minimal or no shadow spread.

How to Communicate Surface Elevation?

Surface elevation is primarily communicated through shadows, but you can communicate depth and elevation with the following as well:

Color
Opacity
Blur
Overlap

Twitter-like mobile UI showing how shadows create elevation. The post has a shadow beneath it, highlighted by a diagram showing a 5dp difference in elevation between UI elements.

Implement Dynamic Elevation

Surface elevation can change based on user interactions. Dynamic elevation makes the interface feel responsive and interactive.

UI interaction states for buttons and cards. Buttons change appearance when hovered and clicked, with shadows enhancing depth. A Figma course card floats above its background when hovered.

Conclusion

Mastering surface elevation in UI design is essential for creating intuitive and engaging interfaces. By using shadows, color, opacity, and dynamic elevation, designers can build clear visual hierarchies that enhance user experience. Remember, effective depth guides users naturally, improving both aesthetics and usability.

For other valuable educational resources, explore our Learn section. Here, we offer heaps of courses, workbooks, and other resources that will help you improve your skills in UX/UI.
Happy designing! 🤗