10 Great Sites for UI Design Patterns

11 hours ago | 2 min read

59 shares

You don’t want to spend your whole life redesigning the wheel do you? No, neither do we. If you are looking for a design that solves a problem that has been solved inside a different application before; then the template for your wheel is probably already out there. That’s a design pattern to you and me.

We’ve put together a list of some of the best places to find design patterns on the web. Now, whilst all of these resources are free some may ask you to pay for premium resources and the like; we just want you to know we are NOT affiliates of any other site and have no financial interest in you purchasing anything from anywhere else online.

UI – Patterns

We like UI Patterns; it makes it easy to find patterns that you like and to group them together once you’ve decided that something is useful. They also have a bunch of interesting articles on UI design patterns which can help extend the way you approach using patterns in your designs.

Author/Copyright holder: UI Patterns. Copyright terms and licence: Fair Use

WELIE Interaction Design Patterns

WELIE isn’t the prettiest site we’ve ever seen but there’s a very useful interaction design patterns library which is logically grouped and incredibly helpful.

Pattern Tap

Pattern Tap is closing on 10,000 User Generated Sets of patterns and that makes it an awe inspiring resource for UI designers. The drop down menu system makes it really easy to find what you want in moments.

UI Scraps

The good, the bad and the ugly of UI design. UI Scraps is great blog which looks at interface design as a whole and then tinkers with the patterns used. You can find some great work here and some truly awful stuff too; it’s all thoroughly critiqued so you can see why something doesn’t work too.

Pattern Browser

Pattern Browser does exactly as the name suggests; it lets you quickly switch between UI patterns in your browser window. There aren’t as many patterns here as on some of the bigger sites but it’s a good resource nonetheless.

Author/Copyright holder: Pattern Browser. Copyright terms and licence: Fair Use.

User Interface Engineering

User Interface Engineering offers more than patterns, it’s a heavy resource that can meet a lot of your UI needs. The user and site generated commentary is invaluable.

Design Snips

Very nice graphical library of Design Snips for users to browse through and then put into play in their own UI work.

NPM

A nice collection of all the ingredients that you need to “bake” a website. NPM is a great source of inspiration and a lot of the patterns here are very good indeed.

Elements of Design

There are some handy groupings of design elements for use on Elements of Design. This goes a little beyond UI but that’s OK there’s plenty for the UI pro to use here too.

Web Design Practices

Web Design Practices has been around for a while but it doesn’t seem to get too many updates; there’s some very useful stuff here anyway.

References & Where to Learn More

Header Image: Author/Copyright holder: Jeremy Keith. Copyright terms and licence: CC BY 2.0

Course: UI Design Patterns for Successful Software:
https://www.interaction-design.org/courses/ui-design-patterns-for-successful-software

The Practical Guide to Usability

Join 123,480 designers who get useful UX tips from our newsletter.

What you should read next

How to Change Your Career from Graphic Design to UX Design

If there’s an occupation that is 100% linked with the public’s idea of what design is all about, it’s graphic design. From the familiar golden arches of the McDonald’s brand to the typography and colors of movie posters, graphic designers create some of the most iconic and ubiquitous designs around us. So why would a graphic designer like you wa...

261 shares
2 weeks ago

User Interface Design Guidelines: 10 Rules of Thumb

Learn to design with your user’s needs and expectations in mind by applying Jakob Nielsen and Rolf Molich’s Ten User Interface Guidelines. These heuristics have been reflected in many of the products designed by some of the most successful companies in the world such as Apple, Google, and Adobe. Further evidence of how their design teams incorpo...

269 shares
2 weeks ago

Shneiderman’s Eight Golden Rules Will Help You Design Better Interfaces

Follow Ben Shneiderman’s 'Eight Golden Rules of Interface Design' if you want to design great, productive and frustration-free user interfaces. Apple, Google and Microsoft are among some of the highly successful companies whose well-designed products reflect Shneiderman’s rules. The characteristics derived from Shneiderman’s golden rules can be ...

215 shares
1 day ago

Adaptive vs. Responsive Design

The differences between responsive and adaptive design approaches spotlight important options for us as web and app designers. Choosing with insight can empower you to plan and execute your designs with better aim, purpose and results.With the pervasiveness and diversity of mobile devices, as designers we need to cater to the variety of screen s...

133 shares
1 month ago

Principle of Consistency and Standards in User Interface Design

Learn to design with consistency and standards in mind and understand the reasons why they’re important to incorporate them into your work. Derived from Jakob Nielsen and Rolf Molich’s Ten User Interface (UI) Guidelines, ‘Consistency and Standards’ are evident in many of the widely-used products created by some of the most successful companies. ...

335 shares
1 month ago

The Grid System: Building a Solid Design Layout

Now that we’ve seen some grids at work in the Rule of Thirds article, let’s examine them a little more deeply. As a concept that deals so fundamentally with the fabric and background of our work as designers, it’s easy to overlook the power of grids and think more about the elements we want to create. Many traditional artists still paint their m...

299 shares
1 month ago

9 Free to Use Wireframing Tools

We all know that wireframing is a great way to test ideas in our UX projects but we also know that there are a ton of wireframing tools available to do it with. It can be hard to choose the right tool but one of the easiest ways to get an idea – is to get hands on with the tool and have a play with it. The wireframing tools in this article are ...

130 shares
3 weeks ago

Recalling Color Theory Keywords: a way to refresh your memories!

Choosing the best combination of colors for an interactive design layout is not, as it may appear, a guessing game. Knowing which ones to use will save you time (and headaches). Getting it right will also keep your users connected.Since the early days of art and design, the use of color has followed many rules and guidelines, which are collectiv...

214 shares
2 days ago

Repetition, Pattern, and Rhythm

Let’s look at three subjects that, at first glance, may strike you as being incredibly basic and self-explanatory. However, although they may seem like they should need no introduction, we should study them. By understanding these concepts, you’ll be able to apply them more effectively to captivate your users’ attention while making your designs...

270 shares
8 months ago

Skeuomorphism is dead, long live skeuomorphism

Skeuomorphism has been a very useful concept in design, then it became the most hated concept in design, and then it came back from the dead. Understanding skeuomorphism lets designers help users through learning curves and make decisions as to whether skeuomorphism still serves a purpose today.Skeuomorphism is where an object in software mimics...

384 shares
1 year ago