Shape
Blog / / Design Inspiration

The Best Collections of Real UX/UI Design Patterns | 2024

🟢
Last updated: March 27th, 2024

Looking for real UX/UI Design inspiration and examples of best practices for designing apps, software, screen flows and components for digital products? Look no further than this comprehensive collection of UX/UI Design Pattern resources!

Whether you are designing wireframes or the UI of a new product, chances are the flows or problems you are working on have already been designed by other designers in other products before. Examples include things like login flows, user onboarding, date pickers, chat interactions, image uploading etc.

What are UX/UI Design Patterns?

UX, UI and Product Design Patterns are familiar, reusable and recurring ways of designing things in a User Interface.

If there is a problem your product is trying to solve for your users, there's no need to reinvent the wheel, as many best practices have already been designed, tested and documented in the form of design patterns.

While there will always be the need to innovate, adjust, repattern and create original designs, learning the foundations and how to apply them first is always a good place to start.

This list includes some of the best sites to learn from and get inspired by real UI and UX design examples and patterns in live digital products, like mobile apps, software and SaaS products.

Design Vault

Design Vault is a curated library of screenshots & interaction patterns from the world's best digital products. Gain insights, and explore trends.

https://designvault.io/

This site takes you beyond visual inspiration and gives you access to the latest and most cutting-edge UI patterns and trends. It's a great place to find UI pattern examples that have been implemented in real-world projects.

Checklist Design

A collection of the best design practices and design patterns including website pages, UI components and brand assets.

https://www.checklist.design/

A good checklist is efficient, to the point, and specifically designed for ease of use, even in the most challenging situations. Instead of trying to spell out every detail, a checklist focuses on crucial steps that even skilled professionals may overlook. Checklist Design provides a very specific list of user interface elements in a variety of user flows and UI patterns so that you don't forget to design any of the crucial things inside of your product.

Refero

If you want to see what the big brands and companies are doing check out refero. You’ll be able to view examples from brands like Stripe by page type or UI pattern and explore over 25,000 pages and 24,000 iOS screens!

https://refero.design/

Stack Sorted

Stack sorted is awesome if you want to drill down and sort by elements. You can choose an element and view projects/websites with creative designs for it.

https://stacksorted.com/

I love that you can find a lot of interesting animation, micro-animation and interaction design examples here to help you spice up your UI designs and add some delight to the user experience.  

Pageflows

This is an amazing resource for real UI patterns and UX page flows. You can see examples of things like user onboarding flows, making a purchase etc. You can also see both desktop and mobile examples as well as search by brand.

https://pageflows.com/

Design Patterns for Mental Health

The Mental Health Patterns Library is a resource for those involved in developing and delivering digital mental health support. It’s designed to encourage learning and the sharing of best practices in this mental health wellness space.

https://designpatternsformentalhealth.org/

In response to the increasing demand for mental health and well-being apps worldwide, a group of dedicated individuals - designers, developers, mental health practitioners, and researchers - united to create the Mental Health Patterns Library - A centralized repository of best practices for digital mental health services that share valuable insights to enhance the effectiveness of these essential mental health services.

Mobbin

Discover the best-in-class mobile apps and design patterns and save hours of UI & UX research with this library of 50,000+ fully searchable mobile app screenshots.

https://mobbin.design

Mobbin is the most comprehensive, curated library of interfaces from the biggest companies in the world. It's the to-go if you want to see the screen-by-screen flows and references for designing user interfaces, experiences and digital products.

Landingfolio

Landingfolio features the best landing page inspiration, templates, resources and examples on the web. Learn from a growing library of 1,982 landing page designs and 3,829 component examples, updated daily!

https://www.landingfolio.com/

UX Design Checklist for Notion

Based on 7 factors that influence user experience. These tried and true design usability heuristics, design principles, design patterns and best practices are meant to be used alongside your own user research to help you make sure you're not forgetting anything important when you are designing your websites, apps and interfaces. One-click copy to Notion (or download PDF)

UI Design Checklist for Notion

This checklist of UI design guidelines and best practices is based on principles that have been well-established to enhance the experience of a user’s interaction with a digital software interface. One-click copy to Notion (or download PDF).

SaaS Interface

From the creators of SaaS Landing page, SaaS Interface is the world's largest gallery of SaaS app UI and UX design examples.

A beautiful gallery of featuring thousands of SaaS component examples. You can search by popular components, by page or by element type.

Really Good UX

A library of great UX with analysis and breakdown of the user experience and UI designs. More than just a gallery showcase of design examples, each week they feature inspiring behind-the-scenes UX stories, proven frameworks, and in-depth discussions with actual product, design, customer success, and marketing experts.

https://www.reallygoodux.io/

UI Patterns

One of the original resources for great user interface patterns with examples and explanations of best design practices and approaches.

http://ui-patterns.com/

This resource is a bit older but has a lot of valuable information about user behaviour, best practices and UX mechanics.  

CollectUI

Filter by UI components, charts and element type, this site is hugely valuable for UI and UX designers working on specific modules or flows.

https://collectui.com/

UIGarage

A wonderful collection of UI design patterns and elements hand-curated by Phillippe Hong. This curated gallery features specific design patterns for web, ios, Android and Mac.

https://uigarage.net/

Lookup Design

Looking to design a specific component or element and need a little nudge? Lookup.design lets you quickly search for a component to help inspire your work.

http://Lookup.design

Screenlane

The latest mobile UI design inspiration in your inbox every week, for free. Browse their site by category, element, and brands and see color palettes as well as design patterns.

💡
As of 2023 Screenlane is no longer being actively updated, however, it is still a resource worth exploring for screen inspiration. 

UX Archive

Great place to find very specific flows.

https://uxarchive.com/

📚
Want to learn how to design UX and UI like this? We invite you to explore our product (UX/UI) design course to learn how to apply these yourself!
💌
If you found this helpful please share this post with your friends or mention @designerupco on social media! 

This post was a collaboration between

DesignerUp, Elizabeth Alli

  • DesignerUp

    DesignerUp

    Read more posts by this author.

    DesignerUp
  • Elizabeth Alli

    Elizabeth Alli

    Mindful designer and mentor helping to create meaningful products and experiences.

    More posts by Elizabeth Alli.

    Elizabeth Alli