Introduction to Material Design
Download as PPTX, PDF•1 like•785 views
The document introduces Material Design, a visual language that combines classical design principles with modern technology to create intuitive user experiences. It discusses key components such as elevation, shadows, motion, and user interface design, especially for devices like Google Glass. The document also emphasizes the importance of responsiveness, relevant information delivery, and a consistent visual style for optimal user engagement.
![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!?/+-=
()[]#@$%^&*<>:;”](https://image.slidesharecdn.com/augmedixktsession-150905142646-lva1-app6891/85/Introduction-to-Material-Design-29-320.jpg)
Introduction to Material Design
- 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.
- 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.
- 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