Working examples

This is not a Government of Canada website

The purpose of this website is to provide a working example of the WET-BOEW-Moodle theme created by TNG Consulting Inc. together with the Government of Canada. Demo courses are only available in English however multi-language courses are supported.

Margin proximity

Style guide information

Increasing or decreasing proximity and white space suggests that content is either associated or unrelated.

The principle of proximity in visual perception is a very simple one: things that are spatially close to each other are seen as related. We can use this principle to make it clear when elements ... have an association, and when they are separate.

Put things that are related close together, and space things that need to be seen as separate.

We can apply the principle of proximity in reverse: elements that are spaced apart from each other are seen as separate.

The principle of proximity calls for related items to be grouped visually, creating less clutter and making for a more organized layout. Items unrelated to each other should be placed further apart, to emphasize their lack of relationship.

Using white space effectively and grouping related elements are critical to giving your website a clear visual hierarchy.

Last modified: Monday, 26 August 2019, 10:06 AM
Date modified: