Material Design: Combining Classic Design Principles with Technological Innovation

Material Design is a design language that combines traditional design principles with the possibilities offered by technology and science. It emphasizes visual language, classic design elements, and innovation to create delightful user experiences. The Material Metaphor, Imagery, Typography, Color, Motion, Layout, and Components are key aspects of Material Design, all aimed at enhancing the user interface.

• Material Design
• User Experience
• Design Guidelines
• Technology
• Innovation

mwagl Follow

Uploaded on Sep 20, 2024 | 0 Views

Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

Presentation Transcript

1. Android Developer Fundamentals V2 Delightful User Experience Lesson 5 Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. License. Creative Commons Attribution 4.0 International License This work is licensed under a Creative Creative Commons Attribution 4.0 International License Creative Commons Attribution 4.0 International License Material Design Design Material Android Developer Fundamentals V2 Android Developer Fundamentals V2 Creative Commons Attribution 4.0 International License Creative Commons Attribution 4.0 International License Commons Attribution 4.0 International 1 1 1

2. 5.2 Material Design Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. Creative Commons Attribution 4.0 International License Material Design Android Developer Fundamentals V2 2 Creative Commons Attribution 4.0 International License

3. Contents The Material Metaphor Imagery Typography Color Motion Layout Components Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. Creative Commons Attribution 4.0 International License Material Design Android Developer Fundamentals V2 3 Creative Commons Attribution 4.0 International License

4. The Material Metaphor Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. License. Creative Commons Attribution 4.0 International License This work is licensed under a Creative Creative Commons Attribution 4.0 International License Creative Commons Attribution 4.0 International License Material Design Design Material Android Developer Fundamentals V2 Android Developer Fundamentals V2 Creative Commons Attribution 4.0 International License Creative Commons Attribution 4.0 International License Commons Attribution 4.0 International 4

5. What is Material Design? Design guidelines Visual language Combine classic principles of good design with innovation and possibilities of technology and science Material Design Spec Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. Creative Commons Attribution 4.0 International License Material Design Android Developer Fundamentals V2 5 Creative Commons Attribution 4.0 International License

6. Material metaphor Three-dimensional environment containing light, material, and shadows Surfaces and edges provide visual cues grounded in reality Fundamentals of light, surface, and movement convey how objects move, interact, and exist in space and in relation to each other Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. Creative Commons Attribution 4.0 International License Material Design Android Developer Fundamentals V2 6 Creative Commons Attribution 4.0 International License

7. Material design in your app Elements in your Android app should behave similarly to real world materials Cast shadows Occupy space Interact with each other Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. Creative Commons Attribution 4.0 International License Material Design Android Developer Fundamentals V2 7 Creative Commons Attribution 4.0 International License

8. Bold, graphic, intentional Choose colors deliberately Fill screen edge to edge Use large-scale typography Use white space intentionally Emphasize user action Make functionality obvious Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. Creative Commons Attribution 4.0 International License Material Design Android Developer Fundamentals V2 8 Creative Commons Attribution 4.0 International License

9. Imagery Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. License. Creative Commons Attribution 4.0 International License This work is licensed under a Creative Creative Commons Attribution 4.0 International License Creative Commons Attribution 4.0 International License Material Design Design Material Android Developer Fundamentals V2 Android Developer Fundamentals V2 Creative Commons Attribution 4.0 International License Creative Commons Attribution 4.0 International License Commons Attribution 4.0 International 9

10. Imagery Images help you communicate and differentiate your app Should be Relevant Informative Delightful Best practices Use together with text Original images Provide point of focus Build a narrative Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. Creative Commons Attribution 4.0 International License Material Design Android Developer Fundamentals V2 10 Creative Commons Attribution 4.0 International License

