This is a catalog of interaction patterns found on real software. Interaction patterns best definition comes from About Face (1995) as «means of capturing useful design solutions and generalizing them to address similar problems».

Accessibility & Personalization


Ask for Consent

Decision Making

Feedback Collector

Generated Awareness


Search & Navigation


Share existing patterns in use

Select patterns when defining product gestures and requirements to align and communicate you idea to the team.

Discover new ideas for your screens

Use patterns to find common design solutions when defining case studies and Interaction flows.

Get ahead by learning from others

Validate screens and interaction patterns using real products UI as benchmark.


<aside> 😷 **COVID-19 Edition** Since pandemic has taken de world products were updating to reflect this status to visitors and showing business support, local news or policy changes.


Explore patterns


Sharing this site with others?

Copy-paste the URL on the browser window, that way your teammates will access to the last updated definition.

Modify or publish my findings here?

Sure! Collaboration is always welcome. Email or tweet your suggestions to get published here. You’ll get credited as contributor.

Why doing this**?**

Inspired by Christopher Alexander the documentation of patterns is a step to improve the gap between developers, designers and managers when making about interfaces.

Explore patterns

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