User Interface Design Patterns

It has long been common practice to use recurring solutions to solve common problems. Such solutions are also called design patterns. Collections of software design patterns are standard reference points for the experienced user interface designer. This website seeks to better the situation for the UI designer, who struggles with the same problems as many other UI designers have struggled with before him.

UI-Patterns.com are not the first to create a UI design library. While other pattern collections are useful, they are far from coherent and complete. The purpose of this site is over time to fill some of the gaps - especially by providing code examples as to how how the different patterns can be implemented: to join theory with practice.

If you find a pattern missing, you are more than welcome to suggest one!

Recently added patterns

Image Zoom

The user wants to zoom in on an image to view the details in a higher image resolution.

Rate Content

The user wants to promote a specific piece of content in order to democratically help decide what content is of higher quality.

Input Feedback

The user have entered input into the system expects to receive feedback on the result of the submission

Account Registration

You wish to know who the active user is in order to provide personalized content or opportunities to conduct a purchase.

Vote To Promote

The user wants to promote a specific piece of content in order to democratically help decide what content is more popular.

Lazy Registration

The user wants to immediately use you and try your website without conducting a formal registration beforehand

Password Strength Meter

You want to make sure your user's passwords a sufficiently strong in order to prevent malicious attacks

Inline Help Box

The user needs an assistive introduction aside the interaction he is about to perform

Tag Cloud

The user wants to browse content by popularity or most elaborate topic

Tag

The user wants to find more data in the same category and/or contribute data in the same category

Live Preview

The user wants to check how changes in form fields effect and end result as quickly as possible.

WYSIWYG

The user wants to add formatted text content, but does not have the know-how to write HTML.

Wiki

You want to provide the user the option of adding to- or editing information on a website.

Live Filter

The user wishes to specify a search by different categories to narrow down results

Archive

The user wants to search for an article of interest by chronological order

Pagination

The user needs to view a subset of sorted data that is not easily displayed on one page.

Continuous Scrolling

The user needs to view a subset of data that is not easily displayed on a single page

Blank Slate

The user needs to get started and get a feel of how the application will feel when fully in function and filled with data

Tip A Friend

The user wants to share something of interest with a peer.

Steps Left

The user is about to go through the process of filling in data over several steps and is in need of guidance.

Coupon

You want to attract your users to conduct a purchase of one of your products

Subscription

The user wants to start a subscription of a service

UI Design patterns

We have categorized the design patterns by the areas of your website that you want to improve.

Are we missing a pattern?
Suggest one!