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

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 / Dev-Velocity Making Pins Buyable 3

- Catalog of Ideas Confidentia l

Discover

Discover Save

Typography Text Sizing XS S M L XL Display XS S M L XL

Discover Save Do

Design System Layout System Typography Learnings 9

Design System aka Brio

One Framework For All Platforms

Layout Grid

Layout Grid Device Groups https://design.google.com/devices/

Layout Grid Device Groups Boints: Brio + Points

Layout Grid Device Groups Boints: Brio + Points Design Specs

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

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

Typography Sizing Leading Tracking Word spacing http://2.bp.blogspot.com/-Jo0rNkjo_AM/UlrWJMAXj0I/AAAAAAAAOlQ/-N8o737Xz0M/s1600/quads.gif

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

Design System Layout System Typography Learnings 20

Layout System Brio Point Grid System

Layout System Brio Point Grid System http://www.goodworklabs.com/ux-tips-to-promote-easier-self-service/

Layout System Brio Point - Unit of measurement - Device size independent Grid System

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

B rio P oint Boint-to-DP ratio Device DP Device Device Horizontal dp Vertical dp Width Category per bt 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

B rio P oint Boint-to-DP ratio Device DP Device Device Horizontal dp Vertical dp Width Category per bt per bt sw160dp Watch sw320dp Phone sw480dp Note sw600dp Tablet

B rio P oint Boint-to-DP ratio Device DP Device Device Horizontal dp Vertical dp Width Category per bt per bt sw160dp Watch LG G Watch sw320dp Phone Samsung S6 sw480dp Note Galaxy Note 4 sw600dp Tablet Nexus 9

B rio P oint Boint-to-DP ratio Device DP Device Device Horizontal dp Vertical dp Width Category per bt 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

B rio P oint Example on “320dp x 480dp” device 1 brio point = 4 dp - (horizontally and vertically)

Brio Grid Grid System 12 columns - 13 gutters -

Brio Grid Grid System 12 columns - 13 gutters - Fixed gutter width: 4 brio points - Variable column width -

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

Brio Grid Brio units

Brio Grid

Brio Grid

Brio Grid

Brio Grid

Brio in XML Custom Attributes in attrs.xml

Brio in XML Custom Attributes in attrs.xml

Example: ListCell

Example: ListCell

Example: ListCell

Custom Attribute Extraction LayoutInflator.Factory as a hook

Custom Attribute Extraction Extendable to styles.xml

Custom Attribute Extraction Validation - Custom Lint Rule - implement ResourceXmlDetector - Publish in the lint.jar

Custom Attribute Extraction Validation - Custom Lint Rule - implement ResourceXmlDetector - Publish in the lint.jar Performance - Minimum extra work

Problems Single LayoutInflator.Factory - Impossible for multi-customization

Problems Single LayoutInflator.Factory - Impossible for multi-customization Confusing custom attributes - android:layout_width vs. brio:layout_width

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 -

Do it in Java Internal Brio conversion functions

Do it in Java Internal Brio conversion functions Performance - Most efficient without xml parsing Readability - Poor, boilerplate code

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

Anko

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 -

Design System Layout System Typography Learnings 55

Typography

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

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

Text Sizing New Attribute In XML Layout

Text Sizing Leading Tracking Word Spacing Font Size -> Value Map

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

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

Tracking Support - <21?

Tracking - Span? What is a Span ? Links

Tracking - Span? What is a Span ? Links Bold

Tracking - Span? What is a Span ? Links Bold Image

Tracking - Span? What is a Span ? Links Bold Image Scaling

Tracking Support ScaleXSpan Non-Breaking Space Increase/Decrease Space Width

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

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

Word Spacing Support No TextView Support Span technique

Demo

Demo

Demo

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

Auto Fitting Support View Width Required StaticLayout

Auto Fitting Support View Width StaticLayout

Performance Tracking / Letter Spacing - 2-5 ms Word Spacing - 0-1 ms Auto Fitting - 0-1 ms

Design System Layout System Typography Learnings 79

Layout System Multiple Options - XML - Do it in Java - Anko/Kotlin

Layout System Multiple Options - XML - Do it in Java - Anko/Kotlin Single Layout Inflator’s Factory (Not Solved) - Impossible for multi-customization

Generic Layout Inflater Hooks into LayoutInflater - Brio - Calligraphy - Custom views - A/B Experiments

Generic Layout Inflater Hooks into LayoutInflater - Brio - Calligraphy - Custom views - A/B Experiments

Generic Layout Inflater Hooks into LayoutInflater - Brio - Calligraphy - Custom views - A/B Experiments

Generic Layout Inflater Hooks into LayoutInflater - Brio - Calligraphy - Custom views - A/B Experiments

Typography Demands can be met Out Of Box - Best! Span Hack Powerful UI Component Span Performance impact

Visual Tools Brio Grid Screen Overlay Requires Screen Draw Permission

Visual Tools Brio Grid Screen Overlay Requires Screen Draw Permission Rhythm Part Of Layout Layout Wrapped in Rhythm Layout https://github.com/Actinarium/Rhythm

Question? Thorben Primke: @tprimke thorben@pinterest.com We Are Hiring! Lin Wang: https://engineering.pinterest.com/ linwang@pinterest.com Pinterest Template 1.0