Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Learning Material Design

You're reading from   Learning Material Design Master Material Design and create beautiful, animated interfaces for mobile and web applications

Arrow left icon
Product type Paperback
Published in Dec 2015
Publisher
ISBN-13 9781785289811
Length 186 pages
Edition 1st Edition
Languages
Tools
Concepts
Arrow right icon
Authors (2):
Arrow left icon
Nadir Belhaj Nadir Belhaj
Author Profile Icon Nadir Belhaj
Nadir Belhaj
Kyle Mew Kyle Mew
Author Profile Icon Kyle Mew
Kyle Mew
Arrow right icon
View More author details
Toc

Material properties

As mentioned in the introduction, material can be thought of as being bound by physical laws. There are things it can do and things it cannot. It can split apart and heal again, and change color and shape, but it cannot occupy the same space as another sheet of material or rotate around two of its axes. We will be dealing with these properties throughout the book, but it is a good idea to begin with a quick look at the things material can and can't do.

The third dimension is fundamental when it comes to material. This is what gives the user the illusion that they are interacting with something more tangible than a rectangle of light. The illusion is generated by the widening and softening of shadows beneath material that is closer to the user. Material exists in virtual space, but a space that, nevertheless, represents the real dimensions of a phone or tablet. The x axis can be thought of as existing between the top and bottom of the screen, the y axis between the right and left edges, and the z axis confined to the space between the back of the handset and the glass of the screen. It is for this reason that material should not rotate around the x or y axes, as this would break the illusion of a space inside the phone.

The basic laws of the physics of material are outlined, as follows, in the form of a list:

  • All material is 1 dp thick (along the z axis).
  • Material is solid, only one sheet can exist in one place at a time and material cannot pass through other material. For example, if a card needs to move past another, it must move over it.
  • Elevation, or position along the z axis, is portrayed by shadow, with higher objects having wider, softer shadows.
  • The z axis should be used to prompt interaction. For example, an action button rising up toward the user to demonstrate that it can be used to perform some action.
  • Material does not fold or bend.
  • Material cannot appear to rise higher than the screen surface.
  • Material can grow and shrink along both x and y axes.
  • Material can move along any axis.
  • Material can be spontaneously created and destroyed, but this must not be without movement. The arrivals and departures of material components must be animated. For example, a card growing from the point that it was summoned from or sliding off the screen when dismissed.
  • A sheet of material can split apart anywhere along the x or y axes, and join together again with its original partner or with other material.

This covers the basic rules of material behavior but we have said nothing of its content. If material can be thought of as smart paper, then its content can only be described as smart ink. The rules governing how ink behaves are a little simpler:

  • Material content can be text, imagery, or any other form of visual digital content
  • Content can be of any shape or color and behaves independently from its container material
  • It cannot be displayed beyond the edges of its material container
  • It adds nothing to the thickness (z axis) of the material it is displayed on
lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime