10 Great Sites for UI Design Patterns
- 1.4k shares
- 2 years ago
User interface (UI) design patterns are reusable/recurring components which designers use to solve common problems in user interface design. For example, the breadcrumbs design pattern lets users retrace their steps. Designers can apply them to a broad range of cases, but must adapt each to the specific context of use.
Websites and apps have a conventional look and feel because of design patterns such as global navigation and tab bars. In UI design, you can use design patterns as a quick way to build interfaces that solve a problem—for instance, a date picker design pattern to let users quickly pick a date in a form. So, UI design patterns serve as design blueprints that allow designers to choose the best and commonly used interfaces for the specific context the user faces. Each pattern typically contains:
In this video, we look at the different design patterns YouTube uses:
Some of the most common UI design patterns are:
Here, we use the design pattern “clear primary action” to clearly show users where they can click.
Freely available, UI design patterns let you save time and money since you can copy and adapt them into your design—instead of reinventing the wheel for every new interface. They also facilitate faster prototyping and user familiarity. However, you should use them carefully.The wrong choices can prove costly – for example, if you:
Overall, give users familiar frameworks that maximize convenience and prevent confusion while they interact with your unique-looking brand.
“Practice safe design: use a concept.”
— Petrula Vrontikis, designer, author & professor
This page uses the design patterns progress tracker, clear primary actions and progressive disclosure.
Explore UI Design Patterns with our course: https://www.interaction-design.org/courses/ui-design-patterns-for-successful-software
See Ruby Garage’s step-by-step, example-rich approach to UI Design Patterns: https://rubygarage.org/blog/ux-design-patterns
Read UX content strategist Jerry Cao’s detailed examination of mobile UI Design patterns: https://www.uxpin.com/studio/blog/5-creative-mobile-ui-patterns-navigation/
Here’s the entire UX literature on User Interface (UI) Design Patterns by the Interaction Design Foundation, collated in one place:
Take a deep dive into User Interface (UI) Design Patterns with our course UI Design Patterns for Successful Software .
Have you ever found yourself spotting shapes in the clouds? That is because people are hard-wired to recognize patterns, even when there are none. It’s the same reason that we often think we know where to click when first experiencing a website—and get frustrated if things aren’t where we think they should be. Choosing the right user interface design pattern is crucial to taking advantage of this natural pattern-spotting, and this course will teach you how to do just that.
User interface design patterns are the means by which structure and order can gel together to make powerful user experiences. Structure and order are also a user’s best friends, and along with the fact that old habits die hard (especially on the web), it is essential that designers consider user interfaces very carefully before they set the final design in stone. Products should consist of such good interactions that users don’t even notice how they got from point A to point B. Failing to do so can lead to user interfaces that are difficult or confusing to navigate, requiring the user to spend an unreasonable amount of time decoding the display—and just a few seconds too many can be “unreasonable”—rather than fulfilling their original aims and objectives.
While the focus is on the practical application of user interface design patterns, by the end of the course you will also be familiar with current terminology used in the design of user interfaces, and many of the key concepts under discussion. This should help put you ahead of the pack and furnish you with the knowledge necessary to advance beyond your competitors.
So, if you are struggling to decide which user interface design pattern is best, and how you can achieve maximum usability through implementing it, then step no further. This course will equip you with the knowledge necessary to select the most appropriate display methods and solve common design problems affecting existing user interfaces.