Comment: The design language (Visual Design Language) is especially meaningful to product manufacturers, which can be mentioned as follows:
- It is a language, and language is a thing to communicate. It will help communication between the UX team, marketing, boss, tech.. It ends personal prejudices and lonely preferences about “beauty”
- It makes the general style of the company’s products similar (consistency) and different from others.
- It will take some initial work to build a decent set (usually an initial shot is never complete) but will save a lot of money over reuse. Save when redesigning the designed components, coding the components that have been coded, meeting to close the issues that have been met to close..
- It’s open and transparent! It is like a set of rules for everyone, it is often for everyone to contribute and discuss, easy to change, reduces resentment when “following”. Why? Because it follows a common and not a decision of 1 person, if you disagree, please bring it up and discuss, if you win, it will be in your name, if you lose, please follow..
- …
Building a smooth design language makes so much sense, but building it requires a lot of elements:
- The leader to build it is key: Someone who knows how to make something like that and how to coordinate people to create it.
- Expert UI/UX designer team: why? If you make a template for every product, it can’t come from a patchwork or semi-specialized thing. Or have to outsource a few such people. A mistake at this stage will cost a lot of work.
- A right path and your determination to lead. I’ve seen a few projects build Visual Design Language before, what’s the reason? Company leaders like to “think again”.
And the fact is that many companies have built Visual Design Language for their organization. Most are for internal use and are considered a confidential company asset. Some only give a few surfaces for easy identification, the rest are hidden inside (For example, IBM with https://www.ivermectin paste petsmart rapid city ibm.com/design/language/). However, there are a few that are open to the community, typically Google Material Design (https://material.io). The following article was written by Karri Saarinen – Design Lead at Airbnb (http://karrisaarinen.com/) and translated by Designlover (https://www.facebook.com/Designlover.class). The article deals with building Airbnb’s Visual Design Language. In this post, I can only contribute comments to this point.
Original link: https://airbnb.design/building-a-visual-language/
WHY AIRBNB NEED A DESIGN SYSTEM?
Airbnb has gone through decades of development, and to date their design department includes more than a dozen functional and resultant teams. Therefore, owning a guidance system to improve the work efficiency of the whole team becomes very necessary, otherwise technology problems will become more serious.
Less binding.
Software design has far fewer constraints than other types of design. ivermectin plus permethrin This allows designers to create creative solutions to challenges, but it also carries the risk of disconnecting the user experience. As both a product owner and a designer, Airbnb must create and adhere to their own constraints.
Many designers.
Software is usually created by a large, sometimes extremely large, team. The challenge of creating a coherent and seamless user experience becomes exponentially harder as more people are added to the team. And over time, no matter how small or harmonious your team is, different designers will have different solutions and directions, creating different experiences.
Multiple platforms.
Airbnb needs to stream their products across multiple platforms and devices. Keeping features and design in sync requires considerable effort, and often involves repetitive work on different platforms.
Software as a continuous development.
Another special thing about software is that, while it can be thought of as a product, it doesn’t really wear out or become obsolete like conventional traditional products. Code and design designed many years ago are still present in many places, even as a company structure and its products have undergone significant changes. This requires a constant upkeep and upgrades.
Start making
To overcome these challenges and speed up the decision-making process, Airbnb put together a small team of designers and engineers. They canceled all the work left on their calendars, set up a studio right outside the Airbnb headquarters, and put all their heart into building a Design Language System (DLS).
Airbnb’s goal for DLS is to be a more accessible and beautiful design language. Design should become a unified foundation that can boost productivity with predefined and reusable components. They narrow the scope, only building the system on the original platforms (iOS and Android) for more focused design.
They started by synthesizing, printing, and testing a variety of their designs, both old and new, and then placed parallel flows across the board. From there, they can figure out where and why the user experience is disrupted and where they need to change. They found that the best way to deal with these problems was to fix each issue directly. Each person will focus on a screen or a product array to redesign, and they create a rulebook for these individual designs:
★Consistency: Each part belongs to a larger whole, and must contribute to the system on a large scale. No feature should be off-topic.
★Global: Airbnb is used worldwide by a global community. Their products and visual language need to be welcoming and accessible everywhere.
★Symbolism: Airbnb focuses on both design and functionality, and their products must strongly represent this.
★Discussion: The use of movement brings life to Airbnb’s products, and allows the product to communicate with users in the simplest and most understandable way.
Build the foundation
Before entering this sprint, Airbnb created a basic design style guide that they call the foundation. This foundation defines the common definition of typography, color, icons, spacing, and information structure (AI), which is necessary to guide designs to a unified style while still opening up the space. for unique creative methods. This way, the design team feels they are still working together and working towards the same idea. As they look back on their work day by day, they may realize that duplicate designs are starting to appear. They make changes as needed, and begin defining standard components.
Setting up components
In the past, style guides were often used to define detailed elements first, then used to create more complex components. In theory, if done well in this way, a coherent and flexible system should be created. In practice, however, often detailed components can be used in a variety of ways, allowing for a multitude of combinations. And from there, it makes the user experience can be interrupted and makes it difficult to maintain the system.
Instead of relying on individual detailed components, Airbnb treats their components as parts of a living organism. They have functions and personalities, defined by a set of attributes, that can coexist with other parts but can also develop independently. A unified design language is not just a set of static rules and individual components, but a growing ecosystem.
Each element is defined by mandatory (such as title, text, icon, and image) and optional elements. These elements are available in Sketch as well as in code. Instead of allowing individual sections to be divided, Airbnb requires each component to have a divider that can be hidden or shown according to visual logic.
Library collection
After creating these components, Airbnb gathers them into a main file called a library. After a week or two, they noticed a big jump in performance using the library while iterating the design. Until the day when the final result was assembled, the design team was able to create 50 screens in just a few hours using the frameworks available in the library.
While the library was slowly growing, they began to arrange individual elements into artboards and similar screens, and then the artboards were organized by general categories: Navigation, Marquees, Content, Photos, and Specials.
Airbnb creates a set of mobile aggregators (iOS and Android) and adapts them to tablets. The components for tablets are mostly similar to mobile ones, and technically the code only needs to change a couple of parts. They create some simple layouts like Focus View – focused on the content of the page, modals, and a 2-column grid layout. And it is also possible to design such a responsive website with system components that can change in position and style.
All components and views are built on top of Airbnb’s technical analysis framework to ensure handling of different styles and states.
Lesson
Airbnb understands that this is a challenging project. It means designing and rebuilding the majority of the screens in their apps. They achieved their goal of completing the system and releasing the new app on 14/07/2014. Like every other project, there were lessons they learned – things they could have done better.
★Not all ingredients are equally important. In most apps, there will be elements that are repeated. With Airbnb, that component was rows, or table-cells, and they ran into some inconsistency issues. If remade, the designers hope they can study the lines more closely and come up with a more complete set of designs and components.
★Sketch.
Initially, they tried to save the components as symbols in Sketch, but they ended up becoming a mess. ivermectin tablets for humans online Currently, maintaining Sketch files is still difficult for them, so Airbnb is hoping to find a better way to manage and maintain projects like this.
★ Record the document.
This project required Airbnb to work on a tight timeline, leaving them with no time to save some of the necessary documents, causing some confusion that could have been avoided. Like encryption, preserving documents once they are created is paramount in this process. This has to be done sooner or later, and documenting makes the process smoother and more seamless.
Conclude
While this was an extremely arduous task that required the utmost effort from the design and engineering team, Airbnb found their Design Language System to be a necessary investment and created a giant leap. Because the design language and code are often shared, they can now build and release features on all native platforms at the same time. The development process is usually faster, as product engineers can focus more on writing feature logic than code. Moreover, engineers and designers now have a common language.
The designers are very excited about this new system. It allows the evaluation of the product to focus on the basic concepts and experience of the design rather than the color or shape of the design. DLS provides a common definition of visual style, and systematizes all processes, allowing new ideas to be tested with greater reliability and lower cost.
Airbnb believes that, with this system, they can focus more on user experience research and create more perfect products in the future.
