https://engineering.pinterest.com/ Pinterest Template 1.0 Pushing - - PowerPoint PPT Presentation

▶
https engineering pinterest com
SMART_READER_LITE
LIVE PREVIEW

https://engineering.pinterest.com/ Pinterest Template 1.0 Pushing - - PowerPoint PPT Presentation

Jan 19, 2024 149 likes •1.05k views

https://engineering.pinterest.com/ Pinterest Template 1.0 Pushing The Boundaries Of The Layout System And Typography Who We Are Engineers at Pinterest Lin Wang Thorben Primke Core Experience Team Commerce Team Efficiency / Stability /

slide-1
SLIDE 1

Pinterest Template 1.0

https://engineering.pinterest.com/

slide-2
SLIDE 2

Pushing The Boundaries Of The Layout System And Typography

slide-3
SLIDE 3

Thorben Primke

Commerce Team Making Pins Buyable

Who We Are

3

Engineers at Pinterest

Lin Wang

Core Experience Team Efficiency / Stability / Dev-Velocity

slide-4
SLIDE 4
  • Catalog of Ideas
Confidentia l
slide-5
SLIDE 5

Discover

slide-6
SLIDE 6

Discover Save

slide-7
SLIDE 7

Typography

Sizing

Text XS S M L XL Display XS S M L XL

slide-8
SLIDE 8

Discover Save Do

slide-9
SLIDE 9 9

Design System Layout System Typography Learnings

slide-10
SLIDE 10

Design System aka Brio

slide-11
SLIDE 11

One Framework For All Platforms

slide-12
SLIDE 12

Layout

Grid

slide-13
SLIDE 13

Layout

Grid Device Groups

https://design.google.com/devices/

slide-14
SLIDE 14

Layout

Grid Device Groups Boints: Brio + Points

slide-15
SLIDE 15

Layout

Grid Device Groups Boints: Brio + Points Design Specs

slide-16
SLIDE 16

Typography

Sizing Leading

https://en.wikipedia.org/wiki/Leading

slide-17
SLIDE 17

Typography

Sizing Leading Tracking

https://creativemarket.com/blog/2014/09/18/whats-the-difference-between-leading-kerning-and-tracking

slide-18
SLIDE 18

Typography

Sizing Leading Tracking Word spacing

http://2.bp.blogspot.com/-Jo0rNkjo_AM/UlrWJMAXj0I/AAAAAAAAOlQ/-N8o737Xz0M/s1600/quads.gif

slide-19
SLIDE 19

Typography

Sizing Leading Tracking Word spacing Auto Fitting Order History Bestellungsübe...

Bestellungsübersicht

slide-20
SLIDE 20 20

Design System Layout System Typography Learnings

slide-21
SLIDE 21

Layout System

Brio Point Grid System

slide-22
SLIDE 22

Layout System

Brio Point Grid System

http://www.goodworklabs.com/ux-tips-to-promote-easier-self-service/

slide-23
SLIDE 23

Layout System

Brio Point

  • Unit of measurement
  • Device size independent

Grid System

slide-24
SLIDE 24

Layout System

Brio Point

  • Unit of measurement
  • Device size independent

Grid System

  • Fixed 12 gray columns
  • 13 white gutters
  • Focus on contents
  • Ignore small platform differences
slide-25
SLIDE 25

Brio Point

Boint-to-DP ratio

Device DP Width Device Category Device Horizontal dp per bt Vertical dp per bt sw160dp Watch LG G Watch 3 3 sw320dp Phone Samsung S6 4 4 sw480dp Note Galaxy Note 4 6 5 sw600dp Tablet Nexus 9 8 6

slide-26
SLIDE 26

Brio Point

Boint-to-DP ratio

Device DP Width Device Category Device Horizontal dp per bt Vertical dp per bt sw160dp Watch sw320dp Phone sw480dp Note sw600dp Tablet

slide-27
SLIDE 27

Brio Point

Boint-to-DP ratio

