Design Patterns are some of the most over-used concepts in design today. And we all know what happens when you have some ideas all over the place. We start repeating them like parrots and applying them to everything, therefore distorting their meaning. We end up missing the point with over-complicated concepts and lots of fancy words. So here is my humble attempt to bring more clarity to what design patterns are while applying something I live for: Always keep it simple!

Keep it Simple

In my article ‘Understanding the parts of a Design System’ I touch-pointed on patterns with a more ‘neutral’ definition:

Patterns consist of a reusable collection of components that can be defined by their respective interactions when solving a design problem. These need to be adopted and documented as business cases and together build a consistent and robust ecosystem.

As mentioned in that same article, and based on this definition we can define 3 key metrics that help us identify and validate what a pattern is:

  1. A pattern is a solution to a common design problem, always linked to a business case.
  2. A pattern is reusable by nature and always linked to components and other pieces of a design system.
  3. A pattern must be documented and provide guidelines about how the problem was solved by the product team.

Paradoxically, in this case, a simple enough definition alone could lead to multiple interpretations and cherry-picking when applying patterns. So how can we explain it better while keeping it simple? The solution I have found is to give a more specific format to this definition. This will help us preserve its simplicity while enabling design systems teams to be on the same page when working with patterns.

Think of Patterns as Stories

We, humans come from the factory with a strong need to believe in stories in order to cooperate effectively. In the tech world, these stories are translated into values and rules that define who we are and how we work. From companies values to systems structures, the stories are there to guide us and give us meaning. Now, apply this to patterns.

A pattern is a story about how a common problem was solved and what we can learn from it.

Like with every story, there is a narrative structure. It starts with an introduction and the development of the plot and characters, followed by a climax, falling action and a final resolution or conclusion. A lesson learned.

Image for post

The narrative structure

At first, this might seem like something hard to connect with how we define patterns or design systems in general. But if we look closer, we can see how a story gives us not only a format we -humans- love and find easy to digest, it also gives us the structure we need to define, organise and maintain patterns.

#storytelling #design-patterns #product-design #design-systems #ux-design

Patterns: The Stories of our Design Systems
1.70 GEEK