Notifications

Good job! You’re all caught up

Join challenges and check your notification settings if you don’t receive notifications. We’re actively adding new notifications. Read our blog post for more info

Notifications
TOSCA Editor - Web Application Wireframe Challenge (1)
Dismiss notification
Earlier Dismiss All
You have no more notifications

October 9, 2019 Design Systems 101

In the world of software development, the design system is not new. Frequently, Topcoder contests involve system design and some even require us to create a design system for a particular company. Therefore it helps us learn how to apply it to our work. Through this blog post we will learn what a design system is, remind you of its benefits and see the best examples available.

What is the Design System?

A design system is a set of components that can be reused in different combinations. The design system allows you to manage designs on a large scale. Design systems contain a comprehensive guide to project design – a collection of rules, principles, constraints, and best practices. The core element of the design system is often the UI Component Library. These UI elements are also their representations implemented in code.

source
Benefits of Design Systems?

In the initial phase before designing, a design system does look complicated and like you will expend a lot of effort to create it. However, after it is built, the design of the system can save you a lot of time in future product development. The following are some of the main benefits of creating a system design.

Consistency
With a design system and front end designer, the developer will be able to implement a consistent UI much more easily. They can think of certain pages as sets of components. Example: Developers don’t have to think that this is a button with a # ff6600 background, a Proxima Nova Bold 12pt font, and 4px padding. The engineer knows that this is just the Main Button, and he uses this component in a few pages. Consistency gives the impression of higher quality. QA specialists can easily monitor designs that are implemented with the design system documentation. Inconsistencies should rarely occur.

Better Communication
The creation of a design system fosters better communication with the development team. Since the design system is the only source of truth, this means it contains vocabulary that can be used in the project. When developers and designers discuss the page, they will use the same component name. Thanks to this you will not talk about “this little purple button,” but “the secondary button.” Many errors occur due to misunderstanding, but a design system allows you to speak with the same naming conventions throughout the project.

Faster Process
You have built or purchased a UI control library that is needed to implement the UI. Now you only use it when new features require the creation of new pages or modification of existing ones. Even if you decide to build a UI library from scratch, a lot of time spent on this task will allow you to quickly create UI for new features.

Focus More on UX
Using the UI library means you don’t need to re-learn each time what the input field should look like on this page – it’s already been determined. Visuals were previously explained in the system – now you can put together new pages with them and focus more on better usability and creating a pleasant experience.

source
What is in the Design System?

The fundamental purpose of the design system is to facilitate teamwork and to match the values and images that are being shared by organizations or companies. Therefore, the following things must exist in the design system that you are building.

Values, Vision, and Mission of the Company
Every organization and company must have a value and purpose in the formation of the company. Therefore, before a design system is created, it is important to align the team around a set of shared goals that are clearly in line with company objectives. This will help build the vision and make sure everyone looks toward the same direction. These goals will develop over time and that is normal. The capabilities of the design system must ensure that change is widely communicated. As for values, they are the big ideas that will guide your choices, in accordance with brand goals. We need to ensure that the design system that we create is no different from these key values.

Design Principle
Design principles must guide design choices. Design principles are far more than just the visual aspects of a product. Design principles are guiding sentences that help teams to achieve product goals because of the design. They will help the team to make meaningful design decisions. As an example, on the Medium site, one of their design principles is “Direction of choice”. Thanks to that principle, instead of designing a plain text editor with unlimited color and font choices, they chose a simpler one. That allows the writer to focus on the content of the article rather than the visual aspect.

Brand Identity & Language
Identity must be defined in line with brand strategy and objectives. There are several elements that can shape the identity and language of your brand including:

  • Color
  • Fonts
  • Space
  • Shape
  • Icon
  • Illustration
  • Taking pictures
  • Animation
  • Sound and tone
  • Sounds

These brand elements will require several rules that will form the system. In the design system, this is realized by guidelines: do’s and don’ts and good examples of use. This will ensure the design team uses the right combination of language. If this is done correctly the brand will be very unique and easily recognizable.

