chore: sync content to repo (#10192)

Co-authored-by: nilbuild <4921183+nilbuild@users.noreply.github.com>
2026-09-24 15:00:31 +08:00 · 2026-07-30 12:44:06 +02:00
parent 38a3ce20b4
commit c706be9833
47 changed files with 310 additions and 40 deletions
@@ -1,3 +1,10 @@
 # A/B Testing

-A/B testing compares two versions of a design, showing each version to a separate group of users, to measure which one performs better against a specific metric. Because only one variable typically changes between versions, teams can attribute any difference in outcome to that specific change with reasonable confidence. It is one of the most common ways product teams validate design decisions with real user data before rolling them out fully.
+A/B testing compares two versions of a design, showing each version to a separate group of users, to measure which one performs better against a specific metric. Because only one variable typically changes between versions, teams can attribute any difference in outcome to that specific change with reasonable confidence. It is one of the most common ways product teams validate design decisions with real user data before rolling them out fully.
+
+Visit the following resources to learn more:
+
+- [@article@A/B Testing — What it is, examples, and best practices.](https://business.adobe.com/blog/basics/learn-about-a-b-testing)
+- [@article@The complete guide to A/B testing in 2026](https://www.kameleoon.com/ab-testing)
+- [@video@What is A/B Testing in Design & User Experience Research?](https://www.youtube.com/watch?v=R1jAoOvWRN0)
+- [@video@How To A/B Test a Product](https://www.youtube.com/watch?v=jEpwNaHjD68)
@@ -1,3 +1,8 @@
 # Accessibility Testing

-Accessibility testing evaluates whether a product can be used effectively by people with disabilities, including those using screen readers, keyboard-only navigation, or other assistive technology. It checks things like color contrast, alternative text, and proper semantic structure against established accessibility standards. This testing is essential for ensuring a product is usable by as wide a range of people as possible, and is often a legal requirement as well.
+Accessibility testing evaluates whether a product can be used effectively by people with disabilities, including those using screen readers, keyboard-only navigation, or other assistive technology. It checks things like color contrast, alternative text, and proper semantic structure against established accessibility standards. This testing is essential for ensuring a product is usable by as wide a range of people as possible, and is often a legal requirement as well.
+
+Visit the following resources to learn more:
+
+- [@article@Accessibility Testing: What Is It, And Why Does It Matter?](https://uxarmy.com/blog/accessibility-testing/)
+- [@video@If I Started Web Accessibility in 2026, This Is My Plan](https://www.youtube.com/watch?v=5MWtL-I-XEc&list=PLsvet3tE97Xe2obfpeS_TxuHD-437KrJc)
@@ -1,3 +1,7 @@
 # AI-Assisted Design

-AI-assisted design refers to using artificial intelligence tools to support parts of the design process, such as generating layout variations, writing draft copy, or producing quick visual concepts. These tools can speed up early exploration and reduce repetitive manual work, though designers still need to evaluate and refine the output. As these tools evolve, they are increasingly integrated into existing design and prototyping workflows rather than used as standalone products.
+AI-assisted design refers to using artificial intelligence tools to support parts of the design process, such as generating layout variations, writing draft copy, or producing quick visual concepts. These tools can speed up early exploration and reduce repetitive manual work, though designers still need to evaluate and refine the output. As these tools evolve, they are increasingly integrated into existing design and prototyping workflows rather than used as standalone products.
+
+Visit the following resources to learn more:
+
+- [@article@Good from Afar, But Far from Good: AI Prototyping in Real Design Contexts](https://www.nngroup.com/articles/ai-prototyping/)
@@ -0,0 +1,8 @@
+# API & Data Limitations
+
+API and data limitations refer to the technical boundaries imposed by the software services that power a digital product, such as how much information can be retrieved at once, how quickly it can be updated, or what specific data fields are available. These constraints dictate the realism of a design, as they define whether a user interface can display real-time information, handle large datasets, or support certain interactive features. Understanding these boundaries early helps designers avoid creating experiences that the underlying system cannot technically support or that would cause significant performance issues for the end user.
+
+Visit the following resources to learn more:
+
+- [@article@Everything I know about good API design](https://www.seangoedecke.com/good-api-design/)
+- [@article@Understanding Data Design: The Key to Effective User Experiences](https://pixso.net/articles/data-design/)
@@ -1,3 +1,9 @@
 # Color

-Color in interface design is used to establish hierarchy, communicate meaning, such as errors or success states, and support a product's brand identity. A well-considered color palette also needs to account for accessibility, ensuring enough contrast for users with visual impairments. Color choices are typically defined once in a design system and reused consistently across a product.
+Color in interface design is used to establish hierarchy, communicate meaning, such as errors or success states, and support a product's brand identity. A well-considered color palette also needs to account for accessibility, ensuring enough contrast for users with visual impairments. Color choices are typically defined once in a design system and reused consistently across a product.
+
+Visit the following resources to learn more:
+
+- [@article@How To Actually Implement Your UI Color Palette](https://medium.com/@shannon.cabeen/how-to-actually-implement-your-ui-color-palette-a5a7e266dc6f)
+- [@article@100 color combinations to influence your next design](https://www.figma.com/resource-library/color-combinations/)
+- [@article@Color Theory](https://designcode.io/color-theory)
@@ -1,3 +1,9 @@
 # Components

-Components are reusable interface building blocks, such as buttons, form fields, or cards, that combine visual style and behavior into a single, consistent unit. Building interfaces from shared components speeds up design and development while keeping the product visually and functionally consistent. Components are a core part of most design systems, since they let teams avoid rebuilding the same elements repeatedly.
+Components are reusable interface building blocks, such as buttons, form fields, or cards, that combine visual style and behavior into a single, consistent unit. Building interfaces from shared components speeds up design and development while keeping the product visually and functionally consistent. Components are a core part of most design systems, since they let teams avoid rebuilding the same elements repeatedly.
+
+Visit the following resources to learn more:
+
+- [@official@The Largest Library of Open-Source UI](https://uiverse.io/)
+- [@article@What Are UI Components? Types, Benefits, Limitations & More](https://magicui.design/blog/what-are-ui-components)
+- [@video@UI Components Every Programmer Should Know (Probably)](https://www.youtube.com/watch?v=cjSpnReY3Xwhttps://www.youtube.com/watch?v=cjSpnReY3Xw)
@@ -1,3 +1,10 @@
 # Content Design

-Content design is the practice of crafting the words used throughout a product, including labels, instructions, and messages, so they are clear and helpful to users. It includes UX writing, defining a consistent voice and tone, and writing precise microcopy for specific interface moments. Good content design often reduces confusion more effectively than visual changes alone.
+Content design is the practice of crafting the words used throughout a product, including labels, instructions, and messages, so they are clear and helpful to users. It includes UX writing, defining a consistent voice and tone, and writing precise microcopy for specific interface moments. Good content design often reduces confusion more effectively than visual changes alone.
+
+Visit the following resources to learn more:
+
+- [@article@Content Design and UI Mapping](https://wolframnagel.medium.com/content-design-and-ui-mapping-a35af8cac3f6)
+- [@article@What is content design?](https://uxcontent.com/content-design/)
+- [@video@What is UX Writing and Content Design? | Get a tech career without learning to code!](https://www.youtube.com/watch?v=K8bec9d9d78)
+- [@video@What is Content Design?](https://www.youtube.com/watch?v=PsL5zHLiwWQ)
@@ -1,3 +1,7 @@
 # Continuous Improvement

-Continuous improvement is the ongoing practice of using data, feedback, and experimentation to make incremental refinements to a product after launch. Rather than treating a product as finished once shipped, teams keep monitoring performance and iterating based on what they learn. This mindset closes the loop back to earlier stages like research and testing, treating design as a repeating cycle rather than a one-time project.
+Continuous improvement is the ongoing practice of using data, feedback, and experimentation to make incremental refinements to a product after launch. Rather than treating a product as finished once shipped, teams keep monitoring performance and iterating based on what they learn. This mindset closes the loop back to earlier stages like research and testing, treating design as a repeating cycle rather than a one-time project.
+
+Visit the following resources to learn more:
+
+- [@article@Continuous Improvement](https://www.productplan.com/glossary/continuous-improvement)
@@ -1,3 +1,8 @@
 # Critiques & Reviews

-Critiques and reviews are structured sessions where designers present their work to peers or stakeholders to receive feedback before finalizing a design. They are meant to surface blind spots and alternative perspectives that the original designer may not have considered. A well-run critique focuses on the problem the design is solving rather than personal taste alone.
+Critiques and reviews are structured sessions where designers present their work to peers or stakeholders to receive feedback before finalizing a design. They are meant to surface blind spots and alternative perspectives that the original designer may not have considered. A well-run critique focuses on the problem the design is solving rather than personal taste alone.
+
+Visit the following resources to learn more:
+
+- [@article@Mastering design critique with a product team: why it matters and how to do it well](https://medium.com/design-bootcamp/mastering-design-critique-with-a-product-team-why-it-matters-and-how-to-do-it-well-1148a9092ac7)
+- [@article@Design Critiques: Encourage a Positive Culture to Improve Products](https://www.nngroup.com/articles/design-critiques/)
@@ -1,3 +1,9 @@
 # Design Handoff

-Design handoff is the process of transferring finished design work to engineers in a clear, usable format, including specifications for spacing, colors, and behavior. A well-executed handoff reduces back-and-forth questions and the risk of implementation not matching the intended design. Tools that link directly to design files with specs and assets have made this process faster than manually writing out documentation.
+Design handoff is the process of transferring finished design work to engineers in a clear, usable format, including specifications for spacing, colors, and behavior. A well-executed handoff reduces back-and-forth questions and the risk of implementation not matching the intended design. Tools that link directly to design files with specs and assets have made this process faster than manually writing out documentation.
+
+Visit the following resources to learn more:
+
+- [@article@Design Handoff to Developers: How to Stay True to Your Original Vision](https://www.qt.io/software-insights/design-handoff-to-developers-how-to-stay-true-to-your-original-vision)
+- [@article@Design Handoffs](https://ixdf.org/literature/topics/design-handoffs)
+- [@video@How to handoff your designs to Engineering](https://www.youtube.com/watch?v=PK8dLpwSqbw)
@@ -1,3 +1,8 @@
 # Design Systems

-A design system is a shared collection of reusable components, patterns, and guidelines, including visual foundations like color and typography, that keeps a product consistent as it grows. It gives designers and engineers a common language and set of building blocks instead of recreating the same elements repeatedly. Well-maintained design systems become especially valuable as a product scales across multiple teams or platforms.
+A design system is a shared collection of reusable components, patterns, and guidelines, including visual foundations like color and typography, that keeps a product consistent as it grows. It gives designers and engineers a common language and set of building blocks instead of recreating the same elements repeatedly. Well-maintained design systems become especially valuable as a product scales across multiple teams or platforms.
+
+Visit the following resources to learn more:
+
+- [@article@Design Handoffs](https://ixdf.org/literature/topics/design-handoffs)
+- [@video@Build a Design System - Full Course](https://www.youtube.com/watch?v=opTANvl9G1g)
@@ -1,3 +1,10 @@
 # Design Tokens

-Design tokens are named, reusable values, such as a specific color, spacing unit, or font size, that store core design decisions in a single place. Instead of hardcoding a color value on every screen, a designer references a token like "primary-color" that can be updated everywhere at once. This makes it much easier to maintain consistency and make sweeping visual changes across a large product.
+Design tokens are named, reusable values, such as a specific color, spacing unit, or font size, that store core design decisions in a single place. Instead of hardcoding a color value on every screen, a designer references a token like "primary-color" that can be updated everywhere at once. This makes it much easier to maintain consistency and make sweeping visual changes across a large product.
+
+Visit the following resources to learn more:
+
+- [@article@Design tokens explained (and how to build a design token system)](https://www.contentful.com/blog/design-token-system/)
+- [@article@Design tokens: How to sync design and code in Figma](https://www.figma.com/resource-library/design-tokens/)
+- [@video@Introduction to Design Systems: Design Tokens](https://www.youtube.com/watch?v=1O2sROtE3uI)
+- [@video@Tokens, variables, and styles - Update: Introduction to design systems](https://www.youtube.com/watch?v=JyCmacSyDY4)
@@ -1,3 +1,9 @@
 # DesignOps

-DesignOps refers to the operational practices that support a design team's efficiency, including workflows, tooling, hiring, and processes that let designers focus on design work rather than administrative overhead. It plays a similar role for design teams that DevOps plays for engineering teams. DesignOps becomes especially important as a design organization grows and needs consistent processes across multiple teams or products.
+DesignOps refers to the operational practices that support a design team's efficiency, including workflows, tooling, hiring, and processes that let designers focus on design work rather than administrative overhead. It plays a similar role for design teams that DevOps plays for engineering teams. DesignOps becomes especially important as a design organization grows and needs consistent processes across multiple teams or products.
+
+Visit the following resources to learn more:
+
+- [@article@DesignOps – How to Improve Your Design Workflow and Operations](https://www.uxpin.com/studio/blog/designops/)
+- [@article@What is DesignOps? How It Scales Design Teams and Speeds Delivery](https://www.neuronux.com/post/what-is-designops)
+- [@video@DesignOps 101](https://www.youtube.com/watch?v=I-z1NCbQQ38&list=PLJOFJ3Ok_iduKLPT5n2IQr-at29zhPS4E)
@@ -0,0 +1,9 @@
+# Edge Cases & States
+
+Edge cases and states refer to the variations in a design that account for non-ideal or non-standard scenarios during user interaction. States define how an interface looks or behaves under specific conditions, such as loading, success, error, or empty states, while edge cases address unusual occurrences like exceptionally long text strings, lost internet connectivity, or unexpected data inputs. By documenting these scenarios, designers ensure that the interface remains functional and provides clear feedback to the user even when the application deviates from the primary happy path.
+
+Visit the following resources to learn more:
+
+- [@article@Dealing with Edge Cases in Product Design](https://medium.com/@nelsonjoyce/dealing-with-edge-cases-in-product-design-f90ecbf0dffd)
+- [@article@Designing for edge cases](https://www.uxtoast.com/ux-design/edge-cases)
+- [@video@Why Edge Cases are Important in UX | Google UX Design Certificate](https://www.youtube.com/watch?v=eFbyaTdWxJI)
@@ -1,3 +1,9 @@
 # Ethical Design

-Ethical design involves evaluating whether design choices manipulate or mislead users for the benefit of a business, rather than genuinely serving their interests. It scrutinizes patterns like fake urgency, hidden costs, or deceptive defaults that push users toward decisions they might not otherwise make. Practicing ethical design means being willing to choose a less profitable pattern when a more persuasive one would harm user trust.
+Ethical design involves evaluating whether design choices manipulate or mislead users for the benefit of a business, rather than genuinely serving their interests. It scrutinizes patterns like fake urgency, hidden costs, or deceptive defaults that push users toward decisions they might not otherwise make. Practicing ethical design means being willing to choose a less profitable pattern when a more persuasive one would harm user trust.
+
+Visit the following resources to learn more:
+
+- [@article@Ethical Design: Building Responsible Products, Services, and Systems for a Better World](https://www.coursera.org/articles/ethical-design)
+- [@article@Ethical design: principles, benefits and examples](https://www.future-processing.com/blog/ethical-design-principles-benefits-and-examples/)
+- [@video@What is Ethical Design?](https://www.youtube.com/watch?v=HPMqyfOT-l8)
@@ -1,3 +1,8 @@
 # Expert Review

-An expert review, also called a heuristic evaluation, has an experienced designer or usability specialist assess a product against established usability principles without involving real users. It can catch many common issues quickly and at low cost compared to full user testing. Expert reviews are often used as an early filter before investing in more resource-intensive usability testing.
+An expert review, also called a heuristic evaluation, has an experienced designer or usability specialist assess a product against established usability principles without involving real users. It can catch many common issues quickly and at low cost compared to full user testing. Expert reviews are often used as an early filter before investing in more resource-intensive usability testing.
+
+Visit the following resources to learn more:
+
+- [@article@UX Expert Reviews](https://www.nngroup.com/articles/ux-expert-reviews/)
+- [@article@Expert review](https://www.uxtweak.com/ux-glossary/expert-review/)
@@ -1,3 +1,9 @@
 # Feature Flags

-Feature flags are a technical mechanism that lets teams turn a feature on or off for specific users without deploying new code. They allow gradual rollouts, quick rollbacks if something goes wrong, and controlled experiments like A/B tests. Feature flags give product teams flexibility to manage risk when releasing new or unproven features.
+Feature flags are a technical mechanism that lets teams turn a feature on or off for specific users without deploying new code. They allow gradual rollouts, quick rollbacks if something goes wrong, and controlled experiments like A/B tests. Feature flags give product teams flexibility to manage risk when releasing new or unproven features.
+
+Visit the following resources to learn more:
+
+- [@article@What Are Feature Flags?](https://launchdarkly.com/blog/what-are-feature-flags/)
+- [@video@What are Feature Flags?](https://www.youtube.com/watch?v=AJa2B-twtG4)
+- [@video@How To Build Feature Flags Like A Senior Dev In 20 Minutes](https://www.youtube.com/watch?v=VBCYqp8l3Lc)
@@ -0,0 +1,8 @@
+# Figma Dev Mode
+
+Figma Dev Mode is a dedicated workspace within Figma that provides developers with the specific information they need to translate design files into functional code. It allows developers to inspect layers, measure spacing, export assets, and view CSS, Swift, or Compose code snippets directly from the design file. By streamlining the inspection process, it bridges the gap between static visuals and technical implementation, ensuring that the final output accurately matches the designer's original intent.
+
+Visit the following resources to learn more:
+
+- [@official@Dev Mode](https://www.figma.com/dev-mode/)
+- [@video@Figma Tutorial: Master Figma Dev Mode in 8 Minutes](https://www.youtube.com/watch?v=HH0ancOHSdc)
@@ -1,3 +1,9 @@
 # HEART Framework

-The HEART framework measures user experience quality across five dimensions: Happiness, Engagement, Adoption, Retention, and Task success. It gives teams a structured way to choose relevant metrics for a specific feature rather than relying on a single generic measure. Each dimension can be tied to specific, measurable signals depending on what a team is trying to evaluate.
+The HEART framework measures user experience quality across five dimensions: Happiness, Engagement, Adoption, Retention, and Task success. It gives teams a structured way to choose relevant metrics for a specific feature rather than relying on a single generic measure. Each dimension can be tied to specific, measurable signals depending on what a team is trying to evaluate.
+
+Visit the following resources to learn more:
+
+- [@article@How to Choose the Right UX Metrics for Your Product](https://www.heartframework.com/)
+- [@article@Google’s Heart framework: Choosing the right metrics for your product](https://uxdesign.cc/googles-heart-framework-choosing-the-right-metrics-for-your-product-112bd7300d55)
+- [@video@The HEART Framework | Key Business Metrics](https://www.youtube.com/watch?v=YugESrDVHuo&list=PLr8ITgkaARq6AWstPQZNUZyHa6gX_9uIz)
@@ -1,3 +1,10 @@
 # Icons

-Icons are small visual symbols used to represent actions, objects, or categories within an interface, often to save space or add quick visual recognition. Effective icons are simple, consistent in style, and paired with text labels when their meaning might be unclear on their own. A consistent icon set is typically maintained as part of a broader design system.
+Icons are small visual symbols used to represent actions, objects, or categories within an interface, often to save space or add quick visual recognition. Effective icons are simple, consistent in style, and paired with text labels when their meaning might be unclear on their own. A consistent icon set is typically maintained as part of a broader design system.
+
+Visit the following resources to learn more:
+
+- [@article@The basics of iconography in UI design: A comprehensive guide](https://medium.com/design-bootcamp/the-basics-of-iconography-in-ui-design-a-comprehensive-guide-49076b88527f)
+- [@article@Design Principles for Perfect Icons: A Complete UI/UX Guide](https://upslidedesignstudio.com/blogs/design-principles-for-perfect-icons-a-complete-ui-ux-guide)
+- [@video@How to Design Better ICON](https://www.youtube.com/watch?v=9At1yFg901Y)
+- [@video@Figma Design System: 09 Iconography](https://www.youtube.com/watch?v=eobqYu7wliE)
@@ -1,3 +1,9 @@
 # Inclusive Design

-Inclusive design is the practice of creating products that work well for people with a wide range of abilities, backgrounds, and circumstances, rather than designing only for a typical or average user. It considers factors like disability, language, cultural context, and access to technology when making design decisions. Accessibility testing is one concrete practice that supports the broader goal of inclusive design.
+Inclusive design is the practice of creating products that work well for people with a wide range of abilities, backgrounds, and circumstances, rather than designing only for a typical or average user. It considers factors like disability, language, cultural context, and access to technology when making design decisions. Accessibility testing is one concrete practice that supports the broader goal of inclusive design.
+
+Visit the following resources to learn more:
+
+- [@article@Inclusive Design](https://www.nngroup.com/articles/inclusive-design/)
+- [@article@What is inclusive design?](https://www.inclusivedesigntoolkit.com/whatis/whatis.html)
+- [@video@Accessibility vs. Inclusive Design](https://www.youtube.com/watch?v=hE83Qn-PTGA)
@@ -1,3 +1,8 @@
 # Interface Design

-Interface design is the practice of designing the actual screens and interactive elements a user sees and touches, building on visual foundations like color and typography. It includes defining UI patterns, design tokens, reusable components, and the different states an interface element can be in. This stage turns wireframes and prototypes into a polished, functional interface ready for development.
+Interface design is the practice of designing the actual screens and interactive elements a user sees and touches, building on visual foundations like color and typography. It includes defining UI patterns, design tokens, reusable components, and the different states an interface element can be in. This stage turns wireframes and prototypes into a polished, functional interface ready for development.
+
+Visit the following resources to learn more:
+
+- [@article@What is UI design? A complete guide for 2025](https://www.uxdesigninstitute.com/blog/what-is-ui-design/)
+- [@video@The Weird Future Of User Interfaces](https://www.youtube.com/watch?v=f32W5BEzWN0)
@@ -1,3 +1,9 @@
 # Interface States

-Interface states describe the different conditions a component or screen can be in, such as default, hover, disabled, loading, or error. Designing for these states ensures the product behaves predictably and gives clear feedback in situations beyond the ideal, happy path. Overlooking states like empty or error conditions is a common cause of confusing or broken-feeling experiences.
+Interface states describe the different conditions a component or screen can be in, such as default, hover, disabled, loading, or error. Designing for these states ensures the product behaves predictably and gives clear feedback in situations beyond the ideal, happy path. Overlooking states like empty or error conditions is a common cause of confusing or broken-feeling experiences.
+
+Visit the following resources to learn more:
+
+- [@article@UI states are important!!](https://medium.com/@pakhimangal/ui-states-are-important-74c2715cef0b)
+- [@article@Understanding button states in UI design](https://www.figma.com/resource-library/button-states/)
+- [@article@States](https://m2.material.io/design/interaction/states.html#usage)
@@ -5,5 +5,5 @@ Product design is the practice of shaping a product's experience, look, and beha
 Visit the following resources to learn more:

 - [@article@What is product design?](https://www.figma.com/resource-library/what-is-product-design/)
- [@article@What EXACTLY is Product Design? 🤔](https://www.youtube.com/watch?v=LckQ4VVjHDs)
+- [@video@What EXACTLY is Product Design? 🤔](https://www.youtube.com/watch?v=LckQ4VVjHDs)
 - [@video@Product Design Tutorials & Advice](https://www.youtube.com/playlist?list=PLDodijvPErk-0e-znq_4a2rtVW4BFF_wi)
@@ -1,3 +1,9 @@
 # Launch Readiness

-Launch readiness is the process of confirming that a design and its implementation are fully prepared for release, including checking edge cases, content, and interface states across the product. It typically involves a final review to catch issues before they reach real users. Skipping this step can lead to avoidable bugs or inconsistencies appearing immediately after a product goes live.
+Launch readiness is the process of confirming that a design and its implementation are fully prepared for release, including checking edge cases, content, and interface states across the product. It typically involves a final review to catch issues before they reach real users. Skipping this step can lead to avoidable bugs or inconsistencies appearing immediately after a product goes live.
+
+Visit the following resources to learn more:
+
+- [@article@Product launch checklist: How to ensure a successful launch](https://www.atlassian.com/agile/product-management/product-launch-checklist)
+- [@article@Goals, Readiness and Constraints: The Three Dimensions of a Product Launch](https://www.pragmaticinstitute.com/resources/articles/product/goals-readiness-and-constraints-the-three-dimensions-of-product-launch/)
+- [@video@How To Have A Successful Product Launch: My 4-Step Process](https://www.youtube.com/watch?v=a7wyiacasDA)
@@ -1,3 +1,8 @@
 # Layout & Grid

-Layout and grid systems define how elements are positioned and spaced on a screen, using a consistent underlying structure such as columns and margins. A solid grid keeps interfaces visually organized and makes it easier to design new screens that feel consistent with existing ones. This foundation supports responsive design, since a well-built grid can adapt across different screen sizes.
+Layout and grid systems define how elements are positioned and spaced on a screen, using a consistent underlying structure such as columns and margins. A solid grid keeps interfaces visually organized and makes it easier to design new screens that feel consistent with existing ones. This foundation supports responsive design, since a well-built grid can adapt across different screen sizes.
+
+Visit the following resources to learn more:
+
+- [@article@Understanding layout](https://m2.material.io/design/layout/understanding-layout.html#principles)
+- [@video@Complete Layout Guide](https://www.youtube.com/watch?v=MlsV3hu84as)
@@ -1,3 +1,9 @@
 # Micro-interactions

-Micro-interactions are small, focused moments of feedback within a product, such as a button changing color when clicked or a checkbox animating when checked. They confirm to users that their action was registered and add a sense of responsiveness to an interface. Though subtle, well-designed micro-interactions can meaningfully improve how polished and trustworthy a product feels.
+Micro-interactions are small, focused moments of feedback within a product, such as a button changing color when clicked or a checkbox animating when checked. They confirm to users that their action was registered and add a sense of responsiveness to an interface. Though subtle, well-designed micro-interactions can meaningfully improve how polished and trustworthy a product feels.
+
+Visit the following resources to learn more:
+
+- [@article@12 Micro-Interaction Examples That Reshape User Behavior in 2026](https://userpilot.com/blog/micro-interaction-examples/)
+- [@article@Microinteractions in User Experience](https://www.nngroup.com/articles/microinteractions/)
+- [@video@Micro-interactions to delight your users: what, when and how](https://www.youtube.com/watch?v=jgrkV_hJdJw)
@@ -1,3 +1,9 @@
 # Microcopy

-Microcopy refers to the small pieces of text embedded throughout an interface, such as button labels, tooltips, placeholder text, and error messages. Despite being brief, microcopy has an outsized effect on how easy and confident a user feels while completing a task. Well-crafted microcopy often prevents confusion at exactly the moment a user is about to make a decision or take an action.
+Microcopy refers to the small pieces of text embedded throughout an interface, such as button labels, tooltips, placeholder text, and error messages. Despite being brief, microcopy has an outsized effect on how easy and confident a user feels while completing a task. Well-crafted microcopy often prevents confusion at exactly the moment a user is about to make a decision or take an action.
+
+Visit the following resources to learn more:
+
+- [@article@What Is Microcopy?](https://www.coursera.org/articles/microcopy)
+- [@article@Basics of Microcopy](https://uxwritinghub.com/what-is-microcopy/)
+- [@video@Informative Microcopy: Titles, Headings, Cards, and More | Course Preview](https://www.youtube.com/watch?v=nVKF8eS4EZM)
@@ -1,3 +1,8 @@
 # Motion & Interaction

-Motion and interaction design covers how elements move, transition, and respond to user input within an interface. Thoughtful motion can clarify relationships between elements or provide feedback, while poorly used motion can feel distracting or slow the experience down. This area includes both small micro-interactions and broader motion principles that guide consistent use of animation across a product.
+Motion and interaction design covers how elements move, transition, and respond to user input within an interface. Thoughtful motion can clarify relationships between elements or provide feedback, while poorly used motion can feel distracting or slow the experience down. This area includes both small micro-interactions and broader motion principles that guide consistent use of animation across a product.
+
+Visit the following resources to learn more:
+
+- [@article@20 Motion Design Principles with Examples for UI/UX Designers](https://www.mockplus.com/blog/post/20-motion-design-principles-with-examples)
+- [@article@Motion UI & Interactive Design: Creating Engaging Animations and User Interfaces](https://dev.to/arasosman/motion-ui-interactive-design-creating-engaging-animations-and-user-interfaces-4dfe)
@@ -1,3 +1,9 @@
 # Motion Principles

-Motion principles are the underlying rules that guide how animation is used consistently across a product, covering aspects like timing, easing, and when motion should or should not be used. They help ensure that transitions feel cohesive rather than arbitrary from one screen to another. Teams often document these principles alongside other design system elements to keep motion consistent as new features are added.
+Motion principles are the underlying rules that guide how animation is used consistently across a product, covering aspects like timing, easing, and when motion should or should not be used. They help ensure that transitions feel cohesive rather than arbitrary from one screen to another. Teams often document these principles alongside other design system elements to keep motion consistent as new features are added.
+
+Visit the following resources to learn more:
+
+- [@article@Understanding motion](https://m2.material.io/design/motion/understanding-motion.html)
+- [@article@When Motion Got Principled](https://design.google/library/material-design-motion-sharon-harris)
+- [@video@10 Motion Design Principles Every Animator Needs](https://www.youtube.com/watch?v=Cz-GcIITNrs)
@@ -1,3 +1,8 @@
 # Multi-platform Design

-Multi-platform design is the practice of creating a consistent experience for a product across different platforms, such as web, iOS, and Android, while respecting the conventions specific to each. It requires balancing a unified brand and interaction model against platform-specific expectations users already have. Design systems often play a key role in managing this consistency across multiple platforms at once.
+Multi-platform design is the practice of creating a consistent experience for a product across different platforms, such as web, iOS, and Android, while respecting the conventions specific to each. It requires balancing a unified brand and interaction model against platform-specific expectations users already have. Design systems often play a key role in managing this consistency across multiple platforms at once.
+
+Visit the following resources to learn more:
+
+- [@article@An Introduction to Multi-Platform Design Systems](https://dbanks.design/blog/multi-platform/)
+- [@article@Designing for Cross-Platform Consistency: Best Practices and Challenges](https://www.designsystemscollective.com/designing-for-cross-platform-consistency-best-practices-and-challenges-a86ccb6adfe6)
@@ -0,0 +1,8 @@
+# Performance Constraints
+
+Performance constraints refer to the technical limits on how quickly an application loads, responds to user input, and maintains smooth interactions on a device. These limitations are dictated by factors like network speed, processing power, and memory availability. Designers must account for these boundaries by optimizing file sizes, minimizing complex animations, and managing data heavy-lifting to ensure that the interface remains functional and responsive for all users, regardless of their hardware or connectivity.
+
+Visit the following resources to learn more:
+
+- [@article@What Are Constraints in Engineering - Overcoming Design Barriers](https://www.neuralconcept.com/post/what-are-constraints-in-engineering-overcoming-design-barriers)
+- [@article@15 Engineering Design Constraints that Product Design Companies & Engineering Firms Can’t Avoid](https://www.cadcrowd.com/blog/15-engineering-design-constraints-that-product-design-companies-engineering-firms-cant-avoid/)
@@ -1,3 +1,10 @@
 # Product Analytics

-Product analytics involves collecting and analyzing data on how users actually interact with a product, such as which features they use, how often, and where they drop off. This quantitative data complements qualitative research by showing patterns across a large number of users rather than a small sample. Teams use product analytics to identify where to focus further research or design improvements.
+Product analytics involves collecting and analyzing data on how users actually interact with a product, such as which features they use, how often, and where they drop off. This quantitative data complements qualitative research by showing patterns across a large number of users rather than a small sample. Teams use product analytics to identify where to focus further research or design improvements.
+
+Visit the following resources to learn more:
+
+- [@roadmap@Visit the Dedicated Data Analyst Roadmap](https://roadmap.sh/data-analyst)
+- [@article@What every product manager needs to know about product analytics](https://www.atlassian.com/agile/product-management/product-analytics)
+- [@article@Amplitude Guide to Product Analytics](https://amplitude.com/guides/product-analytics)
+- [@video@One-Hour Product Analytics Tutorial](https://www.youtube.com/watch?v=5O4ST-R5ZVw)
@@ -5,4 +5,5 @@ Product design covers the full lifecycle of a product, including strategy, busin
 Visit the following resources to learn more:

 - [@roadmap@Visit the Dedicated UX Design Roamdapux](https://roadmap.sh/ux-design)
- [@article@Product Designer vs. UX Designer: The Difference Explained](https://www.coursera.org/articles/product-designer-vs-ux-designer-the-difference-explained)
+- [@article@Product Designer vs. UX Designer: The Difference Explained](https://www.coursera.org/articles/product-designer-vs-ux-designer-the-difference-explained)
+- [@course@Intro to UX (User Experience) | Google UX Design Certificate](https://www.youtube.com/watch?v=2QQQtiFwXjU&list=PLTZYG7bZ1u6oHnGp4Ib3n0y-CmFQdTW6r)
@@ -4,4 +4,5 @@ Prototyping is the process of building an interactive or semi-interactive repres

 Visit the following resources to learn more:

- [@article@What is prototyping](https://www.figma.com/resource-library/what-is-prototyping/)
+- [@article@What is prototyping](https://www.figma.com/resource-library/what-is-prototyping/)
+- [@video@UX Prototyping Tutorial - What is a prototype?](https://www.youtube.com/watch?v=zFBa7URT654)
@@ -0,0 +1,9 @@
+# Specs
+
+Specs, short for specifications, are detailed documents or annotations that outline the functional and visual requirements of a design. They act as a bridge between design and development by providing engineers with precise information regarding dimensions, color codes, typography, spacing, and interaction behaviors. Specs ensure that the final implementation matches the intended design vision while reducing ambiguity during the coding process.
+
+Visit the following resources to learn more:
+
+- [@article@What Is a Product Specification? A Complete Guide](https://www.productboard.com/blog/product-specification-a-complete-guide/)
+- [@article@Creating Design Specs for Development](https://www.nngroup.com/articles/creating-design-specs-for-development/)
+- [@video@12 Senior Designers Show Their Engineering Handoff Process](https://www.youtube.com/watch?v=CYPeIjgIfOE)
@@ -0,0 +1,8 @@
+# Stack & Platform Constraints
+
+Stack and platform constraints refer to the specific technical limitations and capabilities imposed by the programming languages, frameworks, and operating systems chosen to build a product. These boundaries dictate what features are technically feasible, how quickly they can be rendered, and how the interface behaves across different environments like iOS, Android, or the web.
+
+Visit the following resources to learn more:
+
+- [@article@Architecture as a Product: Why Your Tech Stack is Your Biggest UX Constraint](https://appibara.medium.com/architecture-as-a-product-why-your-tech-stack-is-your-biggest-ux-constraint-f4283eacc6ae)
+- [@article@Design Constraints: 7 Types Every UX Team Faces and How to Overcome Them](https://www.uxpin.com/studio/blog/constraints-in-design/)
@@ -1,3 +1,7 @@
 # Testing Designs

-Testing designs is the practice of evaluating a design with real users or experts to identify usability problems and accessibility issues before or after launch. It includes methods like usability testing and accessibility testing, each focused on different aspects of the experience. This step provides direct evidence of how well a design works, rather than relying solely on internal judgment.
+Testing designs is the practice of evaluating a design with real users or experts to identify usability problems and accessibility issues before or after launch. It includes methods like usability testing and accessibility testing, each focused on different aspects of the experience. This step provides direct evidence of how well a design works, rather than relying solely on internal judgment.
+
+Visit the following resources to learn more:
+
+- [@article@Test Design: A Guide for Manual and Automated Testing](https://www.testrail.com/blog/test-design-guide/)
@@ -1,3 +1,9 @@
 # Typography

-Typography covers the choice and use of fonts, sizes, weights, and spacing to make text readable and establish visual hierarchy within a product. Poor typography choices can make an interface feel cluttered or hard to read, even if the underlying content is well written. Typography decisions are usually codified into a design system so headings, body text, and labels stay consistent throughout a product.
+Typography covers the choice and use of fonts, sizes, weights, and spacing to make text readable and establish visual hierarchy within a product. Poor typography choices can make an interface feel cluttered or hard to read, even if the underlying content is well written. Typography decisions are usually codified into a design system so headings, body text, and labels stay consistent throughout a product.
+
+Visit the following resources to learn more:
+
+- [@article@Guide: How to Define & Use Typography in UX/UI Design](https://designlab.com/blog/what-is-typography-how-is-it-important-to-ux-ui-design)
+- [@article@Principles of Typography in UI Design](https://uxplanet.org/principles-of-typography-in-ui-design-bc28f1f9666d)
+- [@video@Typography in UI Design](https://www.youtube.com/playlist?list=PLZNQnufz3ORJj545kYkdneoqaO0tX0dRx)
@@ -1,3 +1,9 @@
 # UI Patterns

-UI patterns are common, reusable solutions to recurring interface design problems, such as how to display a form, a modal, or a navigation menu. Using established patterns helps users apply familiarity from other products to navigate a new one more easily. Teams typically document their chosen patterns as part of a design system to keep usage consistent across a product.
+UI patterns are common, reusable solutions to recurring interface design problems, such as how to display a form, a modal, or a navigation menu. Using established patterns helps users apply familiarity from other products to navigate a new one more easily. Teams typically document their chosen patterns as part of a design system to keep usage consistent across a product.
+
+Visit the following resources to learn more:
+
+- [@article@User Interface (UI) Design Patterns](https://ixdf.org/literature/topics/ui-design-patterns)
+- [@article@Design-Pattern Guidelines: Study Guide](https://www.nngroup.com/articles/design-pattern-guidelines/)
+- [@video@5 Common UI Design Patterns | Part 1](https://www.youtube.com/watch?v=X6RRjByY5Nk)
@@ -1,3 +1,8 @@
 # Usability Testing

-Usability testing involves observing real users as they attempt to complete tasks with a product, in order to identify points of confusion, friction, or failure. It can be conducted on prototypes or live products, and can be moderated by a researcher or done remotely without direct supervision. The findings typically feed directly back into design revisions before or after a product ships.
+Usability testing involves observing real users as they attempt to complete tasks with a product, in order to identify points of confusion, friction, or failure. It can be conducted on prototypes or live products, and can be moderated by a researcher or done remotely without direct supervision. The findings typically feed directly back into design revisions before or after a product ships.
+
+Visit the following resources to learn more:
+
+- [@article@Usability (User) Testing 101](https://www.nngroup.com/articles/usability-testing-101/)
+- [@video@Usability Testing Tips and Examples | Google UX Design Certificate](https://www.youtube.com/watch?v=nYCJTea1AUQ)
@@ -1,3 +1,8 @@
 # UX Benchmarking

-UX benchmarking measures a product's usability against a defined standard, past version, or competitor product using consistent metrics. It gives teams a way to track whether design changes are actually improving the experience over time, rather than relying on subjective impressions. Benchmarks are often revisited periodically to monitor long-term trends in product quality.
+UX benchmarking measures a product's usability against a defined standard, past version, or competitor product using consistent metrics. It gives teams a way to track whether design changes are actually improving the experience over time, rather than relying on subjective impressions. Benchmarks are often revisited periodically to monitor long-term trends in product quality.
+
+Visit the following resources to learn more:
+
+- [@article@Benchmarking UX: Tracking Metrics](https://www.nngroup.com/articles/benchmarking-ux/)
+- [@video@The secret power of Benchmarking | UX Benchmarking tips](https://www.youtube.com/watch?v=zd7SYKxlFVA)
@@ -1,3 +1,9 @@
 # UX Writing

-UX writing is the practice of crafting the text within a product's interface, such as button labels, error messages, and onboarding copy, so it is clear and actionable. It requires balancing brevity with enough context for users to understand what to do next. UX writers often work closely with designers to ensure text and layout support each other rather than working against one another.
+UX writing is the practice of crafting the text within a product's interface, such as button labels, error messages, and onboarding copy, so it is clear and actionable. It requires balancing brevity with enough context for users to understand what to do next. UX writers often work closely with designers to ensure text and layout support each other rather than working against one another.
+
+Visit the following resources to learn more:
+
+- [@article@UX Writing: Study Guide](https://www.nngroup.com/articles/ux-writing-study-guide/)
+- [@video@A Day in the Life of a UX Writer | Google UX Design Certificate](https://www.youtube.com/watch?v=CxBL_QwyWjA)
+- [@video@How to Get Into UX Writing](https://www.youtube.com/watch?v=1Yvu-i9H6lI)
@@ -1,3 +1,9 @@
 # Visual Foundations

-Visual foundations are the basic building blocks of visual design, including color, layout and grid systems, typography, icons, and visual hierarchy. These elements establish the underlying rules that keep an interface consistent and easy to read. Nearly all interface design work builds on top of these foundational choices.
+Visual foundations are the basic building blocks of visual design, including color, layout and grid systems, typography, icons, and visual hierarchy. These elements establish the underlying rules that keep an interface consistent and easy to read. Nearly all interface design work builds on top of these foundational choices.
+
+Visit the following resources to learn more:
+
+- [@article@What is UI design?](https://www.figma.com/resource-library/what-is-ui-design/)
+- [@video@UI Design](https://www.youtube.com/playlist?list=PLrtjkLnNjGHu09kr99red3iVlzV2wrR9Q)
+- [@video@Every UI/UX Concept Explained in Under 10 Minutes](https://www.youtube.com/watch?v=EcbgbKtOELY)
@@ -1,3 +1,9 @@
 # Visual Hierarchy

-Visual hierarchy is the arrangement of design elements, such as size, color, and placement, to guide a user's attention to the most important information first. A clear hierarchy helps users quickly understand what matters most on a screen without having to read everything. It draws on principles from color, typography, and layout to create a scannable, easy-to-navigate interface.
+Visual hierarchy is the arrangement of design elements, such as size, color, and placement, to guide a user's attention to the most important information first. A clear hierarchy helps users quickly understand what matters most on a screen without having to read everything. It draws on principles from color, typography, and layout to create a scannable, easy-to-navigate interface.
+
+Visit the following resources to learn more:
+
+- [@article@What is visual hierarchy](https://www.figma.com/resource-library/what-is-visual-hierarchy/)
+- [@article@Principles of visual hierarchy in UI Design](https://uxplanet.org/principles-of-visual-hierarchy-in-ui-design-fbcd31f88088)
+- [@video@The ONLY Video On Visual Hierarchy ANY Graphic Designer Needs](https://www.youtube.com/watch?v=4QNEDhrsRLo&pp=ygUadWkgZGVzaWduIHZpc3VhbCBoaWVyYXJjaHk%3D)
@@ -1,3 +1,8 @@
 # Voice & Tone

-Voice and tone define the personality and style of a product's writing, and how that style shifts depending on the situation, such as a playful tone in a success message versus a serious tone in an error about lost data. A consistent voice helps a product feel coherent and trustworthy across different touchpoints. Tone can flex situationally while the underlying voice generally stays consistent.
+Voice and tone define the personality and style of a product's writing, and how that style shifts depending on the situation, such as a playful tone in a success message versus a serious tone in an error about lost data. A consistent voice helps a product feel coherent and trustworthy across different touchpoints. Tone can flex situationally while the underlying voice generally stays consistent.
+
+Visit the following resources to learn more:
+
+- [@article@Creating your product’s tone and voice](https://uxdesign.cc/creating-your-products-tone-and-voice-758fdcd1f0b2)
+- [@article@Understanding Voice & Tone in UX Design:](https://medium.com/design-bootcamp/understanding-voice-tone-in-ux-design-making-your-product-speak-the-language-of-your-users-07940219e652)
@@ -0,0 +1,8 @@
+# Zeplin
+
+Zeplin is a collaboration tool that bridges the gap between designers and developers by automatically generating design specifications, assets, and code snippets from design files. It allows designers to upload their work from tools like Figma, Sketch, or Adobe XD, providing developers with a dedicated environment to inspect layouts, extract color palettes, and download individual assets without needing access to the original design software. B
+
+Visit the following resources to learn more:
+
+- [@official@Zeplin](https://zeplin.io/)
+- [@video@Quick tour of Zeplin](https://www.youtube.com/watch?v=qWqWx0dvXHw)