Reviews / Why join our community?

For companies
Frequently asked questions
Contact us
Interaction Design Foundation
UX COURSES
COMMUNITY
LITERATURE
ABOUT IDF
Log in
Join our community
10 Great Sites for UI Design Patterns
10 Great Sites for UI Design Patterns
1 WEEK AGO | 2 MIN READ
123
SHARES
76
38
9
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

Topics in this article:

User Interface (UI) Design Graphic Design User Interface (UI) Design Patterns
UI Design Patterns for Successful Software
UI Design Patterns for Successful Software
ENROLLMENT CLOSES IN
2
days
BOOKED
View course
GET WEEKLY UX INSIGHTS
Join 180,709 designers who get useful UX tips from our newsletter.
Your email
GO
Make design better: share this article
76
38
9
WHAT YOU SHOULD READ NEXT
How to Change Your Career from Graphic Design to UX Design
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...
260 SHARES
2 WEEKS AGO
User Interface Design Guidelines: 10 Rules of Thumb
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...

302 SHARES
4 WEEKS AGO
Shneiderman’s Eight Golden Rules Will Help You Design Better Interfaces
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 ...

380 SHARES
3 WEEKS AGO
Adaptive vs. Responsive Design
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...

170 SHARES
9 MONTHS AGO
The Grid System: Building a Solid Design Layout
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...

305 SHARES
1 MONTH AGO
9 Free to Use Wireframing Tools
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 ...

98 SHARES
6 DAYS AGO
Principle of Consistency and Standards in User Interface Design
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. ...

286 SHARES
1 WEEK AGO
Repetition, Pattern, and Rhythm
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...

299 SHARES
1 YEAR AGO
Recalling Color Theory Keywords: a way to refresh your memories!
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...

276 SHARES
1 WEEK AGO
Skeuomorphism is dead, long live skeuomorphism
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...

409 SHARES
2 YEARS AGO
TOP ARTICLES
5 Stages in the Design Thinking Process
166 SHARES
Bad Design vs. Good Design: 5 Examples We can Learn From
247 SHARES
What is Design Thinking and Why Is It So Popular?
240 SHARES
Apple’s Product Development Process – Inside the World’s Greatest Design
Organization
322 SHARES
Personas – A Simple Introduction
198 SHARES
TOP TOPICS
User Experience (UX) Design
Human-Computer Interaction (HCI)
User Interface (UI) Design
Usability
Design Thinking
GET WEEKLY UX INSIGHTS
Subscribe to our newsletter for useful UX tips and resources.
Your email
GO
IDF Logo
The Interaction Design Foundation is a 17-year-old nonprofit community founded in
Denmark. Our mission is to lower the cost of design education.
Connect with us
Reach us at hello@interaction-design.org or through our online contact form.

Facebook page
Twitter page
Pinterest page
Linkedin page
Instagram page
Have questions? Check our frequently asked questions.

Get Inspired Weekly

Join 180,709 designers and get our weekly inspiration and design tips in your
inbox.

Email
Your email
Subscribe
UX Courses
Beginner UX Courses
Intermediate UX Courses
Advanced UX Courses
Community
Local Groups
Discussions
Local Group Meet-Ups
External UX Events
Literature
UX Daily Articles
UX Topics
IDF UX Books
About IDF
About Us
The People Behind
Contact Us
Careers
Terms of Use / Privacy
What is UX Design?
By using this site, you accept our Cookie Policy and Terms of Use
I accept
Want 8 reasons to join our community?
×