1

I hear term component and pattern used widely on blogs, articles, books and by my team mates. Most of the time they are used interchangeably by few people, which makes little confusion if they are same or different. Well they may be same for some people but for google they are surely different as they have seprate section for both in their material design guidelines.

Google material design guidelines

Now confusion is that the line between both is too blurred, for eg: take two navigation methods:

  1. Navigation drawer - Component
  2. Bottom navigation - Pattern

Both of these serve very similar purpose but in different style/way, so I perceive them in same group but in material guideline they are in different category.

My question is now, is there any scientific way to differentiate between these two or you can also share how you differentiate between these.

6

Components are the individual building blocks that a UI is made out of. They're context-agnostic and can be used anywhere within an app.

Patterns are the ways these components are used within a UI. They're relevant only in certain contexts.


EDIT: Here's an example from the Material guidelines:

Confirmations are design patterns. Here's how Google defines them:

A confirmation asks the user to verify that they truly want to proceed with the action they just invoked. It may be paired with a warning or critical information related to that action.

Modal dialog titles for confirmations should be meaningful and echo the requested action.

Modal dialogs are UI elements that you can use when implementing the confirmation pattern. You don't have to use those, though. In the same Material guideline section, Google shows a separate page titled "tap another device to complete" as an example of an implementation of the pattern.

  • Thanks Tin, would be great if you can add few examples to explain this, if possible screenshots also – Aman Dec 18 '17 at 9:55
  • You can think of a text field, label and submit button as a component. The Patten would be how the components elements are laid out (how the label is aligned, where the button is, is the field pre-filled?). – dwkns Dec 18 '17 at 12:01
  • Thanks Tin, for adding more details to answer, it makes lot sense to me now. – Aman Dec 19 '17 at 10:26
  • @dwkns that make sense. However one thing I am still not sure why google put navigation drawer in components, I see it as a pattern which includes link/button, list of items, stepper in some case and few other components. – Aman Dec 19 '17 at 12:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.