A UI Pattern is defined by three ingredients:

  • A named solution describing what the pattern does
  • The problem the user is facing or why this pattern is needed
  • The context for when to use the pattern

Adidas Product with Thumbnails.png

UI patterns compare approaches, distilling the considerations and successes of designers before you. Knowing the patterns and understanding the decisions that went into them let you take advantage of the mounting wisdom of whole generations and industries that brought about these patterns, without reinventing the wheel.

Knowing patterns can help you design efficiently by quickly recognizing the best tool for the job, understanding the value of different solutions, and solving the largest number of problems at once.

Using familiar patterns lets you foster predictability. Consistent use of patterns within a web site will help visitors build a mental model of how stuff works.


In short, a UI pattern is a recurring digital solution to a problem, in a given context.