Review of the terms using around design systems.

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

11. Concept key points

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, Lafreniè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

18. Patterns
18
Components
Typography
Colors
Motions
Tone
of
voice
Editorial

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.

21. Component libraries
Pattern
Libraries
21
Patterns
Components
Typography
Colors
Motions
Tone of
voice
Editorial

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

24. 24
Component libraries
Pattern
Libraries
Patterns
Components
Typography
Colors
Motions
Tone of
voice
Editorial
Styleguides

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
▪ Åsa Granlund, Daniel Lafreniè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