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.