Material Design: Google's New Design Language

Editor's Notes

• #4: To understand Material Design, it’s important to understand the history of Android, particularly from a design perspective. Android has been evolving for several years, and Material Design isn’t like Windows Phone’s Metro or Modern UI, or iOS 7 in being a complete revamp.
• #5: Notifications Home screen widgets OTA updates
• #6: Density independent pixels Quick search box
• #7: Big screens Multiple account support, allowed services to plug their accounts Quick contacts Live wallpapers Speech to text New Lockscreen
• #8: Visual change for notification tray Overall increased use of darker colours, several widgets redesigned
• #9: Holo and its colours Action bar Fragments No physical buttons
• #10: Holo theme required to be present on all Android devices to run Android Market/Google Play Roboto font Blue accents
• #11: Expandable Notifications Google Now ushers users into the “contextual age”
• #12: Less resource intensive Full screen apps with transparent notification tray and on-screen buttons Whitening of notification tray icons, a sort of mid-way to Android L
• #13: This is where we are now I’m going to talk about some of the principles and goals of Material Design, as well as some general design philosophy that’ll help you to incorporate it into your work. I’ll try to use examples wherever possible
• #14: Just like any other project, before creating a “design language”, the team needs to set itself some goals You see where you are, and what you want to achieve The goal of HOLO, for example, was to bring about a cohesive structure that scaled easily from phones to tablets
• #15: Design has been around for years. While it has evolved in many ways, certain rules and principles remain everlasting. Material Design looks to mix some of these rules, even from the real world that some might consider skeumorphic, with technology and science
• #16: Material design is NOT only a redesign for Android. Material Design is about the new age, where services are now independent of devices and platforms, and the goal is to provide users with a consistent experience regardless of which device they’re using
• #17: While we won’t be talking about this much right now, it’s important to understand that with Material Design being about more than just the phone, the input mechanisms it must cater for will also vary significantly. Touch for phones and tablets Voice for wearables Mouse and keyboards for computers
• #18: There are 3 key principles of Material Design that I will be discussing. As I talk about them, I’m going to leave this animation running, and use it to illustrate them. As you can probably guess by the name, Material Design has something to do with materials. The point here is that Material Design is all about looking at your components as objects, and to imagine them in the real world, governed in many ways by the rules of physics. These objects move about naturally, they expand and they contract. They’re not limited by the rules of physics, but follow them in many ways. A big focus of Material Design is to dial up the visuals. Imagery plays an important role and I’ll be spending some time dedicated to this just to share some best practices. The colours are completely unlike Android 1.0, serving a key purpose. Animations show acceleration, the transitions begin where the touch event occurs or where the item already existed.
• #19: It is critical to understand visual hierarchy to understand Material Design, or UI design in general According to Russell Ackoff, a systems theorist and professor of organizational change, the content of the human mind can be classified into five categories: data, information, knowledge, understanding, wisdom
• #20: Other forms of design include clothes, products, cars, all have different set of goals for the design process
• #21: Users will see various attributes of your design elements, and look for relationships to understand them.
• #22: Going to talk about some tools used for establishing a visual hierarchy The first, and most common of these, is size You’re exposed to this very often, for example in newspapers
• #23: Colors is a common way to establish categorization, such as Google Play here
• #24: A sudden color change tends to catch the user’s attention, use it to highlight something
• #25: Alignment is best used to group similar content together Two column alignment Additional alignment in right column, where text alignment options are in one row
• #26: Needed to highlight unread messages Needed to highlight a supported company
• #27: The closer to a user, the more important
• #29: emotional connect with the app
• #30: Convey specific information. Contextual to create an experience that feels intelligence
• #31: Delight user with unexpected but relevant imagery to make experience feel magical
• #32: Delight user with unexpected but relevant imagery to make experience feel magical
• #33: Both photography and illustration can live together in the same product Particularly useful for temporary images, error images, etc
• #34: Which of these images appears better? Try to be distinctive Googlers often appear in Google’s product photos
• #35: Have an iconic point in photography where focus is on single entity Ensure clear message is conveyed
• #36: Create an immersive story
• #37: Introduce alternative scales to create levels of visual importance
• #38: Create an immersive story