Negative space (also called 鈥渨hite space鈥�) is a positive thing! It provides:

• Differentiation between content chunks
• Improved ability to read and scan
• A more refined, pleasant aesthetic

McGill websites often suffer from too much content, and content that鈥檚 packed too densely. Negative space is the deliberate use of 鈥渆mpty鈥� space, which helps communicate structure and allows users to differentiate between content pieces. (As described in the principle of proximity!)

This makes layouts with negative space seem easier to use and less intimidating. Ample negative space is often perceived as more calming, refined, and attractive. Just be sure to test spacing on a variety of screen sizes, to make sure it works well across devices.

The WMS will naturally help you to use negative space. If you create defined regions and comfortable chunks, you benefit from the white space already attributed to these elements. To amp up your use of negative space:

1. Mix in different elements (headings, buttons, etc.)

Different layout elements like headings, buttons, columns, and grids often come with their own negative space. Similar elements may nest closer together or naturally have less empty space between them - for example, two paragraphs will nest quite closely. In contrast, a heading and a paragraph or a paragraph and a button will add more empty space. Using a variety of elements can help add negative space.

2. Beware adding extra line breaks!

This can look fine on your screen, but sometimes turn really wonky on mobile. If your site is in the WMS, you should also consider how your site will look if the underlying design changes. If you think an element needs more room, it's best to let us know聽so that we can make the correction to the entire system.

3. Know your negative space personality

If you鈥檙e working outside the WMS, it can be helpful to get a sense of your own negative space 鈥減ersonality鈥� and control for that. Some folks tend to naturally use less negative space, while others tend to use a lot. Either way, there's a chance that your design's spacing will shift subtly from one mockup to the next. It helps to check your spacing against a consistent, objective measure. For example, you could compare your design side-by-side with a similar design that feels balanced. You could also try using standard units of measure in your designs,