Rules for creating good-looking user interfaces

I think the after looks better, it feels more in control, but at the same time, even the before was completely functional and users would be completely happy with it.

Starting from 'what looks good' is putting the cart before the horse. Making a UI usable and well laid out first is key. Practical UI and Refactoring UI are great resources, as long as you read them through a lens of 'what works well?' instead of 'what looks pretty?'. The author is absolutely right in that alignment and consistency are important, but that should really be your starting point.

Building a good user interface is fundamentally an engineering challenge. I see roughly two camps in building UIs, one designing a pretty picture and then tweaking the CSS until it looks like the picture, the other treating the CSS as rules of how the UI should behave. A simple example would be using display: flex; gap: 32px; on a parent of two elements instead of margin-right: 32px; on the left-most element. While the end result is identical, specifying the gap on the parent is better, because it puts the responsibility for spacing in the correct place. This also goes for the way you define CSS classes and rules, if two values are linked, like the height of your buttons and the height of your input fields, then try and capture that in a single rule, or extract it out to a variable.

A lot of building good UIs becomes much easier once you adopt the engineering approach. Consistency is almost built-in at that point, and that automatically makes your UIs better and easier to understand. It keeps your CSS more maintainable too.

While I'm sure there are ways to achieve this with Tailwind, generally I tend to see developers do the exact opposite when they use tools like that: just define everything with atomic classes inline, and forget all about the relations of styling rules to eachother. Tailwind has some great concepts, like defining a limited set of values to choose from, but be careful to keep the engineering, rules based way of building UIs.

There are so many times we've gone a direction in our products only to figure out that while we could make the page look pretty, it never would work well. It always ends up being some version of 'if we go direction X, then features Y and Z will have to be shoe-horned in and it'll look ugly'. When you get that feeling, take a step back, come up with some different approaches, and go with a better one.

The "make it pretty"-step should really be the last thing you do. If you design your UI with heavily visually simplified components and in black and white, it should still work and feel right. Make it work right, and the pretty will come.

It is quite similar on the Web still: web browsers (at least Firefox) allow to set user CSS or change default colors, but some websites (the percentage would vary defending on the method used) do not play nicely with that.

Likewise on Unix-like systems: most things can be covered with GTK and Qt themes, but some GUI programs would use a different GUI toolkit, and occasional developers would assume a dark-on-light theme, setting fixed colors accordingly.

Even TUI color interfaces suffer from that: when programs use colors outside of the 16 (that are rather practical to configure) or tweak (e.g., dim, reverse/invert) those for a particular kind of theme.

An annoying thing is that in most those cases things would have been fine if the developers simply did not touch colors. Even the linked article would have been more legible if it had no CSS, with either the usual defaults or a sensibly configured web browser: now it has a text-to-background contrast ratio slightly below the minimum of 7 recommended by WCAG.

Such checklist/rule based approaches do not help anyone. Trying to understand why the said rules work from the standpoint of visual perception is much more beneficial in the long run. Designing with the Mind in Mind by Jeff Johnson (of Xerox PARC) is an introductory book on the why behind UI design guidelines that I often recommend to entry level designers.

tl;dr: consistency is the key to good-looking user interfaces.