Is your app going Material? Here there are my top 8 bad practices to avoid at all costs if you really want to rely on the Material Design system.
1. Do not treat shadows as a decorative element
In Material Design every part of the system has a precise goal — because the content is the center of the attention, not the chrome that frames it — and shadows are no exception. They are not fancy elements meant to give fluffiness to an otherwise flat UI, but a key element to make the user immediately understand the structure of the app he is launching for the first time.
That’s because shadows are cast by the sheets of paper (or surfaces ) that compose the layout of the app itself ; so if two sheets of material are stacked on top of each other, the one on the top — the one that has a greater elevation on the Z axis, the one closer to the display of the device the user is holding — will cast a shadow on the surface below, giving a key visual cue about their reciprocal position: actually, the only visual cue about this relationship.
Of course, to cast a shadow you need light: and the 3D Material world — confined into the user’s device — is illuminated by a soft, diffuse ambient light and a directional, stronger key light; and this is why Material shadows are subtle yet effective enough to express the elevation of every sheet of paper, helping the user not only to catch the structure of a static scene but to effortless understand what is happening when a sheets of paper morphs or moves across the screen: if a surface is very close to the sheet on which is stacked, the shadow underneath will be relatively small and sharp; however, when the same sheet will move on the Z axis towards the user, incrementing its elevation, it will cast a bigger and more diffuse shadow on the surface below.
Now you’ll never watch a shadow as before — not even your own! And hopefully you will make appropriate use of the elevation property of your sheets of quantum paper. Just a few things to remember:
Material paper has a fixed thickness of 1 dp: this value never changes ;
The elevation of a sheet of paper is measured from its front to the front of the surface it is laid or floating on;
Shadows are cast when a surface is positioned on top of another surface: if the two surfaces are coplanar, no one will cast any shadow on the other!
Ink do not cast shadows, because it’s printed directly on surfaces: it doesn’t add extra thickness to the paper and it doesn’t float on it — so, no shadows for icons, text, photos and so forth!
A raised button in two states — A. normal B. pressed — as viewed by the user (left) and as it would be seen if we could watch the screen by one side (right) 2. Do not ignore the Material grid & keylines
The visual part of Material Design is inspired and strongly based on the principles of high quality print design . The ink’s role is to express the content while giving it order and hierarchy, just as the paper does to the structural level that holds that content. And besides inheriting the principles of print design, Material Design adopts the same tools — grids, keylines, the savvy use of typography and imagery.
One of the key elements that makes an app aesthetically pleasing and much more intuitive is the use of grids and keylines .
To put it simply, a grid system is a structure made of a series of horizontal and vertical lines which intersect and are then used to arrange content.
In the mobile world context, an appropriate use of the grid will make the UI balanced , ordered , rhythmical , harmonious and easier to understand and to interact with — and this happens because the grid system helps to design accordingly to some important Gestalt principles , like the law of proximity (humans perceive objects that are close to each other as forming a group ) and the law of good Gestalt (we tend to perceive different objects as grouped together if they form a pattern that is regular, simple and well-ordered, finding a meaning in such structured scenes). The best part? We just need to let ourselves to be guided by the grid, using white space to express groups and sections — no suffocating boxes or lines needed! In Material Design, the various UI components are sized according and aligned to a8 dp grid, while text uses a smaller4 dp grid.
Keylines are used in tandem with the grid system to enforce the sense of a well ordered UI and to help the user to easily scan the screen — their goal is to align and spacing properly the UI components in a coherent manner, vertically and horizontally.
Material Design suggests a number of vertical keylines to determine the placement of elements from edges of other elements, specific vertical sizes for content blocks height and horizontal margins for spacing appropriately the components laid on the screen.
At very least , you should consider three fundamental vertical keylines and the basic heights for the most common UI elements like items list ( tiles ); here there are these specs for smartphones — but remember that they should be coupled with other factors like text size, presence of subheaders and so forth. The Material Design specification will be super handy in this case, and the sticker sheets provided by Google are a really great time-saver.
Three basic vertical keylines
From the left and right edges, a vertical keyline at 16 dp for auxiliary content, like icons or avatars;
From the left edge, a vertical keyline of 72 dp for the main content, such as the App bar title and the main body content when supported by auxiliary items; otherwise, the main body content should be aligned to the previous 16 dp keyline;