Pada acara Google I/O 2018, Material Design cukup menjadi topik hangat yang dibicarakan oleh para developer dari seluruh dunia. Presentasi ini adalah ringkasan singkat mengenai apa yang dibicarakan di Google I/O 2018 terkait Material Design, terutama dengan rilis Material Theming. At Google I/O 2018, Material Design is one of the hottest topics discussed by developers around the world. This talk is a brief summary of what has been discussed at Google I/O 2018 related to Material Design, especially with the release new Material Theming.

1. Material Theming
Google I/O Extended Jakarta
GO-JEK HQ, Jakarta, Indonesia, 18th
July 2018

2. Josh (Adi Tedjasaputra, M.Sc)
Google Developer Expert in Product Design (Australia)
Director and Co-Founder UX Indonesia (uxindo.com)

3. Outlines
1. What’s New in Material Design?
2. Material Theming
3. Material Theme Editor
4. Gallery
5. Getting Started to code

4. What is Material Design?
A design system supported by open source
code. The system aims to help design and
development teams create high quality user
experience across platforms collaboratively.

5. Material Design at I/O 2018

6. UX Research Behind Material Design

7. What’s New
in Material Design?

9. Improved Material Guidelines
● Clearer Guidelines
aimed for Designers
and Developers.
● 3 Main Sections:
○ Design
○ Develop
○ Tools

10. Wrapped text label or not?
● Developer: When I implement text
label on a button, should I wrap for
longer text? Maybe I should ask a
Designer.
● Designer: Hm.. I am not sure. Is
there any research-based guideline
or best practice for the text label on
button?

11. Answer: No Wrapping please
● Guideline 1: Don’t wrap text. Text
label should remain on a single line
for maximum legibility.
● Guideline 2: Capitalized button text
label aims to distinguish text label
from surrounding text.
● Guideline 3: Color, size, or placement
can be used instead of capitalized
text label.

12. Updated Material Component (MDC) Libs

13. Updated Material Components
● material-components-android
● material-components-ios
● material-components-web
● material-components-flutter
● material-components-web-react
● material-components-android-codelabs
● material-components-flutter-codelabs
● material-components-web-catalog
● Material-components-web-components
● ...

14. Material Theming

15. What is Material Theming?
Customization of Material
Design to express your unique
product brand consistently
across platforms.

16. Why Material Theming?
Before
● Product’s UI resembles Google
Product’s UI (not unique).
● Designers and Developers were not
easily able to work collaboratively on a
platform.
● It takes a considerable customization
effort for designers and developers to
implement consistent branding across
platforms.
After
1. Able to ensure your unique and
consistent branding throughout
platforms.
2. Better collaboration between
designers and developers.
3. Quick and reliable deployment
across platforms.

17. Material Theme Editor
● Material Theme
Editor is currently
available only
through Material
Plugin for Sketch
● Allow quick switch
between design
and code
workflows.

18. Getting Started: Material Theme Editor

19. Material Theme Editor
● Share work
● Organize projects
● Give feedback
● Inspect UI properties
● Get links to developer docs
and design parameters for
MDC
● Connect to themed icon
sets
● Upload and sync Sketch
artboards from Material
Theme Editor

20. Getting Started: Gallery

21. Getting Started to Code

22. Can I use Material
in my existing code base?
YES!

23. Material Components for the Web
1. Successor of Material Design
Lite
2. Provide production-ready
components
3. Adhere to Material Design
Guidelines
4. Seamless integration with other
JS frameworks dan libraries:
MDC for React, Material Web
Components, Additional 3rd
party integrations

24. Material Components for Android
● Drop-in replacement for
Android’s Design Support
Library
● Available through Google’s
Maven repository
● If your app depends on the
original Design Support
Library, use the Refactor and
Migrate to AndroidX
namespace.

25. Material Components for iOS
● CocoaPods is the easiest way to get started.
● Material Theming on iOS consists of two
primary patterns: Schemes and Themers.
● Schemes represent your design as symbols.
● Themers connect scheme symbols to
components.
● Example: There is a scheme for both the
Material Design typography dan color
systems. Most components have a themer for
at least one of the systems.

26. Codelabs
● Design Lab: Building Your Design System with
Material Components in Sketch
● MDC-101 Android: Material Components
(MDC) Basics (Java)
● MDC-101 Android: Material Components
(MDC) Basics (Kotlin)
● MDC-101 Flutter: Material Components
(MDC) Basics (Flutter)
● MDC-101 Web: Material Components (MDC)
Basics (Web)
● MDC-101 iOS: Material Components (MDC)
Basics (Objective-C)
● ...

27. Takeaways
● Material Theming is a systematic way of
customizing Material Design.
● Material Theming empowers you to
express your unique product brand and
set your products apart from other
products using Material Design.
● Material Theming enables you to deploy
your unique and consistent branding
throughout platforms quickly and
reliably.

28. Challenge
1. TODAY: Message The Official Material Theme Editor URL
and Your Name to WhatsApp +62 877 489 86867 (UX
Indonesia).
2. 19th
July 2018: Install Material Theme Editor and learn
about Material Guidelines.
3. 20th
July 2018: Create a prototype of the revamped
version of UX Indonesia main landing page at uxindo.com
with 100% Material Components.
4. 21st
July 2018: Upload your prototype as a project named
“uxindo-material” to Gallery (gallery.io) and share it with
josh@uxindo.com and eunice@uxindo.com.
5. 28th July 2018: Two (2) winners will receive Google
Swags, UX Indonesia T-Shirts, and UX Indonesia Unicorns.

29. Do you want to learn more about GMD?
ASK: Josh (Adi Tedjasaputra, M.Sc)
● Google Developer Expert in Product Design
● Director and Co-Founder UX Indonesia
ASK: Dr Eunice Sari
● Google Developer Expert in Product Design
● Certified Google Design Sprint Master
● CEO and Co-Founder UX Indonesia
and Join
the Training

30. Thank You!