Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Material Design Update
Google I/O 報告会 2018 in 信州
2018/05/19
@nobsato
#io18jp #gdg信州 #glnagano
Today’s session agenda
今回のI/Oで発表されたマテリアルデザイン関連の最新情報です。詳細
は https://material.io を見ましょう!
For Design related I/O sessions...
今年のデザイン/マテリアルデザイン関連の
セッションは全部で16セッション。
詳しくは https://note.mu/nobsato
Nobuya Sato (@nobsato)
● Founder & CEO / Experience Designer
at Secret Lab, Inc.
● Google Product Design Expert (GDE)
● Go...
Google Developer Experts
UX/UI Experts and Product
Strategy Experts are now
Product Design Experts.
Introducing Material Theming, major update!
今回、Material Designの考え方が新しくなりました!
What is Material Design
Introduced at Google I/O 2014 as the universal design
language for the digital age.
© TechCrunch
“Google I/O:デザインでもAppleに対...
Material Design is...
Material is the metaphor Bold, graphic, intentional Motion provides meaning
Material Design is for all.
Material Design
Material Design Material
Material Designというデザイン言語(思想)から
順応性の高いMaterialというデザインシステムへ!
Material Design
Material Design
Material is the metaphor Bold, graphic, intentional Motion provides meaning
Material Design
Flexible foundation Cross-platform
Details at the new Material.io (https://material.io/)
New/update on Maetrial Dseign at I/O 今回のI/Oで発表/更新された内容
● Material System
● Material Theming
● Material Tools
● Material De...
Material System
Material is an adaptable design system -
backed by open-source code - that helps you
design and build beau...
Material Theming
Material Theming
Material Theming
Material Theming
Round components
Cut components
Material Theming
Outlined icons
Two-tone icons
Sharp icons
Rounded iconsFilled icons
Material Tools
Material Theme Editor Gallery
Material Tools > Material Theme Editor
Material Theme Editor – Create
and customize your Material
theme
Material Tools > Material Theme Editor
Choose colors
色指定
アクセシビリティを
考慮可能
Set shape
形状設定、
オブジェクトやコー
ナー設定
Add types
書体設定、3書体ま...
Material Tools > Gallery
Gallery – Easily share, organize,
and collaborate on product designs
Material Tools > Gallery
Share work
シェア機能
Organize projects
リビジョン管理
Get feedback
コメント機能
Implement
pixel-perfect UI
実装への橋渡し...
Material Tools > Gallery
Implement pixel-perfect UI
実装への橋渡し
Inspect Mode追加
iOS, Android, Flutter, wehへの数値吐き出
し、MDCへリンク
Material Tools > Icons
Material Tools > Icons
Filled Rounded Sharped
Outlined Two-tone
Material Tools > Color tool
Material Design Components (MDC)
Develop across
platforms
Material Design Components (MDC)
Material Design Components (MDC)
GitHub repos
Material Codelabs
Material Codelabs
Android - Java, Kotlin
iOS - Object-C, Swift
Web - CSS, HTML5
Flutter - Dart
Material Studies
Basil Shrine Rally
Crane Forthingtly Owl
Reply
Material Studies
Lyft
Extended FAB
Genius
Responsive layout grid
NPR
Cards
Pocket Casts
Motion
Zappos
Backdrop
MATERIAL DESIGN
material.io
Google I/O 18 Extended in Shinshu: Material Design Update
Prochain SlideShare
Chargement dans…5
×

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

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

  • Soyez le premier à commenter

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

×