Hello I'm Jellybo

What are patterns?

According to the dictionary. Patterns are

  • a repeated decorative design: a neat blue herringbone pattern.
  • an arrangement or sequence regularly found in comparable objects or events: the house had been built on the usual pattern.
  • a regular and intelligible form or sequence discernible in certain actions or situations: a complicating factor is the change in working patterns.
  • a model or design used as a guide in needlework and other crafts.
  • a set of instructions to be followed in making a sewn or knitted item.
  • a wooden or metal model from which a mold is made for a casting.
  • an example for others to follow: he set the pattern for subsequent study.
  • a sample of cloth or wallpaper.

How do we define a pattern library? To truly understand the significance of pattern libraries it helps to know the origins of a pattern language. Christopher Alexander was an architect and coined many of the correlations we use today within the digital world.

He defined patterns in three ways

  • Patterns of Events
  • Patterns of Space
  • Patterns which are alive

Patterns of Events

“In order to define this quality in buildings and in towns, we must begin by understanding that every place is given its character by certain patterns of events that keep on happening there.”
Human events in digital space are influenced by the physical events and the Maslovian needs of every person in any given context.

The events that happen in our digital worlds can vary greatly. We read books, check the weather, order shoes or record videos. Some of these events may not even be entirely human driven and could be influenced by combinations of different events.

Now, what should be the most influential element in the digital space? Knowing our applications can be used for a variety of events, how do we apply the right tool at the right time?

This is something we need to keep in mind as we create experiences and events ourselves. The most important part is not the device from which the user accesses the digital space, or the application's appearance, but rather the events that happen around and within our digital spaces.

Humans tend to repeat their behaviours. Therefore, many of us form habits around these digital spaces and these patterns of events exist in this repetition. It may be checking email, social media, reading etc... We must willfully and consciously direct meaningful interaction because these events cannot be separated from the habits we form to support them. They have become part of our lives.

Patterns of Spaces

“These patterns of events are always interlocked with certain geometric patterns in the space. Indeed, as we shall see, each building and each town is ultimately made out of these patterns in space, and out of nothing else: they are the atoms and molecules from which a building or town is made.”

“Further, it is very puzzling to realize that the “elements,” which seem like elementary building blocks, keep varying, and are different every time that they occur.”

This has been a problem within architecture for centuries… and this was said in 1979. Windows, doors, rooftops all have variance on both form and function. Wow.

A website or application is made of many parts or elements. At their most basic they are made up of text, links, images, buttons, and forms. These elements exist in numerous combinations across the world. We, as a society across the time, have established some basic rules for how these should operate.

Each website and application is defined by the contextual relationships among elements. A form collects information, a link associates pages. It is the relationships of space that bring the elements together to begin to create a unified whole. These relationships of space become as essential as events to become part of them. Applications and websites are more than a superficial composite of parts.

Click me I’m a text link.

The text link does what?!

  • Scroll jacks me to somewhere else in the page
  • Launches a modal window
  • Takes me to a new webpage
  • Opens a new browser tab
  • Disappears after being tapped or clicked
The elements of an application or webpage don’t just have have relationships associated to them. The elements are the relationship. They are intrinsically tied to the events and space. Missing this connection renders an entire design system useless. It would be like driving down the road and having different meanings for colors on street lights at every intersection.

“Each one of these patterns is a morphological law, which establishes a set of relationships in space.”

The patterns that repeat within a digital space give the website or application its function. Leveraging relationships within an application allows for more nuanced and consistent qualities to inform the events that surround our digital space.

Consider the application or website as a place where people want to make themselves comfortable. By changing the rules of the space and events around them, the space is not psychologically comforting. In turn, it becomes a stressful point of struggle.

Imagine you need to use such gruesome application as a part of your daily job. You are forced to use it every single day and there is nothing you can do about it. It brings that discomfort to the outside and can influence those around you as well. Making what could be a pleasant or enjoyable experience to something far more caustic. It becomes an inner conflict that cannot be resolved.

Patterns Which Are Alive

“The more living patterns there are in a thing - a room, a building, or a town - the more it comes to life as an entirety, the more it glows, the more it has this self-maintaining fire, which is the quality without a name.”

A design system once created will collapse. Unless, it is created of patterns able to come to life and resolve for themselves. It is here that each pattern must aid and support other patterns and become a complete ecosystem.

Examples of digital ecosystems do exist. These are networks that have come to life over time surrounded by relationships of events and space. These are successful not because they are large companies but because they have maintained consistency of relationship patterns.

When looking at creating pattern libraries, take into consideration what the current functions are. What are the relationships around the tool they will use? Who, what, when and where? Will they be accessing their phone when they wake up or will it be sitting down in the library hunkered down ready to get work done?

When you build pattern libraries ask yourself what the relationship of each pattern is. Because just like architecture without a defined pattern language your design system will collapse.


I'm Rob Pitt, I help large companies and small businesses make money. I analyze, test and make designs backed by data that help them improve their user experience.