Design systems on the web
1 like400 views
The document outlines the key concepts of design systems, including their value and building blocks. It defines design systems as a methodology for designing products that includes objective design solutions implemented as reusable components, as well as abstract collaboration strategies and processes. The building blocks are categorized and include components, patterns, styleguides, pattern libraries, and component libraries. Their definitions and interconnections are described. The value of design systems is increased productivity and consistency for users, as well as reuse, communication of design, and ensured quality for teams.
![Types of Patterns by Alla Kholmatova
Functional patterns are the tangible building blocks of the interface.
Their purpose is to enable or encourage certain user behaviors.
- Kholmatova, 2017
Examples of perceptual patterns [...] include tone of voice,
typography, color palette, layouts, illustrations and iconography
styles, shapes and textures, spacing, imagery, interactions or
animations, and all the specific ways in which those elements are
combined and used in an interface.
- Kholmatova, 2017
17](https://image.slidesharecdn.com/presentaion-180320173007/85/Design-systems-on-the-web-17-320.jpg)
![[review] Design Systems
? Clearly articulated concept
? Outlined sub-concepts, their definitions and meaning
? Schema to demonstrate interconnections of the subclass
entities
? Value of each entity and of the concept itself
33](https://image.slidesharecdn.com/presentaion-180320173007/85/Design-systems-on-the-web-33-320.jpg)
Design systems on the web
- 1. Design Systems on the web Varvara Stepanova, 660644 LCA-1020 - Academic Communication for Master's Students Aalto University, 20.03.2018
- 2. Presentation Content ? Introduction ? Materials ? Concept key points ? Problems to solve ? Building blocks of design systems ? Concept structure ? Conclusion ? References 2
- 3. Introduction and goals Design systems and their vocabulary
- 4. Design Systemsis a name for systematic approach when providing and developing design solutions. 4
- 5. “A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.” - Fanguy, 2017 Definition for “design system” “A design system is a collection of reusable components to tie whole products together” - Baskanderi, 2018 5
- 6. “A design system is a set of interconnected patterns and shared practices coherently organized to achieve the purpose of digital products” - Kholmatova, 2017 Definition for “design system” “A design system is a comprehensive set of values, semantics, syntax and context that form the foundation of a shared design language.” - Grainer, 2017 6
- 7. “Focusing on vocabulary creates tribal knowledge and cognitive debt for newcomers. - Federman, 2017 7
- 8. Materials Material selection and methods
- 9. Presentation Content ? Academic literature No relevant sources by keyword “design system(s)”. A few articles selected by keywords “pattern library” and “style guide”. ? Non-academic sources Popular industry literature, professional books, slides of professional conferences. 9
- 10. Categorising and summarising ? Outlining the sub-concepts Building blocks of the design systems concept are taken from the sources and grouped by their meaning. ? Concept systematic view The outlined blocks are categorised by their interconnections. ? Unified terms The blocks are given most relevant names. 10
- 12. 12 Source: Jan Toman, 2018 https://product-unicorn.com/design-systems-style-guides-all-those-libraries-what-the-hell-is-the-difference-4c2741193fdc
- 13. 13 Source: Nate Baldwin, 2016 https://blog.producthive.org/anatomy-of-a-design-system-7a6b0677bf5
- 14. 14 Source: Zack Rutherford, 2017 https://publication.design.systems/distilling-how-we-think-about-design-systems-b26432eefef9
- 15. Component - portion of reusable code, serving as building blocks for the application interface. Suarez, Anne, Sylor-Miller, Mounter, and Stanfield, 2017 - encapsulates a standalone entity that is meaningful on its own. They can be nested and interact with each other, but semantically they remain equal. 15
- 16. Pattern - describe generic solutions to common problems in context. It is a formalized description of a proven concept that expresses non-trivial solutions to a UI design problem. Granlund, Lafrenie?re and Carr, 2001 16
- 17. Types of Patterns by Alla Kholmatova Functional patterns are the tangible building blocks of the interface. Their purpose is to enable or encourage certain user behaviors. - Kholmatova, 2017 Examples of perceptual patterns [...] include tone of voice, typography, color palette, layouts, illustrations and iconography styles, shapes and textures, spacing, imagery, interactions or animations, and all the specific ways in which those elements are combined and used in an interface. - Kholmatova, 2017 17
- 19. Pattern library — different definitions - a collection of front-end code that creates a component part of the overall design of the page. Robson, 2016 - an organized set of related, reusable components, often containing code examples, design guidelines, and use cases. Grainer, 2017 19
- 20. (UI) Component library - a library of reusable components (in the design-systems context) 20 Pattern library - a library of design solutions. Some of them can be implemented as components, other are communicated through documentation.
- 22. Styleguide - a physical or digital document that represents the styles, patterns, practices, and principles of a design system and teaches how to use it. Grainer, 2017 - a form of standard that assist in managing the development process, including addressing inconsistency. Simpson, 1999 22
- 23. Styleguide - a “subclass of design systems” (Rutherford, 2017) providing documentation for the design decisions and their possible implementations, defines “use cases for patterns, correct typographics scales” (Rutherford, 2017), articulates “principles of a design system and teaches how to use it” (Grainer, 2017). 23
- 25. Design system - is more then just ui styles guides is also the way the team works and what are the team values & principles. Lopes, 2017 - a methodology?—?like how the Agile Manifesto transformed the development process, a design system is the methods by which you design products. Federman, 2017 25
- 26. Design system - is “the methods by which you design products” (Federman, 2017). This includes “objective aspects” such as specific design solutions implemented as components, and documented patterns which communicate decisions and reasoning behind the solutions. Other, “abstract aspects” contain strategies of effective collaboration in multidisciplinary team and processes established for the project team activities. 26
- 27. Value of design systems Design systems help to produce more coherent interfaces faster and maintain them more easily with more reliable results. 27
- 28. Value of design systems ? Increases users’ productivity - ensures consistency of interfaces and coherency of design across whole application or a range of one-brand product. 28 from perspective of users
- 29. Value of design systems ? Sets up “lingua franca” - provides shared language for in-team, cross-teams and management-production communication. ? Defines clear processes 29 from managing perspective
- 30. Value of design systems ? Empowers code reuse - provides ready-made components to be used as building blocks for new interfaces. ? Communicates design 30 from developer perspective
- 31. Value of design systems ? Documents design solutions ? Ensures design coherency ? Gives tools for systematic design ? Ensures end quality of design implementation ? Makes possible to focus on solving business problems 31 from designer perspective
- 32. Conclusion
- 33. [review] Design Systems ? Clearly articulated concept ? Outlined sub-concepts, their definitions and meaning ? Schema to demonstrate interconnections of the subclass entities ? Value of each entity and of the concept itself 33
- 34. References 1/3 ? Naema Baskanderi (2018) How to build a design system with a small team https://medium.freecodecamp.org/how-to-build-a-design-system-with-a-small-team-53a3276d44ac ? Sarah Federman (2017) Distilling How We Think About Design Systems https://publication.design.systems/distilling-how-we-think-about-design-systems-b26432eefef9 ? Ste Grainer (2017) Design Systems, Style Guides, and Pattern Libraries: Oh My! https://uxcellence.com/2017/design-systems-style-guides-pattern-libraries ? A?sa Granlund, Daniel Lafrenie?re and David A. Carr (2001) A Pattern-Supported Approach to the User Interface Design Process Proceedings of HCI International 2001 9th International Conference on Human-Computer Interaction, August 5-10, 2001, New Orleans, USA 34
- 35. References 2/3 ? Marco Lopes (2017) Setup a design system https://blog.prototypr.io/design-system-ac88c6740f53 ? Stuart Robson (2016) Styleguides, Pattern Libraries and Design Languages https://medium.com/@sturobson/styleguides-pattern-libraries-and-design-languages-84746902c51c ? Zack Rutherford (2017) Design Systems vs. Pattern Libraries vs. Style Guides – What’s the Difference? https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/ ? Nichole Simpson (1999) Managing the use of style guides in an organisational setting: practical lessons in ensuring UI consistency Interacting with Computers 11 (1999) 323–351 35
- 36. References 3/3 ? Marco Suarez, Jina Anne, Katie Sylor-Miller, Diana Mounter, and Roy Stanfield (2017) Design Systems Handbook https://www.designbetter.co/design-systems-handbook 36
- 37. THANKS! Any questions? You can find me at: @varya_en varvara.stepanova@aalto.fi 37