Document design strategies

Visual hierarchy

Visual hierarchy is the art of placing elements on the page to emphasize what is important and in what order they should be read.

DO

• Do make sure everything on the page is placed deliberately.
• Do use contrast to establish visual hierarchy: for example, different colours, sizes, weights of text.

DO NOT

• Do not place elements randomly on the page.
• Do not crowd the page with clutter (too much text or too many images).
• Do not all text the same size, because your reader will not know where to look first.

Proximity and alignment

Proximity is the amount of distance between elements in a design. Alignment is the way that elements are lined up with each other.

DO

• Do group related items together.
• Do use bullets when listing elements.
• Do use a strong alignment, like left or right alignment.

DO NOT

• Do not put too much white space between related items.
• Do not use centre alignment unless there is a specific design reason.
• Accessibility tip: Do not justify your text.
  • Why? When you choose to justify, each line of text is spread out evenly between your left and right margin, and each side has a clean edge. As a result, you will have large gaps between words in some lines. This makes the text more difficult for the eye to scan.

Typography

Typography refers to how letters, text, and symbols are placed on the page. The goal of plain design is to make the text readable and the message clear. Use typography that supports this goal.

DO

• Do use a clear, legible font for body text.
• Do use contrasting colour, size, and weight to draw the reader’s eye to what you want them to see first.
• Do make sure headings are sufficiently different from body text: use a different font, weight, size, or colour.

DO NOT

• Accessibility tip: Do not use all captials for body text — it is more difficult to read than sentence case.
  • Why? Our brains read quickly by recognizing the individual shapes of letters and words. Because capitals are all the same shape (rectangles), it is harder to tell the words apart at a glance. This makes things especially difficult for people with dyslexia or other reading difficulties. It may be OK to use capitals sparingly, in headings.

Colour

Make sure there is enough contrast between text colour and background colour. Choose colours that have appropriate connotations (this can be culturally dependent). For example, in some cultures, red is associated with danger, and in some it is associated with good luck.

Images

Images include things like photos, illustrations, graphs, and charts. Relevant images can…

• encourage interest and make documents more pleasant to read
• make text look less overwhelming
• reinforce a message
• provide support for readers with barriers (literacy attention span)

Accessibility

Be aware of accessibility issues when you are designing your document. Your audience will possibly include people with colour blindness, low vision, and reading disabilities such as dyslexia. It will almost certainly include neurodiverse people. Paying careful attention to design can help make your document more accessible for everyone.

The Web Content Accessibility Guidelines [new tab] (WCAG) are a valuable resource for anyone working to make their web documents accessible.

Summary

You do not need to be a trained graphic designer to make better documents! Just be aware of these basic principles and take time to think about why and how you are placing elements on the page.

See Appendix D: Design Checklist in the back matter of this textbook for more design tips.

In the interactivity below, drag the definition to the correct document design strategy.