How to Create a Pattern Library
May 10, 2017 Nikola Mihin

If you haven't had a chance, check out my previous post on the importance of a pattern library. 

Brands often have recognizable colors, fonts, logos and other visual elements that need to be followed. Often times standards are manually created in initial stages of brand development and serve as a base for creating visual elements of website and pattern library.


Pattern Library.png

Lonely Planet Pattern Library


In essence, a pattern library is a collection of design elements that repeat across the website. They could be as simple as colors, typography, and icons or more complex items composed of multiple elements like slideshows, navigation, cards, news blocks, etc. Whether they are simple or complex "Patterns" of the Pattern Library are both similar based on consistency. Consistency is an essential part of great user experience, read more about it in 8 Essential Parts of Great User Interfaces.


From a practical standpoint, reusability and maintainability are proportionally needed as the complexity of a website evolves. Developers need to follow coding standards regardless if they are seniors or just started yesterday.


So the next question is how are Pattern Libraries created? Or, even better, when are they created? The key to creating a great Pattern Library is starting early in parallel with website development. It's much harder to create pattern libraries later on when everything is already setup. In many cases, development stages involve a lot of different developers with different styles of writing code. Sorting dissimilar existing code into elements of the pattern library is much harder than the parallel development of pattern library in the initial stages while it's still being prototyped. There is an option to create the pattern library from scratch or use an existing dynamically generated libraries, available as open source. I personally use open source pattern libraries mostly because they have an option to dynamically generate patterns from code without much of a learning curve needed to use them. This is much easier to understand for all included in the development and maintenance of the code regardless of prior coding knowledge.


Often times pattern libraries represent functional specification on how the patterns work, not only how they look; what happens when the user clicks a button or link, how the slideshow will work on a tablet, whether or not models are displayed properly, etc.


The final conclusion is that pattern libraries should ideally be created in the prototyping phase of application or web development. Later on, it becomes much harder to put together components into an organized manner and developers can get used to writing code inside the pattern library standards, right from the start. It's always much better to start from the beginning and create an organized process of adding and modifying components of the web. Later on, this is much harder because we need to refactor code and implement maintenance and discipline of the pattern library for all included developers.

Nikola Mihin
UX / UI, Design