Implementing Google's Material Design Guidelines. Presented on 6th November 2015 at Oredev. Dropbox link with working Gifs - https://www.dropbox.com/s/m7ug6m6139hpsd9/Material%20Design%20-%20Oredev.pptx?dl=0

2. Implementing Google’s Material
Design UI Guidelines
@Ben_Hall
Ben@BenHall.me.uk
OcelotUproar.com / Katacoda.com

3. @Ben_Hall / Blog.BenHall.me.uk
Tech Support > Tester > Developer >
Founder
Software Development Studio
WHOAMI?

4. Agenda
• Why
• Colors
• Icons
• Imagery
• Feedback
• Implementing into your application

5. What is Material Design?

10. Isn’t that just Bootstrap?

12. Why design matters?

13. ATTRACTIVE THINGS WORK
BETTER
http://www.jnd.org/dn.mss/CH01.pdf

14. Emotional reaction
http://www.jnd.org/dn.mss/emotion_design_at.html

17. PRECONCEIVED
EXPECTATIONS
Opinion are formed before we’ve even realised

19. Colours

21. Thanks @toddhgardner

26. https://www.materialpalette.com/

28. Icons

29. CONSISTENCY. WHAT DOES
THE USER EXPECT?
*REALLY* important on mobile

32. RESPONSIVE ICONS?

33. Imagery

35. STOCK PHOTOGRAPHY

36. STOCK PHOTOGRAPHY

41. RESPOND TO TOUCH EVENTSRESPOND TO TOUCH EVENTS

44. Do Don’t

45. Do Don’t

46. DELIGHTFUL DETAILS

47. https://www.google.com/design/spec/animation/authentic-motion.html#authentic-motion-mass-weight
Avoid linear motion
CSS easing

51. PROGRESS BARS –
CLOUDFLARE EXAMPLE

52. Error Messages

57. Creating a Website / Mobile
App

62. Use colours for emphasis

66. Buttons
The raised button is a standard button that signify actions and
seek to give depth to a mostly flat page
Flat buttons are usually used within elements that already have
depth like cards or modals.

67. <a class="waves-effect waves-light btn">Stuff</a>
<a class="waves-effect waves-light btn"><i class="material-icons
left">cloud</i>button</a>
<a class="waves-effect waves-light btn"><i class="material-icons
right">cloud</i>button</a>

68. Cards

71. <div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of
information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
<a href="#">This is a link</a>
</div>
</div>
</div>
</div>

73. <div class="row">
<div class="col s12 m6">
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of
information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
<a href="#">This is a link</a>
</div>
</div>
</div>
</div>

75. What do users think?

80. “Why is it flipped around?”

81. No FAQ? I want more
information

82. Designer?
Too many words!
More Images
Remove sign up prompts

83. Summary

84. Summary
• google.com/design
• Material Design provide a foundation for
developers and non-designers to build sane
websites
• Guidelines, not rules. Adapt, change, break to
match your own users
• materializecss.com