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.

Design, Do You Speak It

634 views

Published on

VJTI Lecture Series 2014

Published in: Technology
  • Be the first to comment

Design, Do You Speak It

  1. 1. Faiz Malkani Design Do You Speak It?
  2. 2. What is Design?
  3. 3. User Experience vs User Interface
  4. 4. Evolution Of Web Design
  5. 5. Evolution of Design
  6. 6. 1995
  7. 7. 2014
  8. 8. Evolution Of Android Design Droid Material Holo DroidSans Roboto 2.0 Roboto Themes Fonts
  9. 9. 2009 2014
  10. 10. User Centric Design
  11. 11. Psychology in Design Color Emotions
  12. 12. At Google we say, “Focus on the user and all else will follow.” - Google Design
  13. 13. Psychology in Design Gestalt Theory
  14. 14. Similarity
  15. 15. Continuation
  16. 16. Closure
  17. 17. Proximity
  18. 18. Figure and Ground
  19. 19. Material Design Goals of Material Design
  20. 20. “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
  21. 21. Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.
  22. 22. 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.
  23. 23. Responsive Nature of Material Design
  24. 24. Material Design Principles of Material Design
  25. 25. Material is the Metaphor
  26. 26. Bold, Graphic, Intentional
  27. 27. Motion Provides Meaning
  28. 28. Material Design Concept of Depth
  29. 29. Layers of Paper
  30. 30. z-depth = 1 z-depth = 2 z-depth = 3 z-depth = 4 z-depth = 5
  31. 31. Material Design Animation
  32. 32. •Authentic Motion •Responsive Interaction •Meaningful Transitions •Delightful Details
  33. 33. Material Design Patterns
  34. 34. App Bar
  35. 35. Side Nav
  36. 36. Cards
  37. 37. Floating Action Button
  38. 38. Material Design Polymer Implementation
  39. 39. Web Components <!-- Import element --> <link rel="import" href="google-map.html"> <!-- Use element --> <google-map lat="37.790" long="-122.390"></google-map>
  40. 40. <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>
  41. 41. Polymer Paper Elements Sampler: http://goo.gl/F9QAv9
  42. 42. Design Resources
  43. 43. •Android Asset Studio •Android ActionBar Style Generator •Android-Holo-Colors •Android L Design Kit (Photoshop) •Android 4.4 Design Kit (Photoshop) •Android Arsenal
  44. 44. •Google Design •Android UI/UX •Android Developers Blog •Romain Guy’s Blog •Chet Haase’s Blog •Cyril Mottier’s Blog
  45. 45. •Android Design in Action •DevBytes •DesignBytes
  46. 46. http://faizmalkani.com malkanifaiz@gmail.com http://google.com/+FaizM

×