The Design Pattern & Wireframe Libraries Guide

In this article, Chris Bank of UXPin – The UX Design App details many of the top sources for finding wireframe examples, design patterns, templates, stencils, sketches, and other examples of web and mobile user interface designs for endless wireframing and prototyping inspiration.

According to Ralph Waldo Emerson, “(Design) is a journey, not a destination.” While he was originally referencing “life”, broadly defined, many of you might agree with me that design, broadly defined, is synonymous with life in many contexts.

The Design Pattern & Wireframe Libraries Guide

Recently, my team at UXPin scoured the web for the top web and mobile wireframe examples and pattern sources, and came up with a pretty exhaustive list we wanted to share. It’s my hope that they will help you immerse yourself in design more throughout life – to live design – and breathe life into your product designs – developing your purpose, planning or intent for the design of your next product.

Whether you’re just starting to wireframe or prototype or you’ve been doing it for years, you’ll hopefully find this useful for staying on top of mobile and web product design trends. Use them freely for finding inspiration, or kickstarting your actual work with examples that import directly into popular wireframing and prototyping tools like UXPin and Balsamiq.

Make sure you also read up on the newest UI Elements we discovered in Fresh UI Elements and Patterns For Web & Mobile, which should be useful as you browse the libraries below. We covered some of them in UXPin’s free Web Design Trends and Mobile Design Trends e-books as well.

Importable Libraries

UXPin

150 UI design patterns and wireframe examples – and growing. It’s a UX wireframe and patterns library that can be imported directly into the popular wireframing and prototyping tool, UXPin. For an increasing number of the UX patterns, there’s a matching wireframe example to get you started in UXPin or use it for inspiration elsewhere – your choice.

Cover Wire Frame from Flipboard

Estimote UI Design

City Guides National Geographic Wireframe

Mockups To Go

100 wireframe examples, but no UI design patterns and no longer growing and relatively outdated. It’s a user-contributed collection of UI components and wireframe examples built using Balsamiq Mockups. Some of the mockups are full web pages. These are downloadable mockups that you can use as a starting point for your own designs in Balsamiq Mockups.

Mockups To Go

Mockups To Go

Standalone Libraries

Web and Mobile

I ♥ Wireframes

1200 wireframe examples but no UI design patterns. It’s a Flickr group for everyone who enjoys creating wireframes.

I ♥ Wireframes

I ♥ Wireframes

Wireframe Showcase

Countless wireframe examples but no UI design patterns and no easy way to search archives – still very helpful if you have the time. It’s a user-submitted blog of wireframes, juxtaposed with final executed site designs, with commentary. It contains wireframe examples in all their variety, from photos of paper prototypes in the workplace, to annotated screenshots describing the design process.

Wireframe Showcase

Wireframe Showcase

Web Without Words

This is a gallery of popular websites, deconstructed by removing all words and images, abstracted into primitive wireframes. Pretty funky, no?

Web Without Words

Web Without Words

Wireframes Magazine

Countless wireframe examples but no UI design patterns and no easy way to search archives. It’s not a design pattern or wireframe example library, but does have a great amount of examples. Wireframes Magazine is run by Jakub Linowski, an interaction designer from Toronto.

Wireframes Magazine

Wireframes Magazine

Patterntap by Zurb

5500 UI design patterns but no wireframe examples. It’s a collection of specific designs and patterns of user interaction, a living classroom where designers learn what is working well on the Web and why. It allows designers to find inspiration and influence from the world around them since they don’t design in a vacuum. Here, they can collect other designs besides their own – ones they love and others they hate – so they pick them apart to understand the techniques behind them, learning what works and doesn’t work.

Patterntap

UX Archive

2000 UI design patterns with a focus on flows, but no wireframes. It aims to help people create the best user experiences possible for their apps. In the creative process of shaping such an experience, designers need to explore what others have done to define what works, what doesn’t and to observe patterns that you should or shouldn’t integrate in your app. UX Archive helps designers in this process by laying out the most interesting user flows so you can compare them, build your point of view and be inspired.

UX Archive

Behance

Countless searchable UI design patterns and wireframe examples, but not a focused library like some of the ones mentioned above. It’s a leading online platform to showcase & discover creative work so you get a wide array of design work on it, mainly visual design. The creative world updates their work in one place to broadcast it widely and efficiently. Companies explore the work and access talent on a global scale.

Behance

Behance

Dribbble

Countless searchable UI design patterns and wireframe examples, but not a focused library like some of the ones mentioned above. What are you working on? It’s a community of designers answering that question each day. Web designers, graphic designers, illustrators, icon artists, typographers, logo designers, and other creative types share small screenshots (shots) that show their work, process, and current projects. Dribbble is a place to show and tell, promote, discover, and explore design.

Dribbble

Dribbble

Forrst by Zurb

Countless searchable UI design patterns and wireframe examples, but not a focused library like some of the ones mentioned above. It’s a community where designers and developers can share their work and get the feedback they need so you get a wide array of design work on it, mainly visual design. It’s maintained by ZURB, a product design company that helps companies design better web sites, services and online products.

Forrst

Forrst

Google Image Search

Countless wireframe examples and UI design patterns, although patterns are harder to search for.

Google Image Search

Google Image Search

Pinterest

Countless wireframe examples and UI design patterns, although patterns are harder to search for. As expected, this is a more pleasant experience than Googling the same things.

Pinterest

Pinterest

Web Only

UI Patterns

Many UI design patterns but no wireframes, and hasn’t been updated in a year or so. Unlike other design pattern libraries, it actually has descriptions of patterns, when they’re used, what problems they’re solving, and tips when designing these patterns. See this example of a gallery.

UI Patterns

Mobile Only

Pttrns

2500 UI design patterns but no wireframe examples. It’s a curated library of iPhone and iPad user interface patterns. All patterns has been carefully chosen before they were added to maintain excellent content quality. The site is currently doing almost 2 millions page views per month.

Pttrns

Android App Patterns

1550 UI design patterns but no wireframes. Simply put, it’s design inspiration for your Android app.

Android App Patterns

Inspired UI

Countless UI design patterns but no wireframe examples for Android, iPad, and iPhone.

Inspired UI

Mobile Patterns

Countless UI design patterns but no wireframes for iPhone and Android.

Mobile Patterns

MOObileFrames

A showcase of wireframe examples for mobile apps.

MOObileFrames