Device DP Width Device Category Device Horizontal dp per bt Vertical dp per bt sw160dp Watch LG G Watch sw320dp Phone Samsung S6 sw480dp Note Galaxy Note 4 sw600dp Tablet Nexus 9

slide-28
SLIDE 28

Brio Point

Boint-to-DP ratio

Device DP Width Device Category Device Horizontal dp per bt Vertical dp per bt sw160dp Watch LG G Watch 3 3 sw320dp Phone Samsung S6 4 4 sw480dp Note Galaxy Note 4 6 5 sw600dp Tablet Nexus 9 8 6

slide-29
SLIDE 29

Brio Point

Example on “320dp x 480dp” device

  • 1 brio point = 4 dp

(horizontally and vertically)

slide-30
SLIDE 30

Brio Grid

Grid System

  • 12 columns
  • 13 gutters
slide-31
SLIDE 31

Brio Grid

Grid System

  • 12 columns
  • 13 gutters
  • Fixed gutter width: 4 brio points
  • Variable column width
slide-32
SLIDE 32

Brio Grid

Grid System

  • 12 columns
  • 13 gutters
  • Fixed gutter width: 4 brio points
  • Variable column width
  • Graphical objects aligned on columns
  • Graphical objects acquire more

attentions than separators

slide-33
SLIDE 33

Brio Grid

Brio units

slide-34
SLIDE 34

Brio Grid

slide-35
SLIDE 35

Brio Grid

slide-36
SLIDE 36

Brio Grid

slide-37
SLIDE 37

Brio Grid

slide-38
SLIDE 38

Brio in XML

Custom Attributes in attrs.xml

slide-39
SLIDE 39

Brio in XML

Custom Attributes in attrs.xml

slide-40
SLIDE 40

Example: ListCell

slide-41
SLIDE 41

Example: ListCell

slide-42
SLIDE 42

Example: ListCell

slide-43
SLIDE 43

Custom Attribute Extraction

LayoutInflator.Factory as a hook

slide-44
SLIDE 44

Custom Attribute Extraction

Extendable to styles.xml

slide-45
SLIDE 45

Custom Attribute Extraction

Validation

  • Custom Lint Rule
  • implement ResourceXmlDetector
  • Publish in the lint.jar
slide-46
SLIDE 46

Custom Attribute Extraction

Validation

  • Custom Lint Rule
  • implement ResourceXmlDetector
  • Publish in the lint.jar

Performance

  • Minimum extra work
slide-47
SLIDE 47

Problems

Single LayoutInflator.Factory

  • Impossible for multi-customization
slide-48
SLIDE 48

Problems

Single LayoutInflator.Factory

  • Impossible for multi-customization

Confusing custom attributes

  • android:layout_width vs. brio:layout_width
slide-49
SLIDE 49

Problems

Single LayoutInflator.Factory

  • Impossible for multi-customization

Confusing custom attributes

  • android:layout_width vs. brio:layout_width

No dimension support

  • Brio units cannot be used as dimensions
slide-50
SLIDE 50

Do it in Java

Internal Brio conversion functions

slide-51
SLIDE 51

Do it in Java

Internal Brio conversion functions Performance

  • Most efficient without xml parsing

Readability

  • Poor, boilerplate code
slide-52
SLIDE 52

Anko

Domain Specific Language (DSL) for android Written in Kotlin Built on class extension

slide-53
SLIDE 53

Anko

slide-54
SLIDE 54

Anko

Readability

  • As clear as xml

Performance

  • No xml parsing, same as Do it in Java

Usability

  • Most xml attributes are defined in DSL
  • Easy to add if not
slide-55
SLIDE 55 55

Design System Layout System Typography Learnings

slide-56
SLIDE 56

Typography

slide-57
SLIDE 57

Text Sizing

Avoid Specifying Font Sizes 10 Text Styles Set Programmatically Set Via XML

slide-58
SLIDE 58

Text Sizing

Avoid Specifying Font Sizes 10 Text Styles Set Programmatically Set Via XML

