Material is the Metaphor4:01 with Anwar Montasir
Getting to know Material Design starts with understanding the virtual materials, paper and ink, that inform the appearance and behavior of Google’s design language.
If you have a smartphone handy, hold it flat in the palm of your hand. 0:00 Imagine that the apps on your phone contain layered sheets of paper 0:05 pressed between the device in your palm and the glass covering the screen. 0:09 Tapping onscreen buttons might cause these layers to rearrange 0:15 or summon new layers of paper from offscreen. 0:19 Each layer of paper contains content: text, images, videos, and more. 0:23 Material Design imagines this content as virtual ink 0:30 decorating each sheet of virtual paper. 0:35 Keep that visual in mind as we explore the appearance and 0:38 behavior of Material Design content, 0:42 made of virtual materials inspired by real-world paper and ink. 0:45 Every layer of content in a Material Design app 0:51 exists on a sheet of virtual paper. 0:55 Each sheet of paper is exactly one dp (or "dip") thick. 0:58 Dp is short for density-independent pixels. 1:03 Some devices have high-resolution screens 1:08 with more pixels per inch than a low-resolution screen. 1:11 Dps are flexible units that scale to have uniform dimensions on any screen, 1:15 which allows for consistent designs across a variety of devices. 1:21 So, for example, a 48 by 48 dp button, the minimum acceptable size for 1:26 a tappable interface element according to the Material Design specs, 1:32 would appear to the user to occupy 48 square pixels on the screen, 1:37 no matter how high the resolution. 1:42 Virtual paper can be as small as a button or grow large enough to fill the screen. 1:47 Paper can split apart into smaller shapes. 1:53 And the smaller shapes can heal into one large paper. 1:57 Otherwise, virtual paper behaves a lot like physical paper. 2:02 One sheet can be behind another or in front of it. 2:07 But two sheets of paper cannot occupy the same physical space and 2:10 one sheet of paper cannot pass through another. 2:14 Virtual paper can move forward towards the user on the z-axis. 2:19 And in fact, 2:24 interactive elements in Material Design appear to rise to meet the user's finger. 2:26 Or they can recede away from the user. 2:32 But a sheet of paper cannot flip or fold, as movements are limited 2:35 to the space between the device in the user's hand and the glass screen. 2:41 Virtual paper casts shadows. 2:47 Shadows suggest depth. 2:50 A sheet of paper closer to the user 2:52 than another on the z-axis should cast a longer shadow. 2:55 If you were making a paper prototype for an Android app, 3:00 you could use layers of paper to explore depth and shadows. 3:04 I've included a link to a video in the teacher's notes 3:09 that demonstrates this concept in more detail. 3:12 [SOUND] The content decorating virtual paper is called ink. 3:15 Ink is the content found in your app. 3:21 In my example of a recipe app for a cooking magazine, 3:24 this would mean a search interface and a list of recipes but 3:28 ink can be any combination of text, image and video content. 3:32 Ink can move independently within a sheet of paper, forming any shape imaginable. 3:39 Or it can move and scale with the paper. 3:47 But ink cannot leave the paper. 3:52 Ink has no depth and doesn't impact the shadows cast by paper. 3:55
You need to sign up for Treehouse in order to download course files.Sign up