< Lineup

Pushing Android’s Boundaries For Pinterest’s New Look

Wall Hub 10:40am

Chat on Slack


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. At Droidcon Berlin [link: http://droidcon.de/sessions/pushing-boundaries-layout-system-and-typography], we shared details about the explorations and concrete solutions to meet the layout and typography requirements of Pinterest’s design system. This talk will (briefly) introduce the core layout and typography components and will then cover details on the process that we went through to productionize them. In particular, this will touch on measuring and refining performance as well as improving the components based on product engineer’s feedback. The second part of the talk will go into detail about the design system’s tap and screen animation requirements. Instead of UI components having to be aware of tap animations, we abstracted the animations into the core layout components in order to reduce the friction and make it easier to provide a consistent experience throughout our app. The talk will then cover how we pushed the envelope on animations given that the majority of our screens are fragments. You will leave this talk with a deepened understanding of the layout system, typography and custom animations. The layout system is at the core of how views are inflated and a powerful tool for system wide view modifications. Typography and animations can set your application apart via pleasant appearances and through unique interactions.

Thorben Primke, Pinterest

Software Engineer at Pinterest working towards making all product pins buyable. Prior to Pinterest, Thorben has worked on Android at Jelly, Facebook and Gowalla.

Lin Wang, Pinterest