Thinking in patterns

Designing with design patterns

Lately I've noticed two words running around everywhere - Design patterns.

Although we like to think of the mind as wild and chaotic. It recognizes patterns, divides into groups and plans in a generic manner. understanding that modular thinking is part of our nature, is another reason for developing pattern thinking methodology. Lately I've read a lot of articles on designing in patterns, so I wanted to make some sense of it. I will also use this to explain my own “pattern” work-process.

If you want to dig in and skip the theory Jump to “In practice” for my work-process.

So what do people even mean when they talk about “design patterns”?

The source of the term is based on Alexander Christopher’s use. Alexander realized that using patterns we can reorder chaotic, complex designs. He originally talked about architecture, but this also applies to a wide variety of subjects, including computing languages.

In short, no pattern is an isolated entity. Each pattern can exist in the world only to the extent that is supported by other patterns: the larger patterns in which it is embedded, the patterns of the same size that surround it, and the smaller patterns which are embedded in it.
Alexander Christopher

For example a wall being part of a group, making a room, which is part of the floor, part of a building, a street, a city and so on.

Reading this really clicked for me. because this synecdoche effect of mini elements effects the way we receive and build complex products like dashboards and websites.

Brand-book

Of course, the idea of guidelines and rules isn't new to the design field. The branding process uses the term “style-guide” to describe a brand “bible”. containing either a text definition of the brand, or meticulously defining each small visual aspects.

Is this just a design tool?

Nasa’s 1976 guideline

Hell no. In fact, one of the prominent examples for that is a book defining practical laws made by a government corporation you all know today as NASA. In 1976 “ Graphics Standards Manual” they specify every graphic element requiring to brand.

Why would NASA go trough all this trouble if this PDF just contains design languages? Because it concerns more then just brand aesthetics.

I believe the basis for making design rules of any kind is meant to prevent anti-pattern. An anti pattern is a dangerous case of chaos and arbitrary thinking within the product.

In NASA’s case it’s easier to explain, because every decision can cause a catastrophe, like the space launch crashes. the brand and graphic design shouldn't be any different from any other practical elements of the product. Today this is even more relevant now that a greater percent of the product itself could be digitally or graphically designed(like websites or apps).

Style-guide

So what about these digital products? their “brand book” is called style-guide because its more then just brand. the guide now consists of specifying parts of the website as well as the elements inside it. Here is medium’s style-guide as a good example.

Frontify lets you build a nice living styleguide

Just like the brand-book, this is not a designer’s exclusive tool. the digital product also now involves web developers who use these guides in a practical way.

In this article by Laura Kalbag, Laura defined a system called “design system” trying to cope with the fragmentation problem of website dev. later Brad Frost took these and rephrased his own dogma called “Atomic design”.

Inspired by the periodic table, Brad reorganized the “webpage” into components. then he put them in order to create a new thought process.

Basicly dividing the differnet pages components like “searchfield” or “navbar” to molecules. reminds you of something? thats right,a synecdoche just like Alexander Christopher.

Here’s a library of elements of “a list apart”: http://patterns.alistapart.com/

Datepicker design

This is what UX designers call ui patterns.

these two websites give many examples of ui patterns in mobile. These patterns are also a logic pattern that can be used as a product design point of view. for instance: a pattern for “on — boarding” users on mobile, or checkout in an e-commerce site. this modular way of thinking can actauly lead to a more creative way of thinking. for example you can switch try and use differnt patterns for differnt sections of the product. Daniel Mall gives a very bright example of this.

Design systems are important because developers are essentially creating and designing in av vacuum without it. Just like we designers know the rules and styleguides importance. This is even more important in project with large teams or agile workflow. here is an example of working with this principle in a big data project.

frameworks

such as bootstrap, are a developer’s infrastructure of the product. so natraly they contain all the rules and pattern for the product. this is also prominent in in mobile developing. seeing Google’s material guidelines or apples rules give developers a good solid pattern based design which contribute to faster development and later the user understanding.

This is also the case with modern web-dev products like Wix or webflow, and in the future can lead to the automation of this trade(at least to some extant).

Even Wordpress recently developed a new modular starter framework for developing themes.

Lately there are also many styleguide frameworks like Fabricator out there, which can help you define and build the patterns and components library.

Breaking the pattern

The big disadvantage of working in patterns?

To put it simply, patterns and models are a generic solution that doesn't provide flexibility or creativity. Think of your product as a car, How would you like it to look?

True, all cars look the same. they all have a wheel an engine and 4 wheels. That’s because the use case is the same, and we use it in the same way. So why are there luxury cars and collectibles ?

I guess I shouldn't write about it when so many good articles have been written about it already. like this quote:

The two worst things a designer can do are either uncritically accept the status quo, or flippantly renounce long-held traditions.
Eli Schiff

I am a very creative person so my use of rules and patterns is vital to create better products from my starting point.

Still the danger of overuse of patterns means you should ask yourself

Whats my goal? It involves not what product but what stage of the design are you at. The creative and brainstorming part cant be blocked by modular thinking. on the other hand somewhere along the line before development we may want to “get real” and think practically.


In practice

  • Are you a web developer? there are many new tools like “fabricator” out there to help create a living styleguide out of your code.
  • working with sketch?no problem, here is a great article on working in patterns with sketch.
  • Working with invision? Here’s a way of using their inspiration boards as a work process.
  • This article was written before Adobe XD & CRAFT were introduced, but both have some featured which supports modular work.

Designing in patterns via Photoshop

First of all I try to work using an existing grid or framework. I use guideguide to rapidly define preset grids. As I were saying, I believe the design system’s key is to understand it doesnt begin at the project inception. After the product’s first screen is designed, you can decipher and divide the page, and make another file — call it a styleguide. put in it all the components, patterns and styles you can.

libraries this tool allows me to identify and define patterns and styles and use them in the future in a similar manner. the prominent example is collecting the color pallatte and using it in the click of a button. This tool still has many issues, like needing to rename manually each text style you sample.

Renamy is a great tool for rapidly renaming a components to “button” “checkbox” or “Card” for examples.. This may seem small but theres a big difference between “button” and “rectangle copy 54".

Working with your own Ui kit doesnt mean you need any special tools, but just creating and combining it within your process is already a great improvement.

Designing in patterns via adobe illustrator

Besides all of the above written in Ps , which is relevant to illustrator(like libraries). Symbols help to unify and work with repeatble objects (like photoshop’s smart objects).

Another great thing about illustrator is the apperance and graphic styles usage which can be implemented rspidly.


See also

a frontend\designer collab tool for creating a styleguide — frontify.com

Craft by invisionlabs

more styleguides as inspiration — http://styleguides.io/

This is (by far) the best article you can read about this subject


Originally published in Hebrew at www.aniboaz.co.il (my Blog) March 3, 2016.