DEV Community

Cover image for Book Review: Refactoring UI (2018)
Andrew (he/him)
Andrew (he/him)

Posted on

Book Review: Refactoring UI (2018)

I love this book, because it doesn't mess around: there's a title page, the table of contents, and then you're immediately presented with some great design advice:

"Start with a feature, not a layout"

That's the title of the first section of the first chapter of this book. The authors explain that design is different from aesthetics. When you're developing a product like an app or a website, the most important thing is that it's functional. Decide what UI elements you need to satisfy that functionality first, then build your product around it. Google's home page contains little more than a single search box, but it's one of the most popular websites on the Internet.

I feel like I can't accurately summarise this book in a review because every sentence is brimming with great design tips. The book is only about 200 pages long and -- because there are a lot of graphics -- you can easily read it in a few hours in a single afternoon. It feels like sitting down for a chat with an experienced web developer and listening to them explain every bit of design advice they've accrued over their career.

This book has helped me put into words what I think is the most important piece of design advice anyone could give, and that is: "be consistent". Not "consistent" in the sense that everything has to always be the same, but in the sense that you should pick a few different fonts, a few different colours, and so on, and use them the same way in the same contexts.

The authors call this a "visual hierarchy" and recommend that you develop it ahead of time so you you're not constantly fretting over minute design details as you develop your website or app. Pick 2-3 shades of a colour for emphasised, normal, and de-emphasised text. Use a heavier font weight to emphasise important information. Pick a colour scheme and stick with it. Use whitespace judiciously. Steer clear of relative sizing.

In my humble opinion, the two biggest "tells" of someone who's not design-minded are:

  1. inconsistent or inappropriate spacing
  2. inconsistent layout

I can't tell you how important it is for your company logo to be in the same place on every page of your website, or every slide of your Powerpoint presentation (excepting maybe the home page / title slide). It looks unprofessional (dare I say "sloppy"?). This book emphasises these points and more.

As I said, it's difficult to summarise this book in a few sentences. If you're interested in visual design, especially web design, I promise that you will not be able to put this book down. I would recommend it to anyone working in UI/UX, frontend development, or web or mobile design. Actually, I would recommend it to anyone who has ever had to lay out a report, make a slide deck, or design a brochure. There are certain rules of design that transcend media and this book provides a great foundation for designing professional-looking products. 100% Recommended.

Discussion (10)

flrnd profile image
Florian Rand • Edited

The authors explain that design is different from aesthetics.

I'm a designer and I lost count of how many times I've tried to explain that.

Seems like a interesting reading! Added to my reading list, thank you!

johnbwoodruff profile image
John Woodruff

This book is incredible. My current project I'm working on is designed 100% by me, and the principles and advice in this book had a direct impact on my designs. I'm super proud of how it's turning out, and I wouldn't be anywhere near as happy without this book. Can't recommend it enough.

stefandorresteijn profile image
Stefan Dorresteijn

Hey, I have this book and I fully agree with you. It helped me massively.

dylanesque profile image
Michael Caveney

I just got this last week, this book is a must for any developer who wants to improve their design abilities.

seanmclem profile image
emma profile image
Emma Goto πŸ™

Thanks for the review! I'm hoping they'll eventually release this in physical book form instead of a PDF.

philou profile image
Philippe Bourgau

Thanks for this review.
Does the book contain UI-code refactoring techniques, or is it specifically about changing the design of the UI?

ky1e_s profile image
Kyle Stephens

Hi Andrew, I had come across the book and was keen to buy but then saw the price.

Was it worth it? Seems a bit steep for a book, imo!

awwsmm profile image
Andrew (he/him) Author

I bought "The Essentials" ($79), which is just the book and three video lessons. I haven't checked out the video lessons yet, but I would say the package is probably worth somewhere around that price. I would definitely be comfortable having personally paid around $49 for the book alone, but my work actually paid so Β―\_(ツ)_/Β―

andrewdavis2 profile image