Whitespace defines the hierarchy of the content on the screen. Following are some design rationales that support the use of optimal whitespace (or negative space):

  1. Whitespace provide the UI elements “room to breath
  2. The following are some ways using which whitespace can be introduced:
    1. Margins and Paddings
    2. Space around visuals
    3. Line spacing for text
  3. Whitespace makes grasping of the content (reading, skimming, making sense) easier
  4. Whitespace helps in clarifying proximal relationships  (UI elements in close proximity are perceived as one object)
  5. Helps in maintaining the visual hierarchy

Spacing Guidelines