Book Summaries | Refactoring UI - Layout and Spacing

December 28th, 2023

Refactoring UI - Layout and Spacing (Chapter 3)

This summary will serve to further cement my learnings taken when reading the third chapter of Refactoring UI, titled Layout and Spacing, and I hope will provide some learnings to you as well.

Start with too much white space

Begin with ample space for each element and progressively reduce until satisfied. This ensures elements have more breathing room, leading to cleaner and visually pleasing designs.

White space should be removed, not added

Designing with added white space can result in elements having only the minimum needed room. Instead, if you initiate the design with excess space you can then trim it down for optimal results. This in turn creates a balanced and visually appealing design.

Establish a spacing and sizing system

When in the design phase, nitpicking sizes impedes speed and consistency. Instead, what can be done is to define a system using a base value, factors, and multiples for efficient decision-making. This allows for faster design workflow, subtle design consistency, and cleaner aesthetics.

• In Tailwind CSS, the spacing system is based on a default spacing scale defined in the configuration file. The default spacing scale is typically defined in multiples of 0.25rem, starting from 0.25rem.
• If you want your system to make sizing decisions easy, make sure no two values in your scale are ever closer than about 25%.

// tailwind.config.js example
// Assumes root font is 16px
module.exports = {
  theme: {
    spacing: {
      0: "0",
      1: "0.25rem", // 4px
      2: "0.5rem", // 8px
      3: "0.75rem", // 12px
      4: "1rem", // 16px
      5: "1.25rem", // 20px
      6: "1.5rem", // 24px
      8: "2rem", // 32px
      10: "2.5rem", // 40px
      12: "3rem", // 48px
      16: "4rem", // 64px
      20: "5rem", // 80px
      24: "6rem", // 96px
    },
  },
};

You don’t have to fill the whole screen

Optimal screen usage is more crucial than maximum space occupation. Assign space as needed, avoiding unnecessary width for better interface clarity. Shrink canvas for small interfaces, focusing on mobile design first for responsive applications.

Grids are overrated

Relying solely on grid systems can limit design flexibility. Elements may require fixed widths instead of fluid, percentage-based widths. It’s best to avoid being confined by the grid; prioritize component needs over strict adherence.

Relative sizing doesn’t scale

It’s a myth to assume that all elements should scale proportionately, and it can in fact lead to design challenges. Elements often need independent adjustments for optimal appearance across different screen sizes. Prioritize proportional adjustments for larger elements to maintain visual balance.

Tip: Elements that are large on large screens often need to shrink faster than elements that are already fairly small — the difference between small elements and large elements should be less extreme at small screen sizes.

Another example would be with buttons. Large buttons should have padding that is more generous at larger sizes and disproportionately tighter at smaller sizes as this creates the effect that the button is shrinking as the screen size gets smaller, as compared to looking like a button that has been zoomed in or out at different screen sizes.

Avoid ambiguous spacing

Insufficient spacing between elements may create confusion. To combat this, ensure visible separation or grouping through appropriate spacing.