Good design, bad design

When we open a digital product, like a web, mobile or screen-based experience, as humans we typically have two reactions:

• an immediate reaction
• a mid-term reaction

The immediate reaction is the first visual impact. Do we like what we're seeing? Do we trust it? Does it feel reliable?

The mid-term reaction is built up after a few seconds or minutes going through the experience. The length of this will depend on how long the actual task we're trying to achieve will take.

As designers, it's easy for us to judge a book by its cover. We open up an app, and we immediately spot if it's a good design or not. At least at the surface level.

Clarifying thought: a lot of the ideas shared here apply to design in general, not just user interfaces. But for the purpose of this essay, we'll solely focus on user interfaces.

So let's begin.

What is it that makes us feel good (or bad) when we first open up an interface?

The first key element to pay attention to is how seamless and invisible the design actually is.

By invisible I don't mean it's boring, or ugly, or average.

I mean you can't spot friction.

Good design is seamless.

You just go through it.

You get your task done.

You create the account. Buy the concert ticket. Book the restaurant table. Sign up for a pickleball class.

Sometimes you'll get to create the account, but with some friction.

Sometimes friction is functional. The verification code didn't arrive. The payment failed and needed a second attempt.

Other times the friction is visual.

The system simply feels a bit off. Unreliable. Unbalanced.

You get the task done, but you're not very excited about what you just did. You think "meh…".

A happy path that's visually off, inconsistent and hard to read, is not good design. You need seamlessness and invisibility in both the functional and visual experiences.

The same way an incredibly beautiful UI can't make up for a very slow system, the opposite is also true.

What do visual reliability, consistency and balance even mean? What's the role of beauty?

There's a subjective aspect around beauty. I won't get into that right now other than mentioning the importance of the aesthetic-usability effect.

There is a set of visual considerations that make up good design:

• A consistent grid or set of grids and containers across the interface, creating the feeling that there's a structure and a way to read from top to bottom and left to right while following different lines, the same way you can easily read a magazine, a newspaper or a book without overthinking or without effort.
• Good spacing between elements (white space), giving enough air around different elements and sections of the page, allowing the user to scan the interface without feeling like everything is fighting for its place, while also using the entire screen space available in a smart way.
• Balanced type with different sizes, weights, and sometimes families, creating contrast, legibility and hierarchy across the contents of the interface. Good design contemplates not only font families and weights, but also letter spacing, line height, line breaks, spacing between blocks of text and color. Good design involves different type colors across all the interface copy to create contrast and legibility. A title might be darker than a paragraph below it.
• Individual element layouts and contrast across elements. A button needs to look like a button. A clickable card needs to look like a clickable card. A section can be differentiated from the previous one with a different background. An element can have a drop shadow and a subtle border stroke to look clickable.
• A very clear and smart use of contrasted colors across the entire interface. From basic rules, like using a light color on top of a dark background with enough contrast so it's legible with accessibility in mind, all the way to staying consistent both with the overall product brand, and with basic color combination rules. Avoid reinventing the wheel if possible. If you need to, you're probably creating a piece of art, not just a good interface design.
• A good use of hovers on desktop-based interfaces, and on-tap or after-tap interactions on mobile-based ones.

What makes a design consistent?

Consistency isn't repeating the same elements everywhere. It's repeating the same rules.

Say a screen needs a 32px font size that appears nowhere else in the design. Is that allowed? The real question isn't whether you can, but why 32 and not 31.5 or 33. The answer has to come from the system. If you work on a base 8 and you need something bigger than what's in your type scale, the next step is 32.

Those rules start with the grid, which works on two levels:

• The base grid sets margins, columns and the spacing system. Base 8 (8, 16, 24...), base 11 (11, 22, 33...) or any other, as long as you stick to it.
• The composition grid decides how content sits inside that structure: three cards per row or two, and whether layouts wrap, stay fixed or fill the available space.

And they continue with text. Titles, paragraphs and every piece of copy follow editorial rules:

• No widows, meaning no single word left alone on the last line of a paragraph.
• No dashes to split sentences. It's become a telltale sign of AI-written copy.
• One alignment logic throughout. If text is left-aligned, it's always left-aligned, not centered on some screens.

What about performance?

System performance plays a key role in a user interface.

It's not that hard to get: the system needs to work. Period.

But trust me, it does get hard. Especially when the "stupid simple" aspects aren't there and things get overcomplicated.

Performance needs to exist at least in these ways:

• The overall system is fast enough so that it doesn't create a feeling of impatience (productivity soars if interaction happens under 400ms according to the Doherty Threshold)
• User actions feel "snappy": a hover, a click, a tap, a loading state. They feel immediate.
• The email and SMS notifications arrive in a few seconds (duh!).
• Scrolling doesn't feel like your device is about to blow up.
• Images just show up. They don't load piece by piece.
• Animations or page-to-page transitions don't take forever.

Is accessibility still important?

Well of course it is.

I won't get into the deep technical aspects of it. Do your homework on the W3C site.

But please make sure you cover the basics:

• don't use font sizes that go below the minimum for proper legibility
• use the right color contrasts so things are clear and readable
• make links and calls to action actually look clickable
• use real alt texts for images
• if there's audio on your site, include a transcript. It's cheaper than ever these days with AI
• make your site available through a keyboard (no mouse needed): use default HTML/CSS states like making sure your inputs have a proper focus
• use proper HTML semantics: a paragraph should be a paragraph, a heading should be a heading, and a section should be a section

Old vs modern vs hyper-new

Don't let your design look so old it's uncomfortable to use.

Paul Graham's website would be way easier to read if it simply had a design like Derek Sivers'.

If you own a mobile app, take 5 minutes of your time, open your app, and then open your 3 most used daily apps. You'll immediately notice if your app feels so outdated it's hard to use.

Modern is a good sweet spot. Basecamp's design typically sits here.

Not too complex. Not too artistic. Not too simple. They sit right in the middle, but with really solid design and checking all the boxes discussed here.

I'd say sites like Reddit and X also sit here. They don't try to reinvent the wheel. They stick to the fundamentals. And the most important aspect of their sites (posts and threads) just work.

Hyper-new sits a bit further to the right of the spectrum. I use the word "hyper" because "modern" has come to mean anything recent. Hyper-new is a step further: the newest, most experimental work.

Any new Apple product recently launched will most likely have a landing page that sits in the hyper-new category.

What matters the most here is this: think about your user or your ideal customer profile (ICP).

Are you overwhelming them with a hyper-new design when they just needed a block of text and a button?

Are you frustrating them with a very outdated interface that feels unreliable and very far from what they typically use?

Are you forcing your user to relearn how to use your product over and over?

Brand consistency is also reliability

If you properly use the basics of HTML and CSS and apply them to a high-performing site with solid design across layouts, elements, states and error messages, your system will feel reliable.

But besides that, you should also take care of your brand ecosystem across all user touch points.

Where is your user or ICP interacting with your brand?

Mobile app? Website? SMS? Email? LinkedIn? YouTube? Spotify? A guest publication?

Your user needs to feel like they're in the same ecosystem from touchpoint to touchpoint.

Visual consistency matters as much as copy consistency.