Important lessons from Adam Wathan's Refactoring UI

Refactoring UI, created by the talented Steve Schogar and Adam Wathan (co-creators of tailwindcss) is one of the best things I've read this year in terms of stuff learned, I feel like I've become a way better designer after reading every chapter, the thing I like about it is that it focuses a lot on the little things that when used together makes an average website 10x better

Some things-to-know if you're looking to buy this:

FYI ✨

I am only reviewing the book here, the creators of this e-book have made a full package, with a component library and exclusive icon pack for an added price, but as I said this review is for the e-book only.

This book isn't about CSS. it won't teach you about layout algorithms, but it does sometimes reference some CSS properties & units, I recommend Josh Comeau's CSS for JS Devs if you want to level up your CSS skills, but what you learn can obviously be applied using CSS.
It's not going to teach you to use prototyping tools like Figma or Penpot either
It's not focused on core concepts like color theory, although that is talked about, it's not the main focus of the book, rather it tries to teach you standalone tricks for improving your designs

Now with the "review" part out of the way, let's look at the most important lessons I learned from this book

Lesson 1: Design in grayscale

When making early designs for a website or an app don't use colors rather try and rely on spacing and typography and other things to create a cohesive design, you may find it hard at first to emphasize things without using colors but that's normal and that means you're improving your design skills

A good example of how I applied this, is the website you're reading this article on, when I made the first few designs the website looked like this, yeah it's not my best work.

An old prototype of my blog, with flashy colors — An old prototype of my blog from a few months back

but then I remembered what I learned from Refactoring UI and decided to start from scratch and make the spacing, contrast, and sizing do all the heavy lifting.

my website after redesigning it and following the advice from the book — After following the book's advice

I've loved the new design soo much that I've mostly kept the monochrome look without adding too much color and in my opinion, it looks much better now!

Lesson 2: Do typography "well"

I couldn't pick one lesson about typography for the headline so here are the best ones I found:

When using all-caps to emphasise the label, increase the letter-spacing to make the text more readable

Examples of all-caps done well from Josh Comeau's Blog

Line-height and font size are inversely proportional — use a taller line-height for small text and a shorter line-height for large text.
When aligning text of different sizes, align using the character baseline not the center, it'll look waay better. I usually need this in a navbar when I have a large logo on one side and multiple smaller navigation links on the other side.

Final Thoughts

So that's basically it, if you've found this article useful then I'd recommend reading the full-book, you learn a bunch of stuff I didn't cover here, other than that I'll catch you in the next one!

if you've enjoyed this article,consider buying me a coffee. currently I am saving up for a better microphone!