To become a competitive designer

How to build a design system

Recently in the UI/UX design industry The ability to understand and build design systems for apps and web services is an important competitive advantageIt is emerging as.

What is a design system?

A design system is often used to support the development of digital products such as apps or websites and to provide a better user experience

Creating consistently structured designs, patterns, components, etc., and designing using themIt means.

In other words, “a system organized in a systematic manner to eliminate unnecessary communication.”It's.

Once the design system is in place

• Maintain a consistent UI/UXBy doing so, it is possible to consistently convey the brand identity across various channels and create a high level of usability.
• It is possible to recycle pre-developed UIs Significantly reduces designers' work timeI'll give it.
• In the process of coding a style guide Developers' communication costs are greatly reduced and productivity is improvedIt will be.
• I can modify components efficiently Changes can be updated quicklyIt becomes.

Thanks to the efficiency of these design systems, recently,

The ability to build and utilize design systems in companies is the core competency of UI/UX designersI'm looking at it as.

However, learning a design system isn't easy.

“Professor... Why didn't you tell me about the design system!”

I also majored in UI/UX design at university, but I didn't learn how to understand and use design systems.

This is because most of them were written in English, used a lot of unfamiliar words, and there were too few practical materials.

A design system that even schools don't know

Let's learn step by step with me!

Hello,

This is Jeong Yeong-ho.

I am JushinI'm Jeong Yeong-ho, a designer who runs a company specializing in web/app design called.

From service planning to UI/UX design and developmentAs a representative, I am creating various web/app services as a designer.

As a result, I felt that the design system was more important than anyone else, and I had various experiences by directly interacting with them.

I would like to share my experience and know-how with you.

Would you like to create a design system with me?

From concept to practice

Conquer the design system!

Just as it is not difficult if you understand that a picture, no matter how complicated it is, is composed of dots, lines, and faces in the end

We will teach you to understand the basic structure by identifying the points, lines, and faces of the design system.

since Plan a virtual app through hands-on exercisesDo it Let's create a design system It's planned.

Finally, use it Proceed to final screen designI'll try it.

# View examples of corporate design systems

: Google, Apple, IBM, etc

(Google's Material Design, IBM's Carbon Design)

There are examples where overseas companies, including Google, Apple, and IBM, as well as domestic companies, have issued guidelines on design systems.

We'll get a sense of the design system by looking at examples together.

# A look at the app development process in action

Before entering the training in earnest,

If you understand the process of creating an app in practice, it will be much easier to design through the design system.

Let's take a look at the role and work of a UI/UX designer in practice.

# The very foundation of a design system,

Understanding environmental systems

Just as we choose paper first when drawing, before designing an app, we must first choose the size of the site we are designing. After that, set up the most basic environments such as grids, surfaces, backgrounds, and elevations.

• Selecting the site size for the design (Android/iOS)
• Setting the grid according to the size of the land (feat. margin, column, gutter)
• Setting the Surface and Background
• Setting up the Elevation and Shadow Systems

# Understanding color systems

The ability to select the appropriate color and express it on the screen is also important, but in the design system, selecting colors according to the role of color and specifying them is also an important ability.

• Main color and secondary color
• Background color and surface color
• error color
• text color, etc.

# Understanding components

The elements that make up the app screen, such as buttons, navigation, and cards, which we commonly refer to, are called components (components). Each component has roles and attributes. We'll take a closer look at this and learn about commonly used components.

# Plan an app and use it as a basis

Practicing design systems

Trying to create a design system without anything can be difficult. At first, we can design the core flow of the service we want to create, draw a main key screen based on this, and then create a system to make it much simpler.

(↑ Planning an app service for visually impaired masseurs)

In the process, you'll learn how to plan a simple app. By drawing a screen flow that shows movement between screens and designing the main screen, centering on a user flow that shows how users will use the app, we can identify the number and components of the main screen that we need to draw.

# Tips considering the development team's practices

When we focus on design, we often miss the details for actual development. I'll help you understand that buttons have various state values before, after, and when the mouse is raised, and so on, and so on, and so on, and so on, and so on, and so on, and so on, and so on, and so on, and so on, and so on, and so on, and so on

• Understanding the state of each component
• Understand CRUD to fill in what's missing on the screen

# Using 200% of the design system

If you make good use of componentizing/assetting, it's not difficult to edit dozens or hundreds of sheets at the same time with a single click!

We will show you how to use a design system that takes practice into consideration.

• Using design systems in practice
• Design system for employment/turnover
• Using the design system as a freelancer

More competitive

Becoming a designer

In the current job/turnover market, in line with the development of artificial intelligence and the development of design automation technology We prefer designers who have the ability to systematize designs.

Through this design system class, I'll help you become a more competitive designer, from the basics to practical application methods.

Let's get started with the design system class with me!

Designing a design. design system