Refactoring UI

Wathan and Schoger wrote this for developers who need to design interfaces and have no design training. It is organised as a set of specific, applicable tactics rather than as design theory, with before-and-after examples for each.

The substantive advice covers hierarchy, spacing, typography, colour, depth and imagery. On hierarchy they argue that most amateur interfaces fail because everything has the same visual weight, and they give concrete methods: use font weight and colour rather than size to create distinction, de-emphasise supporting text rather than emphasising primary text, and label content only when the label carries information. On layout they argue for starting with too much white space and removing it, for sizing elements by content rather than filling the available width, and for designing the mobile layout in a desktop-width window to avoid cramped thinking. On colour they set out how to build a palette using HSL, why lightness must be varied along with hue, and how to generate the eight to ten shades of each colour a real interface needs. On typography they cover choosing typefaces, line length, line height and the specific problem of vertical alignment.

The book is compact, entirely practical, and it produces visible improvement quickly, which is why it circulates among founders building their own products. It teaches tactics rather than design judgement, so it will not make a reader a designer. Its aesthetic is specific to the mid-2010s web application style, and interfaces built strictly by its rules look similar to each other. It also predates the current design systems and component library practice, though the underlying principles about hierarchy and spacing are not affected.