Different Component States

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


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 (@BrianSahagun) on CodePen.1820


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 (@BrianSahagun) on CodePen.1820

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

Revisiting CSS Levels

I am currently making a curriculum for the basics of HTML and CSS.

Revisiting CSS Levels, I have written in the past about it:

The important thing to remember is to pattern it after the Levels of HTML wherein we must begin with Accessibility and Usability in mind.

And from there on, we build towards Visual Design.

Using this as basis, one could argue that Colors and Typography are “nice-to-haves”.

Can your design stand in black and white?

Can your design stand in a serif font?

Yes, it should.

Web Typographic Hierarchy

Designers must establish a typographic hierarchy in their web designs.

This is not random; this is written in a style sheet; this is designed.

The typographic hierarchy aids in making reading web texts easier.

Here is an example of a designed web typographic hierarchy:

The baseline is 16px; from there, up scale is multiplied by 1.5 and down scale is multiplied by .75.

Small: 12px
Medium: 16px
Large: 24px
X-Large: 36px
XX-Large: 54px

We should not go beyond 12px because that would be too small for the naked eye.

As a designer, you may now decide which heading level is Large. In this case, I would say Large is H3, X-Large is H2, and XX-Large is H1.

H4, H5, and H6 would be 16px but with different additional styles to differentiate them when put in the context of heading and paragraph.

Subsidize Traffic

Traffic along a road with streaks of light due to long camera exposure. Photo by Brad Fickeisen
Traffic along a road with streaks of light due to long camera exposure. Photo by Brad Fickeisen

Metro Manila traffic is as bad as it is. We motorists make it worse when we employ “offensive driving” instead of defensive driving.

All types of vehicles, from the most expensive to the rusted ones, can get stuck altogether in the sweltering heat of the sun or the drenching gush of rain.

The least one could do is treat others as their road peers instead of road rivals. In doing so, we tend to subsidize traffic.

But how can one subsidize traffic, thus, improving the overall condition of it?

  • Stay on your lane
  • Let overtakers get ahead
  • Give way to lane skippers

Stay on your lane

You may skip from lane to lane as long as you don’t disrupt the flow in that lane. Disrupting the flow could mean inserting your vehicle in an exact space in between two vehicles in that lane. If you don’t want the cognitive load of deciding where the fastest lane is – stay on your lane.

Let overtakers get ahead

You’re maybe racing with time to a destination but don’t race with overtakers. They might be in a “number two” emergency situation, you never know.

Give way to lane skippers

And if there are cars inserting themselves into your lane, slow down and just let them. If you don’t, two lanes are disrupted – theirs and yours. If you do, then congratulations, you subsidized traffic!

The Value of Photographs Over Time

Value of Photographs Over Time
Chart of Value of Photographs Over Time by Brian Dys Sahagun

The value of a photograph doubles over time.

At the moment of a moment’s capture the value to the owner is close to zero.

It’s only for sharing directly to someone.

It’s only for posting indirectly to an audience.

It’s a smile-maker or a cringeworthy cue.

Its value to machine learning is immense and future-proof.

Its value to content aggregation is in-valuable.

And in the day after, while being stashed away it brews.

And in the day after next until another generation is born a moment captured is a moment created.

We Stop and Go


Driving along a highway. At hundred twenty. It feels like god is watching you. The auto – buck naked – it’s only the chassis, the steering wheel, the seat, and you. You feel invulnerable in that speed because you see the rain speckles streak upwards yet you don’t feel the violent current of air that you’re piercing into.

But you are afraid of losing control. Afraid of vanishing from the story of other people’s books. And what about when others lose control?

Shift in second gear and pulse the brakes. “Never drift,” my brother told me at a downwards spiral parking lot.

Shift in first gear. “Reverse and full throttle,” my brother told me as I drifted back a steep slope.

A mix and match of speed, acceleration and deceleration. A calculation of distance. An anticipation of others in movement, in stillness. And I wondered how a school of fish would sway in unison.

Only for today we all share this road with one another. With things, with animals, with people.

And aren’t we all dreaming of home? Of good night’s sleep?

I sit in the dark of ten p.m. A desolate intersection, a face aglow of stop waiting to go.