Material Design Initial Thoughts
By Derek Knox
Below is a summation of notes on the core of Google’s Material Design Spec. Apple has similar UI/UX design guidelines. The design principles behind the “Material Design” spec are not new. The spec simply provides details, guidelines, examples, and terminology that reflect Google’s decision making and intention.
The aspects most successful in my opinion are the concepts of environment (rules for UI elements in x,y,z), the sheet/ink metaphor (material properties), layout (seams, steps, etc.), and animation (meaningful transitions).
- Material Design stems from the desire to create a uniform design language that accounts for multiple platforms and screen sizes. Mobile is fundamental, but touch, voice, mouse, and keyboard are first-class input methods.
- “Material is grounded in tactile reality, inspired by paper and ink, yet technologically advanced and open to imagination and magic.”
- Surface and Edge provide visual cues grounded in reality where tactile attributes (page/panel edges, shadow, etc) help users quickly understand affordances. The flexibility of the material creates new affordances that supersede those in the physical world, without breaking rules of physics.
- Light, Surface, and Movement are key to conveying how objects move, interact, and exist in space and in relation to each other.
- Print-based design (grids, space, scale, color, imagery, typography) concepts provide hierarchy, meaning, and focus in addition to an aesthetic.
- Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle and clear. Transitions are efficient yet coherent.
- The material environment is 3D so all objects have an X, Y, Z
- The z-axis is perpendicular to the display, where positive z extends toward the viewer
- Every sheet of material occupies a single position along the z-axis that is a standard 1dp thick. The inkupon a sheet of material is the dynamic display surface coating each sheet.
- Virtual lights illuminate the scene and allow objects to cast shadows. There are two types
- Ambient (consistent, soft shadows from all angles)
- Key (light creating directional shadows – often at top of Y just out of interface bounds)
- Material has certain immutable characteristics and inherent behaviors. Understanding them will help you manipulate material in a way consistent with its design vision.
- Material has varying x & y dimensions and a uniform thickness of 1dp. In essence each material is a “sheet” that never has 0 thickness.
- Material casts shadows resulting from relative elevation (z-position)
- Content is displayed on material in any shape and color (content does not add thickness, content is the coating of ink on the sheet). Content is decoupled from the material, but the material clips the content if it changes size
- Material is solid (input events cannot pass through material)
- Material cannot pass through other material.
- Material can change shape.
- Material grows/shrinks only along its X/Y plane
- Material never bends or folds.
- Sheets of material can join together to become a single sheet.
- Material can split apart, but heals to become one again.
- Material can move along any axis, it can also appear/disappear spontaneously in the environment. If a material appears/disappears spontaneously, it must grow from or shrink to its “point of origin” (often a user touch/click point).
- Z-axis motion is typically a result of user interaction
Objects in 3D Space
- 3D is used to provide a spatial model to the user
- Elevation is the relative z-position of an object along its parent’s z-axis
- Since material has a standard 1dp thickness, all elevation distances are measured from one top surface to another top surface
- All material objects have a resting elevation (card is 2dp, app bar is 4dp, FAB is 8dp).
- Certain component types have responsive elevation based on user/system events and they return to their resting elevation once “disengaged”
- As shadow grows softer and larger, a material object is understood has increasing its z-position. On the other hand, if a material object only grows larger as its shadow size remains constant, it is understood as a shape change.
- Motion in a material environment should be beautiful. It also should help build meaning about spatial relationships, functionality, and intention of the system.
- Accelerate objects swiftly and decelerate them slowly to avoid abrupt changes in velocity.
- When an object enters frame, ensure it’s moving at its peak velocity to create a confident transition.
- User input is confirmed through visual communication. Material has three core reactions:
- Surface – content or material surface itself updates visually (ink change)
- Material – a sheet of material elevates and/or resizes (material sheet change)
- Radial – a user’s input causes a ripple effect resulting in numerous surface and/or material reactions
- Point of Origin – when a new material is generated, surface growth should originate from the point of input
- Motion design should serve a functional purpose typically by communicating how an element got from point/state A to point/state B while simultaneously improving the overall beauty of the experience.
- Meaningful Transitions
- Visual Continuity – a well-designed transition does the heavy lifting and enables the user to clearly understand where their attention should be focused. A transition has three categories of elements.
- Incoming elements
- Outgoing elements
- Shared elements
- Considerations – Ask yourself (in communicating clarity and delight)
- How should the user’s attention be directed?
- What elements and/or motions support that goal?
- Hierarchical Timing
- Ensure motion supports the information hierarchy, conveying what content is most important by creating a path for the eye to follow. If elements share a weighted importance, introduce them as a group.
- Consistent choreography
- Can help users “get” the app/interface. Coordinated and consistent animation helps solidify a user’s mental model.
- Animation should most be used for transitions, but subtle and creative animations can add a level of delight and craftsmanship to an interface.
- Limit your color palette (typically three or so hues and an accent color)
- Use alpha values for grey text, icons, and dividers (tool for conveying hierarchy)
- 100% Text/Icons
- 70% Secondary Text
- 30% Disabled/Hint Text
- 12% Dividers
- Use the accent color for your primary action button and components like switches, sliders, link text, etc.
- Color elements are flush to the surface. Don’t embellish color elements with edges or shadows.
- Photography automatically implies a degree of specificity and should be used to showcase specific entities and stories. Illustration should represent concepts and metaphors.
- To make typography legible on imagery, add text protection scrims. Dark scrims should be between 20%-40% opacity and light scrims should be 40%-60% depending on content. Don’t obscure imagery when using a scrim.
- Hero images are typically anchored prominently and above-the-fold. They serve to draw the user in, provide context about the content, or reinforce the brand.
- Use no more than 7 weights (Thin, Light, DemiLight, Regular, Medium, Bold, Black). DemiLight is uncommon however and sticking to the other 6 is most common.
- Typographic Scale limits type sizes that work well together along with a layout grid. The basic set is 12, 14, 16, 20, and 34. Below is an example breakdown.
- Typographic Contrast is ideally 7:1 for readability.
- Reference below link for typographic style rule examples.
- Material design uses print design fundamentals like baseline grids and common structural grids. Structural grids and visual consistency create an environment for the user that is recognizable across products providing familiarity and comfort.
- Paper Craft
- Paper has a flat background color. A layout is typically composed of multiple sheets.
- Seams – sheets share a full-length common edge, they typically move together
- Steps – result when two sheets overlap, sheets with different elevations typically move independently (limit nested step usage to avoid too much depth in an interface)
- Toolbar – strip of paper used to present actions, navigation actions link left where contextual actions link right. Toolbars can
- Form a step above another sheet (underlying sheet is clipped)
- Form a seam (toolbar moves with the content and is not clipped)
- Form a waterfall (top sheet is separated by a seam and the underlying sheet is clipped, but a step results on scroll)
- Form an overlay (sheet clips the toolbar)
- Floating Action Button – circular sheet separate from a toolbar. It rests its center on the edge of a sheet. The button relates to the elevated sheet when placed on a step or relates to both sheets if placed on a seam. The FAB represents a single promoted action.
- Baseline – the underlying grid (8dp for sheets, 4dp for type and iconography in toolbars)
- Keyline – vertical/horizontal rules to align and anchor elements (spacing and margins)
- Ratio Keylines – same as keyline but with ratios vs. exact units
- Incremental Keylines – same as keyline but uses specifically sized “tile chunks” to determine widths, heights, spacing, etc.
- Touch Target size should be a minimum 48dp by 48dp (icon itself can be smaller)
- Ask yourself, “What will typical users most likely want to do in my interface?”
- Put content forward (make content front and center, nav is secondary)
- Anchor navigation and toolbars (if search is a core element, ensure it has a place among the top-level actions)
- Be opinionated about functionality (focus users to most critical aspects, just because you can do a lot doesn’t mean you should, de-emphasize less frequently traveled paths)
- Use tabs to switch between a small number of equally important views (mobile focus)
- Use a left navigation drawer for large number of equally important views (mobile focus)
- UI Regions
- Define a primary horizontal or vertical divider
- Avoid slicing up interface into too many regions, use white space to delineate secondary areas
- Break edges with cards (use cards if specific behaviors are needed or if groupings of information need more separation than whitespace or dividers can provide)
- Whiteframes provide “templates” for consistent approaches to surfaces, layering, and shadows.