Published on | Prototyping: From UX to Front End — Medium Daniel Williams

How to design for over a million users.

tl;dr

I analyzed the top design systems and wrote about each one. I examined their goals, key principles, use of color, and use of motion. I read about Material Design, Fluent, The IOS Human Interface Guidelines, and Airbnb’s DLS. There’s tons of photos and headers so feel free to scroll until you find something appealing. Thanks!

Material Design

The initial introduction video to Material Design describes the system as a means to solve problems. The elements of Material Design speak to each other clearly while being flexible down to every detail. Material Design merges classical design principles with technology to create an intuitive and natural design pattern.

The first goal of Material Design is to create a unified visual language that is consistent for all devices, screen sizes, and platforms. This universality is extremely important for a company like Google due to the substantial breadth of their scope. It’s likely that Google has been used on every single device sold in the past few years and thus needs to ensure that the experience is the same regardless of device or platform. The second goal of Material Design is to mesh classical design principles with technology to create a conventional yet innovative design system. The intuitive and simple nature of Material Design stems from Google’s minimalistic roots. One of the reasons Google became so popular was because of the direct, simple nature of the search page. At the time every other search page was littered with advertisements and irrelevant information.

Key Principles

Material Design is based on three key principles: Building elements of user interface that coexist in a tangible environment such that their hierarchy is defined by physical properties such as light, motion, and surface. Bold intentional use of colour, space, and typography to firmly signify meaning and desired actions while creating an attractive visual experience. Using motion as the primary feedback mechanism to action to maintain context and capture attention.

Before using an object or system, every person has an imaginary model of the way it should work in their head called a conceptual model. The most intuitive design solutions match with these conceptual models so effectively that the user knows how to use the system before they’ve even seen it. An example of matching conceptual models perfectly is seen with scrolling and pinch gestures on smartphones. These actions do not need to be explicitly taught because users typically imagine that this is the way these devices work. This example is reinforced even further if you’ve ever tried to use an unusual gesture on your phone and it worked; the designers matched your conceptual model perfectly.

The goal of the first design principle is to match the visual hierarchy of the user interface to the user’s conceptual model of tangible object hierarchy. Using light, surface, and movement in UI to convey hierarchy matches the way hierarchy is conveyed in the tangible real world. If an object is above another object in a tangible environment (thus closer in proximity to the perspective), it is obviously more important. Similarly, if an action is applied to an object in reality, that object will move. Google matches the real-world conceptual models of hierarchy and interaction in Material Design and thus creates an intuitive and immersive user experience that any person can understand. This design solution is brilliant because although every user will have a different conceptual model of a certain system, they will all have the same conceptual models of object hierarchy and interaction in life itself.

Conceptual models are based off past experiences and systems a user has already used. Therefore, no two people will have the same conceptual model of a certain system. Although Material Design is naturally intuitive through matching general conceptual models of interaction and hierarchy, systems that are more complicated must still guide users who have null or false conceptual models of the specific system. Standards for this guidance are provided by the strong color and typographic guidelines that Material Design includes.

Color

Color in Material Design is based on a primary color and a secondary color. The primary color is the most heavily used and builds repetition and continuity in each view of the application. This color is usually used for navigation bars, banners, and large constant elements on screen. The secondary color is used to accent any important or interactive part of the UI and should be used judiciously, especially if it has a high contrast with the primary color. The secondary color can be used to signify action buttons, inputs, links, and progress bars. Color is used in Material Design to convey a bold, visually interesting interface and the standards for the types of colors being used are somewhat strict.

Using bold and obvious signifiers reinforces the hierarchy that Material Design naturally provides while guiding the eye through the system and facilitating action. Whitespace is used heavily and color always creates a distinct focus on significant parts of the user interface. These guidelines are used to invoke action and thus create action-centric user experience.

Motion

Using motion as the main proprietor of feedback matches perfectly with the conceptual models we have built from our experiences with authentic object interaction. An object at rest will tend to stay at rest unless there’s an outside force or action. Objects in our physical lives do not move unless we make them move through action. This has created the conceptual model in our minds that motion results from action and Material Design matches this.

