Refactoring UI Book Review
Refactoring UI Book Review
Refactoring UI Book Review
Renas Hassan
May 19th, 2025
Most developers think they need to be artistic to design great UIs. That's not true. You just need a few simple rules.
Introduction
I recently finished reading Refactoring UI by Adam Wathan (creator of tailwindcss) and Steve Schoger. It's a design book that teaches developers how to design beautiful user interfaces.
I used to suck at design and believed that I couldn't create appealing user-interfaces just because I wasn't "artsy" enough.
That was until I came across a blog article which explained the 7 design fundamentals. This changed my perspective completely. UI/UX principles are rules, not art skills.
Ever stare at your own UI and think "Why does this look off?" You can't exactly pinpoint what it is, but you know something's wrong.
Yeah, me too.
But with these principles under my belt, it was much easier to pinpoint and address these issues.
Last month, when my friend recommended this book to me, I decided I had to read it to level up my design game further.
Refactoring UI gives you a step-by-step upgrade to how you think about building interfaces.
What is it about?
Refactoring UI is a book for developers who want their work to look polished and well-designed, without spending a lot of time studying design.
Instead of fluff or abstract design theory, the authors give you practical, real-life, advice on everything from layout and spacing to typography, color, and visual hierarchy. They do it with a lot of examples and pictures to show you the differences.
Refactoring UI
- Adam Wathan, Steve Schoger
- 2018
- 252 pages
A practical guide for developers to designing better user interfaces.
Core ideas
There were a lot of great ideas in the book, honestly I felt like every chapter was very valuable.
But, I tried to extract what I think to be the three most important ideas below.
Design with hierarchy
Ever looked at an interface which looks very cluttered and you have no idea where to look?
This happens because there is no hierarchy, not all elements should take equal attention.
Visual hierarchy is all about how important the elements in an interface appear in relation to each other.
You need to ask yourself, what piece of content is important to highlight on the screen, and then design accordingly.
If everything is important, then nothing is.
There are several methods to apply this, you can either emphasize a certain element or de-emphasize the surrounding items.
So how do you actually control the visual hierarchy?
- Adjust font size (larger text draws more attention)
- Modify font weight (bolder text creates emphasis)
- Manipulate color contrast (darker shades stand out in light mode, lighter shades in dark mode)
Use font weight and contrast most of the time. Size is secondary.
Over-relying on font size for visual hierarchy can result in primary content appearing oversized while secondary content becomes too small to read comfortably.
Design with systems and constraints
Systemize everything. Having a set fixed amount of options to choose from that you have defined in advance will make designing both faster and easier, instead of having to second guess your own decisions.
You don't want to constantly be in a situation where you're nitpicking between using a 27px or 29px margin. It wastes time and makes your design inconsistent. Good design is always intentional and consistent.
Add systems for the following:
- Font size
- Font weight
- Line height
- Color
- Margin
- Padding
- Width
- Height
- Box shadows
- Border radius
- Border width
- Opacity
Below is an example size scale you can use:
Take a look at how the smaller values are bunched up close together, while the spacing between values gets wider and wider as you move up the scale.
When working with smaller numbers, even tiny changes create a significant visual impact. For instance, increasing from 4px to 8px represents a 100% increase. However, when dealing with larger numbers, such as going from 20px to 24px, that same 4px change appears much more subtle since it only represents a 20% increase.
The beautiful thing with tailwindcss is that you already have most of these systems built in, e.g mt-4, opacity-50, text-lg.
Of course you're going to have to adjust the colors and fonts. But having a system for choosing margin for example is going to help out a lot. Your design is going to be way more consistent, instead of having a bunch of irregular margins or paddings everywhere.
Choosing colors
Before learning a little bit about color theory I used to navigate to a color palette generator and choose a palette that fits my theme.
But the end result was always something like this:
The problem with the ugly abomination above is the restrictive number of colors, you need way more colors than five hex codes. By adding more colors to choose from we can actually craft something that looks nice.
A good palette can be broken down into three categories: greys, primary color(s), and accent colors.
Greys
These are the colors that you're going to use the most, because almost everything in an interface is grey: text, backgrounds, panels, form controls etc.
You'll want around 8-10 shades of grey in your palette, because before you know it you'll be wishing for a shade that's just a bit darker than #2 but not quite as dark as #3.
Note that you don't always have to go with a neutral grey, you can also use a warm or cold shade depending on your theme.
Primary colors
Pick 1-2 main colors for your primary buttons, active nav items, and other key UI elements. These are your brand colors, the ones that make people instantly recognize LinkedIn's blue or this blog's green theme.
Here you also need a variety of 5-10 lighter and darker shades to choose from.
Accent colors
You're going to need a few accent colors to communicate different things to the user.
For example a red color to confirm a destructive action, a yellow for warnings, and a green to highlight positive trends.
These colors should be used sparingly throughout the UI, but you're still going to need multiple shades for these colors too.
For a complex UI you might need about ten different accent colors with 5-10 shades for each.
Example palette
Having these colors defined up front is going to make your life a lot easier.
Here's how a well crafted palette might look like:
Is it worth reading?
After applying the principles covered in the book in my own designs, I can confidently say it makes a huge difference. All of the small details you pay attention to really stack up and contribute to the entire picture.
If you're looking to level up your UI skills with practical, immediately applicable tips, this book is a must-read. It's packed with actionable advice that you can start implementing in your projects right away. However, if you are an experienced UI/UX designer, chances are that you already know most of the things in the book.
This book is straight to the point, very readable, and doesn't assume you know anything about design. You can probably read it in a few hours. It shows you side-by-side UI tweaks so that you understand how and why a change improves the design. It also teaches you to think in patterns, not pixels.
If you've ever said, "I'm not a designer," this is the one book that might change your mind.
I rate this book 10/10, would read again.
Want to further level up your design skills? Look at beautifully crafted designs and ask yourself what makes this design great. Then you can start applying the same principles to your own designs.