Post on 20-May-2020
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  ?
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