ui patterns variety

In a previous post we explained the power UI patterns and distinguished these patterns from design language systems, and design principles. Here, we identify patterns libraries and resources to get you started on the path to consistent design across your products.

Five UI Pattern Collections and Libraries

UI Patterns

While UI Patterns may not be the most aesthetically pleasing site on the Internet, we can’t deny its usefulness. The website’s design is easy-to-navigate and makes finding and grouping patterns a breeze. Decide something looks useful? Adding it to a group of other patterns is a cinch. You never have to worry about losing track of something you wanted to hold onto for later use.

The other key benefit to UI Patterns is that it’s more than just a patterns collection. There’s also a treasure trove of articles about UI design patterns to be found in the company’s blogs. Their “best hits” highlight includes articles like Beyond Usability: Designing with Persuasive Patterns and The Tipping Point of Persuasive Design.

Pattern Tap

The Pattern Tap team understands that designers don’t work within a vacuum; they draw inspiration from the world around them and from one another. Other designers make for excellent teachers, mentors, and inspirations as those around them work to create patterns. The site is dedicated to collecting designs and user interaction patterns that inspire and allow designers to learn more about what works and what doesn’t.

Pattern Tap is home to more than 5,000 UI patterns– and the database is growing by the day. For those looking to find inspiration or learn more about the most effective ways to approach the design process, the site is a goldmine.

Pttrns

ui patterns mobile

Pttrns is home to nearly 8,000 mobile UI patterns. The staff keeps the database up to date. Whether you’re on the hunt for unusual layoutsminimal design, or you need a pattern that makes using photos and videos easy, Pttrns has got you covered.

There’s a minor catch– if you want to navigate the site without advertisements and gain unfettered access to every pattern in the archive, you’ll need to look into snagging a Pttrns Premium membership. For $40 a year, you’ll have access to intuitive tools that make site browsing easier and you’ll be able to bypass pesky ads.

UI Garage

UI Garage is home to the web’s latest UI design inspiration and patterns. Whether you’re on the hunt for web, mobile, or tablet patterns, you’ll be able to find what you’re looking for in this extensive database. The site was the Featured Number 1 Product of the Day on Product Hunt.

Creators Michael Wong and Philippe Hong are both passionate product designers working out of Sydney. They recognized that a great deal of their workday is dedicated to hunting down inspiration and tracking design trends. Wong and Hong decided to share their findings with the community. The result is a content-rich site filled with patterns and inspiration.

Welie’s Pattern Library

If you’re looking for a resource that allows you to quickly sort patterns by user need, you’re in luck. Welie’s pattern library lets you select from numerous requirements as you sift through UI patterns. You can opt to look for layouts based on how users will navigate, shop, search, and make choices on your website. Users can also sort by application needs and context of designs

Welie was put together by Martijn van Welie, a Dutch designer who presently works as a Senior Consultant for Interaction Design. His own commitment to good design prompted him to create a resource for others to leverage and rely on when they’re looking for compelling and inspiring patterns. Whether you’re seeking ideas to bring into your own design, or you’re just window shopping, Welie is a great pattern resource.

Five Articles to Learn More About UI Patterns

Mastering UI Patterns for Smarter Design by Jerry Cao

This article is your primer for the entire process of using UI patterns. Cao covers everything from forethought through to selection and implementation. You’ll learn how to leverage easy-to-understand, accessible knowledge in order to save yourself time and hassle as you learn and navigate new interface systems.

UI Layout Design– 6 Must-Know Patterns by Steven Douglas

Douglas delves into six critical components of most UI patterns and gives you a quick primer on how, when, and why to consider using each of them. This article is excellent for those looking to gain a baseline understanding of how UI patterns work and what they’re made of.

Douglas advocates for rigorous experimentation and user testing in order to determine which layout best suits your website and your needs. He also guides you through a part of the selection process and offers pointers for selecting pattern components like carousels, grids, and cards.

Tooltips: How to Use This Small But Mighty UI Pattern Correctly by Katryna Balboni

If you’re looking for content that’s a little more granular, consider looking into this piece by Katryna Balboni. The focus is tooltips, so it’s not for everyone. Balboni offers value, however, by delving into what makes site users tick when it comes to tooltips. She also offers valuable use cases for those who are apprehensive about how to integrate tooltips into their site.

A Step-By-Step Guide to User Experience (UX) Patterns by Dawn Schlecht

Schlecht dives deep into the basics of UI patterns and the rationale behind their development and use. This ten-minute read will give you the rundown on:

  • What UI design patterns are
  • Why they’re valuable
  • The best way to use them
  • Where to find libraries

What is the Best UI Pattern for Your Product Tour? by Katryna Balboni

This article offers insight into some of the more popular UI patterns that designers use for onboarding tours. You’ll get a front-row seat to insight into how each pattern can be used and leveraged effectively to keep users engaged and drive business. Need advice on how best to evaluate your product tour’s primary goals? Lucky you! Balboni emphasizes focusing on functionality, uniqueness, and other aspects of the UI pattern during the process.

UI pattern libraries present an excellent opportunity to save time and money while you’re working on user interface design. You’ll be able to work more efficiently thanks to the inspiration, guidelines, and idea that are at your fingertips when you decide to pour through a UI pattern library or database.

These resources are excellent stepping stones for anybody looking to learn about UI patterns, document UI patterns, or create a patterns library. Whether you’re a seasoned pro, or you’re just breaking into the design sphere, you’ll be sure to find excellent tips and advice that you can leverage to improve your work and make your job easier