“Styles come and go. Good design is a language, not a style.”
–Massimo Vignelli, Italian Designer
The latest trend in the highly fast-paced design world is the Design System. Digital design has gained significant importance in the tech world in recent years. As the commercial world evolves rapidly and customer demands become more sophisticated, newly emerging applications cannot survive without a comprehensive design. Spotify, IBM, Google, SAP, and other tech giants already embrace this trend and have their design systems.
What is the Design System?
A design system is a large set of rules, standards, and principles applied in a design or a code. Nathan Curtis, a founder of the UX company Eightshapes, identifies a design system as “…a library of visual style, components, and other concerns documented and released by an individual, team or community as code and design tools so that adopting products can be more efficient and cohesive.”
In essence, a design system includes User Interface (UI) elements such as tooltips, icons, text fields, effective design principles – colors, spaces, and shapes as well as guidelines as to how to implement them into an application effectively.
Who Needs a Design System?
A design system is not the ultimate tool for all companies. Such a system does make sense only for medium-sized and large projects that involve many professionals: designers, developers, project managers, and analysts. These projects face mostly communication and collaboration problems. For instance, one developer creates one component of a product, and the other develops the other one in a completely different style. The next specialist adds other features that do not match the previous elements in terms of design and style. As a result, the final product seems just like the well-known character – Frankenstein, looking incoherent and non-organic. To avoid confusion and enable effective teamwork, a design system with its graphic guidelines and defined design components helps companies to manage medium and large projects more efficiently by creating a system of already defined elements and components matched in style.
Insights Into the Design System Creation
In the process of the creation of a design system, many professionals from different fields are involved. Among them are designers, developers, and analysts, who team up to create a comprehensive system of design elements.
Designers define how particular elements have to look in various contexts. Developers, in turn, superimpose semantics on the provided design components. The final step is taken by business analysts, who write the guidelines in plain and concise language.
When working with design language and development, teams rely on the atomic design methodology, which is heavily focused on the hierarchy of composed elements. The idea is that everything in the natural world consists of elements combined together: atomic elements join together to form molecules; molecules combine with each other to build up organisms. The same principle is used in the design. However, unlike the three-tier model of the world atomic theory, the design methodology consists of five stages. The hierarchy comprises atoms, molecules, organisms, templates, and pages, where atoms refer to the smallest UI units that can not be broken down and pages that are the final UI, which users will view and interact with.
Bridging the Gap Between Design and Development
The rift between design and development is between different approaches and roles in creating an application. A design team focuses mainly on a visual presentation to make the application appealing and comfortable. Attractiveness, accessibility, usability as well as context are the main aspects considered by designers. By contrast, the development team focuses on efficiency and the practical side of the application that involves codes and algorithms. Both design and development teams are essential for a successfully developed application; however, they often face problems with communication and collaboration.
A design system is the ultimate tool for ensuring successful collaboration between design and development departments. As a design system provides consistent and robust design patterns that are constantly updated, developers can easily use components of permanently updated scoped styles. As a result, collaboration between designers and developers is enhanced, and work productivity is improved.
Difference Between a Design System and a Style Guide
Some people do not see the principal difference between a design system and a style guide. Unlike a style guide, a design system is not limited exclusively to style. Visual presentation, including colors, fonts, and illustrations, constitutes only a part of a design system that is more like an ecosystem involving multiple components that are regularly updated.
The above-mentioned Nathan Curtis said that “A style guide is an artifact of the design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem.”
Difference Between a Design System and a Pattern Library
A pattern library mainly focuses on functional components and their implementation. Buttons, page layouts, and other UI elements are annotated with interaction and visual design specifications. However, it is only a collection of elements rather than a framework. A design system is an infrastructure that focuses on the entire product design and its implementation process.
4 Principles of a Design System
Salesforce, an American software company, highlighted four main principles of its design system is uses. These principles embrace distinct features that provide coherent and systematic order to page applications.
- Clarity
A design system must avoid ambiguity, enabling users to understand the system used and act with confidence.
- Efficiency
The main goal of a design system is to streamline workflows. To work fast and efficiently, the system must anticipate users’ needs.
- Consistency
A design system strengthens user intuition by embracing the same solution to the same problem.
- Beauty
The system must be thoughtfully developed and attractive to users.
Advantages of a Design System
A design system has the following advantages:
- Speed
One of the major problems in creating a product is decentralized knowledge. All members of a development team have their own vision as to what the design of a developed product must look like. However, exchanging visions and ideas between team members always takes time and effort. This tedious process can be easily avoided due to the use of a design system. Constant integration of design knowledge into a system-derived document will save hours of development time and allow designers and developers to focus on more important tasks.
- Collaboration
A development team always consists of members representing various departments. Developers, designers, and project managers all work on the same product but focus on different aspects related to their respective professional fields. The implementation of a centralized system enables the development team to communicate easier. For instance, a developer does not have to receive approval from a designer for the applied design, as the design elements of the product design system are already approved.
- Scalability
Various program languages, as well as frameworks, require a different design. A fluent design system can scale the design process by applying diverse design elements for particular aims and needs. As a result, applying a design system helps to tailor developed products to potential client needs and desires.
- Clarity in design and code
A design system is a living ecosystem, which is constantly monitored, maintained, and updated. Potential problems or mistakes are immediately detected and fixed. Because of that, a design system has a clean and clear code base and easy-to-manage design.
Disadvantages of a Design System
A design system has a single major disadvantage:
- Many versions of one element
Elements available in a design system mostly have many versions for a different context. On the one hand, it is effective as less time can be spent on developing prototypes. On the other hand, it can be confusing for team members to decide in favor of one or the other version.
Examples of Design Systems: Commercial Design
GEL: Global Experience Language by BBC
Global Experienced Language is a BBC design system, which incorporates interaction design patterns and design elements, that assemble the whole online output of BBC. Introduced in 2010, GEL helps development teams create an appealing digital experience for cell phones, tablets, and TV applications across BBC.
Canvas by HubSpot
HubSpot has developed its design system, called Canvas, which is used for all products of the company. The system enables HubSpot developers and designers to rapidly and efficiently work out quality solutions on a massive scale.
Government Design Systems
United States Web Design System
Creation of user-friendly, trustworthy and accessible applications is important not only for commercial solutions but also plays a significant role in the governmental field. For instance, the US Federal Government has developed its design system that ensures the creation of consistent digital applications that help build trust across American users.
Australian Government Design System
The Australian Government Design System is used by designers and developers for creating governmental products and services easily and efficiently. The system employs Australian Government standards in order to deliver a consistent experience for Australian users.
Conclusion
Creating a design system with Softengi If you decide to develop your design system adjusted specifically to your business, Softengi, with its team of 280 professionals, is ready to help. Our highly-qualified designers and developers can build a highly structured, organized design system with interactive components, UI kits, and pattern libraries. Appropriate design, typography, and data visualization tools will enhance your business productivity, raise brand awareness and improve overall user experience.
