Skip to main content

Refactoring UI

· 15 min read

"Refactoring UI" by Adam Wathan and Steve Schoger is one of the best design books I have read as an Engineer. This book excels in guiding an engineer on the principles of effective design emphasizing on the core principles that makes an interface look appealing.

Starting from scratch

  • Start with a feature, not a layout. Don’t stress over the shell (sidebar, footer, header, navigation items, top-nav), start with what will what will offer real benefit to the user
  • Don’t stress too much over details
  • Start by designing in grayscale (you’re forced to use spacing and contrast to do all the heavy lifting to making it look good)
  • Move fast, don’t over invest in design ( that’s the whole essence of lo-fi design)
  • Don’t design too much (You don’t need to figure out every edge case at this stage)
  • Work in cycles
  • Be a pessimist, don’t imply functionalities you’re not ready to build in your design
  • Choose a personality e.g  a banking site is meant to have a personality of trust, secure, professional, while a trendy startup might have a fun and playful design
  • Fonts are key to design, for an elegant or professional look, use serif, for playful look use rounded sans-serif, for a plain or neutral look use neutral sans-serif
  • When choosing color emotionalise how it makes you feel
  • Border radius communicates a personality as well, a small border radius feels neutral, large one feels playful while no border radius feels serious or formal
  • Language and texts also communicate a personality
  • Limit your choices. This makes it easier to make decisions and not spend time pondering over what color or fontsize or button size to use
  • Define your design system in advance - have a small pool or color shades you can easily choose from, design by process elimination (this makes decision making easier), systemise everything (the more systems you have in place the quicker it is to make decisions and build e.g things like font size, color, margin, padding, width, height, shadows can be systemised.

Heirachy is everything

  • When everything in an interface is competing for attention, it feels noisy and chaotic, when it’s not clear what actually matters
  • Demphasize secondary and tertiary information and emphasise the important elements
  • Don’t use size to convey importance, use font weight and color. Size isn’t everything
  • Use a softer color for supporting text instead of tiny font size so you don’t sacrifice and readability.
  • Stick to 2/3 colours - Dark color for primary content, grey for secondary and lighter grey for tertiary
  • Stay away from fontweight under 400 for UI studs, they work for large headings but are harder to read at smaller sizes. User a light weight to de-emphasise text or a lighter color or a small font size instead.
  • A normal font weight (400-500 depending on font) for most text, a heavier font weight (600 - 700) for texts you want to emphasize.
  • Don’t use grey text on colored backgrounds, choose a color with the same hue and adjust the saturation and brightness until looks right.
  • Emphasise  by demphasizing. When you’re in a situation where something can’t be emphasise beyond its current state, demphasize its surrounding elements to draw attention to it.
  • Labels are a last resort. This isn’t about forms, when a piece of data isn’t completely clear without a label you can avoid adding a label by adding a clarifying text to the value. E.g “In-stock: 12” can be changed to “12 left in stock”, “bedrooms: 3” can be changed to “3 bedrooms”
  • When designing an interface you know the user is looking for the label then it’s okay to add labels e.g phone dimensions.
  • Section titles act more like labels than headings, they are supportive content and shouldn’t be stealing attention, h1 doesn’t mean it should be big, and if you want to for accessibility reasons then completely hide them visually, the content can speak for itself.
  • Bold font is good emphasis
  • Sometimes an Icon feels bold when placed next to a text, the way to solve this is to give it a softer color to de-emphasize it.
  • Increasing weight is a great way to add emphasis to low contrasts elements, e.g things like borders are too subtle might feel harsh when increasing the color contrast, so it’s better to increase the width to emphasise it and not losing it’s softer look.
  • Designing actions:
    • Primary actions should be obvious
    • Secondary actions should be clear but not prominent. Outline styles or lower contrast background colours are great optiobs
    • Tertiary actions should be discoverable but unobtrusive, styling these actions like links

Layout and spacing

  • Start with too much white space, then remove spaces gradually. Things always look good when they don’t look cramped.
  • Dense UIs have their place but it’s a lot more obvious when you need to remove white space than it is when you need to add it
  • Establish a spacing and sizing system, 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px, 192px, 256px, 384px, 512px, 640px 768px, etc
  • You don’t always have to fill the whole screen when the content doesn’t.
  • If you’re having a hard time designing a small interface on a large canvas start with mobile.
  • Think in columns, when working on something that works best at a narrower width but feels unbalanced you can split a it into columns instead of making it wider.
  • When designing sidebar it’s better to give it a fixed width instead of percentage or grid column dimension and optimise it for its contents
  • Don’t shrink elements until you need to
  • Relative sizing doesn’t scale, not everything needs to be relatively sized. Elements that are large on large screens need to shrink faster than elements that are already fairly small – the difference between small and large elements should be less extreme at small screen. 
  • Avoid ambiguous spacing, sometimes border can be used to explicitly separate elements and show how elements are grouped together

Designing Text

  • Using too many different font sizes, leads to inconsistencies and slowed workflow without a rigid design system, create a type system and you won’t have to waste time deciding what font size to use.
  • Choosing a Type System:
    • Linear scales are ineffective for font sizes.
    • Modular scales use ratios (e.g., 4:5, 2:3, golden ratio) but can result in fractional values and limited size options.
    • Hand-crafted scales are preferred for interface design for better control and avoiding rounding errors.
  • Avoid em Units:
    • Use px or rem units for consistent font sizes, as em units can lead to unpredictable results in nested elements.
    • Choosing Good Fonts:
      • For UI design, your safest bet is a fair neutral sans-serif – something like Helvetica.
      • Opt for neutral sans-serif fonts like Helvetica or system font stacks (e.g., -apple-system, Segoe UI, Roboto).
      • Avoid typefaces with less than five weights - typefaces with more weights tend to be crafted with more care and attention to detail than typefaces with fewer weights (this is not always true)
      • Optimize for legibility, especially for different purposes (headlines vs. body text).
      • Popular fonts are often good choices; inspect favorite sites for font choices.
  • Typography Best Practices
    • Line Length: Keep paragraphs between 45-75 characters per line for readability.
    • Dealing with Wider Content: Limit paragraph width even if other content is wider.
    • Baseline Alignment: Align mixed font sizes by their baseline for a cleaner look.
    • Line-Height: Use taller line-heights for small text and shorter for large text, proportional to line length and font size.
  • Link Styling:
    • Avoid overemphasizing links in interfaces; use subtle emphasis like heavier weight or darker color, and reserve underlining for hover states.
  • Text Alignment:
    • General Rule: Left-align text for most readability.
    • Centered Text: Suitable for headlines or short text; avoid for long-form text.
    • Right-Align Numbers: For easier comparison in tables.
    • Justified Text: Use hyphenation to avoid awkward gaps.
  • Letter-Spacing:
    • Generally, trust the typeface design but adjust for specific cases:
    • Tightening Headlines: Decrease spacing for a condensed look.
    • All-Caps Legibility: Increase spacing to improve readability.

Working with Color

  • Ditch Hex for HSL:

    • HSL is more intuitive for humans as it uses hue, saturation, and lightness. Hue represents color position (0° red, 120° green, 240° blue). Saturation represents color intensity (0% grey, 100% vibrant). Lightness measures proximity to black (0%) or white (100%).
    • HSB and HSL are different; use HSL for web design.

  • Need for More Colors:

    • Five-color palettes are insufficient for comprehensive design.
    • Break a good color palette in 3 Categories:
      • Greys: Used in text, backgrounds, form-controls etc.; need 8-10 shades.
      • Primary Colors: Used for primary actions and they determine the overall look of a site; you need a variety of 5-10 shades.
      • Accent Colors: Used for emphasis and states (e.g., red for danger); need multiple shades, even though they should be used sparingly across the UI
    • Complex UIs may require up to ten different colors with 5-10 shades each.

  • Define Shades Up Front:

    • Avoid using CSS functions to create shades; define fixed shades.
    • Steps:
      • Pick a base color.
      • Choose darkest and lightest shades.
      • Fill gaps with intermediate shades, aiming for at least 5-10 shades.
      • For greys, process is similar without emphasis on base color.

  • Adjust Saturation with Lightness:

    • Increase saturation as lightness moves away from 50% to avoid washed-out colors.
    • Use perceived brightness and hue rotation to adjust lightness without losing intensity. To make a color lighter, rotate the hue towards the nearest bright hue -60 degree, 180 degree, 300degree. To make a color darker, rotate the hue towards the nearest dark hue — 0 degrees, 120 degrees or 240 degrees.

  • Greys Can Be Saturated:

    • True grey has 0% saturation but practical greys often have color.
    • Cool greys have blue, warm greys have yellow/orange.
    • Adjust saturation for lighter/darker shades to maintain consistency.

  • Accessible doesn’t have to mean ugly:

    • Contrast Ratios: Follow WCAG guidelines (4.5:1 for normal text, 3:1 for large text).
    • Use dark text on light backgrounds for better contrast.
    • Rotate hues for colored text on colored backgrounds to maintain contrast.

  • Don’t rely on color alone:

    • Colors are great for enhancing information and making it easier to understand but relying on it solely might pose a problem for users with color blindness as they will have a hard time interpreting your UI. Don't rely solely on color for information.
    • Use icons or contrast to support color cues.
    • Ensure designs are understandable without color differentiation.

Creating Depth

  • Emulate a Light Source:

    • Elements can appear raised or inset by mimicking light effects. Light comes from above.
    • Raised Elements: Top edges are lighter, bottom edges darker.
    • Inset Elements: Top edges have shadows, bottom edges are lighter.

  • Simulating Light in UI:

    • Raised Elements: Use a lighter top border and a small dark shadow below.
    • Inset Elements: Use a lighter bottom border and a small dark shadow above.

  • Use Shadows to Convey Elevation:

    • Shadows indicate an element’s position on the z-axis and are used to create a sense of depth.
    • Small Shadows with a tight blur radius make an element feel slightly raised off the background.(e.g., buttons).
    • Medium Shadows: Further raised elements (e.g., dropdowns).
    • Large Shadows with a higher blur radius make an element feel much closer to the user: Highly elevated elements (e.g., modals).

  • Establish an Elevation System:

    • Define a set of shadows to maintain design consistency.
    • Start with smallest and largest shadows, then fill in middle options.

  • Combining Shadows with Interaction:

    • Use shadows to provide visual cues during user interactions. e.g Add a shadow to a draggable item or reduce a button’s shadow when pressed.
    • Shadows can have 2 parts:
    • Use two shadows to simulate different light effects:
      • First Shadow: Larger, softer shadow and larger blur radius for simulating shadow cast behind an object by a direct light source.
      • Second Shadow: Tighter, darker shadow with smaller blur radius for simulating a shadowed area underneath an object where even an ambient light has a hard time reaching.
    • Using 2 shadows gives a lot more control that you’d get with a single shadow — keep the larger shadow nice and subtle while still making the shadow closer to the element’s edges nice and defined.

  • Adjust shadow intensity based on elevation.

  • Flat Designs can have depth:

    • Create depth with color: Lighter elements feel closer, darker elements feel further.
    • Solid Shadows: Short, vertically offset shadows without blur can add depth.

  • Overlap elements to create layers:

    • Overlap different elements to make it feel like a design has multiple layers, ensuring visual separation.
    • Use “invisible borders” to prevent overlapping images from clashing.

Working with Images

  • Use Good Photos:

    • Bad photos can ruin a design. Hire a professional photographer for specific needs. Use high-quality stock photography from resources like Unsplash.
    • Avoid designing with placeholder images and replacing them with smartphone photos later.

  • Text Needs Consistent Contrast:

    • Background images can make text hard to read due to varying light and dark areas:
    • Solutions:
      • Add a semi-transparent overlay (black for light text, white for dark text).
      • Lower the image contrast and adjust brightness.
      • Colorize the image with a single color using a “multiply” blend mode.
      • Add a subtle text shadow with a large blur radius.

  • Everything Has an Intended Size:

    • Scaling Bitmap Images: Scaling up makes images fuzzy.
    • Icons: 
      • Avoid scaling up small icons; they lose detail and look chunky.
      • Use shapes with background colors to keep icons closer to intended size.
    • Screenshots:
      • Avoid scaling down full-size screenshots.
      • Use smaller screen sizes or partial screenshots.
      • Draw simplified versions for tight spaces.
    • Favicons:
      • Redraw simplified versions of logos for small sizes instead of scaling down.

  • Beware User-Uploaded Content:

    • When depending on user-uploaded images you need to make sure users don’t undermine your design; make sure user uploaded images are not displayed at their intrinsic aspect ratio.
    • Control Shape and Size:
      • Use fixed containers and crop images to maintain layout.
      • Center images using CSS with background-size set to cover.
    • Prevent Background Bleed:
    • Use a subtle inner box shadow or a semi-transparent inner border to separate image from background.

  • Supercharge the Defaults:

    • You don’t always have to add a new element to a design to add flare — enhance existing elements to add visual interest.
    • Replace bullets in lists with icons (e.g., checkmarks, arrows).
    • Increase size and change color of testimonial quotes.
    • Style links with different colors, font weights, or custom underlines.
    • Use custom checkboxes and radio buttons with brand colors.

  • Add Color with Accent Borders:

    • Use colorful borders to add visual flair to bland UI parts.
    • Applications:
      • Top of cards, active navigation items, sides of alert messages.
      • Underneath headlines, or across the top of the entire layout.

  • Decorate Your Backgrounds:

    • Change Background Color: Emphasize individual panels or page sections with color changes or slight gradients.
    • Use Repeating Patterns: Add subtle repeatable patterns to backgrounds, ensuring low contrast.
    • Add Shapes or Illustrations:
    • Include geometric shapes or graphics in specific positions.
    • Use simple, low-contrast illustrations like maps or patterns.

  • Don’t Overlook Empty States:

    • Prioritize designing empty states for features dependent on user-generated content.
    • Use images or illustrations to grab attention.
    • Emphasize call-to-action to encourage user interaction.
    • Hide supporting UI elements like tabs or filters until content is created.

  • Use Fewer Borders:

    • Avoid excessive use of borders to prevent cluttered designs.
    • Alternatives:
      • Use a Box Shadow: Subtle outlining without distraction, effective with contrasting background colors.
      • Use 2 different background colors: Give adjacent elements slightly different background colors for distinction. If you’re already using different background colors in addition to a border, try removing the border; you might not need it
      • Add Extra Spacing: Increase separation to distinguish groups of elements.

  • Think Outside the Box:

    • Challenge traditional design norms for components.
    • Examples:
      • Dropdown Menus: Break into sections, use multiple columns, add text or icons.
      • Tables: Combine related columns, add hierarchy, use images and color.
      • Radio Buttons: Use selectable cards instead of traditional stacked labels with circles.

Leveling Up

  • Look for Unconventional Design Decisions:

    • Identify Unique Choices: When you find a design you admire, analyze it for decisions you wouldn’t have considered.
      • Examples:
        • Inverted background color on a datepicker.
        • Button positioned within a text input instead of outside.
        • Different font colors within a headline.
    • Adopt New Ideas: Noticing and understanding these unconventional choices can inspire new approaches in your own designs.

  • Rebuild Your Favorite Interfaces:

    • Recreate Designs from Scratch: Attempt to replicate designs you admire without using developer tools.
      • This helps you notice small details that contribute to a polished look.
    • Discover Design Tricks: Through this process, you'll learn techniques like:
      • Reducing line height for headings.
      • Adding letter-spacing to uppercase text.
      • Combining multiple shadows for depth.
    • Ongoing Learning: Regularly studying and recreating inspiring designs will help you accumulate design tricks and refine your skills over time.