Day 5 - Design system and typography (Part I)

5 Jul 2023

Work hours: 4hrs

Design systems have been a hot topic in recent years, but surprisingly, I didn't learn much about them in school. So, for my website redesign project, I decided to dive into the world of design systems and create my very own. Today was all about learning and gathering knowledge, as I spent a good amount of time watching a bunch of insightful YouTube videos (check out the list below) to understand how to develop an effective design system.

In the UX realm, design systems may sound simple in theory, but they can be quite complex when it comes to execution. During my product design internship, our team had its own extensive design system—a massive library packed with countless components. I quickly realized that I had a limited understanding of UI terminology beyond the basics, like buttons and boxes. It became clear that I needed to expand my vocabulary so that I could easily identify the components I needed and know how to find them within a design system.

After watching tutorials on building design systems in Figma, I decided to start with two fundamental elements: color and typography. Typography has always posed a challenge for me in web design, especially when it comes to responsive layouts and handling font sizes and line spacing. So, I took the time to learn from experts and observe their techniques. Tomorrow, I'll put my learning into practice and start honing my typography skills.

Even after working in the design field for a few years, I still place great importance on strengthening my foundational knowledge. I firmly believe that reinforcing the basics has a compounding effect on my design work, leading to continuous growth and quality improvement. That's why you might see me dedicating a significant amount of time to learning basic design principles. It's not because I lack knowledge, but rather because I value the ongoing process of refreshing and refining my existing skills. By repeating this cycle, my abilities will gradually strengthen and evolve.

Here's the list of YouTube videos I watched today:

  1. How to Steal Designs Like a PRO | End-to-end Process

  2. Create a Figma Design System - Fundamentals (Part 1)

  3. Create a Figma Design System - Color Systems Tutorial (Part 2)

  4. Typography Sizing - How to Decide the correct font size - Golden Ratio

  5. Typographic Scales in Web Design & UI Design

  6. 3 Tools to Help You Choose Fonts for Your Projects

  7. How to choose fonts: Step by step

I hope you find these resources as informative and inspiring as I did!

© Designed by Jacky Lo

© Designed by Jacky Lo

© Designed by Jacky Lo