What is a design system? Explaining how to make it in an easy-to-understand manner, what are the four basic elements to make "quickly and cheaply"? ｜ Business + IT

ビデオカメラ

12/04/2022

Solving business issues by integrating IT and management

What is Business + IT?

New member registration

E-mail newsletter registration

What is Business + IT?

Sales Strategy

Cost reduction

Organizational reform

Production / manufacturing

crisis management

compliance

Energy saving and environmental friendliness

By industry / scale

Core system

Information system

Operation management

Security

network

mobile

hardware

development

Related genres

What is a design system? Explaining how to make it in an easy-to-understand manner, what are the four basic elements to make "quickly and cheaply"?

Today, most of the UX design of digital products out there is built by reusing and assembling established and proven design patterns. The "design system" makes this possible. What is a design system and why can it be used to build products quickly and cheaply? Gartner's senior director and analyst, Brent Stewart, explained how it works and how it works to build a successful design system.

Written by: Yasuhiro Hatanabe

UX design assembly kit "design system"
Four basic elements that make up a design system
Design system rules (1) Reuse without reinventing
Design system rules (2) Utilize existing design systems
Design system rules (3) Treat like a product

For example, when you want to make a chair, do you design it yourself from scratch and start making parts by cutting out parts from wood? Or will you buy a kit that completes the chair just by assembling it? Of course, each method has its advantages, but the method of making from scratch is laborious and costly, requires skill and skill, and the quality depends on the person who makes it. However, if the kit is just assembled, anyone can make a reasonably high quality one while saving labor and cost. Much of modern UX design, like chair kits, is built using "design systems" based on already established and proven design patterns. "Gartner at his Application Innovation & Business Solutions Summit," said Stewart. “UX designs created using a design system are easy to use and provide consistency in usability, which has the advantage of preserving the brand from the designer's perspective. Pre-designed, built and tested. Because we work with high-quality templates and UI design patterns, we end up with fewer defects, faster builds, and lower costs, "Stewart said. The design system consists of four basic elements. In addition to "style assets," "structural assets," and "code components," there are four "standards" that show how to build these together and what to avoid. Style assets are what form a brand or brand identity. For example, logos, color palettes, typography, and all graphics related to the product. So are the photos, photo styles, motions, sounds, etc. that are part of the product. Structural assets are structural assets such as templates, modules, and panels. In the classification of atomic design, the structure itself such as atom (atom), molecular, orgasm (organism), template, and page, which is the smallest unit, is regarded as an asset. A code component is a production-ready code or framework that is regarded as an asset. It basically consists of HTML, CSS, and JavaScript, and there are various JavaScript frameworks like the well-known Angular. Standards include basic guidelines, guidelines, governance policies, etc. that show how to use different elements to design and build digital products with the highest quality, highest ease of use, and highest appeal. Point to. Stewart introduced three rules that he wants to keep in mind when making full use of these four-element design system. The first rule of the design system is "reuse, not reinvention". This meaning was explained by taking "button", which is the most common design element, as an example. "Buttons are thought to be simple and easy, with just the text on the background, but is it really easy to design," Stewart asks. There are many points to consider when deciding on the design of a single button. First of all, you have to decide the shape of the button, whether to round the corners, and if so, what the radius of the rounded corners should be. You also have to decide on the inner and outer margins of the border, the font, size, and weight of the text. Also, the button has multiple states. The design needs to be different depending on the default state, the state of hovering over the mouse, the state when the button is pressed, and the submit button of the input form may be disabled until the input is completed. Some buttons have icons and interactions. The "Search" button may have a magnifying glass icon, the "Close" button may have an x icon, or the "Close" button may have only an x icon. There are so many buttons in the UI, such as buttons that display a pull-down menu when you press a button, split buttons, and groups of multiple buttons. In addition, dark mode and light mode must be considered. "What I mean here is that even simple buttons are complicated," Stewart emphasized, giving an estimate of how long it would take to design this "complex" button from scratch. .. If one UX designer designs a button, it would take two weeks (80 hours) to review the design. A little test with a UX researcher would take about half a week (20 hours). And another two weeks of software engineering work to integrate the solid design into different screens, templates and modules. It takes about half a week to work as a QA tester. Considering this, it takes 200 hours from the design of all buttons to the implementation. Considering the cost of "reinventing" this work every time a new product is made and the cost of "reusing" the button design built when making another product as an asset, the design system You should understand the meaning of the first rule, "Reuse without reinventing." [Next page] Design system rules (2) (3)

To List

SB Creative Co., Ltd.

Business + IT is operated by SB Creative Corp. of SoftBank Group.

By registering as a business + IT member, you can subscribe to member-only content and e-mail newsletters, and invite you to special seminars!

Registration merit Member registration (free)