Material Design Exploration Summary Notes

Material Design is -

A design language - visual, interaction & motion

A new design system for designing interfaces across platforms

A new perspective on what a human and device relationship can be

A design philosophy that is trying to acknowledge the technology behind the interface

“A single underlying design system organises interactions and space. Each device reflects a different view of the same underlying system."

  1. Material is a Metaphor - deep and dense in meaning, communicate more richly than verbal language. A backstory for the design, it unifies, moves fast and intuitively.
  2. Surfaces are intuitive and natural - inherent understanding of objects and things
  3. Dimensionality affords interactions
  4. One Adaptive Design
  5. Content is bold, graphic and intentional
  6. Color, surface, and iconography emphasise actions
  7. User initiates change
  8. Animation is choreographed on a shared stage
  9. Motion provides meaning - every app, feature and action tells a fragment of a story

Principles -

  1. Material tangible surfaces - everything in ur UI lives within a surface we can touch. Reacts to our input. Immediate feedback.
    - Tangible Objects (one thing is separate from another)
    - Hierarchy (closer,larger=more imp)
    - Interaction Cues and Affordances
  2. Bold Graphic Design - Coor, Typography, Space, Imagery. Content is bold, graphic and intentional. Use of Typographic Scale.
    Principles of imagery - Personal relevance, Informative, Delightful. Be immersive, be thoughtfully ubiquitous, appreciate content.
    Best practice - have a point of focus(clear representation), build narratives, introduce scale.
    Conor can direct attention, apply hierarchy and structure.
  3. Meaningful Motion - Guide focus, convey hierarchy, foreshadow actions, distract from loading, add polish + delight, spatial model, interaction cues, character.
    Lift up, expand, move in curves.
    -Responsive (immediately and quickly responses to your touch - elevation, ripple, new surface creation)
    -natural (gravity, friction, momentum. Asymmetric easing curves for acc and deacc. curved motion)
    -aware (connected movement. surfaces push surfaces at same elevation, or rise above them. magnetism - relationship and interactions with other objects. )
    -intentional (common shared elements between views. staggered appearance. resistance to non-movement)
    A dialogue between user & system - balancing realism and responsiveness
  4. Adaptive Design - Rubrics: Balanced use of space; Reading Comfort; Image Quality; Maintaining context; Aesthetic. Breakpoints are content first.

Material is alive, responsive, natural, aware, intentional.

  • “Quantum paper" ..physics of it! for rich tactile UIs, paper-like, how surfaces work and why
  • similarity between how you hold books and devices, understand software like materials you use everyday
  • Shadow depth hues to communicate surface
  • button - area on screen to perform an action, lifts up instead of acting pressed since u can’t really touch it
  • color picked from primary, then using an accent

Z-space for hierarchy - How paper lifts in space, and expands, and be the first step along a user flow.

Light interacts with objects, Folds and shadows reveal the form of the object you are looking at. Surfaces and shadows provide visual cues grounded in reality.

Balance realism and minimalism.

Bring print to life! Responsive paper and ink. sense of tactility is vitally important. Paper has fixed shape (circle and rectangles) and dimensions but inks don’t. Materials can change (resize, transform). Paper - shape and size. Ink - flow. Symmetric resizing is for Z-level while asymmetric is for movement. Paper can split, join. Start and return to core shapes (circles, rectangles). Creating or destroying paper = motion. (in place, enter/exit, cloning)

Arrangements - Seam (stitched together, move together), Step (different Z-pos, move independently. e.g. toolbar) .. Don’t split actions if paper passes over toolbar, keep on one side.

The Fab (floating action button) - can straddle a seam if it relates the content of both the papers meeting at the seam.
- can straddle a step if it relates to the paper creating the step (more forward in Z)

Surfaces + Shadows

Chrome vs Content

Test that primary color contrasts with the Fabs. Also desaturate (b/w) colors to see that primary colors have consistent brightness

Layout - metrics, grids and key lines.
Components: 8dp square grid
Type: 4dp square grid
Mobile: 56dp
Larger screens: 64dp

Touch targets at least 48x48dp

Too many surfaces can be distracting. Group similar content onto same surface (using seams for separation).

Use size of object n distance to move for timing the animations
staggered animations
Coordinated motion