Over 20,000 copies sold

Make your ideas look awesome, without relying on a designer.

Learn how to design beautiful user interfaces by yourself using specific tactics explained from a developer's point-of-view.

Buy now
  • This is the survival kit I wish I had when I was starting out building apps.

    Derrick Reimer

    Founder of SavvyCal

“I know this looks terrible, but I have no idea why.”

Design with tactics, not talent.

Most design courses are missing the mark.

What we’ve put together

The Book

Full table of contents

  1. Starting from Scratch
    1. Start with a feature, not a layout
    2. Detail comes later
    3. Don’t design too much
    4. Choose a personality
    5. Limit your choices
  2. Hierarchy is Everything
    1. Not all elements are equal
    2. Size isn’t everything
    3. Don't use grey text on colored backgrounds
    4. De-emphasize to emphasize
    5. Labels are a last resort
    6. Separate visual hierarchy from document hierarchy
    7. Balance weight and contrast
    8. Semantics are secondary
  3. Layout and Spacing
    1. Start with too much white space
    2. Establish a spacing and sizing system
    3. You don’t have to fill the whole screen
    4. Grids are overrated
    5. Relative sizing doesn’t scale
    6. Avoid ambiguous spacing
  4. Designing Text
    1. Establish a type scale
    2. Use good fonts
    3. Keep your line length in check
    4. Baseline, not center
    5. Line-height is proportional
    6. Not every link needs a color
    7. Align with readability in mind
    8. Use letter-spacing effectively
  5. Working with Color
    1. Ditch hex for HSL
    2. You need more colors than you think
    3. Define your shades up front
    4. Don’t let lightness kill your saturation
    5. Greys don’t have to be grey
    6. Accessible doesn’t have to mean ugly
    7. Don’t rely on color alone
  6. Creating Depth
    1. Emulate a light source
    2. Use shadows to convey elevation
    3. Shadows can have two parts
    4. Even flat designs can have depth
    5. Overlap elements to create layers
  7. Working with Images
    1. Use good photos
    2. Text needs consistent contrast
    3. Everything has an intended size
    4. Beware user-uploaded content
  8. Finishing Touches
    1. Supercharge the defaults
    2. Add color with accent borders
    3. Decorate your backgrounds
    4. Don’t overlook empty states
    5. Use fewer borders
    6. Think outside the box
  9. Leveling Up
    1. Leveling up

Video tutorials

The Component Gallery

Color Palettes

Font Suggestions

Custom illustrated icons

Get Refactoring UI today.

Learn how to design beautiful user interfaces by yourself using specific tactics explained from a developer's point-of-view.

Over 20,000 people are already using Refactoring UI to make their ideas look awesome.

Here’s what some of them are saying…

  • People ask me all the time where to learn to become a better designer. Well, here it is!

    Wes Bos
    @wesbos
    View tweet by Wes Bos

  • We just bought this at work and I absolutely love it. You guys did a great job. I do a lot of UI work but did it based on "feel" but couldn't explain why... your book does exactly that. Great work!

    Dana Cottreau
    @_DanaCottreau
    View tweet by Dana Cottreau

  • Well I just read Refactoring UI by @adamwathan and @steveschoger in one sitting. So it’s safe to say it’s a great book 🔥

    Tash
    @_tashhockey
    View tweet by Tash

  • I can proudly say that this is the best purchase I have made in a long time. Maybe ever! I love how visual it is -- forcing my wife to read it next! 😂

    Chris Breuer
    @chrisbreuer1904
    View tweet by Chris Breuer

  • Wow. What a read. This book has the most approachable, actionable, and useful design advice that I've ever seen 👏👏👏 @steveschoger and @adamwathan deserve a massive round of applause for putting this together

    Nick Basile
    @nickjbasile
    View tweet by Nick Basile

Frequently asked questions

Can I get Refactoring UI for my entire team?

Sure! We offer team discounts on the Complete Package based on the number of team members you'd like to purchase for:

Can I get an invoice?

Totally! After making a purchase we will automatically email you a receipt. That email will include a link to generate a more detailed invoice that can include your company information, should you need that for tax purposes.

What format are the files? Is there any DRM?

The book, component gallery, color palettes, and font recommendations are PDFs, the screencasts are downloadable mp4 files, and the icons are SVG.

Everything is DRM-free; that crap is annoying.

Can I upgrade to the complete package later?

Of course! Shoot us an email at [email protected]and we'll sort you out.

Does the component gallery include CSS?

Short answer is no.

Long answer is that the goal with the component gallery is to provide layout and treatment ideas with just enough fidelity to be useful.

If you need an idea for a pricing page layout, the idea is that you'd browse the component gallery to find one you like, then combine that with what you learn from the book to create a great-looking design yourself.

There are a million ways you could style these components, and we don't want the component gallery to encourage you to make every project look the same.

What's the license for the icons?

You can read a copy of the license here.

TL;DR: Do pretty much whatever you want with them, including using them in open-source projects. Just don't resell them or publish them on npm purely to distribute them for free or anything lame like that.

What if I decide it's not for me?

No problem at all! Email us at [email protected]within 60 days and we'll refund you in full, no questions asked.