11. Typography Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. License. Creative Commons Attribution 4.0 International License This work is licensed under a Creative Creative Commons Attribution 4.0 International License Creative Commons Attribution 4.0 International License Material Design Design Material Android Developer Fundamentals V2 Android Developer Fundamentals V2 Creative Commons Attribution 4.0 International License Creative Commons Attribution 4.0 International License Commons Attribution 4.0 International 11

12. Roboto typeface Roboto is the standard typeface on Android Roboto has 6 weights Thin Light Regular Medium Bold Black Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. Creative Commons Attribution 4.0 International License Material Design Android Developer Fundamentals V2 12 Creative Commons Attribution 4.0 International License

13. Font styles and scale Too many sizes is confusing and looks bad Limited set of sizes that work well together Display 4 Display 3 Display 2 Display 1 Headline Title Subheading Body 2 Body 1 Caption Button Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. Creative Commons Attribution 4.0 International License Material Design Android Developer Fundamentals V2 13 Creative Commons Attribution 4.0 International License

14. Setting text appearance android:textAppearance= "@style/TextAppearance.AppCompat.Display3" Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. Creative Commons Attribution 4.0 International License Material Design Android Developer Fundamentals V2 14 Creative Commons Attribution 4.0 International License

15. Fonts as resources Bundle fonts as resources in app package (APK) Create font folder within res, add font XML file to font To access font resource: @font/myfont R.font.myfont Android 8.0 (API level 26) Android 4.1 (API level 16) and higher, use the Support Library 26 See Fonts in XML Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. Creative Commons Attribution 4.0 International License Material Design Android Developer Fundamentals V2 15 Creative Commons Attribution 4.0 International License

16. Downloadable fonts Download fonts from provider app Reduces APK size Increases the app installation success rate Improves the overall system health, saves cellular data, phone memory, and disk space Android 8.0 (API level 26) API level 14 and higher, use Support Library 26 See Downloadable Fonts Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. Creative Commons Attribution 4.0 International License Material Design Android Developer Fundamentals V2 16 Creative Commons Attribution 4.0 International License

17. Color Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. License. Creative Commons Attribution 4.0 International License This work is licensed under a Creative Creative Commons Attribution 4.0 International License Creative Commons Attribution 4.0 International License Material Design Design Material Android Developer Fundamentals V2 Android Developer Fundamentals V2 Creative Commons Attribution 4.0 International License Creative Commons Attribution 4.0 International License Commons Attribution 4.0 International 17

18. Color Bold hues Muted environments Deep shadows Bright highlights Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. Creative Commons Attribution 4.0 International License Material Design Android Developer Fundamentals V2 18 Creative Commons Attribution 4.0 International License

19. Color palette Material Design recommends using a primary color along with some shades and an accent color Create a bold user experience for your app Material Design Color Palette Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. Creative Commons Attribution 4.0 International License Material Design Android Developer Fundamentals V2 19 Creative Commons Attribution 4.0 International License

20. Color palette for your project Android Studio creates a color palette for you AppTheme definition in styles.xml colorPrimary AppBar, branding colorPrimaryDark status bar, contrast colorAccent draw user attention, switches, FAB Colors defined in colors.xml Color selection tool Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. Creative Commons Attribution 4.0 International License Material Design Android Developer Fundamentals V2 20 Creative Commons Attribution 4.0 International License

21. Text color and contrast Good choice Contrast for visual separation Contrast for readability Contrast for accessibility Not all people see colors the same Theme handles text by default Good choice Bad choice Bad choice Bad choice Theme.AppCompat.Light text will be near black Theme.AppCompat.Light.DarkActionBar text near white Good choice Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. Creative Commons Attribution 4.0 International License Material Design Android Developer Fundamentals V2 21 Creative Commons Attribution 4.0 International License

22. Motion Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. License. Creative Commons Attribution 4.0 International License This work is licensed under a Creative Creative Commons Attribution 4.0 International License Creative Commons Attribution 4.0 International License Material Design Design Material Android Developer Fundamentals V2 Android Developer Fundamentals V2 Creative Commons Attribution 4.0 International License Creative Commons Attribution 4.0 International License Commons Attribution 4.0 International 22

