Introduction to Material Design

We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. ContentsEnvironmentMaterial PropertiesElevation and shadow

GoalsCreate a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.IntroductionPrinciplesA material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.Material is the metaphorMotion provides meaningBold, graphic, intentional

3D WorldThe material environment is a 3D space, which means all objects have x, y, and z dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the positive z-axis extending towards the viewer. Every sheet of material occupies a single position along the z-axis and has a standard 1dp thickness.

Environment

EnvironmentLight and shadowWithin the material environment, virtual lights illuminate the scene. Key lights create directional shadows, while ambient light creates soft shadows from all angles.

Shadows in the material environment are cast by these two light sources. 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. The following example shows the card with a height of 6dp.

Shadow cast by key lightShadow cast by ambient lightCombined shadow from key and ambient lights

Physical propertiesMaterial casts shadows. Shadows result naturally from the relative elevation (z-position) between material elements.example shows the card with a height of 6dp.

Source: https://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-propertiesMaterial properties

Material propertiesTransforming materialTransformation of material object is another essential part of material designSource: https://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-transforming-material

Material propertiesMovement of materialMovement of material object is another essential part of material designSource: https://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-transforming-material

Elevation and shadowElevationElevation is the relative depth, or distance, between two surfaces along the z-axis.

Specifications:Elevation is measured in the same units as the x and y axes, typically in density-independent pixels (dp). Because material elements have depth (all material is 1dp thick), elevation is measured in distance from the top of one surface to the top of another.A child object's elevation is relative to the parent object's elevation.The images and values shown are for Android apps.

Elevation and shadow

In this diagram, only the elevation dimensions and layout for components are accurate. Other dimensions and overall layout of components are for illustration only.

Elevation and shadowElevation Example 1

Elevation and shadowElevation Example 2

Elevation and shadowShadowShadows provide important visual cues about objects depth and directional movement. They are the only visual cue indicating the amount of separation between surfaces. An objects elevation determines the appearance of its shadow.

Elevation and shadowShadow

Elevation and shadowShadow

Source: https://www.google.com/design/spec/what-is-material/elevation-shadows.html#elevation-shadows-shadows

AnimationMeaningful transitionMotion design can effectively guide the users attention in ways that both inform and delight. Use motion to smoothly transport users between navigational contexts, explain changes in the arrangement of elements on a screen, and reinforce element hierarchy.Source: http://www.google.com/design/spec/animation/meaningful-transitions.html#

AnimationResponsive interactionJust as the shape of an object indicates how it might behave, watching an object move demonstrates whether its light, heavy, flexible, rigid, small or large. In the world of material design, motion describes spatial relationships, functionality, and intention with beauty and fluidity.Source: https://www.google.com/design/spec/animation/responsive-interaction.html#

AnimationDelightful detailsAnimation can exist within all components of an app and at all scales, from detailed icons to key transitions and actions. All elements work together to construct a seamless experience and a beautiful, functional app.Source: https://www.google.com/design/spec/animation/delightful-details.html

Design Principle of Google Glass

Mohammad Arman

ContentsDesign for GlassDont get in the wayKeep it relevantAvoid the unexpectedBuild for people

Design for GlassUsers typically have multiple devices that store and display information for specific time periods. Glass works best with information that is simple, relevant, and current.

Don't get in the wayGlass is designed to be there when you need it and out of the way when you don't. Your Glassware must function in the same way. Offer engaging functionality that supplements the user's life without taking away from it.

Keep it relevantDeliver information at the right place and time for each of your users. The most relevant experiences are also the most magical and lead to increased engagement and satisfaction.

Avoid the unexpectedUnexpected functionality and bad experiences on Glass are much worse than on other devices, because Glass is so close to your users' senses.

Don't send content too frequently and at unexpected times. Always make it clear to users what the intention of your Glassware is and never pretend to be something you're not.

Build for peopleDesign interfaces that use imagery, colloquial voice interactions, and natural gestures.

Focus on a fire-and-forget usage model where users can start actions quickly and continue with what they're doing.

Style guide for GlassGlass has a unique style, so we provide standard card templates, a color pallete, typography, and writing guidelines for you to follow whenever possible.

Before designing any custom layouts, use the available CardBuilder Layouts provided by the GDK to give users a consistent user experience. If none of these layouts meet your requirements, follow the guidelines below in your design.

Card regions

Main ContentThe main text content of the card is in Roboto Light with a minimum size of 32 pixels and is bounded by padding. Text that is 64 pixels and larger uses Roboto Thin.Full-bleed imageImages work best when full-bleed and do not require the 40px of padding that text requires.PaddingTimeline cards have 40 pixels of padding on all sides for the text content. This allows most people to see your content clearly.FooterThe footer shows supplementary information about the card, such as the source of the card or a timestamp. Footer text is 24 pixels, Roboto Regular, and white (#ffffff) in color.Left image or columnLeft image or columns require modifications to padding and text content.Metrics and Grids

The Glass user interface has standard layout and margin guidelines for different types of timeline cards. Cards normally have the following general regions, and we've laid out some guidelines for you to follow for a general set of cards.

Metrics and Grids

Color

Glass displays most text in white and uses the following standard colors to denote urgency or importance. You can make use of these colors for your timeline cards as well:

WhiteGrayBlueRedGreenYellow#ffffff#808080#34a7ff#cc3333#99cc33#ddbb11

TypographySince the Ice Cream Sandwich release, Roboto has been the standard typeface on Android. Since Froyo, Noto has been the standard typeface on Android for all languages not covered by Roboto. Noto is also the standard typeface for all languages on Chrome OS.

https://www.google.com/design/spec/style/typography.html#

Typography

Glass displays all system text in Roboto Light, Roboto Regular, or Roboto Thin depending on font size. If you're creating live cards or immersions, feel free to use different typography to convey your own branding.Roboto LightGlass displays most text in this font.

ABCDEFGHIJKLMN OPQRSTUVWXYZa bcdefghijklmnopqr stuvwxyz1234567 890!?/+-=()[]#@$%^&*:;Roboto RegularGlass displays footnote text in this font.

ABCDEFGHIJKLMNOPQRST UVWXYZabcdefghijklmnopq rstuvwxyz1234567890!?/+-=()[]#@$%^&*:;

Typography - Dynamic text resizing

The following cards show examples of the typography characteristics of text based on the amount of text.

https://developers.google.com/glass/develop/gdk/card-design

Material IconsMaterial icons are beautifully crafted, delightful, and easy to use in your web, Android, and iOS projects. Learn more about material design and our process for making these icons in the system icons section of the material design guidelines.

https://www.google.com/design/icons/

Design tool for Glass flow diagramWhile sharing our concepts or ideas with our team mates sometimes we have to share flow diagrams of Cards. Google provides a dedicated tool for designing glass flow diagram.

https://glassware-flow-designer.appspot.com/

Good byeTap to go home