Accessibility

Appreciation

Consent

Decision Making

Feedback

Awareness

Landing Pages NEW

Onboarding

Pathfinding

ANNOUNCEMENTS


<aside> <img src="/icons/cursor-click_lightgray.svg" alt="/icons/cursor-click_lightgray.svg" width="40px" /> All sections now show a quick navigation bar on top

</aside>

<aside> <img src="/icons/tag_lightgray.svg" alt="/icons/tag_lightgray.svg" width="40px" /> Some categories were renamed for easy understanding

</aside>

<aside> <img src="/icons/layers_lightgray.svg" alt="/icons/layers_lightgray.svg" width="40px" /> Now you can filter between Desktop, Tablet and Mobile tabs

</aside>

All patterns

ABOUT PATTTTERNS


This is a collection of user interfaces found on real software. Sometimes we find UI concepts that are so far from the actual technology we use everyday, bringing new problems to the table. That’s why I started this collection of real patterns to facilitate everyone to compare and co-create with existing interaction patterns.

Our best definition of “patterns” is «means of capturing useful design solutions and generalizing them to address similar problems» as found on About Face **(1995) book by Alan Cooper and others.

HOW TO USE PATTTTERNS


✔ Share existing patterns with your team

✔ Gather references and inspiration

✔ Learn from #1 software companies

✔ Always keep learning

Powered by Fruition
PATTTTERNS - An open catalog of design patterns | Product Hunt