From 4565b5aedcd680efb6ce880c8c405e503eaa1c14 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Tue, 13 Sep 2022 17:25:14 +0400 Subject: [PATCH] Add design system terminology --- .../101-design-system-terminology/100-component.md | 6 +++++- .../101-component-library.md | 8 +++++++- .../102-design-language.md | 13 ++++++++++++- .../101-design-system-terminology/103-governance.md | 13 ++++++++++++- .../101-design-system-terminology/104-guidelines.md | 6 +++++- .../101-design-system-terminology/105-pattern.md | 4 +++- .../101-design-system-terminology/106-pilot.md | 6 +++++- .../101-design-system-terminology/107-token.md | 7 ++++++- .../101-design-system-terminology/108-ui-kit.md | 8 +++++++- .../content/101-design-system-terminology/readme.md | 7 ++++++- 10 files changed, 68 insertions(+), 10 deletions(-) diff --git a/content/roadmaps/111-design-system/content/101-design-system-terminology/100-component.md b/content/roadmaps/111-design-system/content/101-design-system-terminology/100-component.md index 416d2ee1d..7a6d94140 100644 --- a/content/roadmaps/111-design-system/content/101-design-system-terminology/100-component.md +++ b/content/roadmaps/111-design-system/content/101-design-system-terminology/100-component.md @@ -1 +1,5 @@ -# Component \ No newline at end of file +# Component + +Components are the reusable building blocks of a design system. Each component meets a specific interaction or UI needs, and is specifically created to work together to create patterns and intuitive user experiences. + + diff --git a/content/roadmaps/111-design-system/content/101-design-system-terminology/101-component-library.md b/content/roadmaps/111-design-system/content/101-design-system-terminology/101-component-library.md index 5b158ba4e..6bad4c86f 100644 --- a/content/roadmaps/111-design-system/content/101-design-system-terminology/101-component-library.md +++ b/content/roadmaps/111-design-system/content/101-design-system-terminology/101-component-library.md @@ -1 +1,7 @@ -# Component library \ No newline at end of file +# Component Library + +A component library is a collection of all the components used in a website, software or app. Some of the common tools to showcase and browse components in a component library include are given below: + +Pattern Lab +Fractal +Storybook diff --git a/content/roadmaps/111-design-system/content/101-design-system-terminology/102-design-language.md b/content/roadmaps/111-design-system/content/101-design-system-terminology/102-design-language.md index 2ffb534f1..175f0c758 100644 --- a/content/roadmaps/111-design-system/content/101-design-system-terminology/102-design-language.md +++ b/content/roadmaps/111-design-system/content/101-design-system-terminology/102-design-language.md @@ -1 +1,12 @@ -# Design language \ No newline at end of file +# Design Language + +A design language or design vocabulary is an overarching scheme or style that guides the design of a complement of products or architectural settings, creating a coherent design system for styling. + +What is a Design Language.. really? +How to Develop a Design Language +What Actually Constitutes Design Language? +Visual Design Language: The Building Blocks Of Design + + + + diff --git a/content/roadmaps/111-design-system/content/101-design-system-terminology/103-governance.md b/content/roadmaps/111-design-system/content/101-design-system-terminology/103-governance.md index 6c200782b..9684d5c07 100644 --- a/content/roadmaps/111-design-system/content/101-design-system-terminology/103-governance.md +++ b/content/roadmaps/111-design-system/content/101-design-system-terminology/103-governance.md @@ -1 +1,12 @@ -# Governance \ No newline at end of file +# Governance + +Governance is a framework for clarifying roles, responsibilities, and authority over decisions. Having that clarity ensures that decisions for the design system funnel smoothly through the governance process + +Governance is a design system’s friend +Design System Governance – Scale Your Design +Governance by design: Building successful design systems +Team Models for Scaling a Design System + + + + diff --git a/content/roadmaps/111-design-system/content/101-design-system-terminology/104-guidelines.md b/content/roadmaps/111-design-system/content/101-design-system-terminology/104-guidelines.md index 80ab2f7f0..e4b99fd34 100644 --- a/content/roadmaps/111-design-system/content/101-design-system-terminology/104-guidelines.md +++ b/content/roadmaps/111-design-system/content/101-design-system-terminology/104-guidelines.md @@ -1 +1,5 @@ -# Guidelines \ No newline at end of file +# Guidelines + +Design guidelines are sets of recommendations on how to apply design principles to provide a positive user experience. Designers use such guidelines to judge how to adopt principles such as intuitiveness, learnability, efficiency and consistency so they can create compelling designs and meet and exceed user needs. + +Design Guidelines diff --git a/content/roadmaps/111-design-system/content/101-design-system-terminology/105-pattern.md b/content/roadmaps/111-design-system/content/101-design-system-terminology/105-pattern.md index 99a36f75c..5c4b76805 100644 --- a/content/roadmaps/111-design-system/content/101-design-system-terminology/105-pattern.md +++ b/content/roadmaps/111-design-system/content/101-design-system-terminology/105-pattern.md @@ -1 +1,3 @@ -# Pattern \ No newline at end of file +# Pattern + +Patterns are best practice design solutions for specific user-focused tasks and page types. Patterns often use one or more components and explain how to adapt them to the context. Some sample patterns could be user signing in to the application or performing the checkout operation. diff --git a/content/roadmaps/111-design-system/content/101-design-system-terminology/106-pilot.md b/content/roadmaps/111-design-system/content/101-design-system-terminology/106-pilot.md index 001e9d7ce..63ac66755 100644 --- a/content/roadmaps/111-design-system/content/101-design-system-terminology/106-pilot.md +++ b/content/roadmaps/111-design-system/content/101-design-system-terminology/106-pilot.md @@ -1 +1,5 @@ -# Pilot \ No newline at end of file +# Pilot + +Pilots are one of the best ways to put your design system through its paces, especially before the design system even gets to a v1. Like television pilots help test audience reactions to a series concept without investing significant resources to create the whole thing, application pilots are a good foundation for ensuring your design system’s design and code are battle-tested. + +Design Systems: Pilots & Scorecards diff --git a/content/roadmaps/111-design-system/content/101-design-system-terminology/107-token.md b/content/roadmaps/111-design-system/content/101-design-system-terminology/107-token.md index 80b1f5d4d..b2024be55 100644 --- a/content/roadmaps/111-design-system/content/101-design-system-terminology/107-token.md +++ b/content/roadmaps/111-design-system/content/101-design-system-terminology/107-token.md @@ -1 +1,6 @@ -# Token \ No newline at end of file +# Token + +Design system tokens are the style values of UI elements such as color, typography, spacing, shadows, etc., that are used across products and capable of being converted to a format for any platform (web, mobile, desktop). Tokens are building blocks of the design system—think of them as sub atoms, the smallest pieces of style values that allow designers to create styles for a product. + +What Are Design Tokens? + diff --git a/content/roadmaps/111-design-system/content/101-design-system-terminology/108-ui-kit.md b/content/roadmaps/111-design-system/content/101-design-system-terminology/108-ui-kit.md index 66a9f1c80..d713c3fec 100644 --- a/content/roadmaps/111-design-system/content/101-design-system-terminology/108-ui-kit.md +++ b/content/roadmaps/111-design-system/content/101-design-system-terminology/108-ui-kit.md @@ -1 +1,7 @@ -# Ui kit \ No newline at end of file +# UI Kit + +As it relates to a design system, a UI Kit is a representation of coded components created in a way that designers who don’t know code can create interface mockups. Examples of UI kits are Sketch libraries and [Figma design systems](https://www.figma.com/blog/how-to-build-your-design-system-in-figma/). + + +Design System vs UI Kit +Your sketch library is not a design system diff --git a/content/roadmaps/111-design-system/content/101-design-system-terminology/readme.md b/content/roadmaps/111-design-system/content/101-design-system-terminology/readme.md index 50cff035a..555a08d28 100644 --- a/content/roadmaps/111-design-system/content/101-design-system-terminology/readme.md +++ b/content/roadmaps/111-design-system/content/101-design-system-terminology/readme.md @@ -1 +1,6 @@ -# Design system terminology \ No newline at end of file +# Terminology + +Design systems can be tricky if you don’t know what certain words mean. Have a look at the roadmap nodes as well as follow the link below to read the glossary. + +Design Systems Glossary +