In this short presentation I have tried to cover Google Provided Material Design guideline. As we are directly involved with Google glass development, I also covered Google Glass design principles for my team mates.

1. 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.
Contents
Environment
Material Properties
Elevation and shadow

2. Goals
Create a visual language that synthesizes classic principles of good
design with the innovation and possibility of technology and science.
Introduction
Principles
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.
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 metaphor Motion provides meaningBold, graphic, intentional

3. 3D World
The 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

4. Environment
Light and shadow
Within 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 light Shadow cast by ambient light Combined shadow from key and ambient lights

5. Physical properties
Material 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-properties
Material properties

6. Material properties
Transforming material
Transformation of material object is another essential part of material design
Source:
https://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-transforming-material

7. Material properties
Movement of material
Movement of material object is another essential part of material design
Source:
https://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-transforming-material

8. Elevation and shadow
Elevation
Elevation 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.

9. 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.

10. Elevation and shadow
Elevation Example 1

11. Elevation and shadow
Elevation Example 2

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

13. Elevation and shadow
Shadow

14. Elevation and shadow
Shadow
Source: https://www.google.com/design/spec/what-is-material/elevation-shadows.html#elevation-shadows-shadows

15. Animation
Meaningful transition
Motion design can effectively guide the user’s 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#

16. Animation
Responsive interaction
Just as the shape of an object indicates how it might behave, watching an object move demonstrates whether it’s 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#

17. Animation
Delightful details
Animation 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

18. Design Principle of Google Glass
Mohammad Arman
Contents
Design for Glass
Don’t get in the way
Keep it relevant
Avoid the unexpected
Build for people

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

20. Don't get in the way
Glass 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.

21. Keep it relevant
Deliver 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.

22. Avoid the unexpected
Unexpected 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.

23. Build for people
Design 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.

24. Style guide for Glass
Glass 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.

25. Card regions
Main Content
The 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 image
Images work best when full-
bleed and do not require the
40px of padding that text
requires.
Padding
Timeline cards have 40 pixels of
padding on all sides for the text content.
This allows most people to see your
content clearly.
Footer
The 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 column
Left 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.

26. Metrics and Grids

27. 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:
White
Gray
Blue
Red
Green
Yellow
#ffffff
#808080
#34a7ff
#cc3333
#99cc33
#ddbb11

28. Typography
Since 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#

29. 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 Light
Glass displays most text in this font.
ABCDEFGHIJKLMN OPQRSTUVWXYZa bcdefghijklmnopqr
stuvwxyz1234567 890!?/+-=()[]#@$
%^&*<>:;”
Roboto Regular
Glass displays footnote text in this font.
ABCDEFGHIJKLMNOPQRST UVWXYZabcdefghijklmnopq
rstuvwxyz1234567890!?/+-=
()[]#@$%^&*<>:;”

30. 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

31. Material Icons
Material 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/

32. Design tool for Glass flow diagram
While 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/

33. Good bye
Tap to go home