Components & Patterns
Components and patterns are at the heart of the system. All the elements mentioned earlier will help us to make the system and provide a consistent experience. Components are used in Sketch by the designer, and directly in the code by the developer. Their functional behavior must be determined. As for patterns, they are building instructions that will allow us to use the components logically and consistently, across all products.

Best Practice
In addition to documentation, which is often directly linked to the system, best practices will accompany the team in a larger and more transverse manner. The idea is to explore general best practices and extract only those that make sense, based on the product and the level of maturity of the team. Best practices will help teams to form and develop their technical skills.

source
What Design System Characteristics Does Your Organization or Company Need?

Many of the design system characteristics that we see are scattered throughout the internet. All the characteristics of a design system are built according to the needs of the organization. The following are some examples of character design systems that you can apply to your organization.

Tight or Loose System
The strict system will have comprehensive and detailed documentation and will be fully synchronized between design and development. There will be a rigorous process for introducing new patterns in the system. A strict system must be very broad to cover most cases that the team might face.

A loose system will leave more room for experimentation. The system is here to provide a framework for the team while maintaining freedom. Designers and developers are free to use it or not, regarding their specific needs for the product being built.

You have to find the right balance between rigorous and flexible: a very strict system might be opposed by designers and developers who don’t want to use it. On the other hand, if the design system is too loose, the character of your organization or company will look uneven in the products being built.

Modular or Integrated
Modular systems are made of interchangeable and reusable parts. This is suitable for projects that have to scale quickly and which have to adapt to various user needs. The negative part of a modular system is that it is often more expensive to realize (because it can be difficult to make modules that can be independent while working well together). This kind of system will be especially suitable for large-scale products such as e-commerce, financial and government websites. For modular systems, it would be very interesting to work with the atomic design in mind.

Integrated systems focus on one unique context. Integrated systems also consists of parts, but these parts will not be interchangeable. This type of system is compatible with products that have very few repeatable components and which require strong and frequently changing art direction.

Centralized or Distributed Model
The organization around the design system is very important for its evolution and scalability. In a centralized model, one team is responsible for the system and makes it grow. This team is in place to facilitate the work of other teams and must work closely with them to ensure that the system covers most of their needs. In the distributed model, several people from several teams are responsible for the system. The adoption of the system is faster because everyone feels involved but it also requires a team leader who will maintain overall vision.

In each case, it’s best if everyone participates and makes suggestions to improve the system, to create a sense of ownership. Whatever system design you are going to build, first make sure to answer the questions listed below.

  • How big is your organization or company? 
  • How many people will use your design system?
  • How familiar are the teams in your organization or company with the design system?
  • What variety of products or methods of development will be aligned with the design system to be created? 
  • What level of consistency does our product require?
Examples of Existing Design Systems

Take a look at these design systems that have been created by some of the world’s top companies. Although we realize that some of these companies created their systems through many hours of work, this is provided publicly. Please learn and create a new design system that suits the style of your organization or company.

Material Design
This is one of the most popular systems. It was formed over the years but is now used not only by the Google Team but also by many makers of Android and Web Applications.

Atlassian Design System
One of the most complete on the market used in real products made by Atlassian.

Polaris
Design system created by Shopify

Carbon
System design made by IBM

Human Interface Guide
Apple prepared the design system for all of its platforms

Grommets
The design system by Hewlett-Packard is presented in a very friendly way.

Conclusion

Knowledge of system design is one of the important elements that you must have in this era. The design system is a complete product, which will help project actors to build other products. With the design system, the product development process will be more effective, have good quality, and will have a DNA that is suitable for the company.

Sources of inspiration:

iqbalhood

Guest Blogger


categories & Tags


UNLEASH THE GIG ECONOMY. START A PROJECT OR TALK TO SALES
Close

Sign up for the Topcoder Monthly Customer Newsletter

Thank you

Your information has been successfully received

You will be redirected in 10 seconds