Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Google I/O 18 Extended in Shinshu: Material Design Update

440 views

Published on

Google I/O 報告会 2018 in 信州:マテリアルデザイン最新情報(2018年5月19日、GEEKLAB.NAGANO)

Published in: Design
  • Be the first to comment

Google I/O 18 Extended in Shinshu: Material Design Update

  1. 1. Material Design Update Google I/O 報告会 2018 in 信州 2018/05/19 @nobsato #io18jp #gdg信州 #glnagano
  2. 2. Today’s session agenda 今回のI/Oで発表されたマテリアルデザイン関連の最新情報です。詳細 は https://material.io を見ましょう!
  3. 3. For Design related I/O sessions... 今年のデザイン/マテリアルデザイン関連の セッションは全部で16セッション。 詳しくは https://note.mu/nobsato
  4. 4. Nobuya Sato (@nobsato) ● Founder & CEO / Experience Designer at Secret Lab, Inc. ● Google Product Design Expert (GDE) ● Google certified Sprint Master ● HCD-Net certified HCD Professional ● LEGO® SERIOUS PLAY® LSP Trained Certified Facilitator
  5. 5. Google Developer Experts UX/UI Experts and Product Strategy Experts are now Product Design Experts.
  6. 6. Introducing Material Theming, major update! 今回、Material Designの考え方が新しくなりました!
  7. 7. What is Material Design
  8. 8. Introduced at Google I/O 2014 as the universal design language for the digital age. © TechCrunch “Google I/O:デザインでもAppleに対抗へ―ユニバーサル・ デザイン言語、Material Design発表”
  9. 9. Material Design is... Material is the metaphor Bold, graphic, intentional Motion provides meaning
  10. 10. Material Design is for all.
  11. 11. Material Design Material Design Material Material Designというデザイン言語(思想)から 順応性の高いMaterialというデザインシステムへ!
  12. 12. Material Design
  13. 13. Material Design Material is the metaphor Bold, graphic, intentional Motion provides meaning
  14. 14. Material Design Flexible foundation Cross-platform Details at the new Material.io (https://material.io/)
  15. 15. New/update on Maetrial Dseign at I/O 今回のI/Oで発表/更新された内容 ● Material System ● Material Theming ● Material Tools ● Material Design Components (MDC) ● Material Codelabs ● Material Studies
  16. 16. Material System Material is an adaptable design system - backed by open-source code - that helps you design and build beautiful digital experiences. Constantly updated tools, resources, and components are made specifically with designers and developers in mind.
  17. 17. Material Theming
  18. 18. Material Theming
  19. 19. Material Theming
  20. 20. Material Theming Round components Cut components
  21. 21. Material Theming Outlined icons Two-tone icons Sharp icons Rounded iconsFilled icons
  22. 22. Material Tools Material Theme Editor Gallery
  23. 23. Material Tools > Material Theme Editor Material Theme Editor – Create and customize your Material theme
  24. 24. Material Tools > Material Theme Editor Choose colors 色指定 アクセシビリティを 考慮可能 Set shape 形状設定、 オブジェクトやコー ナー設定 Add types 書体設定、3書体ま で追加可能 Explore icons アイコン選択 5つの種類から
  25. 25. Material Tools > Gallery Gallery – Easily share, organize, and collaborate on product designs
  26. 26. Material Tools > Gallery Share work シェア機能 Organize projects リビジョン管理 Get feedback コメント機能 Implement pixel-perfect UI 実装への橋渡し Inspect Mode追加 iOS, Android, Flutter, wehへの 数値吐き出し、MDCへリンク
  27. 27. Material Tools > Gallery Implement pixel-perfect UI 実装への橋渡し Inspect Mode追加 iOS, Android, Flutter, wehへの数値吐き出 し、MDCへリンク
  28. 28. Material Tools > Icons
  29. 29. Material Tools > Icons Filled Rounded Sharped Outlined Two-tone
  30. 30. Material Tools > Color tool
  31. 31. Material Design Components (MDC) Develop across platforms
  32. 32. Material Design Components (MDC)
  33. 33. Material Design Components (MDC) GitHub repos
  34. 34. Material Codelabs
  35. 35. Material Codelabs Android - Java, Kotlin iOS - Object-C, Swift Web - CSS, HTML5 Flutter - Dart
  36. 36. Material Studies Basil Shrine Rally Crane Forthingtly Owl Reply
  37. 37. Material Studies Lyft Extended FAB Genius Responsive layout grid NPR Cards Pocket Casts Motion Zappos Backdrop
  38. 38. MATERIAL DESIGN material.io

×