Book review: Refactoring UI
I just finished reading Refactoring UI, and here is a review for potential readers.
Refactoring UI is a book by Adam Wathan & Steve Schoger. The authors are a developer/designer duo. I hope, this review will help you to decide whether read or don’t read refactoring UI.
The book consists of eight chapters, and covers essentials like hierarchy, layout and spacing, typography, color, etc; It is short — approximately 250 pages, and full of illustrations.
Text is written in a simple language, and is not too technical. Even if you are a beginner and unfamiliar with UI terminology, it will not be a problem to understand this book.
Who should read refactoring UI?
The book is originally meant for developers, who want to learn more about UI design. However, if you are a beginner UI designer, you will find this book helpful.
Instead of looking for practical tips all over the internet, authors of refactoring UI gathered together valuable practices, tips, and tricks. If you are a self-learner, it will be extra useful. Teaching yourself although rewarding and interesting, it’s also a time-consuming and sometimes exhausting journey.
In other words, I wish I have read this book a few months ago, at the beginning of my journey. Refactoring UI will help you to learn practical things, advance your skills and re-think UI.
If you are an experienced product designer, you can skip reading Refactoring UI. Chances are, you know most of the things in the book.
Why should you read Refactoring UI?
Refactoring UI's main advantage is that every chapter is designed to be as independent as possible. It is easily scannable. Oh, and you can read it in a few hours.
The book is full of recommendations, which certainly will make your design look better. For example, a book suggests using fewer borders:
Borders are a great way to distinguish two elements from one another, but using too many of them can make your design feel busy and cluttered. Instead, try adding a box shadow, using contrasting background colors, or simply adding more space between elements.
While I agree that fewer borders look more eye-pleasing, chances are that it will puzzle some of the users.
Notes from the book
I love taking notes, and I took a lot of them. Here are some of them.
Work in cycle
Instead of designing everything up front, work in short cycles. Start by designing a simple version of the next feature you want to build. Once you’re happy with the basic design, then add details.
Be a pessimist
When you’re designing a new feature, expect it to be hard to build. Designing the smallest useful version you can ship reduces that risk considerably. 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.
Ditch hex for HSL
Color is one of the most important things in UI design. There are different formats — HEX, RGB, CSS, HSB, and HSL. I mostly used Hex and RGB, but the authors suggest that the best format is HSL.
HSB is more common than HSL in design software, but browsers only understand HSL, so if you’re designing for the web, HSL should be your weapon of choice.
Not every link needs a color
Most of the time, when I include links in the non-link text, I use color for it in order to stand out from the text. But, when there are too many links, using color to make links pop in paragraph text can be overbearing. Instead of giving a link color, you can add an underline or change the color only on hover.
You need more colors than you think
In practice, a huge part of an interface is grey — text, backgrounds, panels, etc; Usually, three or four shades might sound like plenty, but chances are you will need more shades. Same with primary colors — in general, you may use one or two primary colors, but you will need lighter and darker shades to choose from.
Line-height is proportional
Line height and font size are inversely proportional — use a taller line height for small text and a shorter line height for large text.
Conclusion
Overall, refactoring UI is a good book about UI design. It is practical and scannable, and you can finish reading it in a few hours. If you are a beginner, I recommend reading it.
Pro tip: Use the opportunity to get two chapters for free. Then, you can decide if you want to continue reading.
Don’t hesitate and share your favorite books about UI/UX design. If you like this article, don’t forget to 👏👏👏👏👏 and follow me on Medium.
