In it, to WIN it! 🏆🎖🏅

Notes: Refactoring UI


With the COVID-19 Lockdown, finally, I took time to finish Refactoring UI by Adam Wathan & Steve Schoger.

You can download two chapters from their website. If you can not afford it or want to understand what you will get you can refer my notes below.

  • Start a new project — start off wireframing/designing/implementing the main
    parts of the UI first. Rest can wait!
  • Details can come in later. Don’t worry about colors, font sizes, etc.
  • By designing in grayscale, you’re forced to use spacing, contrast, and size
    to do all of the heavy lifting.
  • Designing Process is cyclic. Design <=> Code.
  • Design what can be implemented today in code. Rest can wait.
  • Design Personality is important.
  • Blue is safe and familiar — nobody ever complains about blue.
  • Define systems in advance — It’s a bit more work up front, but it’s worth it
    — it’ll save you a ton of decision fatigue down the road.
  • Systems — Font size, Font weight, Line height, Color, Margin, Padding,
    Width, Height, Box shadows, Border radius, Border width, Opacity
  • Pick a base colour — and choose 8-10 shades around it. You will need it.
  • Not all elements are equal — use de-emphasize, font size, font weight
  • Size isn’t everything — Relying too much on font size to control your
    hierarchy is a mistake
  • Don’t use grey text on colored backgrounds. Choose a color with the same
    hue, and adjust the saturation and lightness instead.
  • You might not need a label at all — In a lot of situations, you can tell
    what a piece of data is just by looking at the format. Combine labels and
    values. The data itself is what matters, the label is just there for
    clarity. If you’re designing an interface where you know the user will be
    looking for the label, it might make sense to emphasize the label instead of
    the data.
  • Separate visual hierarchy from document hierarchy — it’s easy to fall into
    the trap of making those titles bigger than they really need to be.
  • Balance weight and contrast – Icons generally cover a lot of surface area.
    Unlike text, there’s no way to change the “weight” of an icon, so to create
    balance it needs to be de-emphasized by contrast.
  • Every action on a page sits somewhere in a pyramid of importance.

    • Primary actions should be obvious. Solid, high contrast background
      colors work great here.
    • Secondary actions should be clear but not prominent. Outline styles or
      lower contrast background colors are great options.
    • Tertiary actions should be discoverable but unobtrusive. Styling these
      actions like links is usually the best approach.
  • Start with too much white space — It is easier to remove white space than
    adding it.
  • Establish a consistent spacing and sizing system.
  • You don’t have to fill the whole screen. If you need more columns on smaller
    screen use it.
  • Grids are overrated — Not all elements should be fluid.
  • Relative sizing doesn’t scale — It should be in relationship with the
  • Type Scale – avoid ems. You will need more options at the start of the scale
    and lesser as it increases.
  • Ignore typefaces with less than five weights — typefaces that come in a lot
    of different weights tend to be crafted with more care and attention to
    detail than typefaces with fewer weights.
  • Keep your line length in check — 45 to 75 characters per line.
  • Baseline, not center – wehn using multiple font sizes to create hierarchy on
    a single line.
  • Line-height is proportional. Taller for para, shorter for headlines.
  • Not every link needs a color.
  • Align with readability in mind — if something is longer than two or three
    lines, it will almost always look better left-aligned. Right-align numbers.
    Hyphenate justified text.
  • Use letter-spacing effectively — Tightening headlines.
  • Ditch hex for HSL

    • Hue is a color’s position on the color wheel — it’s the attribute of a
      color that lets us identify two colors as “blue” even if they aren’t
    • Saturation is how colorful or vivid a color looks. 0% saturation is grey
      (no color), and 100% saturation is vibrant and intense.
    • Lightness is just what it sounds like — it measures how close a color is
      to black or to white. 0% lightness is pure black, 100% lightness is pure
      white, and 50% lightness is a pure color at the given hue.
  • You need more colors than you think — You can’t build anything with five hex
    codes. You will need Greys, Primary color(s), Accent colors, Reds, Yellows,
  • When you need to create a lighter or darker variation of a color in your
    palette, don’t get clever using CSS preprocessor functions like “lighten” or
    “darken” to create shades on the fly.
  • Greys don’t have to be grey — If you want your greys to feel cool, saturate
    them with a bit of blue. To give your greys a warmer feel, saturate them
    with a bit of yellow or orange.
  • Accessible doesn’t have to mean ugly.
  • Don’t rely on color alone – Add icons etc.
  • Emulate a light source.
  • Use shadows to convey elevation.
  • Even flat designs can have depth.
  • Overlap elements to create layers.
  • Everything has an intended size – Don’t scale up icons. Don’t scale down
    screenshots. Don’t scale down icons, either. Re-draw them.
  • Beware user-uploaded content – Control the shape and size.
  • Prevent background bleed from images. Use a subtle inner box shadow or a
    semi-transparent inner border.
  • Supercharge the defaults – bullets, link, checkboxes, radio buttons etc.
  • Add color with accent borders.
  • Decorate your backgrounds – color, patters, simple shape or illustration
  • Don’t overlook empty states – Try incorporating an image or illustration to
    grab the user’s attention, and emphasizing the call-to-action to encourage
    them to take the next step. Empty states are a user’s first interaction with
    a new product or feature. There’s no point in presenting a bunch of actions
    that don’t do anything until the user has created some content.

About the author

Harsha MV

I turn ideas into companies. Specifically, I like to solve big problems that can positively impact millions of people through software.

In it, to WIN it! 🏆🎖🏅

About Me

I turn ideas into companies. Specifically, I like to solve big problems that can positively impact millions of people through software.

Follow Me