
Connect with me:
Photoshop designs are a perfect way of showing your client what their website will never look like.
Design is about solving problems
A pattern library is a collection of reusable components, tools and techniques that allow you to quickly build what you need, without reinventing the wheel.
Patterns are agreements. A shared vocabulary to help all stakeholders to speak the same language.
A Pattern Language
by Christopher Alexander
At the core of A Pattern Language is the philosophy that in designing their environments people always rely on certain 'languages', which, like the languages we speak, allow them to articulate and communicate an infinite variety of designs within a formal system which gives them coherence.
This book provides a language of this kind. It will enable making a design for almost any kind of building, or any part of the built environment. Patterns, the units of this language, are answers to design problems: how high should a window sill be? How many stories should a building have? How much space in a neighborhood should be devoted to grass and trees?
More than 250 of the patterns in this language are outlined, each consisting of a problem statement, a discussion of the problem with an illustration, and a solution. As the authors say in their introduction, many of the patterns are archetypal, so deeply rooted in the nature of things that it seems likely that they will be a part of human nature and human action as much in five hundred years as they are today.


British magazine Car said "the idea heralds a return to basic principles of mass production in an industry where over the last 100 years, complexity has spiralled out of control. By creating a standardised, interchangeable set of parts from which to build a variety of cars, the company plans to cut the time taken to build a car by 30%."
The car weblog Jalopnik said "The biggest feature is the uniform position of all motors and transmissions" and that "by fitting all motors into the same place the company hopes to cut down on engineering costs and weight/complexity when porting the car over to other models." Around 60% of the development costs occur between gas pedal and front wheels, including the engine.
Tiny Bootstraps for every client
Pattern libraries are not just for front-end
Tone of voice
- How to interact with users at different points in your platform
- Mailchimp example: https://styleguide.mailchimp.com/voice-and-tone/
Behavioral
- Confirmation bias
- People choosing the middle option
- Clients always wanting to add a twist of their own
- Wisdom of crouds
- More here: http://ui-patterns.com/patterns
Farming (Permaculture)
- Highest use
- Plant guilds
- Working with heat and water
Tips for creating a pattern library
Yeah. Don't do it!
But if you must:
- Get everyone involved first
- Define a set of guiding principles
- Stick to widely accepted conventions
- Think about mobile from the start
- Design for highest use
- Write down all your decisions
- Finish what you start
More resources
Learn from the many existing libraries out there:
If you don't really know where to begin, just start with PatternLab.
Learning how to look for patterns
By now you might be thinking: dude, get to the point!
There is no point.
Patterns are infinite.
Roger Penrose




Why use a pattern library?
It's important to note that most of these effects are only valid in the long run.
Time saving
- Faster prototyping and development
- Less fiddling with CSS
- Less testing (cross-browser in particular)
- Less maintenance
Predictable
- Better testing (unit tests, visual regression tests)
- Maintain an entire platform from a relatively small core
- Lower load on support
- Higher consistency throughout your product / brand
Higher return on investment
- Reuse as much as you like, at the same cost
- Scale in ways that would not have been possible otherwise
And why not?
- You have to invest a lot of time and resources
- If you screw up, you screw up big
- Hard to get everyone on board
- Hard to maintain a library that's not connected to your backend
- Hard to create 1 central library in general, for all aspects of your platform