Refactoring UI

A practical guide to UX design for non-designers. Zero fluff and full of actionable tips to instantly elevate your design skills and craft pixel-perfect experiences.
Steve Schoger, Adam Wathan

Top 3 Quotes

  • "Visual hierarchy is the most effective tool you have for making something feel 'designed'"
  • "If something is longer than two or three lines, it will almost always look better left-aligned."
  • "It’s not uncommon to need as many as ten different colors with 5-10 shades each for a complex UI."

Book Notes

Start small and iterate

  • Start with a feature, not a layout: Say you’re building a flight booking service, you could start with a feature like “searching for a flight”.
  • Add details later: In the earliest stages don’t get hung up about things like typefaces, shadows, icons, etc.
  • Design in grayscale: this forces you  to use spacing, contrast, and size to do all of the heavy lifting.
  • Don’t design too much up front: you don’t need to design every single feature in an app before you move on to implementation; in fact, it’s better if you don’t.
  • Work in cycles: iterate on the working design until there are no more problems left to solve, then jump back into design mode and start working on the next feature.

Choosing a Design Personality

  • Font choice: Typography plays a huge part in determining how a design feels.
  • Color: You really just need to pay attention to how different colors feel to you.
  • Border radius: How much you round the corners in your design can have a big impact on the overall feel. Make sure to stay consistent.

Useful Constraints

  • When you design without constraints, decision-making is torture.
  • Don’t reach for the color picker every time you need to pick a new shade of blue — choose from a set of 8-10 shades picked out ahead of time.
  • Define a restrictive type scale in advance and use that to make any future font size decisions.
  • When you build systems like this, you only have to do the hard work of picking the initial values once instead of every time you’re designing a new piece of UI.


  • Hierarchy is the most effective tool you have for making something feel “designed”.
  • Don't rely on font size to control your hierarchy — try using font weight or color to do the same job.
  • Stay away from font weights under 400 for UI work — they're too hard to read at smaller sizes
  • Labels are a last resort: e.g. for a real estate app, something like “Bedrooms: 3” could simply become “3 bedrooms”.
  • De-emphasize labels by making them smaller, reducing contrast, or using a lighter font weight.
  • Separate visual hierarchy from document hierarchy.

Layout and Spacing

  • Start with too much white space – give every element a little more breathing room, then remove it until it you’re happy with the result.
  • Establish a spacing and sizing system. 16px is a great number to start with.
  • Just because you have 1200-1400px of space to fill, doesn’t mean you need to use it.
  • Grids are overrated. There are a lot of situations where it makes much more sense for an element to have a fixed width instead of a relative width.
  • Let go of the idea that everything needs to scale proportionately.
  • Always make sure there’s more space around a group than within it.

Designing Text

  • Most interfaces use way too many font sizes.
  • Stick to px or rem units — it’s the only way to guarantee you’re actually sticking to the system.
  • Typefaces that come in a lot of different weights tend to be crafted with more care and attention to detail.
  • Fonts meant for headlines usually have tighter letter spacing and shorter lowercase letters (a shorter x-height), while fonts meant for smaller sizes have wider letter-spacing and taller lowercase letters.
  • If a font is popular, it’s probably a good font.
  • Keep your line length in check. Make your paragraphs wide enough to fit between 45 and 75 characters per line (a width of 20-35em should work).
  • Narrow content can use a shorter line-height like 1.5, but wide content might need a line-height as tall as 2.
  • Use a taller line-height for small text and a shorter line-height for large text.
  • Not every link needs a color.
  • Don’t center long form text. If something is longer than two or three lines, it will almost always look better left-aligned.
  • Tighten headlines when using fonts designed to be legible at small sizes (e.g. Open Sans).
  • Increase the letter-spacing of all caps text.

Working with Color

  • Greys: True black tends to look pretty unnatural, so start with a really dark grey and work your way up to white.
  • Primary color(s): Just like with greys, you need a variety (5-10) of lighter and darker shades.
  • Accent colors: On top of primary colors, every site needs a few accent colors for communicating different things to the user.
  • Expect to have as many as ten different colors with 5-10 shades each for a complex UI.
  • Ditch hex for HSL - it represents colors using attributes the human-eye intuitively perceives: hue, saturation, and lightness.
  • Define your shades up front. Choose the base color first, then find the edges, then fill in the gaps.
  • Call your darkest shade 900, our base shade 500, and our lightest shade 100.
  • Greys don’t have to be grey. in practice, a lot of the colors that we think of as grey are actually saturated quite heavily:

Creating Depth

  • Use shadows to convey elevation.
  • You don’t need a ton of different shadows — five is usually plenty.
  • Don’t think about the shadow itself, think about where you want the element to sit on the z-axis and assign a shadow accordingly.
  • Use solid shadows for flat designs.
  • Use overlapping elements to create layers.

Working with Images

  • Bad photos will ruin a design, even if everything else about it looks great.
  • Hire a professional photographer or use high quality stock photography.
  • Text needs consistent contrast. Add an overlay or lower the image contrast, colorize the image, or add a text shadow.
  • Don’t scale up icons. If small icons are all you’ve got, try enclosing them inside another shape.
  • Don’t scale down screenshots. If you want to include a detailed screenshot in your design, take the screenshot at a smaller screen size or take just a partial screenshot.
  • If you really need to fit a whole-app screenshot in a tight space, try drawing a simplified version of the UI with details removed and small text replaced with simple lines.
  • Beware user-uploaded content - control the shape and size of images, or try using a subtle inner box shadow to prevent background bleed.

Finishing Touches

  • Supercharge the defaults. e.g. for a bulleted list, try replacing the bullets with icons.
  • For testimonials, try “promoting” the quotes into visual elements.
  • For links, try changing the color and font weight, or using a thick and colorful custom underline that overlaps the text.
  • If you’re working on a form, using custom checkboxes and radio buttons.
  • Add color with accent borders - it can go a long way towards making something feel more “designed.
  • Decorate your backgrounds by changing the background color, use a slight gradient (hues no more than about 30° apart).
  • Add a simple shape or illustration instead of decorating an entire background, or use small chunks of a repeatable pattern.
  • Don’t overlook empty states - try incorporating an image or illustration to grab the user’s attention, and emphasizing the call-to-action.
  • Use fewer borders - too many of them can make your design feel busy and cluttered. Use two different background colors instead of borders.
  • Add extra spacing to create separation between elements.
  • Break a dropdown into sections, use multiple columns, add supporting text or colorful icons.
  • For tables, if a column doesn’t need to be sortable, try combining it with a related column and for some interesting hierarchy. Add images if it makes sense, or use some color.
  • Instead of radio buttons, try selectable cards instead.
© 2023 Mike Fiorillo
AboutBook Notes