How do large companies, like Google, design and produce several digital products that all have a cohesive design? That means fonts, colors, UI design of all products are in complete harmony with each other. How to design and update complex and detailed websites, applications and software? Big companies like Apple achieve coordination and harmony in design by defining system design for their product design.
System design is like a handbook for the digital product design team, especially the programmers and developers who have to implement UI/UX design. For example, in that guidebook, it is specified what behavior or color each element should have in different states, or what font should be written on CTAs.
One of the principles of system design is that every business should design and develop a special design system for its digital product design. So, is it not possible to model the system design of big brands like Google or Apple or learn from them? It will definitely happen. Beginning user interface and user experience designers should familiarize themselves with, think about, and learn from different system design patterns.
In this content, the best examples of system design are introduced. Studying and reviewing those examples is very useful and informative for designers and product design teams.
Table of Contents
The best examples of system design
Basically, system design is made to make the design of websites, web apps, software and applications easier. The system design includes all the details of the user interface design of the product (even the necessary codes for the development of the front end of the product). Therefore, all the specialists in the product design team know exactly how each component of the visual elements and the user interface of the product are made and according to what instructions.
System design creates a common understanding and coordination within the product design team. Coordination makes the product design and production process go faster and more efficiently. Therefore, it is better to define and compile the system design in any project, with any scale, with the cooperation and participation of designers (especially UI designers).
As the design of the system design has common principles, the same steps are followed in its compilation. In system design, movement is from whole to component. That is, first of all, it should be determined how the basic principles of UI/UX design are supposed to be followed in the product, and also how the main layout of the site or app pages is (Layout). It is after the generalities are known that the design and features of the visual elements (user interfaces) are determined.
The design of the system is not just text and shape, which for example determines what size, shape and color each button should have. The user interface of the product is made based on the system design. In fact, system design is a set of pre-built components that may be used over and over again.
“So, system design is a collection of the principles and generalities of product user interface design, the design guide and design of each component of the user interface, pre-made components in UI/UX design tools such as Figma, and the necessary codes to implement the components.”
System design of 3 giants of the technology world
Usually, system design is divided into 5 main parts, each part has its own sub-categories. In general, the set of things that should be mentioned in the system design is included in the following sections:
- Design: In this section, the general design of the user interface of the product is defined according to the principles of UI design (such as the principle of usability);
- Components: Buttons, menus, navigation bar, icons, tooltips… are considered a component in design. Component is the most basic component in design. In the system design, it is determined what characteristics each component has (size, shape, behavior, etc.) and how to design and implement it;
- styles: typography, color palette, shapes, animations and anything else that is supposed to make the elements more attractive are defined and specified in this category;
- Content Guidelines: In this section, it is determined in what tone and language the messages that users see and UI texts should be written. Tone, language, and word choice should match and reflect the brand’s voice.
- Develop: The codes that the programmers and developers of the site or application need to implement and run the UI design are placed in this section.
The system design of the products of the giants of the technology world has more or less the same parts. Fortunately, big brands publish their system design and even its changes and updates. So, UI/UX designers around the world can read them and use those valuable resources.
1. Apple System Design (Apple Human Interface Guidelines)
You have probably asked why the giants of the technology world like Apple should publish the UI design guide (or system design) of their products. One reason is that product designers can easily design applications that are compatible with Apple platforms (Apple devices and operating systems). This system design is open source.
If you check the Human Interface Guidelines, you won’t just find Apple’s system design. Rather, you will find a rich source of videos, articles and educational resources. In addition to them, in the Design Resources section, you can download ready-made templates for application design for all iOS devices for free. In the Develop section, there is everything you need about code and programming tools (Adobe XD & Sketch) and user interface development compatible with Apple platforms.
In the design of the Apple system, several main parts of the system design (the Content Guidelines & Styles sections) are included under the title of All Components. For example, if you open the Buttons component; everything you need to know about button design is listed in categories.
2. Google System Design (Google Material)
It is no exaggeration to say that Google’s system design is actually a training class for all UI/UX designers and developers. Google is a company that has designed and released more than 270 products. You and I use at least a few Google products (search engine, Gmail, Google Docs, etc.) every day.
The divisions in the third (latest) version of Google Material are slightly different from Apple’s system design. Google system design has 4 main parts: Develop, Foundations, Styles & Components. The most important advantage of the Google design system is that in the Get started section, the designer has all the resources, tools (Figma Design kit), codes (this design system is also open source) and instructions to implement the Google design system in product design. You will find it organized and categorized. It is clearly defined where to start and what to do at each stage.
Another difference between Google’s system design and Apple’s is in the division of components. Google has categorized components based on the work they do on the site and the role they play in the user’s interaction with the site. For example, the buttons are the user interface that the user uses to take an action to achieve his goal. So, he placed the buttons in the Actions category.
The design guide and selection of colors, typography, icons and shapes are all placed in the Styles section.
- IBM Carbon Design System
IBM operates in 177 countries and markets services and products in various fields. Design and production of hardware and software, consulting, cloud computing, AI, robotics and blockchain are among the fields in which IBM operates. The system design of this technology giant is called Carbon.
This system design is more detailed and a bit more complicated. In order to use this design system, in addition to mastering UI design, you must also be familiar with UX design. To date, 11 versions of Carbon have been released. Carbon Design System has ready-made templates and pre-made user interface components (Design Kits) for 4 UI/UX design tools (Figma Adobe XD, Sketch and Axure).
In terms of programming and front-end site and application development, Carbon is more complete than the previous two system designs. In this section, the necessary codes and trainings for front-end development and implementation of carbon components are placed in the best front-end frameworks.
The Styles and Content Guidelines sections are included in the component section. For example, if you open the button component, you’ll find everything about designing and building buttons in different modes separately.