Smart organizations like Atlassian, Dropbox, Airbnb, and Shopify invest in design systems to provide their products with a consistent look, streamline the design and development process, and boost their teams’ productivity.
A design system is a collection of reusable components that are coded and documented and transparent standards that enable designers and developers to collaborate and build coherent digital products.
Over the past few years, the concept has gained significant momentum because it aligns with the general trend of project automation. In the next years, design systems will become a must-have for every organization that wants to build consistency across products and unlock the potential of their design teams.
Here are the four key trends and best practices for building design systems.
Should designers learn how to code? That’s one of those questions for which nobody seems to have an answer.
The recent trends show that we may have been asking the wrong question. Consider the rapid evolution of design tools that help designers focus on design and generate code automatically. For example, Airbnb has developed an internal workflow where designers sketch a UI and get the code for it in a few seconds.
One of the most popular UI prototyping tools, Principle, requires almost no knowledge of coding. New tools like Framer X and Modulz can automatically translate UI patterns into React components, allowing developers to build upon designs instead of replicating them in production.
Tools that unify design and development workflows into a single UI will become more prevalent in the years ahead, helping designers to think in terms of components and design systems. Note that the bridge between coding and design tools may not come from the more established players, but the newbies, whose integrative approach is taking over the scene.
As more companies get interested in developing design systems, they have to reexamine how design teams are built. Documentation of design systems often includes some code snippets of design components. That's why a design team needs to include at least two members: one designer and one developer.
At Netguru, the more people we involve in the creation of a design system, the better the results. Ideally, your team should consist of at least two people, a designer and developer, but ideally, it should be 5 people: four product designers with different expertise (two with UI and two with UX skills) and a developer.
Speaking of design teams, next years will witness the emergence of DesignOps, which is the practice of optimizing the work of individual team members and entire teams to match standards of excellence.
My Design prediction for 2019 - With design teams scaling up more and more, Design Ops and Design Managing will become more standardized and recognized by orgs, a lot of talents and knowledge will be needed #DesignOps #DigitalTransformation— Toto Castiglione (@TotoCastiglione) December 31, 2018
DesignOps is on its way to becoming essential for mid-sized and large product companies whose design teams consist of more than 20 people. But the horizontal role of the DesignOps officer can bring benefits to every kind of organization. After all, it's about making the business more efficient by managing tools, processes, workflows, collaboration, end-to-end employee experience, and more.
DesignOps may affect design systems positively in specific cases. For example, it may come in handy for teams that need to build ad-hoc processes for a given project. Since each project has very specific requirements, technical limitations, and roadmaps, building ad-hoc flows and using different tools is fundamental.
Design teams stand to benefit a lot from a well-defined infrastructure, repeatable processes, and scalable programs that are part of DesignOps.
Keeping up with style guides and design systems published by leading design companies is a must. Here are the two that we think are going to inspire designers to rethink their practices in creating design systems for brands.
Mailchimp’s design system was developed with the idea of introducing a framework of core components to foster creativity while maintaining harmony. The system adopted a new approach to such elements as animation and illustration that allow communicating a broad range of emotions, take risks, and showcase the creativity of the company’s designers.
Functional design requires a balance between aesthetics and functionality. When the function is critical, it's best to keep things simple. Marvel's system is simple and straightforward – an excellent starting point for any functional design project. For example, its style guide classifies warning colors, text box variations, and animations. The main strength of this system is that it explains every element from the viewpoint of a developer, UI designer, and graphic designer. Its accessibility is an example to follow for teams involved in building a design system. By following the guide, designers can create a cohesive design language, build a platform-agnostic system, encourage change and solid reasoning, and boost cross-team communication.
Audi’s design system deserves special attention – it is very comprehensive, well-structured, and exceptionally intuitive. All the elements are organized into categories, making it easy to browse and find assets and documentation needed in the design process. It provides instructions with examples in an interactive manner.
Design systems are always under development, which is reflected in documentation and libraries available to the public. Just like product design, a design system is never finished. Every iteration of a product and contribution to UX and UI should be reflected in the design system. Oftentimes, it’s a living document that can be shared with the world with some limitations, like the example from Atlassian.design shown below:
Some companies which publish their design systems online also display the information about the current version and its release history. The examples below illustrate the approach to this matter from Salesforce and Auth0.
Auth0 also uses labeling for different stages of items in their design system. This helps users and creators distinguish between finished elements and those that are still in progress.
Organizations can't afford to ignore the benefits of having a design system. And these industry trends and best practices will provide guidelines for design system creation across different industries.
Even if your project is already up and running, it's a good idea to build a design system for it. It will pay off in the long run.
Are you looking for a team of experts to help you set your foot in the design system territory? Get in touch with us – we create custom design systems for clients from various industries.