Design Systems by Alla Kholmatova

[Hanastevenson]

The Design System team will be reading the following book over the course of a number of weeks.
This discussion is to add notes and learnings from team members.

Resources/Instructions

There is a kindle option to buy.
Hard cover book
There is also an online version from Smashing Magazine.

[AdesinaBernard]

Chapter 1 of the book discusses a design system in the context of the purpose of a project, the shared practices and how the design patterns communicates with the end users. The author laid emphasis on the importance of having a shared language for design pattern while sharing a brief history design patterns and how it is used in other industries.

In summary, the idea of design patterns as a shared language is only useful when the stakeholders have a common knowledge on the purpose and goal of the project itself.

[rcurtis2]

Chapter 1
Emphasizes that there is no shared design system only "shared practices"

• Practices are how we choose to create/capture/share patterns (user flows, interactions, buttons, icons, colors, type, etc.)

Topics also center around a shared language to quote the author
"_Having a shared language would mean that we have the same approach to naming interface elements and defining design patterns, or that the same names are used in design files and front-end architecture."

• This must exist across all stakeholders AND userss

What makes an effective DS
"Measured by how well its different parts work together"

• A shared purpose
  • Design approach should be mirrored in the front-end architecture, with design patterns following DS guiding principles

[winoue90]

Chapter 1 drives in why a design system needs to be much more than a pattern library. Even with a robust pattern library, without the proper understanding, it can be put together to create bad design. Even with shared language amongst the teams, there is no guarantee that there are no deviations in interpretation or use.

A proper design system should be a culmination of mutual understanding of shared language and practice across all stakeholder and users, serving as a universal glossary or guideline of sorts. This principle mirrors HfLA's need for a design system that can serve as a foundation for all the diverse projects, even if the design system is not an all encompassing library of the components used in all the projects. This point also enforces the need for clear and concise documentation to foster not only a shared language but a mutual understanding of how it should be used and why.

[hdchangie]

In Chapter 1, Design system, it provides key parameters to define what design systems consists of and factors to consider when designing a system to work for a product. Design systems refer to a set of interconnected patterns and shared practices to achieve certain purpose of digital products (p. 18). What is interesting here, which is also easily missed in our perception, is the shared practice of how we choose to create what, and how we use these shared patterns to work as a team. It is not only useful for teammembers designing the product but also for users who can predict what is going to happen and thus encourage users to have a sense of achievement and control.

What really inspires me is how the effectiveness of a design system is related largely with the overarching goal and purpose of a product. With actionable, coherent and shared components and practices in a design system, a product can effectively ahcive the advocated goal for users. Thus, is it nice to keep the goal of the prouct in mind when designing and implementing design system in everyday practice, rather than using a design system merely because they are there.

[alenayaovich]

Key takeaways from Alla Kholmatova book Design Systems:

"Design system- connected patterns and shared practices, coherently organized together."
and "Pattern- recurring, reusable solutions that can be applied to solve design problems."

The main blocks of a successful design system:

• shared language
• pattern library
• palance between "cost-effectiveness in the design process, and efficiency and satisfaction of the user experience in relation to the product’s purpose"

Kholmatova also emphasizes two main patterns and their differences:

1. Functional Patterns - can be described as concrete modules, or all about behaviors such as buttons, headers, form elements, and their actions. ( concrete, actionable)
2. Perceptual Patterns- these are descriptive patterns such as typography, color choices, spacing, and layout.

However, in order to create either we should also remember that " The purpose of the product shapes the design patterns it adopts."

These are some of the main ideas that I took away from Chapter 1. Please, let me know if you discovered any other interesting concepts or ideas in the Kholmatova text.

[rosaliechung]

Chapter 1 begins to define the elements of a design system as well as explain its importance to the development of a product line. In essence, a design system provides the product team with an agreed-upon set of visual patterns and practices that designate how or when those patterns are to be used. The purpose of a design system is to develop a shared language and understanding across cross-functional roles on the team that will lead to greater efficiency in the development of the product. Furthermore, in having this system, the team can focus more on the aspects of the product that users would most benefit from rather than arguing over how something should look, as this has already been determined.

One key take-away from this chapter was that design systems for a product line are often shaped by the branding. In other words, how we plan on marketing a product can shape the design decisions and interface. The example at the end of the chapter was especially helpful in demonstrating the role of branding in helping the product team make decisions about how to focus the development of their product.

[kmedhi]