Psychologically, we are hyper aware of movement in environments we’re focused on. This capability is deeply-rooted in our instincts as we needed to be aware of all nearby motion to assess possible threats and survive in a primitive world. Although the need for this awareness has deteriorated, motion still easily catches our attention. Material Design utilizes this attention through animating in such a way that our eye follows the motion of the most important element to the new point of focus. These transitions are done quickly and organically to make the feedback feel as natural as possible. If animation is done well a user shouldn’t even notice that it’s happening. This effect helps maintain continuity and context in the environment as well as entertains users in the milliseconds content takes to use.

Motional feedback maintains context easily as focused elements expand and move themselves into greater focus while unfocused elements are left behind. These transitions make for a fluid and obvious flow that unifies one application environment rather than making the user feel as though they’re clicking through many different pages. The transitions and feedback are reinforced through easing on animations to create an experience that has a spirited character. This further reinforces thes idea of traversing a singular organic environment rather than just many different screens.

Motion even provides negative feedback in Material Design. When material refuses to move significantly, it is showing you that your action is not possible at that moment in time. This metaphor is similar to encountering a loosely locked door or running out of cable when vacuuming, there’s a small amount of motion but resistance indicates that something is not right. All motion in Material Design communicates in some way whether it’s showing a transition between pages or preventing a user from selecting an object.

Environment

Material Design begins with the environment, it is a closed 3D system where material has position on all axes. This virtual z-axis is essential to developing a visual hierarchy that is based on the proximity of the material to the user. Light and shadows are used on material to convey this proximity similarly to the way we view objects in reality. The closer the object is to us on the screen (shown by the depth of the shadow and it’s layering on other objects) the greater attention and focus we will naturally place on it.

As proximity is related to object attention and focus, material increases elevation toward the user based on actual interactions such as hovering with the mouse or desired interactions such as tapping a button. The shadows and size of material change to convey this increased elevation, subtly placing more precedence on the object. Material Design does have standards for the relative elevations of each component in generic interfaces but understanding why material elevations are where they are is imperative to using the system well. Material elevation also determines the motional relationships between interface elements. If material is on the same z-axis as other material in its path, it must first be raised or lowered to move around this material.

Conclusion

As proximity is related to object attention and focus, material increases elevation toward the user based on actual interactions such as hovering with the mouse or desired interactions such as tapping a button. The shadows and size of material change to convey this increased elevation, subtly placing more precedence on the object. Material Design does have standards for the relative elevations of each component in generic interfaces but understanding why material elevations are where they are is imperative to using the system well. Material elevation also determines the motional relationships between interface elements. If material is on the same z-axis as other material in its path, it must first be raised or lowered to move around this material.

IOS Human Interface Guidelines

In contrast with Material Design, the IOS Human Interface Guidelines place focus on effectively using standardized UI components to create a content-focused, clear, and accessible user experience. The guidelines state their goals as follows: Maintain functional interface clarity on all device sizes, Ensure constant focus on content through simplification of UI elements, and create visual and functional depth through layering, continuity, and discoverability. These goals define Apple’s elegance through functionality. The goal of simplicity can be related to a quote by Terre des Hommes: “Perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away”.

Apple finds their design through simplifying functionality rather than vice versa. The value that Apple places on functionality can be seen through the first goal of the Human Interface Guidelines. Throughout any application, all components must be as clear as possible. The typography, icons, and adornments must be legible and obvious at any size and serve to highlight content and convey interactivity. Maintaining clarity through different screen sizes is especially important in Apple’s case. The App Store is universal across Apple devices and thus applications must be responsive to phone, tablet, and laptop sizes while still providing great functionality. Responsiveness is the first imperative step to ensuring Apple’s goal of consistent clarity in their products.

Minimalism and simplicity creates content focused applications as all visual interest is derived from the content. The Human Interface Guidelines attempts to emphasize and highlight content as much as possible. Maximizing the focus on content requires elimination of overly captivating UI elements that contain distracting shadows, gradients, or other distracting elements. This approach is interesting as Apple recommending to eliminate box shadows eliminates design solutions that use robust layering. I agree with the Human Interface Guidelines that content should be focused as much as possible but I wonder if there’s a way to maximize focus on content while still utilizing the robustness of systems like Material Design.

