“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. In recent years, digital design has gained significant importance in the tech world. As the commercial world evolves at a rapid pace and customer demands become more sophisticated, newly emerging applications have cannot survive without a comprehensive design. Spotify, IBM, Google, SAP and other tech giants already embrace this trend and have their own design systems. 

What is the design system? 

A design system is a large set of rules, constraints, and principles applied in a design or a code. Nathan Curtis, a founder of a 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 – colours, spaces, and shapes as well as guidelines as to how to effectively implement them into an application. 

Who needs a design system? 

A design system is not an ultimate tool for all companies. Such 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, the second one develops the other one in a completely different style, the next specialist adds another features that do not match the previous elements in terms of design and style. As a result, the final product seems just like well-known character- Frankenstein, looking incoherent and non-organic. In order to avoid confusions and enable an effective team work, a design system with its graphic guidelines and defined design components help 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 like 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.  

Design System - Softengi

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 of 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. 

The atomic design metholodology - Design System - Softengi

Bridging the gap between design and development 

The rift between design and development is the rift between different approaches and roles in the creation of an application. A design team focuses mainly on a visual presentation in order to make the application appealing and comfortable to use. Attractiveness, accessibility, usability as well as context, are 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 an 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, a 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 colours, fonts, and illustrations constitutes only a part of a design system which is more like an ecosystem, involving multiple components that are regularly updated. 

The above-mentioned Nathan Curtis said that “ a style guide is an artefact 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. 

Four principles of a design system

Salesforce, an American software company, highlighted four main principles of its own 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 used system and act with confidence. 

Efficiency

The main goal of a design system streamlines workflows. In order to work fast and efficiently, the system must anticipate the needs of users. 

Consistency

A design system strengthens users intuition by embracing the same solution to the same problem.

Beauty 

The system must be thoughtfully developed and attractive to users. 

Four principles of a design system - Softengi

Advantages and disadvantages of a design system 

Advantages 

Speed

One of the major problems in the creation of a product is decentralized knowledge. All members of a development team has their own vision as to what the design of a developed product must look like. However, the exchange of visions and ideas between team members always takes a lot of 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, project managers all work on the same product, but focus on different aspects that relate to their respective professional fields. 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 a diverse set of design elements for particular aims and needs. As a result, applying a design system helps to tailor developed products to potential clients 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. On account of that, a design system has a clean and clear code base and easy-to-manage design. 

Disadvantages

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 favour of one or the other version.

Examples of design systems 

Commercial Design Systems 

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 

A HubSpot has developed its own 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 own design system that ensures 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. 

Creating a design system with Softengi If you decide to develop your own 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 and typography, as well as data visualization tools, will enhance your business productivity, raise brand awareness and improve overall user experience.

PEOPLE ALSO READ

Send your message





Call back request

Contact Us

US representative
P: +1 (202) 7889535 — Paul, Head of international Sales