Book Review: Refactoring UI (2018)

Andrew (he/him) - Jul 19 '19 - - Dev Community

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.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .