Skip to content

MATERIAL DESIGN

INTRODUCTION

What is Material Design:

Material Design is a visual language that synthesizes the classic principles of good design with the innovation and possibility of technology and science.

Goals:

  1. To create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.
  2. To develop a single underlying system that allows for a unified experience across platforms and device sizes.

Principles:

  1. Material is the metaphor
    2. A material metaphor is the unifying theory of a rationalized space and a system of motion.
  2. Bold, graphic, intentional
  3. Motion provides meaning

ENVIRONMENT

Contents:

  1. Material design is a three-dimensional environment containing light, material, and cast shadows.
  2. Material objects have x,y,z dimensions.
  3. All material objects have a single z-axis position.
  4. Shadows:Shadows are created by the elevation difference between overlapping material.
  5. Key lights create directional shadows, and ambient light creates soft shadows.

3D World

The material environment is a 3D space, which means all objects have x, y, and z dimensions.Every sheet of material occupies a single position along the z-axis and has a standard 1dp thickness, equivalent to one pixel of thickness on screens with a pixel density of 160. On the web, the z-axis is used for layering and not for perspective. The 3D world is emulated by manipulating the y-axis.

Light and Shadow

In Android development, shadows occur when light sources are blocked by sheets of material at various positions along the z-axis. On the web, shadows are depicted by manipulating the y-axis only. Within the material environment, virtual lights illuminate the scene. Key lights create directional shadows, while ambient light creates soft shadows from all angles.

Material Properties

Material has certain immutable characteristics and inherent behaviors.

Material Characteristics

  1. Solid
  2. Occupies unique points in space
  3. Impenetrable
  4. Mutable shape
  5. Changes in size only along its plane
  6. Unbendable
  7. Can join to other material
  8. Can separate, split, and heal
  9. Can be created or destroyed
  10. Moves along any axis

Physical Properties

  1. Material has varying x & y dimensions (measured in dp) and a uniform thickness (1dp).
  2. Material casts shadows, Shadows result naturally from the relative elevation (z-position) between material elements.
  3. Content is displayed on material, in any shape and color. Content does not add thickness to material.
  4. Content can behave independently of the material, but is limited within the bounds of the material.
  5. Material is SOLID - Input events cannot pass through this material.
  6. Multiple material elements cannot occupy the same point in space simultaneously..
  7. Material cannot pass through other material.

Transforming Material

  1. Material can change shape.
  2. Material grows and shrinks only along its plane.
  3. Material never bends or folds.
  4. Sheets of material can join together to become a single sheet of material.When split, material can heal. For example, if you remove a portion of material from a sheet of material, the sheet of material will become a whole sheet again.

Movement Of Material

  1. Material can be spontaneously generated or destroyed anywhere in the environment.
  2. Material can move along any axis.
  3. Z-axis motion is typically a result of user interaction with material.

Elevation & shadows

Objects in material design possess similar qualities to objects in the physical world. In real world objects can be stacked or affixed to one another,but cannot pass through each other.Objects also casts shadows and reflects light.So Material design reflects same qualities.

Elevation

an element’s elevation indicates the distance between surfaces and the depth of its shadow,Measured from the front of one surface to the front of another. Elevation is the relative depth, or distance, between two surfaces along the z-axis.

In Andriod:

  1. Elevation is measured in density-independent pixels - DP
  2. Material elements have depth (all material is 1dp thick)
  3. elevation is measured in distance from the top of one surface to the top of another.

Resting elevation

All material components have consistent resting elevations across apps, but may have different resting elevations across platforms and devices. All material Objects have resting elevations or default elevation that does not change. If an object changes elevation, it should return to its resting elevation as soon as possible. Components maintain consistent resting elevations across apps. For example, the floating action button’s elevation does not vary from one app to another.

Dynamic elevation offsets

Dynamic elevation offsets are the goal elevation(i.e elevation moved when any action is performed on a component) that a component moves towards, relative to its resting state.

Some component types have responsive elevation, meaning they change elevation in response to user input (e.g., normal, focused, and pressed) or system events. These elevation changes are consistently implemented using dynamic elevation offsets. Once the input event is completed or cancelled,the component will return to its resting elevation.

Avoid Elevation Interface

Components with responsive elevations may encounter other components as they move between their resting elevations and dynamic elevation offsets. Because material cannot pass through other material, components avoid interfering with one another any number of ways.

Shadows

  1. Shadows provide important visual cues about objects’ depth and directional movement.
  2. They are the only visual cue indicating the amount of separation between surfaces.
  3. An object’s elevation determines the appearance of its shadow.

Note

For Component REference shadows .See Dimensions in https://material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-shadows

Object RelationShips

Objects can move independently of each other or be constrained by objects higher in the hierarchy.All objects are part of a hierarchy described in terms of a parent-child relationships.The “child” in each of these relationships refers to an element that is a subordinate to its “parent” element.Objects can be children of either the system or another object.

Parent-child specifics:

  1. Each object has one parent
  2. Each object may have any number of children
  3. Children inherit transformative properties from their parent, such as position, rotation, scale, and elevation
  4. Siblings are objects at the same level of hierarchy.

Exceptions

Items parented to the root, such as primary UI elements, move independently of other objects.For example, the floating action button does not scroll with content. Examples: app’s side nav drawer , action bar , Dialogs.

Interaction

How objects interact with one another is determined by their place in the parent-child hierarchy.

Elevation

We determine the elevation of objects – their position in z-space – depends on the content hierarchy you want to express and whether an object needs to move independently of other objects.