A UI design pattern is not just a literal pattern that you place on a background. It's more abstract than that!
Essentially, a design pattern can be described as offering a solution to common UI problem.
For instance, on desktop you might have a primary navigation with 6 links in a horizontal layout. What happens on mobile? There's not enough room! Well, a common ui pattern for tackling such an issue is to hide those nav items and make them accessible upon click of a hamburger menu.
That is just one of many ui design patterns that you can use. There are literally hundreds of design patterns that can help you when you're building out a UI.
Common UI Patterns
- Validation & Form Patterns - What happens when someone submits incorrect data? How should you inform the user that an error has occurred?
- Navigation Patterns - How many links should you show? How do you style different navigations that are in close proximity? What about hover and focus states?
- Onboarding Patterns - How do you best inform new users before presenting them with the main UI?
- Social Proof Patterns - What is the best way to present social proof in different scenarios?
- Purchase Patterns - How do you get users from first time users, to brand new customers?
- Data Patterns - You have a large amount of data, and you need to display it to the user in an understandable way. How do you do that?
These are just some of the most common UI patterns, but of course, there are more!
UI Pattern Websites
There are several websites that can help give you examples of UI patterns that have been utilized by others.