A design system that includes a component library, a description of its states and usage guidelines, as well as principles for building interfaces.

VIS: Interface Designs That Led to Disasters

This visual study of interfaces where design errors resulted in catastrophes helps to identify typical problems in human-system interaction with complex systems. The findings can be applied when developing a design system for engineering software, aiming to improve interface consistency, enhance information clarity, and reduce the risk of user errors.

A design system is a comprehensive set of interconnected elements, rules, and principles for designing user interfaces. It encompasses visual standards, a component library, interaction patterns, and documentation for their implementation. It ensures interface consistency, streamlines the development and evolution process, and allows design solutions to be systematized and reused across various parts of the software product.

Unlike a component library, which primarily consists of a set of finished interface elements, a design system also defines the principles for their usage, the relationships between them, and the rules for building interfaces. This allows it to be viewed not only as a visual styling tool but also as the foundation for cohesive user experience design.

The project’s objective is to research existing design systems and the principles governing their organization, analyze the specific characteristics of specialized software user interfaces, and determine the requirements for the proposed system. Based on the data gathered, a design system must be developed, taking into account the specificities of the chosen application domain, and its utilization must be demonstrated using an application interface or a set of user scenarios.

Developing specialized software necessitates the ability to display vast amounts of information, support multiple states, and facilitate complex interaction scenarios. Without a systematic approach to interface design, individual elements and solutions can lose cohesion, which complicates information comprehension, product usability, and its future evolution. Although ready-made design systems exist, their application doesn’t always align with the specific characteristics of a particular software product, and building a custom system requires additional time and resource investment. Therefore, developing a design system tailored to a specific domain of specialized software can be a method for systematizing interface solutions, simplifying the design process, and ensuring interface consistency throughout product development.

The primary target audience for this project includes professionals and startups that need to design and develop complex user interfaces, maintain their consistency, and reuse standard solutions. Depending on the chosen application area, the indirect target audience may be end-users of professional software who interact with large amounts of data and controls.

The complexity of engineering software and the large number of functional elements necessitate a systemic approach to interface design. Inconsistencies in visual and functional solutions can impede information comprehension and increase the risk of user errors, underscoring the relevance of developing a unified design system.

Carbon Design System is an open-source product and digital service design system from IBM. It is built upon the IBM Design Language and encompasses production-ready code, design tools, and resources, alongside UI guidelines and an active community of contributors. Carbon is the digital embodiment of the IBM brand—the foundation upon which all of IBM’s products and digital services are built. It underpins every digital interaction a user has with IBM.

Grafana Labs launched @grafana/ui to simplify participation in Grafana development for Grafana users and other community members. This component library will allow users to: understand how each component functions and how it can be used to build a seamless user interface, reduce development time, ensure consistent code quality, create a beautiful and visually cohesive Grafana interface, and provide transparency into how we work and what we achieve.