refactoring-ui-design

Refactoring UI Design

Overview

Apply Refactoring UI's developer-oriented design tactics to make an interface clearer, more polished, and easier to use. Treat visual design as a sequence of concrete refactors, not as decoration or vague taste.

This skill is distilled from the public Refactoring UI site and its published table of contents. Do not quote or reproduce paid book content.

When to Use

Use this when:

• Building or redesigning a frontend screen, component, dashboard, form, landing page, or documentation page.
• Reviewing a UI that "works" functionally but looks unpolished.
• Choosing spacing, typography, colors, shadows, imagery, or visual hierarchy.
• Converting a wireframe or plain HTML into a finished interface.

Do not use this to override explicit product requirements, an existing design system, accessibility requirements, or brand guidelines. Use it to improve execution within those constraints.

Workflow

1. Start with the feature, not the layout.

   • Identify the primary job, primary user action, and most important information.
   • Design enough real content to solve that job before adding surrounding sections.
   • Avoid designing too many states or pages before the core screen works.

2. Choose a personality, then limit choices.

   • Pick a small set of reusable decisions for radius, spacing, type scale, color, shadow, and border strength.
   • Reuse tokens and local patterns. Random one-off values usually make the UI look accidental.

3. Establish hierarchy before styling details.

   • Not all elements are equal. Make the primary action, current state, and key content visually dominant.
   • Use size, weight, color, contrast, spacing, and position together; do not rely on font size alone.
   • De-emphasize supporting labels, metadata, disabled actions, helper text, and secondary controls.
   • Replace unnecessary labels with context, grouping, icons, or stronger content structure when the meaning remains clear.

4. Fix layout and spacing.

   • Start with more whitespace than feels natural, then tighten only where relationships need to be clear.
   • Use a spacing scale instead of arbitrary margins.
   • Do not fill the whole screen just because space exists.
   • Avoid ambiguous spacing: related items should be closer to each other than to unrelated items.
   • Prefer simple alignment and grouping over complex grids unless the content genuinely needs a grid.