- Law six, Group Related Page Elements.
In most documents you're going to have some
elements that are related to others in the same document.
For example, headings are related to sub-headings.
Sub-headings are related to paragraphs.
And captions are related to images.
So when you look at a document,
these relationships should be obvious.
Related elements should be physically
close to each other in order to form a visual group.
There's a Gesalt Principle that's
called the Law of Proximity and this law states
when people perceive an assortment of objects,
they perceive objects that are close
to each other as forming a group.
Let's see how we can apply this
Law of Proximity to our document
design and topography.
Here is an example of a page with
some sub-headings and you can see that
the sub-headings are equally distant
from the text above them and the text below them.
This equal distance actually makes it look
like these sub-headings are floating in space.
They're really not visually anchored
to anything on the page and it's not clear
that they're related to anything on the page.
They look like standalone pieces of text.
But we know that sub-headings are not
standalone pieces of text, we know that
each of these sub-heads is like a little
headline for the paragraph that follows it.
So let's see how we can fix this issue.
Here's the same page, but this time
we've moved the sub-heads and we've moved
them closer to the body text that they relate to.
You'll see that there's more space on top
of these sub-headings then there is below them.
What this does is it makes the relationship
between the sub-heads and the paragraphs
that follow them much more obvious.
It's much more clear that these sub-headings
are related to these paragraphs of body text.
Here are two examples of images with captions.
In the first example, there's quite a bit
of white space on top of the caption.
In the second example, the captions
been moved up and now it's closer
to the image to which it refers.
So looking at the first example,
the captions not visually tied to the image
or anything else on the page.
The caption looks like it's a little
standalone piece of text.
And the second example it's much more clear
that the image and the caption below it
are related because of their physical proximity.
Be aware that the opposite of this law is also true.
If object are not related to each other,
they should be moved farther apart.
Here's an example of a page that
contains headers and footers.
You an see that the headers and footers
are really close to the body text on this page,
and the page is getting very visually crowded.
When you first look at it, it's really hard
to even see the difference between the body text
and the headers and the footers
because they're all so close together.
Now since the headers and footers
are not directly related to the body text,
they should be physically separated from it.
So now in this example you can
see that we've done that.
The headers and footers have been moved
closer to the margins of the document
where they belong and the body text
has been given some breathing room.
And this makes the relationship much more clear.
When you make these relationships obvious
readers are able to quickly grasp
the relationship between elements on your page
and your documents are more effective at communicating.
Let's summarize.
Related page elements should take advantage
of the Gesalt Law of Proximity.
This means that related elements
should be physically closer together on a page
and that unrelated page elements
should be physically separated from each other.
This helps to define the relationship
of these elements to each other.
It also helps form visual groupings
in your documents that's going to make your
documents easier to read and make them
more effective at communicating.
That's law six, Group Related Page Elements.