Design Patterns: Components, Widgets, & Archetypes

Be mindful and understand what components, widgets, and archetypes are! Look up design patterns online for how users are accustomed to using these all and how they are laid out. Nothing is absolute, however. Make sure you don’t just pick out things you like about one pattern and another pattern and another pattern. It doesn’t necessarily create the best solution in the end this way.

Components – these are the smallest unit of interactivity.

  • checkboxes, radio buttons
  • field boxes, combo box
  • scroll bar, sliders
  • icons, buttons
  • labels
  • tables
  • toolbars, tabs


Widgets – usually consist of a combination or blend of components to create a whole

  • They can be wizards.
  • Enterprise products often have hierarchical grids (tree control).
  • Forms, lists
  • Feed (facebook) and timeline
  • Filter panel
  • Shuttle controls are common in enterprises. It’s a list – sometimes hierarchical – with another list. There’s left to right controls to add/remove items for instance. There’s only a few times where shuttle controls would be needed but it’s generally not in products anymore.
  • Login (two field boxes and a submit button, “Forgot Password?” link)
  • A dialog box by itself is even a supporting widget.
  • The date picker on a calendar.



  • shopping carts (metaphor)
  • menu pages/headers
  • workflow
  • Master-Detail, such as an email inbox with preview messages
  • shopping catalog
  • portals (where content is aggregated)
  • search results
  • tool and canvas (see PhotoShop)
  • workspaces (often for coding)



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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s