Although Apple recommends against layering through using box shadows, it still states that applications should create subconscious visual depth through displaying views sliding off and on to each. This strategy maintains continuity and context in a different way than Material Design but is still equally as effective. Creating layering through view transitions rather than content transitions also facilitates a kind of depth that is not found in applications using Material Design. Whereas in material design, it’s rare to go down more than 1 level into material or a content tree, navigating an IOS application there is an infinite amount of continuous depth that can discovered as views slide off and onto each other. There are benefits to using both different styles of application depth, but Apple’s standards definitely provide greater scalability if an application’s transitions are always consistent.

Key Principles

Apple accomplishes the design goals of clarity, accessibility, and content-driven through six design principles: Aesthetic Integrity, Consistency, Direct Manipulation, Feedback, Metaphors, and User Control.

Aesthetic integrity relates to the functional aesthetic of an application, essentially how the design correlates to the desired function. It is recommended that the visual design and user experience of an app mirrors the functionality of the app. Maintaining aesthetic integrity well can be seen in financial apps that have a formal, subtle, and unobtrusive user interface. The UX allows the user the most focused path to their desired task while giving the formal, serious feel that comes with banking. The opposite feeling can be seen in playful time wasting apps that contain elements to purposefully catch a user’s attention and implicate discoverability.

The most obvious design principle that Apple stresses in the Human Interface Guidelines is consistency. Maintaining consistency in IOS applications is done in two ways, the first is simply maintaining the look and feel of an application throughout. This repetition of design maintains a unified and professional feel throughout the app while creating branding that reminds users of which app they are using when they get distracted and come back. The second less obvious standard for consistency is the recommendation to use all of Apple’s prebuilt UI components. Apple stresses this so much in the guidelines that the majority of the recommendations are simply how to use components as intended.

Maintaining component consistency includes consideration into things like use of intuitive standard gestures like pinch or drag and drop, or what type of pop up modal should be used in certain situations. Apple has created all kinds of different components for different situations and it’s easier for developers to pick the wrong ones. These design standards are extremely specific to including sections on each specific component and exactly, where, when, and why it should be used. These extremely specific recommendations also reach further than simply using the right components. Apple also includes recommendations about the type of terminology and language they prefer you to include in your IOS application. Apple recommends that applications avoid language that includes “we”, “me”, “our”, or “my” as this language might be taken as patronizing or insulting. I personally consider these recommendations overkill but they should still be kept in mind when attempting to get apps accepted into the app store.

l

Developers are encouraged to directly manipulate content on screen when user’s make standard gestures such as flicking the screen or rotating the device. This reinforces utilizing all of Apple’s prebuilt functionality and maintaining consistency through directly showing users the result of their actions on screen. Examples of implementing this behavior include apps taking on a new layout when the device is rotated from portrait or landscape, or including in different ways to manipulate content using 3D touch.

Apple recommends giving feedback to all actions through a variety of different pathways. Feedback mechanisms include sound, vibration, progress indicators, color changes, or animations to convey the results of different actions. I enjoy that Apple gives all different kinds of recommendations to give feedback on user action as opposed to Material Design recommending mostly motion. I especially like the standards they give for haptic feedback on user action, haptic meaning kinetic or physical. This kind of feedback can be seen in the slight vibrations of newer devices when the home button is pressed or when an app is selected using 3D touch. Apple gives standards to this feedback stating what kind of vibration pattern should be played based on the response to an action. An escalating double vibration is felt on success, a descending double vibration is felt on warning, and an unusual quadruple vibration is felt on failure.

The IOS Human Interface Guidelines state that all content interaction should be a metaphor for object interaction in daily life. This is the same as conceptual model matching in Material Design and plays the most important role in creating intuitive user interfaces. Content should be perceived as physical and the users should have the ability to manipulate this content through moving it to expose other content, throwing it off screen, or making it larger or smaller through pinching. Content should be congruent with interface elements in its physicality. This can be seen in apps like Tinder where each card can be thrown either left or right depending on the users decision to reveal new cards or Photos where you push pictures left or right to move along in a long sheet of images.

