Kamran Ahmed
2 years ago
parent
f9052db350
commit
4565b5aedc
10 changed files with 68 additions and 10 deletions
@ -1 +1,5 @@ |
||||
# Component |
||||
# 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. |
||||
|
||||
|
||||
|
||||
@ -1 +1,7 @@ |
||||
# Component library |
||||
# 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: |
||||
|
||||
<BadgeLink colorScheme='yellow' badgeText='Visit' href='https://patternlab.io/'>Pattern Lab</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Visit' href='https://fractal.build/'>Fractal</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Visit' href='https://storybook.js.org/'>Storybook</BadgeLink> |
||||
|
||||
@ -1 +1,12 @@ |
||||
# Design language |
||||
# 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. |
||||
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/thinking-design/what-is-a-design-language-really-cd1ef87be793'>What is a Design Language.. really?</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://xd.adobe.com/ideas/principles/web-design/how-to-develop-design-language/'>How to Develop a Design Language</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.uxpin.com/studio/blog/design-language/'>What Actually Constitutes Design Language?</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.smashingmagazine.com/2020/03/visual-design-language-building-blocks/'>Visual Design Language: The Building Blocks Of Design</BadgeLink> |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1 +1,12 @@ |
||||
# Governance |
||||
# 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 |
||||
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://zeroheight.com/blog/governance-is-a-design-systems-friend'>Governance is a design system’s friend</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.uxpin.com/studio/blog/design-system-governance/'>Design System Governance – Scale Your Design</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://rangle.io/blog/governance-by-design-building-successful-design-systems/'>Governance by design: Building successful design systems</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0'>Team Models for Scaling a Design System</BadgeLink> |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1 +1,5 @@ |
||||
# Guidelines |
||||
# 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. |
||||
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.interaction-design.org/literature/topics/design-guidelines'>Design Guidelines</BadgeLink> |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Pattern |
||||
# 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. |
||||
|
||||
@ -1 +1,5 @@ |
||||
# Pilot |
||||
# 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. |
||||
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://superfriendly.com/design-systems/articles/design-systems-pilots-scorecards/'>Design Systems: Pilots & Scorecards</BadgeLink> |
||||
|
||||
@ -1 +1,6 @@ |
||||
# Token |
||||
# 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. |
||||
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://xd.adobe.com/ideas/principles/design-systems/what-are-design-tokens/'>What Are Design Tokens?</BadgeLink> |
||||
|
||||
|
||||
@ -1 +1,7 @@ |
||||
# Ui kit |
||||
# 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/). |
||||
|
||||
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://uigstudio.com/insights/design-system-vs-ui-kit'>Design System vs UI Kit</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='http://bradfrost.com/blog/post/your-sketch-library-is-not-a-design-system/'>Your sketch library is not a design system</BadgeLink> |
||||
|
||||
@ -1 +1,6 @@ |
||||
# Design system terminology |
||||
# 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. |
||||
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://superfriendly.com/design-systems/glossary/'>Design Systems Glossary</BadgeLink> |
||||
|
||||
|
||||
Loading…
Reference in new issue