IMPLEMENTING GOOGLE’S MATERIAL DESIGN UI GUIDELINES

@Ben_HallBen@BenHall.me.uk

OcelotUproar.com / Katacoda.com

Implementing Google’s Material Design UI Guidelines

@Ben_HallBen@BenHall.me.ukOcelotUproar.com / 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

@Ben_HallBen@BenHall.me.ukBlog.BenHall.me.uk