Pattern vs Component

March 20, 2014

Patterns and components are reusable design solutions. In addition, patterns and components can be:

  • Described via attributes like ‘Use when’, rationale, and solution guidelines
  • Managed in a library
  • Rendered as reusable assets, whether HTML/Css frameworks or design libraries to produce wireframes and comps
  • Utilized during projects by designers, design technologists, engineers, and other disciplines
  • Authored and maintained via a (hopefull) well defined workflow
  • Based on the needs of an organization
  • Influenced and enhanced based on user research

Patterns and components are not the same. Both Components represent chunks of visual design (HTML/CSS) that are combined into a composite Web page. Patterns are sprinkled within and across components. Sometimes they overlap. A few components are simple enough to map to a specific pattern, such as search and tabbed navigation.


  • Pattern: Interaction Model; a theory about how a general design problem can be solved (e.g. progressive disclosure)
  • Component: Execution of a pattern or element; a specific way to solve a specific design problem
  • Module: A configuration of components (!Not defined by Curtis)

Curtis (2010) p. 11-5


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s