Style foundations systematize the basics of design, such as colors, spacing, and fonts, to reduce work time and increase the quality of the final product. If you're struggling with an unorganized UI or losing consistency in collaboration, take this course. Even novice designers can learn the fundamentals and systems that can be immediately applied to practical work.
I can understand the basic concepts and importance of a design system.
Learn how to utilize style foundations to enhance quality.
Master a color system for constructing and expanding color palettes.
You can understand the principles of setting intervals, such as multiples of 4, multiples of 8, etc.
Learn how to represent images for various device resolutions.
Style Foundation
The Beginning of a Design System, the Core of UI Design
Many companies are adopting design systems to create better products.
Products are becoming more complex, and team members use a variety of roles and tools.
Maintaining consistency and efficiency throughout this process presents a major challenge.
Design systems are powerful tools for solving these problems.
The most important of these is the style foundation .
Style Foundation organizes and unifies the most basic visual language: color, spacing, fonts, etc.
Reduce the collaboration inefficiencies, design inconsistencies, and maintenance chaos we experience every day.
You can achieve better results faster.
In this lecture, we will learn why style foundation is important,
Let me explain in simple terms how you can use this.
What if you don't have a style foundation?
What if you have a style foundation?
If you have any concerns like this, listen up.
“I don’t understand why we have to use 2x and 3x images .”
In this lecture, you will learn in detail how and why images are rendered clearly in high DPR environments.
“I have no idea what the standard resolution should be. Where should I set the standard?”
To support various devices, the reference resolution must be set based on data.
We will explain the process in a practical way.
“ Grid ? I have no idea where to start.”
We will teach you the basic concepts of grids and grid calculation methods using multiples of 8.
“How can I set the font size and line spacing to improve readability ?”
Are you worried that small or dense fonts will make your text less readable?
Learn how to set the right font size and line spacing for your content type.
“I don’t understand why the spacing has to be multiples of 4 or 8. ”
Learn how to solve the half-pixel problem and create high-quality designs.
“I don’t know what a design token is and why we need it.”
Are you having trouble understanding the design tokens?
In this lecture, we will easily explain the concept and necessity of design tokens.
Design System, Get Started Easily.
Provides clues to solving design problems
It clearly addresses design concerns such as why spacing should be multiples of 4. You can apply what you learn directly to your work, so you can solve problems without wasting time.
It's easy to learn design systems without any burden.
Since we learn the huge concept of design system from the core part called “Style Foundation,” even beginners can get started without any burden.
Easy explanations and examples that even beginners can understand.
Design tokens, grid systems, resolution settings, etc. that may seem complicated are explained in a simple and clear way so that anyone can understand them. It helps not only designers but also planners and developers increase their understanding of design systems.
Explains the design system in detail.
We provide teaching materials.
You can learn things like this.
1.1 What is a design system?
Understand the concept of design systems through easy-to-understand examples and explanations of design systems.
1.2 Structure of the design system
You will learn about design principles, style foundations, component and pattern libraries, content guidelines, accessibility guidelines, and the role and use of design tokens.
2.1 What is Style Foundation?
You will understand the concept and necessity of style foundation, as well as its pros and cons and the importance of ongoing maintenance.
2.2 What is a Design Token?
You will understand the concept and system of design tokens and learn why design tokens are used through examples.
2.3 Resolution
You can understand the concept of resolution, the difference between logical resolution and physical resolution, and the role of DPR. You can learn how to set the standard resolution to support various devices.
2.4 Grid
You can learn the basic concepts of grids and acquire knowledge of grid calculation methods and how to utilize them in various devices.
2.5 spacing
You'll learn how to set spacing to avoid half-pixel issues and achieve consistent designs.
2.6 Color
Understand the meaning and role of colors, and learn how to compose color palettes and semantic colors.
2.7 Typography
You will understand the importance of typography and learn typographic elements and letter style components.
2.8 height
You can express the importance of elements using height (Z-axis) and understand various height distinction expression methods and use cases.
2.9 Icon
You can learn icon design principles to maintain consistency.
2.10 Image
Learn how to unify image aspect ratio and size so that they display on a variety of device environments without loss of quality.
2.11 Corner Radius, Border, Shadow
You'll learn how to maintain consistency by setting criteria for corner radii, borders, and shadows.
Expected Questions Q&A
Q. Is it helpful for non-majors to listen to it?
A. It is helpful to anyone who has no knowledge of design practice, regardless of their major.
Q. Is there anything I need to prepare before attending the lecture?
A. There is no separate one.
Q. To what extent should I handle tools?
A. No tools are used. This is not a hands-on course.
Notes before taking the course
Study Materials: Textbook PDF provided
Who is this course right for?
Job seeker who wants to showcase the UI system in their portfolio
A new designer who wants to properly build a foundation in design.
A design system is difficult for practicing designers.
147
Learners
22
Reviews
2
Answers
5.0
Rating
2
Courses
저는 이해하기 쉬운 컨텐츠가 좋은 컨텐츠라고 믿습니다.
실무에 직접적으로 도움이 되는 좋은 컨텐츠를 만드는 데 주력하고 있어요.
제가 만든 컨텐츠가 실무에 도움이 된다는 피드백을 받을 때마다 큰 기쁨을 느낍니다.
All
16 lectures ∙ (2hr 1min)
Course Materials:
7. resolution
21:09
8. grid
08:36
9. spacing
03:57
10. color
23:27
11. Typography
15:53
12. height
03:30
13. icon
10:56
14. image
01:48
All
8 reviews
4.9
8 reviews
Reviews 1
∙
Average Rating 5.0
5
I feel like the foundation is much stronger now thanks to the detailed explanation of the design system. The design materials you provided were also neatly organized and easy to read.
Hello Gayoung! Thank you for your valuable review. 😊 I'm so glad that my efforts to make the design system easy to understand were helpful! Thanks to your feedback, I feel rewarded for preparing the lecture materials thoroughly. 😭😭 I will create more informative lectures in the future. Have a great day today! ✨
Reviews 1
∙
Average Rating 5.0
5
It contains really useful content for design beginners. The textbook file is also organized so beautifully that I was able to take the course without any problems and enjoy it. The content is organized neatly, so I think it will be good to look at it continuously as I study design in the future! Thank you!
Hello Yoonsu! Thank you for your valuable review. ☺️ I'm glad to hear that you found it useful, as I tried to make it easy for beginners to understand! I feel even more rewarded knowing that you will continue to use the textbook files. 😭😭 I hope you continue to enjoy studying design! I will continue to create more informative lectures in the future. Have a great day today! ✨
Reviews 4
∙
Average Rating 5.0
Edited
5
The material is neat and easy to read. It pinpoints only the essential elements that are good to remember. Could it give developers an advantage when arguing with designers? (Just kidding 🙃)
Hello RyuWoong! Thank you for your valuable review. 😊 I'm so glad you found the materials neat and easy to read! I tried to focus on delivering the essentials, and I'm proud that that aspect was well conveyed. 😆 I will create more informative lectures in the future. Have a great day today! ✨
Reviews 3
∙
Average Rating 4.7
4
This is a well-organized and beneficial lecture that's great for a light approach. It's structured so you can easily understand the necessity of design systems~
Hello namsook lee, Thank you for your valuable course review. 😊 I created this content to be easily accessible, and I'm glad that intention came through well. I'll continue to think about creating content that helps with practical work. Have a great day today! ☀️
Reviews 1
∙
Average Rating 5.0
5
I think this is a design-related lecture, but not one where you only need to listen to the design part - it's a lecture that I believe would be great for frontend developers to take!! I think it can be seen as a textbook that enables smooth communication between designers and developers!! Thank you for the great lecture!
Hello Mr. Kim Yongmin, Thank you for your valuable course review. ☺️ I'm truly proud to hear that it was helpful not only to designers but also to frontend developers. I will continue to visit you with content that can help the entire team. Have a great day today! 👍
$62.70
Check out other courses by the instructor!
Explore other courses in the same field!