Chapter 1 takes a deep dive into explaining the fundamentals behind what design systems mean. The author puts in all the effort to explain several complex concepts coherently with examples and guides the path for the readers to create an efficient design system. The author explores the various components that are behind the creation of a judicious design system and additionally, help the team members by guiding them to work on it to help generate better user experiences.

[kelenelee]

A design system is a series of patterns that synergize to make a product/service functional for users and product builders. It is a language that communicates utility as well as tone.

The builders of a product use a pattern library to improve the design system over time.

A good design system should support the user's needs and tasks.

[cunninghamej]

I enjoyed the focus on both patterns and practices in this chapter on design systems. Practices entail not only documenting how patterns can or should be used, but also collaboration in terms of thinking about products/services and how they should be conveyed to and ultimately used by people.

The collaborations and conversations that contextualize design systems and help to build a shared, common language are processes that I am intrigued with and interested in engaging more and more.

[tamalatrinh]

Design systems is made up of various patterns that include:

• Functional patterns - represented as the concrete modules of the interface, such as a button, a header, a form element, a menu.
• Perceptual patterns - color, typography, etc helps with branding and ethos of product CSS
• Platform specific patterns - Android vs iOS? Web vs app?

As well as User flows + domain-oriented design patterns. Lots of patterns!
A pattern is a recurring, reusable solution that can be applied to solve a design problem. How the team chooses to use them will influence/shape the product.

Dan Mall noted that one of the main goals of a design system is “extending creative direction.”
If you need a group of people to follow a creative direction consistently patterns need to be articulated and shared. People must also know why and how to use a button, in what contexts, and the purpose a button can serve. The stronger this shared knowledge is, the higher the chances that it will be used appropriately.

A lot to wrap my brain around, but I think the idea is to be as concise as possible (through documentation + shared language), make sure everyone is on the same page about design elements so that when the product grows it does so smoothly (elements are transferable and not have to be made from scratch) and stays cohesive.

[sandraberjan]

Guiding Principles for Making Decisions About Patterns, Practices, Language

Design Systems are made up of three major categories:

1. patterns
2. practices
3. language

1 + 2: Patterns and Practices
To me, a design system is an attempt to understand how a large number of patterns/practices work together and an attempt to create some structure so that these patterns/practices are more intentional and consistent.
For example: I imagine a design team where a researcher uses Miro, a designer uses Figma, and a UX writer creates Google docs. The PM asks for everything to be backed up in something like Dropbox. This team probably works fine together, and they have some kind of workflow they are used to. It's a kind of design system, but it's not efficient. They should make a few intentional decisions about their practices, tools used etc. so that it's possible to scale or to introduce new members to the team easily.

3 Language
The language aspect is crucial because we need to define the words we are using to describe things so that they always mean the same thing. Different people will describe things differently. If we decide on which words refer to which things and use those words, communication becomes smooth and clear.
For example: what is a sequence versus a flow? User map or journey or story? Click or tap or select?

Guiding Principles: How the Above Is Decided
The most overarching concept, however, is a set of guiding principles to use in order to make decisions.
A design systems does not proscribe practices as an authority. It guides people on how to decide on which practice to use based on these principles. That, to me, is the true meaning of the single source of truth.

[hannahcarlan]

The key to effective design systems is not only having a shared language-- a "design vocabulary"--but also having a shared use of language. "The words we choose will influence how the team thinks, and indirectly, they will shape the design." Furthermore, if the team's underlying vocabulary and model doesn't match the user's, there will be design challenges. This is why user-focused design is so important.

It seems that what DS is working on is designing a "functional pattern" for synergy in HfLA documentation and workflow. Still, even the best design pattern can be useless if it's out of sync with designer practices or user needs. In designing a cross-team Figma template, whose needs are we addressing, and how? Who is defining those needs, and for whom? Even if the DS team produces a seamless template with clear language and purpose, users may struggle to use it if it doesn't align with their practices and needs.

[kangina-tech]

Introduction to Design Systems
The choice of design systems is greatly influenced by the platform in which the idea is to take shape, the functionality of the tool being created and the perceptual patterns (which is the greatest differentiator of them) that will be used uniformly across all selected platforms.

Design Patterns
Interestingly, architectures seem to be at the forefront of Design System making.
A design pattern is something that should be intuitive to the user, i.e., it should be easy for the user to understand. In most cases, it should be something that an ordinary person can recreate because it is simple in its inherent nature.
The thing that differentiates a product from its competitors is not how the the design pattern is different but how the pattern is applied and executed and how the interconnect to achieve a design purpose.
Do we meander the design system process not truly knowing what the language is? Despite being intuite and having a sort of creative license to just be, we must try and articulate it as best we can to create a form of togetherness and understanding with the people who are working in the same thing.

