(Posted to Rethink’s YouTube channel on 9/7/17, link here)
UXers at Airbnb have to design for a multiplicity of international platforms, so they have come up with their own DLS (design language system)
Using DLS, mocks represent platform-agnostic functional units of design:
Principles of DLS
Unified
- Each piece is part of a greater whole and contributes to the system—no isolated features
Conversational
- Motion, illustration, copywriting animate the digital experience and are essential to the brand’s humanity
Universal
- Device agnostic and accessible to 27 languages
Iconic
- We’re focused, simplified and differentiated. We speak boldly and we say one thing
Universal
For their DLS, Airbnb decided to use a system of flat, nonhierarchical component symbols, each of which is defined for a variety of platforms (iOS, Android, responsive web etc)
Components are flexible in the content they contain however. Look at the various uses of the component with the round avatar photo:
Components aren’t nested hierarchically in code so the base code doesn’t change by device type (I am assuming the front-end does this work):
Design Systems
Ben believes you can define your UI patterns in a design system and free up more time to be creative
- Less meetings with PM, devs etc since component decisions are standardized
- Less arguing about minor stuff like padding when it’s all standardized
- Less shit work for you as a designer, more time to explore new things!
AI Helps Out
Airbnb is using AI and pattern recognition to create an automated process that converts component sketches into their code symbols—WOW!
- On the left, you see the component on top that the code is generating on bottom
- On the right, you see that sketch components that were scanned and recognized to create this component’s code
Ben’s ultimate goal is:
- Run a white boarding session
- Upload white board photos
- Software scans photos, produces a manipulatable component design file composed of existing components
- Those components have already been validated, internationalized and stress-tested!
- Our UXer is saved time by not having to start from scratch—they start with a validated component and add in custom code for a new iteration on it
About Ben (from Twitter, he’s not a big one for self-description on the web): Reckless, impulsive, and all around good guy. Design Technology Lead @airbnb
