Go Summarize

Material Theming: Build Expressively with Material Components (Google I/O'19)

Google Design2019-05-08
type: Conference Talk (Full production);#pr_pr: Google I/O#purpose: Educate
58K views|5 years ago
💫 Short Summary

Material Design and Material Theming were introduced by Google to create a unified design system across apps while allowing for brand expression. The process involves exploring UI design, focusing on core areas, and tailoring UI for different product needs. Material Theme incorporates Google's typeface, color palette, and icons for customization. The type system includes a type scale and guidelines for expressive UI typography. The video also discusses building Material Theme through typography, implementing new type bases, using shapes in UI design, and color systems. Viewers are encouraged to experiment with themes and visit material.io for more information.

✨ Highlights
📊 Transcript
Introduction of Material Design and Material Theming in 2014.
00:26
Material Design based on paper metaphor, using Roboto font, color palettes, and typography for unified design system.
Material Theming introduced for brand expression while maintaining usability.
Google created eight hypothetical products, brand style guides, and logos to drive design decisions for Material Theming.
Material Theming in UI Design.
04:27
Broad explorations of UI design were conducted to push the limits of Material Design.
Core areas were focused on to ensure deliverables were accessible to all users.
Case studies of Fortnightly and Rally demonstrated tailored UI design for different product needs.
Brands like Basil and a hospitality app showcased user engagement-driven component choices.
Google Material Theme focuses on consistency and customization through Google's typeface, color palette, and icons.
07:31
Material Components, an open-source code, is available for web, iOS, Android, and Flutter platforms.
Users can express their style through typography, shape, and color using customizable components like buttons.
Designers and developers can control brand expression globally through a simple architecture with categories, attributes, and values.
Overview of Material Design type system for UI typography.
11:07
Users can adjust font family, size, weight, spacing, and text transform for different categories.
Changes made to one category will reflect across all mapped categories for consistency.
Guidelines now include more detailed type guidance for expressive UI, including larger headlines with funky display typefaces.
Legibility is important, avoiding expressive typefaces at small sizes.
Building Material Theme through typography using the Raleway typeface.
13:20
Raleway typeface is compared to Roboto, emphasizing its utility and playfulness with rounded curves and wider design.
Initially a display face for larger sizes, Raleway has expanded to smaller sizes and is recommended for UI design.
Introduction of two new interactive projects on the web and Android for theming and customization using Glitch and Android Studio.
Demo showcases the Build a Material Theme project on Glitch for easy remixing and customization.
Implementing a new type base in design with Raleway font family.
16:07
Setting the font family and changing text appearance to see immediate results.
Demonstrating implementation of the new type scale on iOS and Flutter using Dart.
Explaining the Shape System with small, medium, and large components for customization of shape size and family.
Changes made to one category in the Shape System apply to all components inheriting that category.
Importance of shapes in UI design for drawing the user's eye and providing visual cues.
21:40
Emphasizes using shapes intentionally and subtly to avoid confusion for users.
Tools provided for developers to customize shape schemes, focusing on radius and families.
Demonstration of building a Material Theme using shapes and exploring a theme summary view.
Applying shape schemes to components in web and Android development.
23:56
Different sizes of components are styled with specific dips and corner sizes, including small at 20 dip, medium at 16 dip, and large at 20 dip.
The process involves adjusting corner size and corner family, such as choosing rounded corners, to create a cohesive design.
The scheme can be implemented using SAS variables on the web and through a shape.xml file on Android.
By uncommenting code, the scheme can be quickly applied to all components, changing features like button radius and making the changes visible across various components.
Importance of color systems in UI design.
26:01
Emphasis on color schemes, categories, and values for accessibility and contrast ratios.
Allocation of primary, secondary, and error colors.
Explanation of the semantic meaning behind color choices.
Showcase of examples of branded color usage and tools for selecting color palettes.
The segment introduces a Material color palette generator for selecting primary and secondary colors.
29:02
It offers options for users without a secondary color and creates a tonal palette for UI design.
Demonstrates building a material theme using colors from a brand's logo, focusing on primary, secondary, and error colors.
Showcases applying color changes using Material Components for Web.
Emphasizes how minor color adjustments can greatly impact interface design with minimal code.
Setting color primary, color secondary, color error, and color background for a consistent theme on Android web.
32:40
Projects offer a theme summary view for simple color and design adjustments, applicable to Flutter and iOS by modifying color schemes and values.
Showcase projects on material.io/tools/build a material theme allow developers and designers to test themes and make code changes effortlessly.
Encouragement for viewers to explore material.io for additional information and updates.
Speaker expresses appreciation for viewers and encourages audience contributions.
35:20
Viewers are encouraged to share their ideas and thoughts.
The video concludes with a musical accompaniment.