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.
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.
UXPorn by 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.
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.
Web and Mobile
I ♥ Wireframes
1200 wireframe examples but no UI design patterns. It’s a Flickr group for everyone who enjoys creating wireframes.
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.
Web Without Words
This is a gallery of popular websites, deconstructed by removing all words and images, abstracted into primitive wireframes. Pretty funky, no?
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.
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.
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.
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.
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.
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.
Google Image Search
Countless wireframe examples and UI design patterns, although patterns are harder to search for.
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.
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.
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.
Android App Patterns
1550 UI design patterns but no wireframes. Simply put, it’s design inspiration for your Android app.
Countless UI design patterns but no wireframe examples for Android, iPad, and iPhone.
Countless UI design patterns but no wireframes for iPhone and Android.
A showcase of wireframe examples for mobile apps.
You’ve Got Options!
If you value being able to take your wireframe examples and design pattern inspirations from top companies and directly adapting them to your needs, UXPorn by UXPin is probably your best option since you can import them directly. If you mainly need a broad array of inspirations, you’ve obviously got a lot of other options - we personally love Pttrns and UX Archive.