Resources

Refactoring UI

BookSprout

Adam Wathan and Steve Schoger's design book for developers — hierarchy, spacing, typography, color, depth, images and finishing touches as tactics you can apply without a designer's eye, from the two people who then built Tailwind CSS around the same instincts. A 218-page PDF, three screencasts, and a component gallery; DRM-free.

Web

"Design with tactics, not talent." The book is a list of moves — start with too much whitespace, establish hierarchy with weight and color before size, pick a type scale and stick to it, build a palette of shades not one color, use shadows to say what is closer — each shown as a before-and-after on a real screen. It is the design education most front-end engineers actually got, and it explains why Tailwind's defaults look the way they do: the scale, the shades and the shadow steps are this book's rules made into utility classes.

Read it beside the notes on the 4-point grid and choosing your sizes; the spacing and type-scale chapters are the argument those notes assume. The component gallery and icons are the Complete package's extras; the Essentials — book and videos — is the part that changes how you work.

  • a: Appearance
  • ?: Keyboard shortcuts