Design systems

Design systems are everywhere. Some emerge to address the production needs of platforms and products, but most sprout organically. In fact, you have created several design systems yourself. Your wardrobe is an example. If you are wearing men's clothes, you may have an assortment of items in categories such as coats, jackets, sweaters, sweatshirts, t-shirts, shirts, pants, underwear, socks, sleepwear, and active wear. In each category, you have items in subcategories, such as light and heavy jackets, long-sleeve shirts, short-sleeve shirts, and so on. When you shop for new clothes, the choices you make are based on:

  • Needs--such as weather conditions--work, or leisure
  • Constraints, such as budget and availability
  • Preferences, such as colors, fabrics, and brands
  • Consideration of the cloths that you already have

Excluding gifts from others, the collection you have curated is a personalized design system. Every day, you mix your finite set of options into various combinations that you feel are appropriate for the circumstances. Each of the various combinations projects a public image of yourself. An emerging trend indicates that individuals are beginning to see themselves as brands. In this context, individuals are products, which a design system of clothes helps communicate.

In this section, we will explore four types of design systems--the first type was described just now. It evolves organically. Most people--conscientiously or not--are constantly creating their design systems in their wardrobes, the pantries where they keep preferred cooking ingredients, and in many other daily settings. The next type of design system is depicted in the following image (the Lego bricks). This is a form of atomic design, meaning that the system is made of a small set of core elements, which users can combine in infinite ways.

Consider the Lego bricks, the original ones--this ingenious toy was introduced in the late 1950s and has since won the title "Toy of the Century" twice. Lego pieces interlock with any other Lego pieces. Originally there were only a few basic sizes and colors. Nonetheless, even then, the combinations were limited only by the player's creativity and imagination.

The preceding image shows a shapeless assortment of Lego bricks and examples of what one can build out of them. Infinite construction possibilities make Lego a popular imaginative play for all ages, at all levels of interest and sophistication.

The bricks themselves are generic plastic pieces. When they are disassembled, it is a meaningless pile of plastic. It is the infinite combinatorial possibilities, one brick at a time, which create amazing experiences in two ways. The first occurs during play. It is the assembly and construction of bricks into forms. The second is the end result.

Viewed more broadly, design systems are a bit like palindromes--words that can be read backward and forward, such as rotor, civic, pop, and eye. How so? Design systems have to be created with one or more products in mind in order to be useful for the design of other products. The design of these future products will in turn evolve the original design system.

The third type of design systems is produced by platform makers, as described earlier, and by companies that want to consolidate an assortment of design patterns spread among multiple products, into a unified, consistent, and cost-saving library of approved patterns. Either way, a design system specifies the following:

  • The product's look and feel, regardless of its operating system
  • Aspects of the experience that are tightly coupled with those underlying product technologies that dictate interactions such as touch, voice, and so on

Apple, Tesla, Nest, and many other companies that make the delivery of experience an explicit feature of their brand and products. They have recognized the importance of, and the need for, documenting the architecture and hierarchy that governs their design:

  • A systemic approach to design makes it possible to insure an internal consistency that is independent from the whims of individual designers.
  • It is easy to spread the system, because any designer who likes it can easily adopt its guidelines.

When designers and developers follow these guidelines, updates and new capabilities of the system  cascade down to the elements that were used by the designer.

The preceding screenshot is from Apple's macOS Human Interface Guidelines and Google's competing design system, known as Material Design. These documents define each company's experience design philosophy as well as the implementation of this philosophy in their hardware and software platform. These are a valuable resource for any practicing designer or design student, even if they don't design in any of the platforms.

The guidelines cover every aspect of the user interface, from basics to advanced topics, from color-palette guidelines to animation and other types of interactivity. Designers who work on products that are based on the platform are advised to comply closely with experience principles and standards, which were set by the platform's designers. The thinking is that, after all, the platform is the foundation for the experience, and consequently, its native design system is most organically suited for:

  • Companies: Provided with the fastest ways to deliver new products with the guaranteed experiences, which are natively supported by the platform
  • Users: Provided with recognizable interaction and design patterns, which leverage knowledge they gained through experience with other products built with the platform; new applications are, thus, easy to learn and to use

The promise and benefits of design guidelines are as follows:

  • Reduced risk to the company developing the product.
  • Faster design and development process, which can be approached like Lego construction--the design building-blocks are preset and standard, but the resulting new design can be unique and compelling in its own right.
  • Proven experience framework--no need to "reinvent the wheel' for each product. This translates to significant reduction in development costs.

The fourth type of design systems are practical combinatorial products. Compared to the abstract atomic units in the Lego design system, or to clothing items in an organic system in which each component is fully independent and functional on their own, these systems are made of atomic elements that have an assigned functionality, so they are not abstract, but they are only usable as part of the assembled design.

For example, the IKEA's PAX wardrobe system, a sample of which is shown in the following image, offers frames, hinged doors, sliding doors, handles, knobs, interior organizers, and lightning components. Each is available in an assortment of color, size, and styles, as shown in the following image.

Both company and customer benefit from this type of design system approach to product experience. Production, shipping, and storage of components are cheaper because each individual element is simple, there is no assembly, and the inventory takes significantly less space. The costs of updating and evolving the system are lower, because new materials, colors, elements, and functionalities are added progressively and replace components that don't sell well or go out of fashion.

Such systems are incredibly flexible in addressing needs, constraints, and preferences of a wide customer base. First, a system like PAX can scale to fit any room size and desired width and height. The choices of color and style are limited, but the number of resulting combinations is not. Customers can purchase only as much as they need or can afford, extend their item as their needs and budgets grow, and replace a component if it breaks or to refresh the design. Because the products require self-assembly, they are cheaper.

In a global economy, products are often conceived and designed in one location and manufactured in another location, often overseas. To support world-wide distribution, multiple variations on the basic theme are created, reflecting the necessary adaptations to appeal to various local markets. Brands want to protect the product's core design signature while accommodating localization needs.

Brand style guides emerged first as a simple and practical way to document, communicate, and control the consistency of the brand's representation across all internal and external instances where the brand's identity was used--advertisements, publications, packaging, and the product itself. Experience designers who work on any of these are guided by directives that include the company's logo, tagline, approved colors, and so on, as well as exact placement and variations based on background colors.

The web and mobile apps have rapidly expanded the use of marketing style guides to software applications. In addition to maintaining brand identity, the use of style guides expanded to specifying the look and feel of shared components, such as web pages, headers, footers, navigation elements, menus, and so on. The screenshot above, is an example of a style guide.

As new members join the design and development team and extend the functionality of a website or application, they follow the style guide. As new components are added, there is often a need to expand the style guide in support of the new capabilities. New patterns are added after considering the existing ones and the best ways to maintain continuity.

The design guide should be perceived as a "living" document that has to be adjusted over time to reflect changes in the application. If a guide becomes a "bible," it does not support the emergence and spread of new styles and designers may feel constrained and restricted from trying out new engaging experiences because those are not in the guide.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset