I recently bought myself a copy of Refactoring UI by Adam Wathan and Steve Schoger.

I opted for the much cheaper ($79 USD for a book and three videos) package, foregoing the large amount of extras I could have gotten for another $70 USD: icons, colour palettes, inspiration gallery and a rather comprehensive sounding font showcase.

While I can’t say for sure, not having bought them, my guess is that they would easily provide more than the extra $70 of value to any designer or aspiring designer.

So, on to the book and videos, from which I learned many things:

The Book

1) Design From Above

• How to focus on what the product needs to do before worrying about the layout.
• How to prototype in low fidelity.
• How to prioritise designing the core features without getting bogged down in hypothetical extensions.
• How to figure out who you’re designing for.
• How to design systems to constrain your choices.

2) Design With Hierarchy

• How to use font sizes and colours to convey hierarchy.
• How to separate visual hierarchy from document hierarchy.
• How to balance semantic importance with position in the hierarchy.

3) Layout

• How to use white space effectively (and how not to).
• How to build good space relationships.

4) Text

• How to establish good font size relationships.
• How to choose and pair good fonts for different parts of the interface.
• How to design text for prose.

5) Colour

• How to choose a good colour palette.
• How to define your colours in code.
• How to pair colours and make effective use of contrast.

6) Depth

• How to use shadows to convey a sense of “realness” in your interface.
• How to position and overlap elements effectively.

7) Images

• How to choose good images.
• How to pair text and images when contrast becomes a problem.

8) Finishing Touches

• How to use a lot of simple tips and tricks to make your product look more polished. These aren’t huge wins for accessibility or performance, but things you can do to elevate your design with minimal investment.

The Videos

Both packages come with three screen-cast style videos in which they improve the design of a realistic interface, explaining their process as they work. Being able to watch the interface transform as they talk you through it, and then be presented with the before and after makes a powerful impression as to the value of the concepts they discuss in the book.

Conclusion

This might seem like I’m simply regurgitating the table of contents and I suppose I am, but my aim is to convey the value I gained from this book in my own words as a developer who wants to be good at design (and who isn’t making any money from singing the book’s praises).

The examples are compellingly presented with before and after states, as well as having the important information such as colour and font choices annotated. Weighing in at a relatively lean 218 pages, Refactoring UI doesn’t delve too deeply into colour theory and the psychology of design, but provides countless rules of thumb and visual examples, showing even someone with the most rudimentary design skills (me) how to elevate their work to the next level.

To get a further sense of the value the book provides, I suggest you check out this series of hot tips from author Steve Schoger.