The last design principle Apple recommends is passing all control onto the people using the application. The users should make decisions for themselves and the app should warn rather than prevent potentially dangerous deletions or actions. The user should not feel as though the app is forcing them through any actions but rather that they are completely autonomous using the app. Users should always feel like they are in control and this feeling can be facilitated by keeping UI elements predictable and providing ways to easily cancel mistakes or slips.

The IOS Human Interface design principles strongly match the physical design of Apple’s products through prioritizing simplicity, finding design through functionality, and prioritizing standardization of user experience. I enjoy the explicit freedom this design system gives when guiding design of feedback mechanisms and content hierarchies.I think that giving standards for multiple feedback mechanisms affords more innovative designs allowing developers and designers to push the envelope. I also admire the design standards that place a focus on content rather than flashy UI. This content-focused practice lies perfectly in line with Apple’s ability to give users what they actually need, not what they think they need. The user is not using the device for the elegant user interface, they’re using it for the content. The elegant user interface simply results from prioritizing content delivery.

Color

Apple wants designers and developers to use color purposefully and judiciously. The IOS Human Interface Guidelines recommend limits on color usage as to not weaken the predisposed meaning color will have when displayed in an app. The more a color is used in a user interface, the less the user will associate that color with its predisposed meaning. Taking red for example, the more it is used in the interface the weaker the communication will be when using red to warn the user. Similarly, a lack of color like grey is used typically to symbolize when actions are unavailable or unselected. The more grey is used without this purpose in a user interface, the less users will associate grey with this inherent meaning.

With a primary focus on clarity and communication, Apple recommends color only to be used with calculated purposeful intent (In functional UI of course, games are different). Apple suggests using a key color to symbolize interactivity throughout an application. Making this signifying color one of the colors from the app logo can easily develop brand identity within an app.

Following Apple’s focus on universal accessibility, color palettes should also be picked with considerations toward people who are colorblind. 8% of men and 0.4% of women are colorblind. This works out to about 5% of user being color blind, this is a huge amount for apps with a million plus users and therefore color schemes should accommodate any type of color blindness.

Apple’s recommendations for color usage contrast heavily with Material Design. Apple recommends a conservative approach to color usage to emphasize communication while Material Design liberally uses color in components. I agree with Apple’s standards for color, over using color not only hinders communication but takes attention off the content being displayed.

Motion

Motion in the IOS Human Interface Guidelines seems like an afterthought when compared with the standards Material Design has for motion. There is very little documentation about how animation and motion should specifically be used in applications. This gives the impression that Apple does not consider motion to be nearly as important as visual style or other forms of feedback. The main purpose of using motion seems to be reinforcing the user’s perception that they are directly manipulating content and they are in control. The guidelines acknowledge the importance of motion to provide feedback and status, however the only recommendations provided are to keep animation realistic and consistent. I’m still quite disappointed that there isn’t more information in the documentation related to motion.

There is something to be learned from this lack of focus on motion by Apple. Although motion is key to feedback in our tactile reality, it is not imperative to providing feedback or maintaining context in user interface assuming other feedback is given effectively. This point may seem obvious but I believe motion as a feedback mechanism is deeply ingrained into human psychology, we’re so used to seeing the things we interact with move that I’m surprised Apple doesn’t place more focus on it.

Conclusion

I am fascinated by the IOS Human Interface Guidelines. I expected them to be similar to the Material Design guidelines but they were completely different. Rather than providing general design standards and letting developers figure out the best design solutions for their problems, Apple gives standards on how to mix and match their specific components to create the best experience possible. I really like how the goals and design principles of the Human Interface Guidelines mirror Apple’s hardware design through simplicity and functionality. This effectively unifies the user experience of Apple’s hardware and software. The Human Interface Guidelines have definitely opened my eyes to creating innovative user interfaces rather than simply relying on Material Design’s z-axis content hierarchy and motional feedback like I’ve always done.

Fluent

