Refactoring UI

July 22, 2022

If you’re a programmer who wants to get better at design, I highly recommend reading Adam Wathan’s new book Refactoring UI.

Adam Wathan is the creator of Tailwind, a CSS framework I really love. I started reading this book by earlier this year, and have re-read it multiple times since. It’s packed full of user-interface design wisdom, and if you are a designer, it’s a must-read.

Start with a feature, not a layout

An app is actually a collection of features. Before you’ve designed a few features, you don’t even have the information you need to make a decision about how the navigation should work. Instead of starting with full design, start with a piece of actual functionality.

Details come later

Low-level details like shadows, icons, fonts will matter eventually, but it doesn’t matter right now, in the earliest stages of design. Ignore the details at the beginning. Don’t worry about the color and build black-and-white. By designing in grayscale, you’re forced to use spacing, contrast, and size to do all the heavy lifting. It’s easy to add color later.

Don’t design too much

Don’t try to design every single feature in the app before you move on to implementation. Figuring out how every feature should interact and how every edge case should look is very hard, especially in the abstract.

Work in short cycles

Start by designing a simple version of the next feature you want to build. Once you are happy with the basic design, make it real. Iterate on the working design. If part of a feature is a “nice to have”, design it later. Build the simple version first and you’ll always have something to fall back on.

Limit your choices

Having millions of colors and thousands of fonts to choose from may sound nice, but in practice, it’s very confusing and limiting. You can easily waste time agonizing over minor design decisions.

Define systems in advance

Start with a smaller, pre-defined set of options. Don’t reach for a color picker every time you need to pick a new shade of a color. Choose from a set of 8-10 shades picked out ahead of time. The same goes with fonts. When you are limited to a set of options that all look noticeably different, picking the best one is a piece of cake.

Systematize everything

The more systems you have in place, the faster you’ll be able to work and the less you’ll second guess your own decisions. You want systems for:

  1. Font size, weight
  2. Line height
  3. Font and background colors
  4. Margin and padding
  5. Width and height
  6. Box shadows
  7. Border radius and width
  8. Opacity

When you think of visual design as “styling things so they look good”, it’s easy to see why it might feel hard to achieve without innate artistic talent. But it turns out that one of the biggest factors in making something “look good” has nothing to do with superficial styling at all.

Not all elements are equal

Visual hierarchy is one of the most effective tool you have for making something feel “designed”. When everything is competing for attention, it feels noisy and chaotic. It’s one big wall of content where it’s not clear what actually matters. De-emphasize secondary and tertiary information, and highlight the elements that are most important.

Size isn’t everything

Don’t rely too much on font size to control your hierarchy. It leads to primary content that is too large and secondary content that’s too small. Instead, try using font-weight or color to do the same job. Make the primary element bolder, and use a softer color for supporting text, instead of tiny font size.

  1. Colors
    • Dark for primary content (headline, title, etc.)
    • Grey for secondary content (date, author, etc.)
    • Lighter grey for tertiary content (copyright notice, footer, etc.)
  2. Weight
    • Normal (400 or 500) for most text
    • Heavier (600 or 700) for emphasized text

Emphasize by de-emphasizing

Sometimes, the main element (the element you want to draw attention to) isn’t standing out, and you can’t make it bolder or bigger. Instead of trying to further emphasize it, figure out how you can de-emphasize the elements that are competing with it. Give them softer color so they sit more in the background.

Labels are the last resort

When presenting data to the user (especially from the database), it’s easy to fall into the trap of displaying it using a naive label:value format. It makes it difficult to present data with any hierarchy. Every piece of data is given equal emphasis. You might not need a label at all.

Many times you can tell what a piece of data is just by looking at the surrounding context. Even when some data isn’t completely clear without a label, you can avoid label by adding clarifying text to the value, e.g. 12 left in stock, instead of In stock: 12.

Sometimes, you just need the labels. However, they can be supporting content. The data itself is what matters, the label is there for clarity. De-emphasize it by making it smaller, reducing the contrast, or using a lighter font-weight.

Separate visual hierarchy from document hierarchy

Using an h1 tag for a title might make sense semantically, but it’s easy to fall into the trap of making those titles bigger than they really need to be. A lot of time, the titles act more like labels than headings. They are there for support, but they shouldn’t steal all the attention.

Don’t let the element influence its style. Pick elements semantically, but style them however you need to create the best visual hierarchy.

Balance weight and contrast

Icons are usually “heavy” and cover a lot of surface area. When you put an icon next to some text, the icon tends to feel emphasized. But you can’t change the icon’s weight, so to create balance, lower the contrast by giving it a softer color. Similarly, you can increase the weight of low contrast elements to emphasize them.

Introduce hierarchy to the actions

Every action on a page sits somewhere in a pyramid of importance. Most pages have one true primary action, a couple of less important secondary actions, and a few rarely used tertiary actions.

  • Make primary actions obvious with solid, high contrast background (buttons)
  • Secondary actions should be clear but not prominent. Lower contrast backgrounds are great options (buttons)
  • Tertiary actions should be discoverable but unobtrusive (links)

Introducing hierarchy to the actions on the page results in a much less busy UI that communicates more clearly.

Stay tuned. There’s more to come.