Upload
ben-hall
View
565
Download
1
Embed Size (px)
Citation preview
IMPLEMENTING GOOGLE’S MATERIAL DESIGN UI GUIDELINES
OcelotUproar.com / Katacoda.com
Implementing Google’s Material Design UI Guidelines
@[email protected] / Katacoda.com
@Ben_Hall / Blog.BenHall.me.uk
Tech Support > Tester > Developer > Founder
Software Development Studio
WH
O AM
I?
Agenda
• Why• Colors• Icons• Imagery• Feedback• Implementing into your application
What is Material Design?
Isn’t that just Bootstrap?
Why design matters?
ATTRACTIVE THINGS WORK BETTER
http://www.jnd.org/dn.mss/CH01.pdf
Emotional reaction
http://www.jnd.org/dn.mss/emotion_design_at.html
PRECONCEIVED EXPECTATIONSOpinion are formed before we’ve even realised
Colours
Thanks @toddhgardner
https://www.materialpalette.com/
Icons
CONSISTENCY. WHAT DOES THE USER EXPECT?
*REALLY* important on mobile
RESPONSIVE ICONS?
Imagery
STOCK PHOTOGRAPHY
STOCK PHOTOGRAPHY
RESPOND TO TOUCH EVENTSRESPOND TO TOUCH EVENTS
Do Don’t
Do Don’t
DELIGHTFUL DETAILS
https://www.google.com/design/spec/animation/authentic-motion.html#authentic-motion-mass-weight
Avoid linear motionCSS easing
PROGRESS BARS – CLOUDFLARE EXAMPLE
Error Messages
Creating a Website / Mobile App
Use colours for emphasis
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.
<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>
Cards
<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>
<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>
What do users think?
“Why is it flipped around?”
No FAQ? I want moreinformation
Designer?
Too many words!
More Images
Remove sign up prompts
Summary
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