Kamran Ahmed
2 years ago
parent
1d083ff58d
commit
84321c3afc
46 changed files with 351 additions and 289 deletions
@ -1 +1,8 @@ |
||||
# What is design system |
||||
# What is Design System |
||||
|
||||
A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product. |
||||
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969'>Everything you need to know about Design Systems</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.nngroup.com/articles/design-systems-101/'>Design Systems 101</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.invisionapp.com/inside-design/guide-to-design-systems/'>A comprehensive guide to design systems</BadgeLink> |
||||
|
||||
|
||||
@ -1 +1,9 @@ |
||||
# Need of design system |
||||
# Need of design system |
||||
|
||||
Having a solid design system speeds up your work by making the product team more efficient, and it creates consistency and harmony within the product and brand ecosystem. A strong design system takes the burden off individual designers to think through commonly recurring design problems. With a full library of pre-approved elements, designers can focus on bigger problems like creating seamless, intuitive flows that delight users. That kind of efficiency pays huge dividends over time. |
||||
|
||||
<BadgeLink colorScheme='blue' badgeText='Watch' href='https://www.youtube.com/watch?v=Hx02SaL_IH0'>Design Systems, when and how much?</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.drawbackwards.com/blog/why-you-need-a-strong-design-system-and-how-to-build-one'>Why You Need a Strong Design System (and How to Build One)</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.smashingmagazine.com/2016/05/design-systems-responsive-design-sell-output-not-workflow/'>On Design Systems: Sell The Output, Not The Workflow</BadgeLink> |
||||
|
||||
|
||||
|
||||
@ -1 +1,9 @@ |
||||
# Design system vs component library |
||||
# Design System vs Component Library |
||||
|
||||
A component library is just a collection of visuals i.e. colours, button stylings, fonts, etc. A Design System takes it to the next level by including standards and documentation around the look and usage of each component. The Design System acts as the single-source of truth. |
||||
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.architech.ca/a-design-system-so-much-more-than-a-component-library'>A Design System: So Much More Than A Component Library</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://prototype.net/blog/design-system-component-library-style-guide'>Design System vs UI Component Library vs Brand Style Guide</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/'>Design Systems vs Pattern Libraries vs Style Guides vs Component Libraries</BadgeLink> |
||||
|
||||
|
||||
|
||||
@ -1 +1,8 @@ |
||||
# Atomic design |
||||
# Atomic Design |
||||
|
||||
Atomic design (by Brad Frost) is a mental model to help you think of user interfaces as a cohesive whole and a collection of parts at the same time. Through the comparison to atoms, molecules, and organisms, we can think of the design of our UI as a composition of self-containing modules put together. |
||||
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://xd.adobe.com/ideas/process/ui-design/atomic-design-principles-methodology-101/'>Atomic Design Principles & Methodology 101</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://atomicdesign.bradfrost.com/chapter-2/'>Atomic Design Methodology</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://blog.bitsrc.io/atomic-design-and-ui-components-theory-to-practice-f200db337c24'>Atomic Design and UI Components: Theory to Practice</BadgeLink> |
||||
|
||||
|
||||
@ -1 +0,0 @@ |
||||
# Good design system |
||||
@ -1 +1,15 @@ |
||||
# Stakeholders involved |
||||
# Stakeholders |
||||
|
||||
Building an effective design system is not an individual responsibility, you need more than just designers. Here’s a quick list of the disciplines that can be represented in your team to create an effective design system: |
||||
|
||||
- **Designers:** to define the visual elements of the system |
||||
- **Frontend Developers:** To create modular efficient code |
||||
- **Accessibility Experts:** Accessibility experts to ensure your system conforms to standards like WCAG |
||||
- **Performance Experts:** who can ensure your system loads quickly on all devices |
||||
- **Content Strategists:** who can help the team nail the voice and tone of the system |
||||
- **Researchers:** who can help you understand customer needs |
||||
- **Product Managers:** to ensure the system is aligning to customer needs |
||||
- **Leaders:** (VPs and directors) to champion and align the vision throughout the company including up to executive leadership |
||||
|
||||
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.designbetter.co/design-systems-handbook/designing-design-system'>Designing the Design System</BadgeLink> |
||||
|
||||
@ -1 +1,11 @@ |
||||
# Design system examples |
||||
# Design System Examples |
||||
|
||||
|
||||
<BadgeLink colorScheme='blue' badgeText='Visit' href='https://material.io/'>Material Design (Google)</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='Visit' href='https://carbondesignsystem.com/'>Carbon Design System (IBM)</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='Visit' href='https://atlassian.design/'>Atlassian Design System</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='Visit' href='https://polaris.shopify.com/'>Polaris Design System (Shopify)</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='Visit' href='https://design-system.service.gov.uk/'>Gov.uk Design System</BadgeLink> |
||||
|
||||
|
||||
<BadgeLink colorScheme='blue' badgeText='Visit' href='https://github.com/alexpate/awesome-design-systems'>Collection of Open Source Design Systems</BadgeLink> |
||||
|
||||
@ -1 +1,11 @@ |
||||
# Design system basics |
||||
# Design System Basics |
||||
|
||||
A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels. |
||||
|
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.nngroup.com/articles/design-systems-101/'>Design Systems 101</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='Watch' href='https://www.youtube.com/watch?v=wc5krC28ynQ'>What is a Design System? Design Systems 101 for Designers</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.invisionapp.com/inside-design/guide-to-design-systems/'>A comprehensive guide to design systems</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969'>Everything you need to know about Design Systems</BadgeLink> |
||||
|
||||
|
||||
|
||||
|
||||
@ -1 +1,9 @@ |
||||
# Making a design system |
||||
# Making a Design System |
||||
|
||||
First step in building a design system is identifying [if you even need a design system](https://sparkbox.com/foundry/when_not_to_use_a_design_system). |
||||
|
||||
<BadgeLink colorScheme='blue' badgeText='Watch' href='https://www.youtube.com/watch?v=FZSi1bK-BRM'>Introducing Design Systems Into Chaos - Diana Mounter, GitHub</BadgeLink> |
||||
<BadgeLink colorScheme='blue' badgeText='Watch' href='https://www.youtube.com/watch?v=Hx02SaL_IH0'>Design Systems, when and how much?</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.uxpin.com/create-design-system-guide/'>Design Systems: Step-by-Step Guide to Creating Your Own</BadgeLink> |
||||
<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.method.com/insights/does-my-organization-need-a-design-system/'>Does My Organization Need a Design System?</BadgeLink> |
||||
|
||||
|
||||
@ -1 +1,3 @@ |
||||
# Component catalog |
||||
# Component Catalog |
||||
|
||||
Isolate your UI components’ environment outside of your product codebase to make sure they’re not dependent on any global dependencies and can be easily reused. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Documentation |
||||
# Documentation |
||||
|
||||
Having your code documented is key to driving adoption and reducing the load on the contributors. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Code style |
||||
# Code Style |
||||
|
||||
Having a defined code style helps align the way code’s written in the system and increases development velocity. It should be automated with the tools provided for each platform. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Unit testing |
||||
# Unit Testing |
||||
|
||||
Every part of the design system should be covered with unit tests. Once your system’s adopted, any change in the isolated environment may affect how the product works. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Accessibility testing |
||||
# Accessibility Testing |
||||
|
||||
Design systems should cover accessibility as much as possible. Making this automatic reduces the risk of inaccessible components or user flows in the product. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Semantic versioning |
||||
# Semantic Versioning |
||||
|
||||
Version your code with semantic versioning that dictates how version numbers are assigned and incremented. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Release strategy |
||||
# Release Strategy |
||||
|
||||
Design system releases should be automated and ideally use scripts ran locally or in remote CI pipelines to prevent broken releases. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Commit guidelines |
||||
# Commit Guidelines |
||||
|
||||
Automate the generation of your changelog by adopting a commit message guidelines that categorise and define the changes being made. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Pr templates |
||||
# Pull Request Templates |
||||
|
||||
Create pull request templates that outline the change being proposed to facilitate productive discussions. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Contribution guidelines |
||||
# Contribution Guidelines |
||||
|
||||
Define the process of contributing to the code of the design system. Document everything in a discoverable place to make it easier for everyone to contribute. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Development |
||||
# Development |
||||
|
||||
One of the main challenges in developing a design system isn’t building the components. It’s making your code stable, easy to read and contribute to. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Design editor |
||||
# Design Editor |
||||
|
||||
There are many design editors available in the market today with the most popular names being Sketch, Figma and Adobe XD. If you're unsure which route to go down it's often best to speak with your team. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Plugins |
||||
# Plugins |
||||
|
||||
Most popular Design Editors (Sketch and Figma, especially) come with third-party plugin support. Whilst it's best to use the editors in-built tools for laying out your components, plugins can bring in a range of useful data to populate them. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Version control |
||||
# Version Control |
||||
|
||||
Having your design versioned with semantic versioning will allow you to easily align design with development, roll back faulty changes and release changes in code and design at the same time. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Contribution guidelines |
||||
# Contribution Guidelines |
||||
|
||||
Define the process of contributing to the UI and UX of the design system and document it in a discoverable place to make it easier for everyone to contribute. |
||||
|
||||
@ -1 +1,4 @@ |
||||
# Design |
||||
# Design |
||||
|
||||
The UI and UX in a design system need to be tied to development as much as possible. The tools in this checklist should help designers and developers work better together. |
||||
|
||||
|
||||
@ -1 +1,4 @@ |
||||
# Tooling |
||||
# Tooling |
||||
|
||||
To make things efficient for anyone using your design system, make tooling essential. Find the workflows where you can integrate things with the tools people use. This helps organically spread your design system and make it crucial to people’s daily work. |
||||
|
||||
|
||||
@ -1 +1,3 @@ |
||||
# Ticketing |
||||
# Ticketing |
||||
|
||||
Make it easier to track your day-to-day progress by using ticketing software like Jira, Trello or GitHub. This’ll make it easier for others to submit feature proposals or bug reports. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Milestones |
||||
# Milestones |
||||
|
||||
Define milestones that act as bigger epics in your project management with the help of your roadmap. These will help you understand your progress. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Roadmap |
||||
# Roadmap |
||||
|
||||
Setting your short and long term vision and mapping things out helps you decide the steps to take, understand your place in the bigger picture and prioritise day-to-day tasks. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Task management |
||||
# Task Management |
||||
|
||||
Solid task management and workflows are a crucial step in executing any project. Adopting a methodology like Agile or Kanban helps you cover a lot of ground. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Community meetings |
||||
# Community Meetings |
||||
|
||||
Arrange community meetings with everyone who uses the design system. Share your knowledge and make proposals to improve the sense of community. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Communication channel |
||||
# Communication Channel |
||||
|
||||
Most product development work happens digitally, so create a digital channel where people can reach out and ask questions. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Open hours |
||||
# Open Hours |
||||
|
||||
Create open hours in which you can engage your audience in a more private setting where you can discuss things in more detail. You can also use these as peer coding or peer design opportunities. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Faqs |
||||
# FAQs |
||||
|
||||
To save everyone time, define which questions are asked frequently by your audience and document them in a discoverable place. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Communications |
||||
# Communications |
||||
|
||||
Your users play a great role in shaping your design system. Creating communication channels where they can raise their voices helps you keep track of how they’re using your system. It’ll also improve their sense of ownership and the adoption of your system. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Component analytics |
||||
# Component Analytics |
||||
|
||||
Track the usage of your components. For development you can use built-in tools like Figma’s Design System Analytics. For the end product you can have a separate way of tracking per platform depending on the technology. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Error logging |
||||
# Error Logging |
||||
|
||||
Implement a way to track and pinpoint component-related outages in your product. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Tooling analytics |
||||
# Tooling Analytics |
||||
|
||||
Track what tools are being used for your design system. Find out which ones are used the most and which features are the most popular. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Service and health metrics |
||||
# Service and Health Metrics |
||||
|
||||
Define service and health metrics for your design system to set a benchmark on how well you’re doing. Common examples can be the number of tickets closed, improvements made or bugs fixed. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Analytics |
||||
# Analytics |
||||
|
||||
Data isn’t the only driving factor when it comes to the development of design systems. Keeping a sharp eye on how your system’s used in the development process and the end product can inform your go-forward strategy. |
||||
|
||||
@ -1 +1,3 @@ |
||||
# Project management |
||||
# Project Management |
||||
|
||||
Design systems are no different than any other project your team might take on. In order to successfully build and maintain one, you need a clear strategy that’s well executed daily, and you‘ll need to create opportunities for your colleagues to give feedback to help share your design system together. |
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue