What’s New in

Angular Material Design

What’s New in

Angular Material Design

What’s Cool inMaterial Design

Topics Covered

Material Design?

The Engineer’s Perspective

Digital Paper

Digital Paper

google.com/design/spec

Design consistency

Colouring your UI

mdThemeProvider

DEMO

Dynamic Colour

Cool! But how?

for now… vibrant.js

DEMO

Color Histogram

Colour Quantization

Swatch Scoring

Resources

materialpalette.com

Material Palette

github.com/jariz/ vibrant.js

Vibrant.js

Icons!

795 icons…

…optimized to the point of madness…

…in platform speciPc packaging…

icon font!…including an

0

200

400

600

800

795744

519

Font AwesomeUnofPcial Material IconsOfPcial Material Icons

# of Icons

0

15

30

45

60

36KB44KB

55KB

Font AwesomeUnofPcial Material IconsOfPcial Material Icons

Font Size(woff2)

0

1.75

3.5

5.25

7

0.3KB

7KB

5KB

Font AwesomeUnofPcial Material IconsOfPcial Material Icons

CSS Size(gzipped)

Why so little CSS?

Ligatures!because

&

<i class=“fa fa-android”> </i>

.fa-android::before { content: ‘\E606’; }

<i class=“mi”>android</i>

<i class=“mi”>android</i>

<md-icon>android</md-icon>

DEMO

How exactly do you pronounce &#xEB57; ?

Sorry :(

Awesome Compression

Ratios!

0

32.5

65

97.5

130

47B71B

124B

Font AwesomeUnofficial Material IconsOfficial Material Icons

Bytes/Icon

RESOURCES

Google Icon Sitegoogle.com/design/

icons

Our Githubgithub.com/google/

material-design-icons

Material in Motion

Not There Yet…

Animation Anchoring

Animation Anchoring<!-- home.html --> <a href="#/banner-page"> <img src="./banner.jpg" ng-animate-ref="banner"> </a>

<!-- banner-page.html --> <img src="./banner.jpg" ng-animate-ref="banner">

DEMO

A (Promising) Hack

DEMO #2

Thanks!shyndman@google.comScott Hyndman