Angular Material Design Whats New in Angular Material Design Whats - - PowerPoint PPT Presentation

▶
angular material design
SMART_READER_LITE
LIVE PREVIEW

Angular Material Design Whats New in Angular Material Design Whats - - PowerPoint PPT Presentation

Jul 05, 2023 48 likes •779 views

Whats New in Angular Material Design Whats New in Angular Material Design Whats Cool in Material Design Topics Covered Material Design? The Engineers Perspective Digital Paper Digital Paper google.com/design/spec Design

slide-1
SLIDE 1

What’s New in

Angular Material Design

slide-2
SLIDE 2

What’s New in

Angular Material Design

slide-3
SLIDE 3

What’s Cool in

Material Design

slide-4
SLIDE 4

Topics Covered

slide-5
SLIDE 5

Material Design?

slide-6
SLIDE 6
slide-7
SLIDE 7

The Engineer’s Perspective

slide-8
SLIDE 8

Digital Paper

slide-9
SLIDE 9

Digital Paper

slide-10
SLIDE 10

google.com/design/spec

slide-11
SLIDE 11
slide-12
SLIDE 12
slide-13
SLIDE 13
slide-14
SLIDE 14
slide-15
SLIDE 15
slide-16
SLIDE 16

Design consistency

slide-17
SLIDE 17
slide-18
SLIDE 18
slide-19
SLIDE 19

Colouring your UI

slide-20
SLIDE 20
slide-21
SLIDE 21
slide-22
SLIDE 22
slide-23
SLIDE 23
slide-24
SLIDE 24

mdThemeProvider

slide-25
SLIDE 25

DEMO

slide-26
SLIDE 26

Dynamic Colour

slide-27
SLIDE 27
slide-28
SLIDE 28
slide-29
SLIDE 29
slide-30
SLIDE 30
slide-31
SLIDE 31

Cool! But how?

slide-32
SLIDE 32

for now… vibrant.js

slide-33
SLIDE 33

DEMO

slide-34
SLIDE 34

Color Histogram

slide-35
SLIDE 35

Colour Quantization

slide-36
SLIDE 36

Swatch Scoring

slide-37
SLIDE 37

Resources

slide-38
SLIDE 38

materialpalette.com

Material Palette

slide-39
SLIDE 39

github.com/jariz/ vibrant.js

Vibrant.js

slide-40
SLIDE 40
slide-41
SLIDE 41

Icons!

slide-42
SLIDE 42

795 icons…

slide-43
SLIDE 43

…optimized to the point of madness…

slide-44
SLIDE 44

…in platform speciPc packaging…

slide-45
SLIDE 45

icon font!

…including an

slide-46
SLIDE 46

200 400 600 800

795 744 519

Font Awesome UnofPcial Material Icons OfPcial Material Icons

# of Icons

slide-47
SLIDE 47

15 30 45 60

36KB 44KB 55KB

Font Awesome UnofPcial Material Icons OfPcial Material Icons

Font Size

(woff2)

slide-48
SLIDE 48

1.75 3.5 5.25 7

0.3KB 7KB 5KB

Font Awesome UnofPcial Material Icons OfPcial Material Icons

CSS Size

(gzipped)

slide-49
SLIDE 49

Why so little CSS?

slide-50
SLIDE 50

Ligatures!

because

slide-51
SLIDE 51
slide-52
SLIDE 52

&

slide-53
SLIDE 53

<i class=“fa fa-android”> </i> .fa-android::before { content: ‘\E606’; }

slide-54
SLIDE 54

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

slide-55
SLIDE 55

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

slide-56
SLIDE 56

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

slide-57
SLIDE 57

DEMO

slide-58
SLIDE 58

How exactly do you pronounce &#xEB57; ?

slide-59
SLIDE 59

Sorry :(

slide-60
SLIDE 60

Awesome Compression Ratios!

slide-61
SLIDE 61

32.5 65 97.5 130

47B 71B 124B

Font Awesome Unofficial Material Icons Official Material Icons

Bytes/Icon

slide-62
SLIDE 62

RESOURCES

slide-63
SLIDE 63

Google Icon Site

google.com/design/ icons

slide-64
SLIDE 64

Our Github

github.com/google/ material-design-icons

slide-65
SLIDE 65

Material in Motion

slide-66
SLIDE 66
slide-67
SLIDE 67

Not There Yet…

slide-68
SLIDE 68

Animation Anchoring

slide-69
SLIDE 69

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">

slide-70
SLIDE 70

DEMO

slide-71
SLIDE 71

A (Promising) Hack

slide-72
SLIDE 72

DEMO #2

slide-73
SLIDE 73

Thanks!

shyndman@google.com Scott Hyndman