What’s New in Angular Material Design
What’s New in Angular Material Design
What’s Cool in Material 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
Material Palette materialpalette.com
Vibrant.js github.com/jariz/ vibrant.js
Icons!
795 icons …
… optimized to the point of madness …
… in platform speciPc packaging …
… including an icon font!
# of Icons Font Awesome UnofPcial Material Icons OfPcial Material Icons 800 795 744 600 519 400 200 0
Font Size Font Awesome UnofPcial Material Icons (woff2) OfPcial Material Icons 60 55KB 45 44KB 36KB 30 15 0
CSS Size Font Awesome UnofPcial Material Icons (gzipped) OfPcial Material Icons 7 7KB 5.25 5KB 3.5 1.75 0.3KB 0
Why so little CSS?
because Ligatures!
&
.fa-android::before { content: ‘\E606’; } <i class=“fa fa-android”> </i>
<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!
Bytes/Icon Font Awesome Unofficial Material Icons Official Material Icons 130 124B 97.5 71B 65 47B 32.5 0
RESOURCES
Google Icon Site google.com/design/ icons
Our Github github.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! Scott Hyndman shyndman@google.com
Recommend
More recommend
