freeCodeCamp

3.0 KiB

Raw Blame History

title
Pattern Libraries

Pattern Libraries

A pattern library is a collection of reusable user interface design elements. Since these ui elements are reused multiple times in a website, web application, or software application, they impose structure through consistency. This makes the site or app easier to use.

A few common ui elements found in a pattern library are:

Menus
Buttons
Page Layouts
UI Animations
Forms

Benefits of Pattern Libraries

Paul Boag, from his blog Boagworld.com, explains the main reasons for creating a pattern library:

"A pattern library ensures a consistent user interface."
"A pattern library facilitates reusability."
"A pattern library makes maintenance easier."

Pattern Libraries vs. Design Systems vs. Style Guides

It's easy to confuse pattern libraries with design systems and style guides. This article by Zack Rutherford for UXPin clarifies the difference between the three:

• Design System – the complete set of design standards, documentation, and principles along with the toolkit (UI patterns and code components) to achieve those standards.

• Pattern Library – A subclass in the design system, this is the set of design patterns for use across a company.

• Style guide – Another subclass in the design system, this static documentation describes the design system itself: how products should look and feel, use cases for UI patterns, correct typographic scales, etc.