๐Ÿ‚ UI Patterns & Inspiration

Discover different design solutions used to commonly used UI components through our curated list of UI Pattern Libraries & inspiration websites.

UI Patterns

You can always learn from others. Especially from those who do design for a living. These pattern library websites are not just a collection screenshots. They are a visual representation of how different approaches can be used to design the same UI component such as a search bar, a card, a sign up page, a form or a navigation bar.

Tip: We recommend bookmarking the pattern libraries you love and visiting them when you start designing UIs next.

CheckList Design (a must see)

No matter how many times the founder of this website would design a product, there was always small touches that he missed when wrapping up his work. A link here, a back button there - there was always that minor but meaningful piece he would miss.

Here therefore made this website as an attempt at listing out all the minimum requirements a page needs to satisfy the user experience for you, incase you ever get caught up with the finer details.

Really Good UX (a must see)

This website doesn't just look at good UI practice for individual components but focusses rather on the UI throughout the user journey and how that overall impacts the user experience.

This website offers a fantastic collection of visual examples of how a bunch of different companies design their user experiences, whether it's by means of in-app messaging, or just design in general.

Mobbin

Mobbin is a hand-picked collection of the latest mobile design patterns from apps that reflect the best in design. They have carefully hand-picked over 170 apps and 10,000 patterns (screenshots from iPhone X) from app stores of different countries, not just the US.

For example, they have put up great apps like Timetree, ofo and Tik Tok which are designed and created in Asian countries. Do check it out.

PageFlows

When designing common, but vital flows like onboarding, upgrading, and inviting friends, start from a solid base of knowledge by seeing how successful products do it with PageFlows. Pageflows has a growing library of 1,262 recordings of tried & tested products which is trusted by hundreds of happy customers from leading brands such as Google, Disney, Sonos, Booking.com and Vimeo.

A must see especially due to their video recording feature.

Good UI

A Good User Interface Gets Better With New Evidence

Be it landing pages, funnels, e-commerce sites or apps, they all get better with UI changes backed by positive design experiments - the more the better. And so Good UI actively publishes results of amazing companies that learn from experimentation:

WaveGuide

Waveguide is a massive design knowledge bank with curated design learning content and thousands of artificially enriched examples of product and brand experience.

UI Recipes

Each week UI Recipes will analyze the top UI patterns and the latest design trends from the ๐Ÿ”ฅ hottest mobile and web apps, and turn them into actionable ๐Ÿฒ UI Recipes for designing specific user tasks.

UI Patterns

User Interface Design patterns are recurring solutions that solve common design problems. This library is considered to the be the de-facto reference for the experienced user interface designer.

UIPatterns.io

This is not just another pattern library website. What makes this website is different that you can not just see the different design solutions but also interact with it to see the complete experience.

SaasPages

The aim of this website is to help SaaS companies build the best landing pages so that they can convert visitors to paying customers.

Google Material Design

While the Google Material Design Components section only focusses on their own components, they have fantastic examples of how their components compare to other solutions out there with clear Do's and Don'ts.

Mental Health Design Patterns

Digital services and products for mental health and wellbeing are increasingly common, but lacking a shared repository of best practices, agencies and innovators repeatedly re-identify the same user needs and re-solve the same service delivery challenges.

This library has therefore been created to support more consistent and effective digital tools for mental health, combining clinical and design best practices.

Web Accessibility Patterns

While not exactly a pattern library, these websites cover the standards which need to be followed when designing and creating accessible websites for mobiles, laptops, and desktops.

Design Inspiration

Discover Scrnshts

A collection of beautiful app screenshots from the iOS App store similar to the beautiful Mobbin Library.

Muzli (every designer's favorite plugin)

Muzli instantly delivers cutting-edge design projects and news each time a new tab is open in your browser. Discover the best web and mobile design inspiration from design experts across the web and around the world.

Collect UI

A platform for your daily inspiration collected from the daily ui challenge & beyond. Based on Dribbble shots, hand picked.

More

Pttrns.com

Dribbble

BestFolios

LandBook - Landing Page Inspiration

Lappa

LandingFolio

โ€‹

CoDrops

Code My UI

User Onboard