Fluent is Microsoft’s new design system. It uses light, depth, motion, and material to create design patterns that work for both 2D interfaces and 3D interfaces in VR. I had never thought about the new design challenges that must occur when designing interfaces in virtual reality. The problem that initially occurs to me when I look back on the times I’ve played VR is that the interfaces are kept in 2D in a 3D world. This hurts immersion and is an issue that few games elegantly solve. Fluent is an extremely innovative design system, it uses light in a more direct way than any other design system I’ve looked at thus far and is the first system of kind to create a unified experience between design in 2D and 3D.

There isn’t any specific goals of Fluent stated in the documentation so I’m going to assume that the underlying goaling is to make the experience of using Universal Windows App unique and unified. Universal Windows Applications (UWAs) are written for use with all Microsoft systems and thus interesting design problems will arise as users move from keyboard and mouse to controller to virtual reality. Fluent is built to unify this experience across platforms through using signifiers and affordances that are effective in both 2D and 3D worlds. Using dimension agnostic signifiers such as light and depth give new UWAs a unique look and feel that is quite different from the flat user interfaces users are used to with Google and Apple.

Key Principles

Fluent uses five design principles to solve its design problems: Light, Depth, Scale, Motion, and Material. Light is used as the primary feedback mechanism indicating selections, button clicks, and focus. This isn’t the kind of light we’re used to seeing in flat interfaces either, light in Fluent actively illuminates elements in focus rather than a whole environment like in Material Design. Depth is used heavily in Fluent interfaces to manage content hierarchy. Content that is out of focus is in the background or scaled down till it is invisible. When this content is brought into attention, it flies into the foreground or expands from a small point.

Similarly to Material Design, Fluent uses motion to maintain continuity and focus through transitions. This smooth transition is extremely important in video games and VR, as the player will lose immersion if the transition is too harsh. Although Fluent claims material as a focus of the design system, the only material property they provide examples of is translucent interface elements called Acrylic. Fluent uses scale as a guideline for creating interface elements that are effective in both 2D and 3D environments. This is an important concept as a UWA moves through devices and all interaction paths must be considered. Menus must effortlessly scale from flat UI on an Xbox to a VR interface as the user plugs in their virtual reality headset.

Starting with flat user interfaces, Fluent uses light primarily through its Reveal feature. Light is used to reveal hidden borders and show selections or hovers. The utility of this feature grows as we realize that highlighting a singular object with light reveals its borders and signifies that its neighboring elements can also be interacted with. Light and Reveal work best in 2D interfaces to universally show interactable objects.

Light in Fluent really shines when used in virtual reality. It can be used to alert the user of activity, show interactivity, or give feedback to interaction. A fantastic example of light as a signifier in VR can be seen in Batman: Arkham VR. A key gameplay mechanic in Batman: Arkham VR is investigating crime scenes to progress the story. This investigation is done by using a “forensic scanner” light to scan objects in the crime scene and reveal key details. When the player points the scanner light on an object, it is scanned. This scanner is pointed around like a flashlight and the light increases in intensity when a significant object encounters the light from the scanner.

Depth is used heavily in the content hierarchy of Fluent. Content that is not immediately in focus is far away and it zooms into the foreground when it becomes relevant. Depth is combined with light and material when designers use Acrylic in Fluent. Acrylic material is translucent and is used most effectively in popovers, background sheets, or navigation. Similarly to the IOS Human Interface guidelines, acrylic material in Fluent is typically used to defer the UI to the actual content being displayed. This can be seen in Windows 10 where most menus and navigation bars around content are done in Acrylic.

Acrylic material is also distinctively used to signify the amount of focus the current app requires. Apps with more Acrylic material are typically utility apps that to signify their secondary nature through transparency. Using depth heavily in 2D interfaces easily allows for transitioning the same interface from 2D into 3D. The content that moves closer to a player in VR is clearly more focused than the content away from a user, this creates easy scalability between platforms.

Material and Scale are both afterthoughts in Fluent in my opinion. Scale results from effective use of all the other design principles and Material has no significant focus other than combining with depth and light to create Acrylic. I’m not sure why material was included as a design principle in Fluent as there isn’t clear documentation on how to use it effectively and there’s no images of it in practice.

Motion

