The document discusses the evolution of design for mobile and web, including user experience design, user interface design, and the principles of Material Design introduced by Google. It provides an overview of key concepts in Material Design like layers to imply depth, meaningful motion, responsive interactions, and patterns like app bars and cards. It also discusses implementing Material Design with web components and polymer elements and lists design resources.

1. Faiz Malkani
Design
Do You Speak It?

2. What is Design?

4. User Experience
vs
User Interface

6. Evolution Of Web Design

7. Evolution of Design

8. 1995

9. 2014

10. Evolution Of Android Design
Droid
Material
Holo
DroidSans
Roboto 2.0
Roboto
Themes
Fonts

11. 2009
2014

12. User Centric Design

14. Psychology in Design
Color Emotions

15. At Google we say, “Focus on the user and all else will follow.”
- Google Design

17. Psychology in Design
Gestalt Theory

18. Similarity

19. Continuation

20. Closure

21. Proximity

22. Figure and Ground

23. Material Design
Goals of Material Design

24. “When we started building for the first mobile devices, mobile meant less: less screen space, slower connection, fewer features. A mobile experience was often a lesser experience. But mobile devices have evolved—they have become more powerful, faster, and more intuitive—so must our approach to design.”
- Nicholas Jitkoff

25. Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.

26. Develop a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all first-class input methods.

27. Responsive Nature of Material Design

28. Material Design
Principles of Material Design

29. Material is the Metaphor

30. Bold, Graphic, Intentional

31. Motion Provides Meaning

32. Material Design
Concept of Depth

33. Layers of Paper

34. z-depth = 1
z-depth = 2
z-depth = 3
z-depth = 4
z-depth = 5

35. Material Design
Animation

36. •Authentic Motion
•Responsive Interaction
•Meaningful Transitions
•Delightful Details

37. Material Design
Patterns

38. App Bar

39. Side Nav

40. Cards

41. Floating Action Button

42. Material Design
Polymer Implementation

43. Web Components
<!-- Import element -->
<link rel="import" href="google-map.html">
<!-- Use element -->
<google-map lat="37.790" long="-122.390"></google-map>

44. <core-toolbar>
<core-icon-button icon="menu"></core-icon-button>
<div flex>Title</div>
<core-icon-button icon=“refresh"></core-icon-button>
<core-icon-button icon="more"></core-icon-button>
</core-toolbar>

45. Polymer Paper Elements Sampler: http://goo.gl/F9QAv9

46. Design Resources

47. •Android Asset Studio
•Android ActionBar Style Generator
•Android-Holo-Colors
•Android L Design Kit (Photoshop)
•Android 4.4 Design Kit (Photoshop)
•Android Arsenal

48. •Google Design
•Android UI/UX
•Android Developers Blog
•Romain Guy’s Blog
•Chet Haase’s Blog
•Cyril Mottier’s Blog

49. •Android Design in Action
•DevBytes
•DesignBytes

50. http://faizmalkani.com
malkanifaiz@gmail.com
http://google.com/+FaizM