Material Design:

The Paper of the Internet

pt 3

From this idea of digitizing paper comes a foundational principle of Material Design, environment. Designers looked at how papers could stack and overlap, and sought to bring that natural depth to web design. They wanted users to feel as though the web were a physical space. In practice, this appears through shadow and elevation. The size of the shadow would vary with its relative elevation from the page, just as a real-life object's shadow would grow as it got closer to the light source. Starting with this basic idea, Google designers could build off of it to show the separation of elements on a page, as users could then visualize how different menus, pages, and sidebars interact with each other in 3D space.

Content can appear to scroll underneath a menu bar because of a dropped shadow while dragging a file around appears to literally lift it from the page with a growing shadow. Alternatively, a translucent panel bar shows the user that content continues beneath it.

The spacing of elements within that environment is governed by another principle, layout. In their official documentation, Google designers ascribe a comprehensive set of rules to how elements should appear on a page and how they should interact with each other. These rules are based on basic graphic design principles like hierarchy and alignment. The idea behind having a large number of layout rules is so that design stays consistent across different pages and apps. In turn, this consistency reduces the cognitive load of the user, allowing them to more easily learn the UI. If a design/layout is predictable, the user is less likely to get confused or frustrated with the product.