Similarly to Material Design, motion in Fluent is used to maintain context through transitions. Microsoft calls these transitions using motion “connected animations” to explicitly state that the animation is directly connected to the content being transitioned to. Maintaining continuity through transitions is far more important in VR than it is on a 2D user interface due to the heightened ability to make mistakes in VR and the greater likelihood to become disoriented by these mistakes. For example, if a user accidentally flips a switch in a VR game, it will be annoying and even nauseating to the user if their whole perspective changes unexpectedly.

Accounting for motion sickness when managing animation in VR creates another new design problem when interfaces must balance maintaining continuity between game states and not disorienting the user too much in transition. Batman Arkham VR has fantastic transitions that are fun and maintain immersion. When a player in Batman Arkham VR changes levels or areas, they shoot a grappling gun to a certain point and are pulled into the transition to the new area. This design solution is awesome because it makes the typical uncomfort of changing game states in VR fun and immersive. It would be even better if the grappling gun didn’t pull you into a transition screen but rather to the next area entirely but the effect is still done extremely well.

Color

Color is used interestingly in Fluent due to users having the ability to choose an accent color that they’ll always see throughout UWAs. This behavior limits the freedom developers get with color as they’ll never be able to design in a consistent way with what the user picks for an accent color. The positive outcome of this behavior is that similarly to the IOS Human Interface Guidelines, color must be used judiciously to communicate.

Fluent gives the recommendation that the accent color should used to signify interactive elements. This dynamically incorporates the user’s chosen accent color and standardizes their association with their color as an affordance. This means that as a developer, I set buttons to be the the users accent color rather than a particular color I’ve chosen. Assuming other developers do the same the user will know anything that is their specific color can be interacted with. Due to the risky nature of using specific colors in UWA, there is even less color in UWA than there is in IOS apps. This gives current Microsoft applications their unique yet drab feel.

Conclusion

To conclude this section on Microsoft’s Fluent, I think this system is the weakest thus far with regard to 2D interfaces. Microsoft has attempted to be far too general with this design system by attempting to mix and match the best and most scalable elements from both 2D and 3D interfaces. This creates an unfocused design system that has some design principles that work great in some use cases but poorly in others.

I absolutely love the way Fluent innovatively gives design standards to VR and non-standard user interfaces. However, I feel that 2D and 3D environments are too different to have one set of universal principles. UWA lacks the most color out of every design system covered thus far and I think this contributes to the uninteresting look of most Windows applications. On a positive note however, I believe that the current standards of Fluent for VR interface design are a fantastic starting point. The usage of light is an absolutely brilliant way to signify selection within a VR environment and I can’t wait to see the iteration on this system to make design in VR even better.

Design Language System

In Airbnb’s Design Language System, they attempt to create a scalable, universal, content focused system by regulating color, typography, and spacing. Similarly to the build recommendations of the IOS Human Interface Guidelines, this design system is based on a set of prebuilt elements that are used repeatedly throughout the application to form full components. Airbnb prefers this method over what it calls “atomic design standards” due to the inherent scalability that comes from mixing and matching elements rather than creating new ones for new features.

Atomic design standards are defined by Airbnb as a set of standards on the small atoms that are used to make elements. For example, Material Design is an atomic design standard as it provides guidelines to build the small elements that make up the modules. This is different than the DLS and IOS Human Interface Guidelines as they instead provide guidelines on how to mix and match interface components rather than build them.

The problem that Airbnb sees with the atomic method of design is that having different yet similar modules created using atomic standards creates a divide between the designers and developers. Since there is no common language between devs and designers about what components to use in certain features, scalability is reduced as new components are created. Due to the development speed and future scalability Airbnb requires, the developers and designers must be able to communicate effectively and build features quickly, thus the Design Language System was created. The four main goals of the DLS are to create a user experience that is unified, universal, iconic, and conversational.

The first goal, unity, is a fairly standard goal in design systems. Airbnb approaches unity through ensuring that each specific module / component makes a positive impact on the user and that no component is isolated. Although it is obvious to anyone that creating a unified, repetitive visual experience is key to great design, I think this definition of unity extends further than that. The words that stand out to me in the definition of unity are “No isolated features”. I interpret this line as inferring that there should be no wrong clicks or actions that appear off the beaten path. This implies that every action in Airbnb should lead to a positive interaction for the user. Meeting this goal is imperative to creating the friendly, welcoming personality of Airbnb’s user experience.

