How to Use Space in UI Design

What is meant by white space?

Types of white space:

  • Micro white space
  • Macro white space
  • Active white space
  • Passive white space

Why white space is crucial in interactive UI design?

  • Increased legibility
  • Visual hierarchy
  • Drives attention and focus
  • Engage user longer
  • Defines character and brand image
  • Logical grouping in layout

Using White space effectively in UI design

  • Use between text
  • Around CTA’s and main elements
  • Avoid too much negative space

Examples of brilliant use of white space in UI design

  • Tinker
  • Apple
  • Dropbox

UI design tool for beginners — Mockitt for designing UI like a pro

  • Intuitive design and direct feedback
  • Built-in libraries and widgets
  • Simple interface
  • Latest screen settings
  • Cloud-based design platform
  • Swift workflow with easy collaborations

Wrapping it up!



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Wondershare Mockitt

Wondershare Mockitt


Mockitt is a cloud-based prototype, design and collaboration tool, which offers a new way to scale design thinking. Home Page: