Design Systems
- http://bradfrost.com/blog/post/conducting-an-interface-inventory/
- http://bradfrost.com/blog/post/interface-inventory/
- https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969
- https://addconf.com/2019/schedule/consistency-is-key
- https://www.designsystems.com
- https://www.invisionapp.com/inside-design/guide-to-design-systems/
- https://www.designbetter.co/design-systems-handbook/putting-design-system-practice
- https://askplaybook.com/collection/build-a-design-system
- https://medium.com/boomhaus/design-systems-style-guides-all-those-libraries-what-the-hell-is-the-difference-4c2741193fdc
- https://medium.freecodecamp.org/how-to-build-a-design-system-with-a-small-team-53a3276d44ac
- https://medium.com/@wereheavyweight/how-were-using-component-based-design-5f9e3176babb
- https://medium.com/patricknlewis/design-language-system-23223dd86b54
- https://medium.com/tap-to-dismiss
- https://medium.com/tap-to-dismiss/design-quality-components-a86ec8691fd2
- https://mattgemmell.com/api-design/
- https://medium.com/@nathanacurtis
- https://www.writethedocs.org/guide/writing/style-guides/
- https://www.writethedocs.org/guide/
- https://designsystemsrepo.com/
- https://xd.adobe.com/ideas/principles/design-systems/five-common-design-system-pain-points-how-to-solve-them/
-
Lyft's Quality Component Design Checklist - https://docs.google.com/document/d/1N3li_DZJmdScKkGW1b9JKgDC-ejPpQYbYd1g1e9W6Ig/edit
- https://docsify.js.org/#/
- https://zeroheight.com/landing
- https://www.mkdocs.org/
- https://docs.gitbook.com/
- http://atomicdesign.bradfrost.com/chapter-5/
- https://medium.com/eightshapes-llc/documenting-components-9fe59b80c015
- https://github.com/daneden/design-systems-office-hours-playbook
Building a Mobile Design System - Kristina Fox, TrySwift Tokyo 2019 https://www.youtube.com/watch?time_continue=1&v=Fvq8PQKJj_k
Style guide is a set of rules which defines the basics. You can find colors here, typography, brand, icons, etc. You can even find a grid here. This is the most abstract part of UI. Component library is storage for your components — articles, headers, galleries and many more. Each component is categorized, well-documented and responsive. Components aren't dependent on each other, but you are able to merge them together. A design system combines connects the two parts together and it defines how you can combine it all together. A design system is a series of visual style and different sized components (or molecules) that can be reused in different combinations to create larger components, it allows for managing design at scale.
- Helps to unify the look and feel of the app
- Improves the consistency of flows in the app
- Reduces development time which in turn allows for faster shipping.
- Encourages code re-use
- Improves scalability
- Less UI Bugs?
- Build brand familiarity with users
- Makes it easier for them to understand and navigate flows
- Create documentation for the design system.
- Staying in sync - changes to the design system should be communicated with engineers.
- Build a working relationship between design and engineers
- Define a set of Font and Colours.
- UI controls
- Custom UI & View components e.g Buttons, Cells