Creating a universal experience is especially important in Airbnb’s case. The application is built on the web, IOS, and Android while being used internationally. Both the technological and design sides of Airbnb need to be universal for it to scale and succeed. Airbnb had to account for every language and cultural difference when creating DLS and thus focused the system on typography and images rather than color and icons.

Airbnb uses the word “conversational” to convey their goal of consistently maintaining continuity through motion during transitions in the app. The most heavily used animation in Airbnb is the parent to child transition as users browse and gain more information on various listings. Maintaining continuity in this transition is especially important to keeping users on the right track as a simple slip could lead to a wrong booking navigating a small iPhone screen. Conversational also represents the friendly and playful feel or Airbnb’s user interface, the language that is used is genuine and personal rather than quantitative and direct.

Notably, one of the main goals of the DLS is to build a consistent identity and strong brand on the three platforms Airbnb resides on. This goal is defined by the DLS as creating an iconic experience that is unmistakably Airbnb on all platforms. Strong branding is created through the welcoming sans-serif typeface “Circular” and the extraordinary photography used in Airbnb’s listings.

Placing an emphasis on the beautiful photographs of listings immerses users in the travel experience and creates a unique feel that is particular to Airbnb. I’m sure it’s obvious that photography in a travel app is the most important feature but no other travel site has downplayed the interface to the photography as strongly as Airbnb has. This focus on photography is strengthened by the lengths Airbnb goes to create stunning photographs for the listings on its main page. Airbnb has taken photos for the app in over 691 neighborhoods around the world and connects its listers with professional photographers essentially for free.

Meeting The Goals

Airbnb ensures a unified experience on all its platforms by viewing the DLS as a guide to the building blocks of the Airbnb platform. The DLS contains every element that Airbnb needs to build features and views. These small elements are the building blocks of larger components and views. Examples of elements include the user marquee or the standard row. Building in this way ensures that any change to a small element will propagate through the rest of the app to all the views built with it. This ensures consistency and repetition throughout the interface while creating a super scalable application.

Building with elements to form features also makes prototyping and wireframing extremely easy for Airbnb. They know the exact elements they have to work with and can simply mix and match them to build new features. This technique probably made launching Airbnb Experiences extremely easy. All the developers would have had to do was take the elements that built the listing and mix and match them slightly different. As someone who really values consistency and scalability in products, designing all the needed components before going into development is definitely the way I’m going to approach my future products.

I love applications that I can get lost in. Unifying each path of a user interface similarly to Airbnb’s and Pinterest’s flow can easily promote exploration and help the user find relevant information effortlessly while making no mistakes. I especially love how Airbnb links listing views to more content by recommending similar listings at the bottom. This allows users to effortless explore and find similar listings if they got to the bottom of the current one and weren’t convinced. There isn’t a wrong or tedious action path when exploring Airbnb, all clicks are unified.

Analyzing Airbnb’s interface, there’s a distinct lack of icons that one would typically notice while taking a closer look at Facebook or Youtube. I love this design style because all the visual interest in the user interface is generated by the photos. The liberal white space along with bold purposeful headers creates a welcoming and organized feel. This friendly feel will never be lost internationally because there isn’t any significant usage of colors or icons that could convey different cultural meanings. Communicating only through photography and type creates an extremely direct and culture agnostic experience. Ideas are conveyed instantly and obviously through this design, the raw photography speaks for itself.

I frequently read Medium and I’ve noticed lots of articles praising use of great design metaphors to create intuitive user interface. Airbnb’s approach completely mitigates this need as the interface cannot be more informationally direct. Airbnb does not require design metaphors because it is so direct. You see and read exactly what you need while still remaining entertained due to outstanding quality of the photos. Lack of design metaphors in an interface can easily mitigate the problems that come from different interpretations by different cultures.

