Video Screencast Help
Design@Symantec

The Importance of Pattern Libraries for Designers

Created: 30 Jan 2013 • Updated: 03 Jun 2014 • 1 comment
Erin Eng's picture
+4 4 Votes
Login to vote

Does your company, startup, or agency have a patterns library? ‘No, not yet’ you're thinking to yourself?! Well, a pattern library is a resource for your team/company that can contain design patterns, HTML & CSS, usage scenarios, images, sample links, and more.

When building a design pattern library, it's surprising how much work it requires to build a library and maintain it. Within Symantec's Corporate Design Group, we spent several months gathering requirements, compiling, and putting together a design library which houses various items necessary for consistency, collaboration, and efficiency within a large organization with cross-functional teams. It's a powerful resource an entire team can use to efficiently create consistent user experiences for your website. It cuts-out repetitive design work allowing teams to focus on creating new user experiences, and it creates a common UI language for a team, reducing communication issues and keeping everyone on the same page.

Our design library includes elements such as:

  • Page templates
  • UI Elements
  • Color Palette
  • Iconography
  • Imagery Information
  • Code Snippets to various elements
  • Mobile specific information

The library has helped us to organize all of the essential elements of our website redesign into one central repository where related groups can pull information that is crucial to their work. As a result, miscommunication and misinterpretation of site elements are limited and design information is accessible to all. Some of the reasons why a library is worth the investment are:

Evolution:  A great pattern or component library helps your website evolve. The nature of components is such that if you make a change to one component, it is updated across all instances in the product. This helps you respond quickly to customer needs and iteratively refine the user experience.
 
Consistency: A pattern library spreads consistency across your products. They say that the interface is the brand and creating an interface that is consistently good is critical to creating a great brand.
 
Efficiency: A pattern library gives designers and developers the building blocks to quickly build complex interactions. It also facilitates rapid prototyping of new ideas.
 
Vocabulary: A pattern library gives team members a shared understanding of the product’s primary elements, and it gets new team members up to speed quickly on how the product is built. 

 


Symantec.com Redesign Visual Design Library created in our Internal Wiki (Main Navigation)
 

In light of all the benefits, why doesn’t everyone have a pattern library? Two of the main factors that hamper the creation of a pattern library are lack of knowledge and lack of tools. Learning about patterns, components, and frameworks is pretty daunting, and there doesn’t seem to be solid consensus on what technology to use. In addition, if a pattern library is hard to maintain or hard to use, it won’t gain any traction. Updating the library with new patterns and modifying existing patterns have to be easy, because as soon as the library gets out of date or becomes cumbersome to use, it will be rendered useless. When done with intention and a plan for the future, it's a wonderful resource that your team can use to efficiently create consistent UX for your site! 
 

**********************

APPENDIX:

Below are three pattern libraries or resources that I recommend based on their popularity among designers as well as their ease of use. Pattern Libraries are popping up all over the place by independent designers just wanting to upload screenshots of what they find on a blog. They are a great untapped resource for the design  community. All designers know that they are influenced and inspired by what they see and the ideas they are exposed to. Hopefully visual designers, UI, and UX designers from all fields can learn from each other and push an already used idea to another level.
 

Pttrns.com contains mostly mobile screens from innovative and popular companies, categorized by typical use cases like commenting, notifications, or signup screens. I like it because it showcases some smaller startups, but with great design sense. Most screens are for apps and sites that were developed for mobile only first, so the concepts aren't contained by the desktop experience. Also, it's highly visual and simple to search for a specific area you are working on at the time. 
 


pttrns.com Pattern Library containing the latest mobile designs separated into typical categories.

Patterntap.com is reminiscent of a Pinterest-like design where you can see large thumbnails of the various designs. A platform search is prominently displayed in the top left corner allowing you to search for mobile, tablet, or desktop designs keeping in mind the ever changing device landscape. It's search functionality is better than the previous site because it allows you to search by 1) type tags 2) style tags 3) user tags, which is really helpful when you need to find something really specific to the project you're working on. It also has approx 4,000 screens which is about twice the size of the previous site but perhaps less focused. It also lends to more of a community vibe because of its commenting, hearing, and idea options. Other designers can find you, collaborate on work, and give positive feedback or critique on the work presented.  

 


patterntap.com Pattern Library with robust search functions; containing a wide variety of designs which can be searched by mobile, tablet or desktop sites. 

Last, but not least is patternry.com. It's a pattern library like the first two examples, but their founders went a step further and created a service for people looking for help building their own pattern library quickly and affordably. Patternry is a software which allows you to build and customize your own internal pattern library without having to build an entire foundation from the ground up. I personally have never had the need to use it, but it doesn't look like there're that many options except for free wordpress or blogging software to begin building a unique pattern library anywhere else. They're worth checking out!

 

patternry.com  a site that offers a free UI pattern library as well as provides the software to create and customize your own..good idea!

 

Comments 1 CommentJump to latest comment

Rich Lam's picture

http://pttrns.com/, is a great resource for mobile UI patterns.

0
Login to vote