Rules for developers to design beautiful UIs without a designer

Hi! I’m Adam Wathan, a full stack developer who used to suck at design. I’ve been friends with Steve Schoger for years and we’ve worked on a bunch of side projects together — him handling the UI design and me taking care of development.

Like a lot of developers, I always wished I could make my ideas look awesome without relying on a designer, but any time I tried to design something myself I would always get frustrated and give up.

I always chalked it up to a left brain/right brain sort of thing — I’m logical and analytical so I’m good at programming, people like Steve are intuitive and creative so he’s good at design.

But after working closely with Steve I started picking up little tricks. Tricks that didn’t require any artistic talent, but made things look better instantly for reasons that made sense to me as a developer.

Here’s a concrete design tactic I bet you see applied every day but haven’t explicitly noticed.

Use fewer borders.

Borders are a great way to distinguish two elements from one another, but using too many of them can make your design feel busy and cluttered.

Instead, try adding a box shadow, using contrasting background colors, or simply adding more space between elements.

It doesn’t take any talent to make changes like this — once you know the tactic you just need to notice the problem and apply the solution.

They focus so much on high level principles like color theory and typography which, while important, never helped me make instant improvements like the actionable, specific tactics I was picking up from Steve.

Working together, we knew we could create something better.

Over the last few years, we’ve helped thousands of developers get better at design through quick tips, in-depth articles, and video tutorials.

Refactoring UI takes everything we know about design and bundles it into one comprehensive package, including a book, screencasts, a component gallery, custom designed assets, and more.

It’s exactly what I needed when I was struggling to make my projects look awesome.

What we’ve put together

The Book

Full table of contents

1. Starting from Scratch

   1. Start with a feature, not a layout7
   2. Detail comes later10
   3. Don’t design too much13
   4. Choose a personality17
   5. Limit your choices24

2. Hierarchy is Everything

   1. Not all elements are equal30
   2. Size isn’t everything32
   3. Don’t use grey text on colored backgrounds36
   4. De-emphasize to emphasize39
   5. Labels are a last resort41
   6. Separate visual hierarchy from document hierarchy46
   7. Balance weight and contrast48
   8. Semantics are secondary52

3. Layout and Spacing

   1. Start with too much white space56
   2. Establish a spacing and sizing system60
   3. You don’t have to fill the whole screen65
   4. Grids are overrated72
   5. Relative sizing doesn’t scale79
   6. Avoid ambiguous spacing83

4. Designing Text

   1. Establish a type scale88
   2. Use good fonts94
   3. Keep your line length in check99
   4. Baseline, not center102
   5. Line-height is proportional105
   6. Not every link needs a color109
   7. Align with readability in mind111
   8. Use letter-spacing effectively115

5. Working with Color

   1. Ditch hex for HSL119
   2. You need more colors than you think123
   3. Define your shades up front129
   4. Don’t let lightness kill your saturation133
   5. Greys don’t have to be grey139
   6. Accessible doesn’t have to mean ugly142
   7. Don’t rely on color alone146

6. Creating Depth

   1. Emulate a light source150
   2. Use shadows to convey elevation158
   3. Shadows can have two parts163
   4. Even flat designs can have depth167
   5. Overlap elements to create layers170

7. Working with Images

   1. Use good photos174
   2. Text needs consistent contrast176
   3. Everything has an intended size181
   4. Beware user-uploaded content187

8. Finishing Touches

   1. Supercharge the defaults192
   2. Add color with accent borders195
   3. Decorate your backgrounds198
   4. Don’t overlook empty states203
   5. Use fewer borders206
   6. Think outside the box210

9. Leveling Up

   1. Leveling up215

Video tutorials

Each video is tightly edited and just the right pace, so there’s no wasted time watching me “hmm” and “uhh” my way around the design.

The Component Gallery

It includes medium-fidelity mockups of every idea we could think of, for every component we could think of, including things like:

• Button styles
• Card layouts
• Login page layouts
• Table styles
• Marketing page sections
• Navigation layouts

…and much, much more.

Color Palettes

We’ve also put together a huge library of individual color scales that you can use to curate your own palettes, without handpicking every single shade yourself.

Font Suggestions

Each font is shown in an example UI for that category, so you can get a feel for exactly how it’s going to look where you intend to use it, without having to try each font yourself.

If you’ve ever felt uneasy trying to choose a typeface, this is going to save you a ton of time.