- Law five, Maintain a Visual Hierarchy.
Maintaining a visual hierarchy is going to make
your documents more professional, and it
will make your messages more memorable.
A visual hierarchy directs the flow of a document
and it does this by making the document structure
clear to your readers.
So, a document structure may include things like
document titles, chapter titles, headings, subheadings,
body text, page headers, and page footers.
And so, your job is to format each of these elements
in a way that makes this structure visible.
Now, a document structure is hierarchical,
and that means that some elements are
subordinate to other elements.
Your goal is to reveal this hierarchy
and each element's place in it.
And there are a lot of different ways
you can indicate visual hierarchy.
You can use bold, italics, type size, type face,
type weight, white space, rules, boxes, leading,
letter spacing, or uppercase characters.
So, let's look at a typical document hierarchy.
At the top level, we've got the document title.
Then there are level one headings,
which are subordinate to the document title.
Level two headings are subordinate to level one headings.
Body text is subordinate to all
the headings and all the subheadings.
Image captions are subordinate to the body text.
And document headers and footers
are subordinate to the image captions.
So, the visual attributes of each element
should correspond to that element's
place in the document hierarchy.
That means each subordinate element
should be formatted to look subordinate.
This will help readers know where to begin in your document
and also how to understand your document's flow.
A visual hierarchy is going to
add variety to your documents, it's going
to add visual interest as well.
The visual hierarchy keeps your pages
from looking too grey and too monolithic.
Here's a page that lacks a visual hierarchy
and you can see that all the text on this page
is set at the same type size and the same type face,
with the exact same amount of emphasis.
There are no visual cues that provide any information
about the difference between the
title, headings, and body text.
And because everything on this page looks so similar,
there's no obvious starting point,
and overall, the result is a very grey, very dull page.
There's really no visual interest to attract readers.
There's nothing to really tell them where to begin,
and there's not much that's going to keep their interest.
So here's a page with a different problem.
The elements on this page don't maintain a visual hierarchy.
When we look at this document, it's pretty difficult
to get a quick grasp of each element in the document,
and it's relationship to all the other elements.
So, if we look at it, the image caption, page header,
and page footer are all larger than the body text.
The subheadings are larger than the book title.
The chapter title is the same size,
and it's also the same weight as the body text.
Look at the words "Chapter Five", these
are the largest words on the page.
So ask yourself, are these really
the most important words on this page?
They're probably not, but the way they're formatted
they call the most attention to themselves, and they
certainly look like the most important words on the page.
Overall, this visual formatting is pretty confusing.
It draws attention away from the content of the document,
and that's always going to be a bad thing.
Now, here's a page where a visual hierarchy
has been established, and it's also been
maintained throughout the document.
And this visual hierarchy provides a very
clear, professional, organized framework.
Even if you couldn't read this content,
it's clear that this is the document title
because it's the largest text on the page, and it's bold.
You can see that the level one heading is also bold but it's
smaller than the document title because it's subordinate.
The words "Chapter Five" are smaller
than the level one heading.
They're also not bold because they're
not as important as the name of the chapter.
The subheadings are bold but they're smaller
than the level one heading, they're also
italicized to make them a little different.
The body text is smaller than all the headings
and the image caption is smaller
and is lighter than the body text.
The page header and page footer are
the smallest elements on this page.
So, here a clear hierarchy has been established,
and it's been maintained throughout the page.
The visual design of each page element
reinforces this hierarchy.
So, before you begin creating a document,
you're gonna want to do some preplanning
and decide what elements your document will contain
and then you'll be ready to make some design decisions
about how you want to format each element
so that a clear visual hierarchy is created and maintained.
You can use your software's built-in style sheets
to help set up and apply and maintain
this consistent hierarchy throughout your document.
And if you're a web designer, using
Cascading Style Sheets, or CSS,
is going to help provide the same framework.
Let's summarize.
Maintaining a visual hierarchy is important
so that a document structure is quickly clear to readers.
A visual hierarchy gives readers an obvious starting point,
and it directs the flow of a document.
Using a visual hierarchy is going to make your documents
more professional, more organized,
more engaging, and more effective.
That's law five, Maintain a Visual Hierarchy.