slide-59
SLIDE 59

Text Sizing

New Attribute In XML Layout

slide-60
SLIDE 60

Text Sizing

Leading Tracking Word Spacing Font Size -> Value Map

slide-61
SLIDE 61

Leading Support

Line spacing in TextView (API 1) Multiplier, Additive Value

slide-62
SLIDE 62

Tracking Support

Tracking or letter spacing (API 21) Values in “em”

slide-63
SLIDE 63

Tracking Support - <21?

slide-64
SLIDE 64

Tracking - Span?

What is a Span? Links

slide-65
SLIDE 65

Tracking - Span?

What is a Span? Links Bold

slide-66
SLIDE 66

Tracking - Span?

What is a Span? Links Bold Image

slide-67
SLIDE 67

Tracking - Span?

What is a Span? Links Bold Image Scaling

slide-68
SLIDE 68

Tracking Support

ScaleXSpan Non-Breaking Space Increase/Decrease Space Width

slide-69
SLIDE 69

Tracking Support

1) Original Text 2) Split using BreakIterator 3) Non-breaking space is inserted before each character (\u00A0)

slide-70
SLIDE 70

Tracking Support

4) The space character is then wrapped with a ScaleXSpan 5) Text is post-processed to reduce the space at the beginning of a line with StaticLayout

slide-71
SLIDE 71

Word Spacing Support

No TextView Support Span technique

slide-72
SLIDE 72

Demo

slide-73
SLIDE 73

Demo

slide-74
SLIDE 74

Demo

slide-75
SLIDE 75

Auto Fitting Support

Internationalization Single Line Only Max Reduce Two Text Styles Last Option Ellipsis Order History Bestellungsübe...

Bestellungsübersicht

slide-76
SLIDE 76

Auto Fitting Support

View Width Required StaticLayout

slide-77
SLIDE 77

Auto Fitting Support

View Width StaticLayout

slide-78
SLIDE 78

Performance

Tracking / Letter Spacing

  • 2-5 ms

Word Spacing

  • 0-1 ms

Auto Fitting

  • 0-1 ms
slide-79
SLIDE 79 79

Design System Layout System Typography Learnings

slide-80
SLIDE 80

Layout System

Multiple Options

  • XML
  • Do it in Java
  • Anko/Kotlin
slide-81
SLIDE 81

Layout System

Multiple Options

  • XML
  • Do it in Java
  • Anko/Kotlin

Single Layout Inflator’s Factory (Not Solved)

  • Impossible for multi-customization
slide-82
SLIDE 82

Generic Layout Inflater

Hooks into LayoutInflater

  • Brio
  • Calligraphy
  • Custom views
  • A/B Experiments
slide-83
SLIDE 83

Generic Layout Inflater

Hooks into LayoutInflater

  • Brio
  • Calligraphy
  • Custom views
  • A/B Experiments
slide-84
SLIDE 84

Generic Layout Inflater

Hooks into LayoutInflater

  • Brio
  • Calligraphy
  • Custom views
  • A/B Experiments
slide-85
SLIDE 85

Generic Layout Inflater

Hooks into LayoutInflater

  • Brio
  • Calligraphy
  • Custom views
  • A/B Experiments
slide-86
SLIDE 86

Typography

Demands can be met

Out Of Box - Best! Span Hack

Powerful UI Component Span

Performance impact

slide-87
SLIDE 87

Visual Tools

Brio Grid

Screen Overlay Requires Screen Draw Permission

slide-88
SLIDE 88

Visual Tools

Brio Grid

Screen Overlay Requires Screen Draw Permission

Rhythm

Part Of Layout Layout Wrapped in Rhythm Layout

https://github.com/Actinarium/Rhythm

slide-89
SLIDE 89

Pinterest Template 1.0

We Are Hiring! Question?

Thorben Primke: @tprimke thorben@pinterest.com Lin Wang: linwang@pinterest.com https://engineering.pinterest.com/