The further I inspect the details of Airbnb’s design, the more I realize the true meaning of their design goal “conversational”. Airbnb’s approach to displaying relevant experience, listing, and user information is not done in a standard way. The information about listings is presented in a personal, genuine manner rather than quantitative direct manner. This presentation can be seen in friendly headings such as “What We’ll Do”, “What I’ll Provide”, and “About your host, Daniel”. These headings develop the cordial conversational tone far better than headings like “Activity”, “Info”, “Host”. This allows users to feel more emotionally connected to the experience.

The conversational tone is also reinforced through the parent to child animations in the IOS and Android apps. When a photo is tapped and it’s in the right position, it simply expands up from where it was into the top of the screen and it’s respective information slides up from the bottom. This transition beautiful maintains context and reinforces the autonomy the user feels while searching for listings. This behavior isn’t really respected in many travel applications as there’s constant recommendations for sponsored listings.

This is one of the most beautiful ways of maintaining continuity I’ve seen and is only rivaled by the way Pinterest animates when you tap the icon that brings up similar pins. My only woe is the way that Airbnb inconsistently uses the transition, if the photo is not in the exact right place, then the transition is replaced by the typical IOS slide. Seeing this was super disappointing to me because I expected the transition to be consistent for all listings as it’s done so elegantly.

The Airbnb interface is absolutely iconic. The whole brand identity is built off of beautiful photography that piques the soul to travel. The photography is so good that just browsing the app when not even looking for a place to stay is still fun. You can’t say that about applications like Trivago or TripAdviser.

Airbnb maintains constant iconic photography throughout the app by providing a way to easily connect listers and professional photographers. Airbnb manages this connection entirely and all the user has to do is wait for the photographer to show up. The photographer is then paid from small intervals out of the money the user makes off their Airbnb listings. This forms a symbiotic relationship between Airbnb, the photographers, and the listers. Airbnb gets beautiful photos for its interface, the user gets professional photos of their listings, and the photographer gets a stream of clients. I believe that creating this relationship was imperative to Airbnb’s exponential success and without it the iconic nature of the app would be ruined.

Color

Color is purposefully neglected throughout the DLS to ensure that all attention is garnered by the photography. The colors that Airbnb does use have no predisposed associations in users’ minds which helps Airbnb create an easily recognizable brand color. An interesting part of the color scheme in Airbnb is the subtle use of grey rather than black for the headers. This creates a soft friendly appearance and reduces the type’s contrast which heightens the contrast the photography has.

The best use of color in Airbnb’s design scheme is the different color headings that highlight the type of listing or experience in the photo. This purposeful use of color is done masterfully as the specific color of the heading compliments the main accent color in the photograph above. This color usage serves to further highlight the vibrant colors in the photographs and really highlights the masterful design of Airbnb.

Yellow to match the drink garnish

Conclusion

Seeing pre-built elements similarly to the IOS Human Interface guidelines initially disappointed me but Airbnb approaches these elements differently. Rather than having a set of components and views to be mixed and matched to create the whole interface, Airbnb mixes and matches the elements that actually create interface components. This is a brilliant way to standardize the design of an app while still allowing for innovative design solutions to new problems. For example, the user marquee in the DLS will always be used when user profile information needs to be displayed but a user profile needs to be displayed in multiple components and scenarios leading to versatile reuse of this element. I think the DLS takes all the best parts from Material Design and the IOS Human Interface guidelines and combines them into one system.

Airbnb’s DLS is my favourite design system so far. The subtle yet bold user interface works especially well to focus attention attention on the content of Airbnb. The focus on photos was a brilliant way for Airbnb to build the iconic and delightful experience while creating brand identity. Although I was initially opposed to simplifying UI as much as possible to defer to content (which was also recommended in the IOS Human Interface Guidelines). I have been converted.

Final Thoughts

I began this article only having experience with Material Design. I thought Material Design was the absolute best way to do things due to the generalist conceptual model matching that it does through motion and z-axis content hierarchy. Reading all these different approaches to UI design, I’ve learned an unbelievable amount and my perspective has changed completely.

Every product I create from now on will use a design standard that I’ll be able to easily define by mixing and matching the principles from these systems that best represent the product I’m trying to create. Thank you so much for reading and if you have any questions feel free to email me at ddgwilli@uwaterloo.ca!

The Design System Guidebook was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Design System Guidebook

How to design for over a million users.

tl;dr

Top Stories