From c706be983360b89a6dc08c8d54666520f2b8e521 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Thu, 30 Jul 2026 12:44:06 +0200 Subject: [PATCH] chore: sync content to repo (#10192) Co-authored-by: nilbuild <4921183+nilbuild@users.noreply.github.com> --- .../content/ab-testing@tI31OEk2oI2CzTLZ3kCQl.md | 9 ++++++++- .../accessibility-testing@QOvNo5vsPhIJCSDQu3-Ln.md | 7 ++++++- .../content/ai-assisted-design@WC7fqDlXZyONf11qzDpdJ.md | 6 +++++- .../api--data-limitations@l6hgxqruST7xBBypypQFs.md | 8 ++++++++ .../content/color@w_sr4EMZsyOWcWwiHMGCx.md | 8 +++++++- .../content/components@KrC2p39xUWJjnJh4yUC-6.md | 8 +++++++- .../content/content-design@v8g054KMIKVvtpWvOfTVW.md | 9 ++++++++- .../continuous-improvement@dgBELpFRvRO_7ir0y0AtX.md | 6 +++++- .../content/critiques--reviews@e6giaRpKxfvKXsfjhBj7G.md | 7 ++++++- .../content/design-handoff@2BHujRBCdcaJdIb23Fu6j.md | 8 +++++++- .../content/design-systems@9_zOlYfK-YSWbXoBalPf3.md | 7 ++++++- .../content/design-tokens@rnt2fhRBVd4UI5ANC-YIh.md | 9 ++++++++- .../content/designops@UdWsU4kOxSqcHacgTvd7E.md | 8 +++++++- .../content/edge-cases--states@pAFqw5GHr1O38wEQh3UA4.md | 9 +++++++++ .../content/ethical-design@wFbCnmsVaZvR-1W04Y8NB.md | 8 +++++++- .../content/expert-review@xhMXqsbC0qeAkHdMDOxbH.md | 7 ++++++- .../content/feature-flags@VoV8iP-A028UvgutSQb9z.md | 8 +++++++- .../content/figma-dev-mode@A9QA_XQihVKTfVk-BEUil.md | 8 ++++++++ .../content/heart-framework@NV0L45IsvUhMkfCFGVdqQ.md | 8 +++++++- .../content/icons@cRabi0wAInx3kpLQQbOXx.md | 9 ++++++++- .../content/inclusive-design@6J-GuW42O19Rx4o0Fyspm.md | 8 +++++++- .../content/interface-design@Ln8HKsHi-gUeLrrjH8s56.md | 7 ++++++- .../content/interface-states@OcYNyCYMKQqlsup8ghpZ7.md | 8 +++++++- .../content/introduction@q4yfZZ0MTANpDfx3U7uPP.md | 2 +- .../content/launch-readiness@o5060NjFK7EYOGD2nF7Dp.md | 8 +++++++- .../content/layout--grid@Ss8-G_xPJnuTOjfumjQKc.md | 7 ++++++- .../content/micro-interactions@5mb-glqmSTgyd8VE0BFlH.md | 8 +++++++- .../content/microcopy@zLjTzpEmP1AURO0KsSDgz.md | 8 +++++++- .../content/motion--interaction@N0_SikPe2t7v1zrwkVNOh.md | 7 ++++++- .../content/motion-principles@wgISet-HBQkte12PUPX00.md | 8 +++++++- .../multi-platform-design@b958AcoB4_V4t_vYJsN5A.md | 7 ++++++- .../performance-constraints@MMl84Bimru37xW2Kjyd4x.md | 8 ++++++++ .../content/product-analytics@03dZOKaQ2TvUC7BGqufQ8.md | 9 ++++++++- .../product-design-vs-ux@zhWj9lOOoxXciAvCeksxm.md | 3 ++- .../content/prototyping@Wy5D8nEdJf7KJcollezXw.md | 3 ++- .../content/specs@hGIMl_hjYkbtTbYLi9Ijv.md | 9 +++++++++ .../stack--platform-constraints@iYGkLplsUjuCEo6YaNk_L.md | 8 ++++++++ .../content/testing-designs@i2Tg7bH-0ny0RLVmZN5Iw.md | 6 +++++- .../content/typography@_7Lo7JUjJ1iJ0bHrwlz3f.md | 8 +++++++- .../content/ui-patterns@8HR1zfU5WGMFtf2UrDvmJ.md | 8 +++++++- .../content/usability-testing@W5fsnYf-CKMNUrcZ1HAKh.md | 7 ++++++- .../content/ux-benchmarking@VMX5mUOBFKhnuPmKdh3zF.md | 7 ++++++- .../content/ux-writing@k864ijkOZFS1tPSwBXXHC.md | 8 +++++++- .../content/visual-foundations@bwj1QpmHeJth7Z5b1TpfU.md | 8 +++++++- .../content/visual-hierarchy@auEN54ontSqWBb-DDD_A9.md | 8 +++++++- .../content/voice--tone@iq1jmcWoLb2BodJBuk7v0.md | 7 ++++++- .../content/zeplin@ZUenBZJztKfzobLOj8BdV.md | 8 ++++++++ 47 files changed, 310 insertions(+), 40 deletions(-) create mode 100644 roadmaps/product-design/content/api--data-limitations@l6hgxqruST7xBBypypQFs.md create mode 100644 roadmaps/product-design/content/edge-cases--states@pAFqw5GHr1O38wEQh3UA4.md create mode 100644 roadmaps/product-design/content/figma-dev-mode@A9QA_XQihVKTfVk-BEUil.md create mode 100644 roadmaps/product-design/content/performance-constraints@MMl84Bimru37xW2Kjyd4x.md create mode 100644 roadmaps/product-design/content/specs@hGIMl_hjYkbtTbYLi9Ijv.md create mode 100644 roadmaps/product-design/content/stack--platform-constraints@iYGkLplsUjuCEo6YaNk_L.md create mode 100644 roadmaps/product-design/content/zeplin@ZUenBZJztKfzobLOj8BdV.md diff --git a/roadmaps/product-design/content/ab-testing@tI31OEk2oI2CzTLZ3kCQl.md b/roadmaps/product-design/content/ab-testing@tI31OEk2oI2CzTLZ3kCQl.md index ea045fa5c..55974e1ca 100644 --- a/roadmaps/product-design/content/ab-testing@tI31OEk2oI2CzTLZ3kCQl.md +++ b/roadmaps/product-design/content/ab-testing@tI31OEk2oI2CzTLZ3kCQl.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/accessibility-testing@QOvNo5vsPhIJCSDQu3-Ln.md b/roadmaps/product-design/content/accessibility-testing@QOvNo5vsPhIJCSDQu3-Ln.md index a0c126104..5f8992d89 100644 --- a/roadmaps/product-design/content/accessibility-testing@QOvNo5vsPhIJCSDQu3-Ln.md +++ b/roadmaps/product-design/content/accessibility-testing@QOvNo5vsPhIJCSDQu3-Ln.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/ai-assisted-design@WC7fqDlXZyONf11qzDpdJ.md b/roadmaps/product-design/content/ai-assisted-design@WC7fqDlXZyONf11qzDpdJ.md index 1a7ad5639..bceb0a2b5 100644 --- a/roadmaps/product-design/content/ai-assisted-design@WC7fqDlXZyONf11qzDpdJ.md +++ b/roadmaps/product-design/content/ai-assisted-design@WC7fqDlXZyONf11qzDpdJ.md @@ -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. \ No newline at end of file +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/) \ No newline at end of file diff --git a/roadmaps/product-design/content/api--data-limitations@l6hgxqruST7xBBypypQFs.md b/roadmaps/product-design/content/api--data-limitations@l6hgxqruST7xBBypypQFs.md new file mode 100644 index 000000000..7c219218a --- /dev/null +++ b/roadmaps/product-design/content/api--data-limitations@l6hgxqruST7xBBypypQFs.md @@ -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/) \ No newline at end of file diff --git a/roadmaps/product-design/content/color@w_sr4EMZsyOWcWwiHMGCx.md b/roadmaps/product-design/content/color@w_sr4EMZsyOWcWwiHMGCx.md index 8da738309..7c4fec3ba 100644 --- a/roadmaps/product-design/content/color@w_sr4EMZsyOWcWwiHMGCx.md +++ b/roadmaps/product-design/content/color@w_sr4EMZsyOWcWwiHMGCx.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/components@KrC2p39xUWJjnJh4yUC-6.md b/roadmaps/product-design/content/components@KrC2p39xUWJjnJh4yUC-6.md index c57f73391..d104f1144 100644 --- a/roadmaps/product-design/content/components@KrC2p39xUWJjnJh4yUC-6.md +++ b/roadmaps/product-design/content/components@KrC2p39xUWJjnJh4yUC-6.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/content-design@v8g054KMIKVvtpWvOfTVW.md b/roadmaps/product-design/content/content-design@v8g054KMIKVvtpWvOfTVW.md index 96ec01895..9f981a7b2 100644 --- a/roadmaps/product-design/content/content-design@v8g054KMIKVvtpWvOfTVW.md +++ b/roadmaps/product-design/content/content-design@v8g054KMIKVvtpWvOfTVW.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/continuous-improvement@dgBELpFRvRO_7ir0y0AtX.md b/roadmaps/product-design/content/continuous-improvement@dgBELpFRvRO_7ir0y0AtX.md index 4188ddd1c..689a40de1 100644 --- a/roadmaps/product-design/content/continuous-improvement@dgBELpFRvRO_7ir0y0AtX.md +++ b/roadmaps/product-design/content/continuous-improvement@dgBELpFRvRO_7ir0y0AtX.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/critiques--reviews@e6giaRpKxfvKXsfjhBj7G.md b/roadmaps/product-design/content/critiques--reviews@e6giaRpKxfvKXsfjhBj7G.md index cd92c45f5..91b62cff4 100644 --- a/roadmaps/product-design/content/critiques--reviews@e6giaRpKxfvKXsfjhBj7G.md +++ b/roadmaps/product-design/content/critiques--reviews@e6giaRpKxfvKXsfjhBj7G.md @@ -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. \ No newline at end of file +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/) \ No newline at end of file diff --git a/roadmaps/product-design/content/design-handoff@2BHujRBCdcaJdIb23Fu6j.md b/roadmaps/product-design/content/design-handoff@2BHujRBCdcaJdIb23Fu6j.md index 9ecf8c3aa..3af29dd38 100644 --- a/roadmaps/product-design/content/design-handoff@2BHujRBCdcaJdIb23Fu6j.md +++ b/roadmaps/product-design/content/design-handoff@2BHujRBCdcaJdIb23Fu6j.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/design-systems@9_zOlYfK-YSWbXoBalPf3.md b/roadmaps/product-design/content/design-systems@9_zOlYfK-YSWbXoBalPf3.md index 03b6de109..a69e6a1b2 100644 --- a/roadmaps/product-design/content/design-systems@9_zOlYfK-YSWbXoBalPf3.md +++ b/roadmaps/product-design/content/design-systems@9_zOlYfK-YSWbXoBalPf3.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/design-tokens@rnt2fhRBVd4UI5ANC-YIh.md b/roadmaps/product-design/content/design-tokens@rnt2fhRBVd4UI5ANC-YIh.md index f9f3c7ca1..1592deb5f 100644 --- a/roadmaps/product-design/content/design-tokens@rnt2fhRBVd4UI5ANC-YIh.md +++ b/roadmaps/product-design/content/design-tokens@rnt2fhRBVd4UI5ANC-YIh.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/designops@UdWsU4kOxSqcHacgTvd7E.md b/roadmaps/product-design/content/designops@UdWsU4kOxSqcHacgTvd7E.md index c3abd816d..c37991a96 100644 --- a/roadmaps/product-design/content/designops@UdWsU4kOxSqcHacgTvd7E.md +++ b/roadmaps/product-design/content/designops@UdWsU4kOxSqcHacgTvd7E.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/edge-cases--states@pAFqw5GHr1O38wEQh3UA4.md b/roadmaps/product-design/content/edge-cases--states@pAFqw5GHr1O38wEQh3UA4.md new file mode 100644 index 000000000..feb013b93 --- /dev/null +++ b/roadmaps/product-design/content/edge-cases--states@pAFqw5GHr1O38wEQh3UA4.md @@ -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) \ No newline at end of file diff --git a/roadmaps/product-design/content/ethical-design@wFbCnmsVaZvR-1W04Y8NB.md b/roadmaps/product-design/content/ethical-design@wFbCnmsVaZvR-1W04Y8NB.md index ed53bdebb..459c04d9d 100644 --- a/roadmaps/product-design/content/ethical-design@wFbCnmsVaZvR-1W04Y8NB.md +++ b/roadmaps/product-design/content/ethical-design@wFbCnmsVaZvR-1W04Y8NB.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/expert-review@xhMXqsbC0qeAkHdMDOxbH.md b/roadmaps/product-design/content/expert-review@xhMXqsbC0qeAkHdMDOxbH.md index f727b81bd..bed26890c 100644 --- a/roadmaps/product-design/content/expert-review@xhMXqsbC0qeAkHdMDOxbH.md +++ b/roadmaps/product-design/content/expert-review@xhMXqsbC0qeAkHdMDOxbH.md @@ -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. \ No newline at end of file +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/) \ No newline at end of file diff --git a/roadmaps/product-design/content/feature-flags@VoV8iP-A028UvgutSQb9z.md b/roadmaps/product-design/content/feature-flags@VoV8iP-A028UvgutSQb9z.md index 055f84873..716b01565 100644 --- a/roadmaps/product-design/content/feature-flags@VoV8iP-A028UvgutSQb9z.md +++ b/roadmaps/product-design/content/feature-flags@VoV8iP-A028UvgutSQb9z.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/figma-dev-mode@A9QA_XQihVKTfVk-BEUil.md b/roadmaps/product-design/content/figma-dev-mode@A9QA_XQihVKTfVk-BEUil.md new file mode 100644 index 000000000..e974522bf --- /dev/null +++ b/roadmaps/product-design/content/figma-dev-mode@A9QA_XQihVKTfVk-BEUil.md @@ -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) \ No newline at end of file diff --git a/roadmaps/product-design/content/heart-framework@NV0L45IsvUhMkfCFGVdqQ.md b/roadmaps/product-design/content/heart-framework@NV0L45IsvUhMkfCFGVdqQ.md index 5485a771a..a86f8c8a7 100644 --- a/roadmaps/product-design/content/heart-framework@NV0L45IsvUhMkfCFGVdqQ.md +++ b/roadmaps/product-design/content/heart-framework@NV0L45IsvUhMkfCFGVdqQ.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/icons@cRabi0wAInx3kpLQQbOXx.md b/roadmaps/product-design/content/icons@cRabi0wAInx3kpLQQbOXx.md index 11a498447..1e8361a60 100644 --- a/roadmaps/product-design/content/icons@cRabi0wAInx3kpLQQbOXx.md +++ b/roadmaps/product-design/content/icons@cRabi0wAInx3kpLQQbOXx.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/inclusive-design@6J-GuW42O19Rx4o0Fyspm.md b/roadmaps/product-design/content/inclusive-design@6J-GuW42O19Rx4o0Fyspm.md index 65f6f55d9..0ef1fa6a6 100644 --- a/roadmaps/product-design/content/inclusive-design@6J-GuW42O19Rx4o0Fyspm.md +++ b/roadmaps/product-design/content/inclusive-design@6J-GuW42O19Rx4o0Fyspm.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/interface-design@Ln8HKsHi-gUeLrrjH8s56.md b/roadmaps/product-design/content/interface-design@Ln8HKsHi-gUeLrrjH8s56.md index 39415911c..a3e823ce2 100644 --- a/roadmaps/product-design/content/interface-design@Ln8HKsHi-gUeLrrjH8s56.md +++ b/roadmaps/product-design/content/interface-design@Ln8HKsHi-gUeLrrjH8s56.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/interface-states@OcYNyCYMKQqlsup8ghpZ7.md b/roadmaps/product-design/content/interface-states@OcYNyCYMKQqlsup8ghpZ7.md index e0f6cb2e8..21a8ccd2a 100644 --- a/roadmaps/product-design/content/interface-states@OcYNyCYMKQqlsup8ghpZ7.md +++ b/roadmaps/product-design/content/interface-states@OcYNyCYMKQqlsup8ghpZ7.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/introduction@q4yfZZ0MTANpDfx3U7uPP.md b/roadmaps/product-design/content/introduction@q4yfZZ0MTANpDfx3U7uPP.md index 640193478..9c2d07d54 100644 --- a/roadmaps/product-design/content/introduction@q4yfZZ0MTANpDfx3U7uPP.md +++ b/roadmaps/product-design/content/introduction@q4yfZZ0MTANpDfx3U7uPP.md @@ -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) \ No newline at end of file diff --git a/roadmaps/product-design/content/launch-readiness@o5060NjFK7EYOGD2nF7Dp.md b/roadmaps/product-design/content/launch-readiness@o5060NjFK7EYOGD2nF7Dp.md index a95cc74f0..ca7533c26 100644 --- a/roadmaps/product-design/content/launch-readiness@o5060NjFK7EYOGD2nF7Dp.md +++ b/roadmaps/product-design/content/launch-readiness@o5060NjFK7EYOGD2nF7Dp.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/layout--grid@Ss8-G_xPJnuTOjfumjQKc.md b/roadmaps/product-design/content/layout--grid@Ss8-G_xPJnuTOjfumjQKc.md index 5acd0a1b7..63c044569 100644 --- a/roadmaps/product-design/content/layout--grid@Ss8-G_xPJnuTOjfumjQKc.md +++ b/roadmaps/product-design/content/layout--grid@Ss8-G_xPJnuTOjfumjQKc.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/micro-interactions@5mb-glqmSTgyd8VE0BFlH.md b/roadmaps/product-design/content/micro-interactions@5mb-glqmSTgyd8VE0BFlH.md index c8ac52c7a..e0bfa0a66 100644 --- a/roadmaps/product-design/content/micro-interactions@5mb-glqmSTgyd8VE0BFlH.md +++ b/roadmaps/product-design/content/micro-interactions@5mb-glqmSTgyd8VE0BFlH.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/microcopy@zLjTzpEmP1AURO0KsSDgz.md b/roadmaps/product-design/content/microcopy@zLjTzpEmP1AURO0KsSDgz.md index 55b5b3991..f54624c0c 100644 --- a/roadmaps/product-design/content/microcopy@zLjTzpEmP1AURO0KsSDgz.md +++ b/roadmaps/product-design/content/microcopy@zLjTzpEmP1AURO0KsSDgz.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/motion--interaction@N0_SikPe2t7v1zrwkVNOh.md b/roadmaps/product-design/content/motion--interaction@N0_SikPe2t7v1zrwkVNOh.md index 9d501c7fd..90ed3554c 100644 --- a/roadmaps/product-design/content/motion--interaction@N0_SikPe2t7v1zrwkVNOh.md +++ b/roadmaps/product-design/content/motion--interaction@N0_SikPe2t7v1zrwkVNOh.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/motion-principles@wgISet-HBQkte12PUPX00.md b/roadmaps/product-design/content/motion-principles@wgISet-HBQkte12PUPX00.md index 00d3a3283..f9c4e7ddd 100644 --- a/roadmaps/product-design/content/motion-principles@wgISet-HBQkte12PUPX00.md +++ b/roadmaps/product-design/content/motion-principles@wgISet-HBQkte12PUPX00.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/multi-platform-design@b958AcoB4_V4t_vYJsN5A.md b/roadmaps/product-design/content/multi-platform-design@b958AcoB4_V4t_vYJsN5A.md index db494b5b8..4f62cf8f6 100644 --- a/roadmaps/product-design/content/multi-platform-design@b958AcoB4_V4t_vYJsN5A.md +++ b/roadmaps/product-design/content/multi-platform-design@b958AcoB4_V4t_vYJsN5A.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/performance-constraints@MMl84Bimru37xW2Kjyd4x.md b/roadmaps/product-design/content/performance-constraints@MMl84Bimru37xW2Kjyd4x.md new file mode 100644 index 000000000..aa6c5f602 --- /dev/null +++ b/roadmaps/product-design/content/performance-constraints@MMl84Bimru37xW2Kjyd4x.md @@ -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/) \ No newline at end of file diff --git a/roadmaps/product-design/content/product-analytics@03dZOKaQ2TvUC7BGqufQ8.md b/roadmaps/product-design/content/product-analytics@03dZOKaQ2TvUC7BGqufQ8.md index 1e35c93c0..19e3fbc3f 100644 --- a/roadmaps/product-design/content/product-analytics@03dZOKaQ2TvUC7BGqufQ8.md +++ b/roadmaps/product-design/content/product-analytics@03dZOKaQ2TvUC7BGqufQ8.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/product-design-vs-ux@zhWj9lOOoxXciAvCeksxm.md b/roadmaps/product-design/content/product-design-vs-ux@zhWj9lOOoxXciAvCeksxm.md index 21bcbb56b..9d30b3325 100644 --- a/roadmaps/product-design/content/product-design-vs-ux@zhWj9lOOoxXciAvCeksxm.md +++ b/roadmaps/product-design/content/product-design-vs-ux@zhWj9lOOoxXciAvCeksxm.md @@ -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) \ No newline at end of file +- [@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) \ No newline at end of file diff --git a/roadmaps/product-design/content/prototyping@Wy5D8nEdJf7KJcollezXw.md b/roadmaps/product-design/content/prototyping@Wy5D8nEdJf7KJcollezXw.md index fc74d8bcc..2123f7e45 100644 --- a/roadmaps/product-design/content/prototyping@Wy5D8nEdJf7KJcollezXw.md +++ b/roadmaps/product-design/content/prototyping@Wy5D8nEdJf7KJcollezXw.md @@ -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/) \ No newline at end of file +- [@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) \ No newline at end of file diff --git a/roadmaps/product-design/content/specs@hGIMl_hjYkbtTbYLi9Ijv.md b/roadmaps/product-design/content/specs@hGIMl_hjYkbtTbYLi9Ijv.md new file mode 100644 index 000000000..35f88e4b3 --- /dev/null +++ b/roadmaps/product-design/content/specs@hGIMl_hjYkbtTbYLi9Ijv.md @@ -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) \ No newline at end of file diff --git a/roadmaps/product-design/content/stack--platform-constraints@iYGkLplsUjuCEo6YaNk_L.md b/roadmaps/product-design/content/stack--platform-constraints@iYGkLplsUjuCEo6YaNk_L.md new file mode 100644 index 000000000..c59548109 --- /dev/null +++ b/roadmaps/product-design/content/stack--platform-constraints@iYGkLplsUjuCEo6YaNk_L.md @@ -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/) \ No newline at end of file diff --git a/roadmaps/product-design/content/testing-designs@i2Tg7bH-0ny0RLVmZN5Iw.md b/roadmaps/product-design/content/testing-designs@i2Tg7bH-0ny0RLVmZN5Iw.md index aeb16f6d9..b5313dbda 100644 --- a/roadmaps/product-design/content/testing-designs@i2Tg7bH-0ny0RLVmZN5Iw.md +++ b/roadmaps/product-design/content/testing-designs@i2Tg7bH-0ny0RLVmZN5Iw.md @@ -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. \ No newline at end of file +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/) \ No newline at end of file diff --git a/roadmaps/product-design/content/typography@_7Lo7JUjJ1iJ0bHrwlz3f.md b/roadmaps/product-design/content/typography@_7Lo7JUjJ1iJ0bHrwlz3f.md index 894d23eed..0cd620159 100644 --- a/roadmaps/product-design/content/typography@_7Lo7JUjJ1iJ0bHrwlz3f.md +++ b/roadmaps/product-design/content/typography@_7Lo7JUjJ1iJ0bHrwlz3f.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/ui-patterns@8HR1zfU5WGMFtf2UrDvmJ.md b/roadmaps/product-design/content/ui-patterns@8HR1zfU5WGMFtf2UrDvmJ.md index 701ee42ce..fe44a3d15 100644 --- a/roadmaps/product-design/content/ui-patterns@8HR1zfU5WGMFtf2UrDvmJ.md +++ b/roadmaps/product-design/content/ui-patterns@8HR1zfU5WGMFtf2UrDvmJ.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/usability-testing@W5fsnYf-CKMNUrcZ1HAKh.md b/roadmaps/product-design/content/usability-testing@W5fsnYf-CKMNUrcZ1HAKh.md index 8007db5e8..5e89b1a2b 100644 --- a/roadmaps/product-design/content/usability-testing@W5fsnYf-CKMNUrcZ1HAKh.md +++ b/roadmaps/product-design/content/usability-testing@W5fsnYf-CKMNUrcZ1HAKh.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/ux-benchmarking@VMX5mUOBFKhnuPmKdh3zF.md b/roadmaps/product-design/content/ux-benchmarking@VMX5mUOBFKhnuPmKdh3zF.md index 0ffb5e78a..6f6ce60fb 100644 --- a/roadmaps/product-design/content/ux-benchmarking@VMX5mUOBFKhnuPmKdh3zF.md +++ b/roadmaps/product-design/content/ux-benchmarking@VMX5mUOBFKhnuPmKdh3zF.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/ux-writing@k864ijkOZFS1tPSwBXXHC.md b/roadmaps/product-design/content/ux-writing@k864ijkOZFS1tPSwBXXHC.md index 502aa3918..8c9ad8d33 100644 --- a/roadmaps/product-design/content/ux-writing@k864ijkOZFS1tPSwBXXHC.md +++ b/roadmaps/product-design/content/ux-writing@k864ijkOZFS1tPSwBXXHC.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/visual-foundations@bwj1QpmHeJth7Z5b1TpfU.md b/roadmaps/product-design/content/visual-foundations@bwj1QpmHeJth7Z5b1TpfU.md index 97a00013f..8968197a2 100644 --- a/roadmaps/product-design/content/visual-foundations@bwj1QpmHeJth7Z5b1TpfU.md +++ b/roadmaps/product-design/content/visual-foundations@bwj1QpmHeJth7Z5b1TpfU.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/visual-hierarchy@auEN54ontSqWBb-DDD_A9.md b/roadmaps/product-design/content/visual-hierarchy@auEN54ontSqWBb-DDD_A9.md index a320d3f56..7e0bfcd74 100644 --- a/roadmaps/product-design/content/visual-hierarchy@auEN54ontSqWBb-DDD_A9.md +++ b/roadmaps/product-design/content/visual-hierarchy@auEN54ontSqWBb-DDD_A9.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/voice--tone@iq1jmcWoLb2BodJBuk7v0.md b/roadmaps/product-design/content/voice--tone@iq1jmcWoLb2BodJBuk7v0.md index e1695ae56..1dbfa9a33 100644 --- a/roadmaps/product-design/content/voice--tone@iq1jmcWoLb2BodJBuk7v0.md +++ b/roadmaps/product-design/content/voice--tone@iq1jmcWoLb2BodJBuk7v0.md @@ -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. \ No newline at end of file +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) \ No newline at end of file diff --git a/roadmaps/product-design/content/zeplin@ZUenBZJztKfzobLOj8BdV.md b/roadmaps/product-design/content/zeplin@ZUenBZJztKfzobLOj8BdV.md new file mode 100644 index 000000000..a1e542109 --- /dev/null +++ b/roadmaps/product-design/content/zeplin@ZUenBZJztKfzobLOj8BdV.md @@ -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) \ No newline at end of file