Fundamentals - Depth & Elevations

Hierarchy

Explanation:

Hierarchy is established through depth, providing a clear structure to the interface. By manipulating elevation, the design system emphasizes the importance of different elements, guiding navigation and interaction.

Do's and Don'ts:

Do utilize shadow and depth strategically to delineate between primary and secondary content.

Don't add depth indiscriminately, as this can lead to a confusing user experience.

Interactivity

Explanation:

Depth cues in the interface signal interactive elements, such as buttons or actionable cards, enhancing the user's understanding of how to navigate within the application.

Do's and Don'ts:

Do apply subtle elevation changes to interactive elements to indicate their functionality.

Don't overemphasize elements that are not interactive, as this can mislead users.

Focus

Explanation:

Depth helps to establish focus by drawing the user's attention to specific areas, ensuring a clear path through the user journey within the product.

Do's and Don'ts:

Do use elevation to highlight areas of importance or active states in the application.

Don't create flat designs where the depth cues necessary for directing user focus are absent.

Visual Hierarchy and Surface Depth

Explanation:

Visual hierarchy within the design system is articulated through varying levels of elevation, creating a sense of depth. Surface depth is applied to imply the relative importance of elements on the screen.

Do's and Don'ts:

Do utilize shadows and bevels to enhance the user experience, ensuring interactive elements are inviting to click.

Don't use inconsistent shadow styles for similar elements, which can confuse users about the hierarchy and interactivity.

Layering and Resting Elevation

Explanation:

Layering is a critical aspect of a design system, providing a structured approach to organizing elements. Resting elevation refers to the default elevation level assigned to components.

Do's and Don'ts:

Do use layering to organize the interface and guide user focus effectively.

Don't overuse layers or create unnecessary complexity in the interface that could hinder usability.

Changing Elevations

Explanation:

In the interface, changing elevations respond dynamically to user interactions, such as pressing a button, indicating a change in state or available actions.

Do's and Don'ts:

Do implement dynamic elevation changes to signify interactive states or transitions.

Don't neglect to provide visual feedback through elevation changes, which could make the interface feel unresponsive.