In designing the user interface (UI) of an app, it is common to start with the design of the populated state of the UI. As designers, we envision perfect scenarios, common flows, and predictable results. This, understandably, contains the bulk of work a designer has to face. It contains all sorts of issues that need to be addressed.

In turn, we might neglect designing for the different states of the component or the whole system that we are designing.

In general, here are the different states a component might be in:

• Populated
• Blank

Populated

The populated state simply means that the component has been modified to have its intended content. In the example of an Accounts page, there is at least one account created.

See the Pen Component State: Populated by Brian Dys Sahagun (@briandys) on CodePen.

Blank

The blank state occurs when there is no content – whether it is the initial appearance or a result of removing all previous content.

See the Pen Component State: Blank by Brian Dys Sahagun (@briandys) on CodePen.

Always consider the design of the other states of the components.