• front-end dev note Functional patterns are HTML types and perceptual patterns are ordinarily CSS . (Does this make JS also perceptual?)

Shared Language
It is the design langauge that unites the designers, researcher and developers to work in tandem and to avoid needless confusion. (What is our shared langauge and how can I get in on it ASAP?)
Don't only share a word - share a description of the word so that everyone is on the same page.

Pattern Libraries and Their Limitations
The design system also has techniques and practices for creating, capturing, sharing and evolving patterns. A pattern library is therefore a tool used to collect, store and share design patterns while also giving the principles and guidelines on how to use them.

• Sometimes thought to be interchangeable with design systems.
• Doesn't guarantee a cohesive and consistent design.
• Will never fix bad design.
• Associated with better collaboration yet you might only have so few people ever using it.
• Blamed for stifling creativety because, if we are being honest, a mostly static space does not allow room for improvement so maybe people are right about this one.
• Just a collection of modules on the web until they are needed to bring to focus a design system.

An Effective Design System
The effectiveness can be measured by how well differene parts work together to help achieve the purpose of the product.

1. Shared Purpose - the southern water tribe failed because they were not in contact with the northern water tribe. When they linked up, things got better and they got saved and got to share some of their last remaining customs. Design systems should do that.
2. Identifying problems - we are sad, we want to go shopping but we also know we need to see a therapist. How do we comabt these two things? Embrace each one for what they would bring, how they would fix the issue at hand then take the steps necessary for happiness.
3. Purpose and value - You are the avatar. Your purpose is to stop the fire lord but your value is to not truly end him. So, you end up spirit bending his bending away and you save the people from the fire lord hence maintaining both purpose and value of the project you'd sent forth for.
4. Design principle - Make sure everyone knowns what is the main objective of the design process. Might not be official but it is the thing that will keep everyone in check with what is being created.
5. Behaviours and functional patterns - What is it that you want your users to do in the end?
6. Aesthetics and perceptual patterns - Are you cottagecore or are you a dark academia? When someone looks at the style, are they able to see you in it properly?
7. Shared language - Are you establishing the way someone might percieve you from talk? We might start off informally but we shall establish a way of communicating with one another that is comfortable and maybe even intimate in that business kind of way.

[rachelita2]

Design systems - patterns and practices that are shared and help achieve purpose of digital products (18)

"ethos of a product/brand... also forms patterns, which affect how a product is perceived" (20)

Idea of design patterns comes from architect Christopher Alexander, who argued that patterns determine how welcoming or uncomfortable a space is

Pattern is a "recurring, reusable solution that can be applied to solve a design problem" (22)

Design language emerges through collective work on a project, and once it's established, you can focus more on the user experience and less on the patterns themselves

Functional patterns are the "concrete modules of the interface," things like buttons, while perceptual patterns are the "descriptive styles that express and communicate the personality of the project visually," things like color, shapes, animations (27)

Importance of design language being shared so teams can work together. Language use must also be shared.

Does the design language affect the goals of the project?

Example of cooking website shows all the elements of design language that need to be shared in order for site to be more effective (achieve user goals, etc)

[rsschacht]

Chapter 1
What makes a product distinct is how the patterns it uses are executed and applied to the design purpose, not how new the patterns are

Patterns need to be articulated and shared - this makes them actionable and reproducible

Visual loudness guide: https://www.viget.com/articles/visual-loudness/ << tools like these help designers look at aspects of design through another lens. In the case of the loudness guide, items that we don't normally consider "loud" are said to have qualities that normally are used to describe sound

Before you spend hours designing a dropdown (or anything), first schedule meetings with domain experts to find out if a dropdown is needed in the first place. Understand the purpose behind what you're doing before doing it

Perceptual patterns are usually CSS properties - they shift the style of the object and not the object itself

How the patterns are evolved, shared, connected and used also matter

——

We also need a shared language among teams for a design system to function

Establish it before you think about interfaces - lay a solid foundation

We need a shared use of language because people need to know why and how to use something, in what context, and the purpose

Bridges the gap between the system image and the assumed user model

Be consistent! Don't flip around between styles or standards. Once you have a shared language, speak in that language

---

Pattern Libraries

A tool to collect, store and share your design patterns and the principles/guidelines for how to use them

Standardize things such as logo treatments, corporate values and brand styles, typography, color palettes

Make it something that's live and undateable (not a static PDF) so that you can continue to evolve it over time

It's more than a static reference document, it should help to create an interface

A good pattern library should make experimenting easier, not stile creativity