Introduction to Material Design

1. How Material Design is
changing the world

2. About me
Carla Nicole Calheiros
- Computer Science student
- Web developer

3. UX and UI
The “drawing” of the page
The interaction with the user

4. Material Design google.com/design

5. - Create a visual language that
synthesizes classic principles
of good design with innovation
and possibiity of technology
and science
Goals

6. - Develop a single underlying system that
alows for a unified experience across
plataforms and devices sizes. Mobile
precepts are fundamental, but touch,
voice, mouse and keyboard are all first-
class input methods.
Goals

7. Material is the metaphor
Principles

8. Principles
Bold, graphic, intentional

9. Principles
Motion provides meaning

10. What is material?
Light and Shadow
Key light Ambient light Ambient and key light

11. What is material?
Any shape and color
Display and 3d environment

12. What is material?
Shape and responsiveness

13. Animation
“... motion describes spatial
relationships, funcionality,
and intention with beauty and
fluidity”
Response

14. Animation
Meaningful transitions
● Clear
● Smooth
● Effortless

15. Style
● Color palette (http://bit.ly/1yxUXEO)
● UI color application (opacity makes the diference)
● Themes (download)
● Icons (copy or create)

16. Imagery
Focus
Narative
Style

17. Typography
- Roboto (since android 4.0)
Style

18. Layout
Principles
- How paper works
- Floating action button

19. Layout
Units and
measurements
Metrics & Keylines

20. Layout
Structure
- UI regions
- Toolbars

21. Layout
Structure
- App bar - System bars
- Side navs - Whiteframes

22. Components
- Bottom sheets
- Buttons
- Buttons: Floating
action button
- Cards
- Chips
- Data tables
- Dialogs
- Dividers
- Grind lists
- Lists
- Lists: Controls
- Menus
- Pickers
- Progress & activity
- Selection controls
- Sliders
- Snackbars & toasts
- Subheaders
- Tabs
- Text fields
- Toolbars
- Tooltips

23. Components
- Buttons: Floating action button

24. Components
- Cards

25. Components
- Chips

26. Components
- Data tables

27. Components
- Menus

28. Components
- Pickers

29. Components
- Progress & activity

30. Components
- Sliders

31. Components
- Tabs

32. Components
- Text fields

33. Patterns
Usability
Resources
What’s new

34. Contact
Carla Nicole Calheiros
+CarlaNicoleCalheirosP
nicole.calheiros@gmail.com

35. Thank you