We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

Pushing the boundaries of the layout system & typography

Formal Metadata

Title
Pushing the boundaries of the layout system & typography
Title of Series
Number of Parts
18
Author
License
CC Attribution - ShareAlike 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this
Identifiers
Publisher
Release Date
Language

Content Metadata

Subject Area
Genre
Abstract
Creating designs and experiences that are consistent across different platforms and device factors can result in increased complexity for both design and engineering. One way to reduce the complexity is to create a design system that provides reusable building blocks and consistent guidelines. A design system may include guidelines for how components should be spaced or sized, typography, color scheme or how animations should behave. This talk will focus on building the foundation for component spacing/sizing and typography. At Pinterest, the design team created a system that strives to provide a consistent experience across different platforms and device form factors. At the core of this is a new unit to define a component's dimensions and spacing. The unit is called Boints or BT and is similar to DP but the multiplier is based on the device’s classification instead of the device’s density. In order to support a new sizing unit at the system level, the layout system has to be customized. This allows having custom attributes for width, height, margin or spacing whose values are in BT. Furthermore this system makes it possible to continue defining layouts in XML instead of programmatically in Java. This talk will go into detail on how this was achieved as well as the challenges we experienced. Our design system also includes guidelines for typography in order to achieve visual hierarchy among text components. This includes leading, tracking and word spacing. Leading or line spacing is supported by the TextView. Tracking or letter spacing is only supported in Lollipop and above, while word spacing is not supported at all. In order to support all three attributes for Ice Cream Sandwich and above, a custom TextView was created to abstract the complexity and provide engineers with a simple to use text component. The takeaways from this talk are that you will have a deepened understanding of the layout system and typography. The layout system is at the core of how views are inflated and a powerful tool for system wide view modifications. Typography can distinguish your application by utilizing advanced design conventions; from this talk, you’ll have a hands-on example on how to push the boundaries of the TextView component.