Why Whitespace?
Whitespace is simply space given between elements to spread out from each other. Giving just the right amount of whitespace makes designs look clean, modern, polished, and makes it easer for users to understand the overall structure of the webpage. Additionally, whitespace implies invisible relationships between elements which conveys how different pieces of information are related to one another.
Where To Use Whitespace
Use the right amount of whitespace between:
- Sections
- Group of Elements
- Elements
Inside groups of elements, try to use whitespace instead of lines.
How Much Whitespace
By following some standard rules, we can skillfully apply whitespaces to various elements:
-
The more some elements (or group of elements) belong together, the closer they should be.
-
Start with a lot of whitespace without worrying about layout. Then gradually remove whitespace from that point. Too much whitespace looks detached and too little looks too crammed.
-
Match other design choices. For instance, if you have big text or big icons, you need more whitespace. On the other hand, if the elements are small, you need less whitespace.
-
It is helpful to experiment with pixel sizes and choose the right one according to the webpage (Ex. multiples of 16px for all spacing).