23. Motion Motion in Material Design describes Spatial relationships Functionality Intention Motion is Responsive Natural Aware Intentional Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. Creative Commons Attribution 4.0 International License Material Design Android Developer Fundamentals V2 23 Creative Commons Attribution 4.0 International License

24. Motion in your app Maintain continuity Highlight elements or actions Transition naturally between actions or states Draw focus Organize transitions Responsive feedback Touch feedback Responsive interaction Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. Creative Commons Attribution 4.0 International License Material Design Android Developer Fundamentals V2 24 Creative Commons Attribution 4.0 International License

25. Layout Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. License. Creative Commons Attribution 4.0 International License This work is licensed under a Creative Creative Commons Attribution 4.0 International License Creative Commons Attribution 4.0 International License Material Design Design Material Android Developer Fundamentals V2 Android Developer Fundamentals V2 Creative Commons Attribution 4.0 International License Creative Commons Attribution 4.0 International License Commons Attribution 4.0 International 25

26. Layout for Material Design Density independent pixels for views dp Scalable pixels for text sp Elements align to a grid with consistent spacing Plan your layout Use templates for common layout patterns Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. Creative Commons Attribution 4.0 International License Material Design Android Developer Fundamentals V2 26 Creative Commons Attribution 4.0 International License

27. Layout planning Spacing Grid alignment Sizing Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. Creative Commons Attribution 4.0 International License Material Design Android Developer Fundamentals V2 27 Creative Commons Attribution 4.0 International License

28. Components Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. License. Creative Commons Attribution 4.0 International License This work is licensed under a Creative Creative Commons Attribution 4.0 International License Creative Commons Attribution 4.0 International License Material Design Design Material Android Developer Fundamentals V2 Android Developer Fundamentals V2 Creative Commons Attribution 4.0 International License Creative Commons Attribution 4.0 International License Commons Attribution 4.0 International 28

29. Components Material Design has guidelines on the use and implementation of Android components Bottom Navigation Buttons Cards Chips Data Tables Dialogs Dividers Sliders Snackbar Toasts Steppers Subheaders Text Fields Toolbars Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. Creative Commons Attribution 4.0 International License Material Design Android Developer Fundamentals V2 29 Creative Commons Attribution 4.0 International License

30. More components Expansion Panels Grid Lists Lists Menus Pickers Progress Bars Selection Controls Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. Creative Commons Attribution 4.0 International License Material Design Android Developer Fundamentals V2 30 Creative Commons Attribution 4.0 International License

31. Consistency helps user intuition FAB Tabs Snackbar Navigation Drawer Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. Creative Commons Attribution 4.0 International License Material Design Android Developer Fundamentals V2 31 Creative Commons Attribution 4.0 International License

32. Learn more Cards and Lists Guide Floating Action Button Reference Defining Custom Animations View Animation Material Design Guidelines Material Design Guide Material Design for Android Material Design for Developers Material Palette Generator Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. Creative Commons Attribution 4.0 International License Material Design Android Developer Fundamentals V2 32 Creative Commons Attribution 4.0 International License

33. What's Next? Concept Chapter: 5.2 Material Design Practical: 5.2 Cards, and colors Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. Creative Commons Attribution 4.0 International License Material Design Android Developer Fundamentals V2 33 Creative Commons Attribution 4.0 International License

34. END Creative Commons Attribution 4.0 International License This work is licensed under a Creative Commons Attribution 4.0 International License. License. Creative Commons Attribution 4.0 International License This work is licensed under a Creative Creative Commons Attribution 4.0 International License Creative Commons Attribution 4.0 International License Material Design Design Material Android Developer Fundamentals V2 Android Developer Fundamentals V2 Creative Commons Attribution 4.0 International License Creative Commons Attribution 4.0 International License Commons Attribution 4.0 International 34