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:
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.
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.
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-spacingto make the text more readable
- 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.
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, it supports this site and caffeinates me so that I can keep producing awesome content!