technical and business - Assignment Essays

[removed]

Lesson 3

Overview

Learning Outcomes

, and Checklist

Overview

This lesson helps students to understand, identify, and apply basic standards of document design.

Learning Outcomes

After completing this lesson, students should be able to:

Design and test documents for easy reading and navigation by:

· identifying characteristics of appropriate document design (7a)

· creating documents for nonacademic audiences, purposes, and occasions (7b)

· creating documents that are standard for business and technical fields (7c)

· creating documents with appropriate document design (7d)

· creating documents with visual typographic cues, such as headings, bulleted lists, and visual aids (7e)

· using visual typographic cues to organize a document (7f)

· Demonstrate critical thinking skills by reading and responding to course materials in a way that demonstrates ability to apply, analyze, evaluate, and synthesize material effectively (8c)

·
·
·

Read Chapter 5 and 8 (book name

Strategies for Technical Communication in the Workplace, Fourth Edition, by Laura Gurak and John Lannon.

Information Design Rules

https://support.microsoft.com/en-us/office/make-your-word-documents-accessible-to-people-with-disabilities-d9bf3683-87ac-47ea-b91a-78dcacb3c66d

https://digital.gov/resources/introduction-accessibility/

Design

Lesson 3 Notes
Defining Design

Information design, sometimes also referred to as document design, has a two-part definition. The first part considers information design as a product and refers to the presentation of information on page and screen. The second part considers information design as a process and refers to what we do to develop a document “that works for its users” (Reddish).

Understanding What You Already Know

You already apply this definition when you use MLA format in writing academic essays (sample below excerpted from a

Purdue OWL sample essay

). The process of following these specific guidelines presents a document that allows its users to find information they need quickly and to complete the tasks they need to in relation to your work.

Angeli 1

E. L. Angeli

Professor Patricia Sullivan

English 624

12 February 2012

Toward a Recovery of Nineteenth Century Farming Handbooks

While researching texts written about nineteenth century farming, I found a few authors who published books about the literature of nineteenth century farming, particularly agricultural journals, newspapers, pamphlets, and brochures. These authors often placed the farming literature they were studying into an historical context by discussing the important events in

For example, by consistently formatting your in-text citations, your classmates can identify what source you’ve used and then know to discover how to access that source for additional information. The same presentation allows your instructors to assess how you are supporting your own ideas by incorporating facts and opinions from other sources.

In addition, the process of formatting your document in MLA ensures that your instructors, who review many of these documents at a time, can quickly identify ownership, class, date, and title, along with any missing elements. The double-spacing facilitates their ease of reading and allows also space for them to include comments or notations within your document.

Consistency in the overall design also promotes equitable assessment for students, filtering out an instructor’s unconscious preferences for specific fonts or formatting by ensuring everyone’s formatting is the same. The presentation of the information on the page and screen and the process of developing that document to work for its users are both referred to as document design.

Keeping it Simple

Effective information design follows user-centered guidelines and principles. One guideline that is always essential to follow is referred to as the KISS (Keep it Simple) Principle. This means that design, much like professional and technical style, should be simple. The goal is to get users interested and keep them engaged so that they can easily find and use the information they need, whether they are searching the document for key terms, scanning the document for to find what they need, or reading every word.

So, instead of presenting information to users in a way that makes using information difficult (review

sample below from the Texas Estates Code

Sec. 1101.001. APPLICATION FOR APPOINTMENT OF GUARDIAN; CONTENTS. (a) Any person may commence a proceeding for the appointment of a guardian by filing a written application in a court having jurisdiction and venue. (b) The application must be sworn to by the applicant and state: (1) the proposed ward’s name, sex, date of birth, and address; (2) the name, relationship, and address of the person the applicant seeks to have appointed as guardian;(3) whether guardianship of the person or estate, or both, is sought;(3-a) whether alternatives to guardianship and available supports and services to avoid guardianship were considered;(3-b) whether any alternatives to guardianship and supports and services available to the proposed ward considered are feasible and would avoid the need for a guardianship;

good design presents information to users in a way that makes information both easier to understand (review

sample below from Texas Health and Human Services

)

The actual application for guardianship includes an introduction to the need for guardianship, basic demographic information, a statement to establish residency in that county and the relationship of the person filing for guardianship. The application must also identify other family members and/or interested parties and those parties must be served notice that the application has been filed. The Texas statutes are specific about what is to be included in the application.

and easier to find (review sample below, modified from the above):

What does the guardianship application include?

The application for guardianship includes:

· an introduction to the need for guardianship

· basic demographic information

· a statement to

· establish residency in that county

· the relationship of the person filing for guardianship.

· Identification of family members and/or interested parties

The last example uses headings and lists to help readers who are scanning the document in ways the other documents help only readers who read all details or use keyword searches. The heading itself also engages the user by asking a question. Like question headings, verb headings (like all first-level headings in this document) help to engage actively with the content. Noun headings allow more passive engagement.

Considering the Elements

When we design, we think about both what elements we use and how to place them to effectively craft a message. Although there are many elements that we can consider, the following are the most
common elements:

Color

· Size

· Weight

· Shape

· Type (text, graphic, photo, white space, etc.).

Following the Basic Principles (CRAP)

Once we know the elements, we often say, “Great. Now what? How do I know what to put where?” Robin Williams answers these questions in her 2008 handbook
The Non-Designer’s Design Book by offering four basic principles of design.

Using these principles involves arranging elements to create visual and typographic cues that help users to find and access information. The
four basic principles are:

Contrast

Repetition

Alignment

Proximity

Following, we will review each of these principles.

Contrast

We will focus first on the Contrast principle, which is what attracts a reader to the page and helps to organize the page for the reader. We all unconsciously search for similarities and differences in our surroundings. By using elements that are different from each other, we signal users to pay attention.

For example, users will attend to the bulleted lists of elements and principles in the previous section. The surrounding white space helps draw their attention in, and the bullets make clear that this information is somehow different.

Applying any design principle involves thinking about ways to use elements to get and maintain the interest of users. Below, we will apply the contrast principle to understand how to leverage differences in element color, size, weight, shape, and type to accomplish those goals.

Color

One way to create contrast is to use multiple colors. However, to create effective contrast, color choices must be intentional. Weak contrast can prevent a user from using or even accessing information.

For example, yellow text on a white background, or blue text on a dark blue background, creates low contrast that makes text difficult to see.

This text is harder to read

Using color intentionally can create higher contrast. For example, placing black text on a white background, makes text easier to see.

This text is easier to read.

So how do we know what colors to use? Understanding how colors relate to each other helps us use color more intentionally.

For greatest contrast, we need to use colors that are opposite each other on a color map or color wheel (review color map below). Contrasting colors, like yellow and blue, are farther from each other on the color map than white is from yellow or dark blue is from blue.

Figure 1: Color Map. By Onjacktallcuca – Own work, Public Domain

However, because we do not all perceive color in the same way,
color should never be the only means of contrast.

Size

Contrast can also be created through the use of elements of different sizes. We generally know some of the ways to use size effectively without realizing it. We all probably know that the title of a document is usually is biggest element. We are also familiar with the use of headings and body text to help us organize information. Take for example Figure 2 below which shows the first section of this document.

Figure 2: Sample – Contrast/Size

Although the black body text and the blue heading are different colors that are both easily readable against their shared white background, color is not the only element used to create contrast. Size is also used. Both use the same font,

Calibri

, but the body text is 11 point while the heading is 16 point.

Body text should typically be a minimum of 11-12 point to ensure it can be read easily at a comfortable distance. In bad applications of design, size is used to discourage readers (often unethically) from reading text. You may be familiar with the expression “the fine print.” This use of small text (usually 10 point or smaller) means that it takes more effort for the user to access the information; this also makes it less usable.

Size contrast can be created manually to emphasize an individual word within a given text block. Increased font size (like the 14-point “emphasize” in the previous sentence) can help to draw positive attention to a specific word. While decreased font size also draws attention to the word (like the 8-point “manually” in the first sentence of the paragraph, the attention it draws may be negative. contrast

Manually creating a hierarchy of titles, headings, subheadings, body text, and lists can be difficult to do. To ensure both consistency across these elements and accessibility for individuals who access the document through the use of screen readers and/or use the navigation pane, use the Styles tool. Using Styles also enables you to easily add automatic tables of contents for your documents. Styles are preset, but you can modify them.

Weight

Using different weights or thicknesses also creates contrast between elements. You are likely already familiar with the use of boldface type as a way to
emphasize a word (the word “emphasize” in this sentence is in boldface type). Bold text has a heavier weight than plain text.

Shape

Differences in shape create contrast as well. In text, this happens when we use different fonts. An effective way to create contrast in text using shape is to use both a
serif and a
sans serif font.

“Serif” essentially means “feet,” and “sans serif” means “without feet.” So, a serif font can be identified by its feet, or the lines that appear at its base. The “T” on the left below is in a common serif font –

Times New Roman

. The “T” on the right has no feet and is in a common serif font –

Arial

In general, serif fonts are easier to read in printed documents, and sans serif fonts are easier to read on screen. The feet on serifs can tend to create lines for readers that are useful on a written page. On the screen, these feet can become bothersome.

Some common serifs and san serifs include:

Common Serifs
Times New Roman

Courier

Garamond

Droid

Georgia

Common Sans Serifs
Arial
Calibri

Verdana

Droid Sans

Helvetica

Varying the shape of headings and body text along with size can help to create additional contrast. Figure 3 below is the original formatting of the first section of this document that we looked at earlier. It includes contrast in both size and color, but not shape, using the same sans serif font for both the heading and body text. Figure 5 uses the same sans serif font for the heading but uses a serif font for the body text, and Figure 6 uses a serif font for the heading but keeps the same sans serif font for the body text.

Figure 3: Sample – Sans Serif Heading and Sans Serif Body

Figure 4: Sample – Sans Serif Heading and Serif Body

Figure 5: : Sample – Serif Heading and Sans Serif Body

Type

One last type of contrast can be created by combining different types of elements. All of the elements above can be applied to text only or graphics only. Another way to create contrast is to use both together.

For example, the full-color photo to the left is the first one to appear in this document, so it creates contrast, and users are likely to notice it.

To ensure all users can perceive this photo, good design includes alt-text (alternative text) for images that describe the photo.

Figure 6 – This Photo by Unknown Author is licensed under CC BY-NC-ND

Hyperlinks will also stand out. It’s important to ensure that all hyperlinks are descriptive meaning the hyperlink text describes what the link leads to rather than providing a URL.

This resource

offers additional information about using features in Word to make documents accessible.

Repetition

Repetition is the second principle. Repeating elements, like using contrasting elements, creates emphasis to draw attention and help organize a document, but it does so by using the same elements rather than different elements.

Repetition helps to unify design and to create a blueprint to aid memory. Elements used only once in a document stand out significantly but are not necessarily emphasized in ways that will help the reader to remember information.

The repetition of these visual cues lets the reader know that the value of element is relative to the other items that are formatted in the same way.

One clear example of repetition you are likely familiar with is the use of headings on documents or slides. This repetition in style and pattern helps readers to know how to skim a document.

Another example often employed is the use of lists. Bulleted lists, like those used for ingredients and tools in the recipe below, denote items of equal value that can be considered or gathered in any order. Numbered lists, like those used for the list of steps in the recipe below, offer items that must be considered in order so that the process can be successful.

Peanut Butter and Jelly Sandwich

Ingredients

· Bread

· Peanut butter

· Jelly

Tools

· Knife

· Plate

Steps

1. Set the plate on a flat surface.

2. Open the bread.

3. Get out two slices of bread.

4. Place the slices on the plate.

Alignment

Alignment is the third principle. To make design look unified and clean, it is important that each element lines up with another in some way.

For example, all of the headings and body text in this document are aligned to the left of the page. A centered heading, then, would disrupt the organization and flow of the document.

In addition, every visual example used in this document is indented from the left by the same distance so that all of those elements align with each other. If I suddenly indented from the right instead, it would make it harder for the user to access and process it.

Proximity

Proximity is the last principle. Elements that are related to each other should be grouped closer together. Elements that are unrelated should be farther apart from each other. These related elements may sometimes be called families.

For example, in our peanut butter and jelly sandwich recipe (below), like items are grouped together:

Peanut Butter and Jelly Sandwich

Ingredients

· Bread
· Peanut butter
· Jelly

Tools

· Knife
· Plate

Steps

5. Set the plate on a flat surface.

6. Open the bread.

7. Get out two slices of bread.

8. Place the slices on the plate.

The consumable items used up in the process of creation (ingredients) are in a single list . The reusable item (tools) are in a different list. If I instead we included peanut butter and plate in one list and knife, jelly, and bread in another, we would confuse our users. The grouping would not make sense, and it would cause them extra time and effort in sorting out the like elements.

Similarly, text that relates to an image should be close to the image, not on a different page. Related text should also not break across pages (which would force the user to look in multiple pages for needed information).

Putting it All Together

Review the differences between Figure 7 and Figure 8 below. What differences make Figure 8 a better design?

Figure 7: Principles Not Followed (Williams)

Figure 8: Principles Followed (Williams)

Here are some actions taken to Figure 7 to create the better design in Figure 8:

· Removed the unnecessary border

· Changed the serif font to a sans serif font, added color, and italicized commentary (Contrast)

· Repeated the pattern of bold statement/italicized commentary (Repetition)

· Created stronger text alignments to guide the user with less effort (alignment)

· Added space between steps to group like items together (proximity)

· Removed the unnecessary numbers

When principles are used effectively, the resulting good design gains and maintains users’ attention and facilitates easy access and use.

References

Reddish, Ginny. “What is Information Design?”
Teaching Technical Communication: Critical Issues for the Classroom, edited by James Dubinsky. Bedford St. Martin’s, 2004, pp. 211-217.

Williams, Robin.
The Non-Designer’s Design Book, 4th ed.
Peachpit Press, 2015, p. 12-13 and 225.

image1

image2.emf

image3.JPG

image4.JPG

image5

image6

image7.JPG

Design
Lesson 3 Notes

Defining Design

Information design, sometimes also referred to as document design, has a two-part definition. The first
part considers information design as a product and refers to the presentation of information on page
and screen. The second part considers information design as a process and refers to what we do to
develop a document “that works for its users” (Reddish).

Understanding What You Already Know

You already apply this definition when you use MLA format in writing academic essays (sample below
excerpted from a Purdue OWL sample essay). The process of following these specific guidelines
presents a document that allows its users to find information they need quickly and to complete the
tasks they need to in relation to your work.

Angeli 1

E. L. Angeli

Professor Patricia Sullivan

English 624

12 February 2012

Toward a Recovery of Nineteenth Century Farming Handbooks

While researching texts written about nineteenth century farming, I found a few

authors who published books about the literature of nineteenth century farming,

particularly agricultural journals, newspapers, pamphlets, and brochures. These authors

often placed the farming literature they were studying into an historical context by

discussing the important events in

For example, by consistently formatting your in-text citations, your classmates can identify what source
you’ve used and then know to discover how to access that source for additional information. The same
presentation allows your instructors to assess how you are supporting your own ideas by incorporating
facts and opinions from other sources.

https://owl.purdue.edu/owl/research_and_citation/mla_style/mla_formatting_and_style_guide/documents/20190822MLASamplePaper

In addition, the process of formatting your document in MLA ensures that your instructors, who review
many of these documents at a time, can quickly identify ownership, class, date, and title, along with any
missing elements. The double-spacing facilitates their ease of reading and allows also space for them to
include comments or notations within your document.

Consistency in the overall design also promotes equitable assessment for students, filtering out an
instructor’s unconscious preferences for specific fonts or formatting by ensuring everyone’s formatting
is the same. The presentation of the information on the page and screen and the process of developing
that document to work for its users are both referred to as document design.

Keeping it Simple

Effective information design follows user-centered guidelines and principles. One guideline that is
always essential to follow is referred to as the KISS (Keep it Simple) Principle. This means that design,
much like professional and technical style, should be simple. The goal is to get users interested and
keep them engaged so that they can easily find and use the information they need, whether they are
searching the document for key terms, scanning the document for to find what they need, or reading
every word.

So, instead of presenting information to users in a way that makes using information difficult (review
sample below from the Texas Estates Code),

Sec. 1101.001. APPLICATION FOR APPOINTMENT OF GUARDIAN;

CONTENTS. (a) Any person may commence a proceeding for

the appointment of a guardian by filing a written

application in a court having jurisdiction and venue. (b)

The application must be sworn to by the applicant and

state: (1) the proposed ward’s name, sex, date of birth,

and address; (2) the name, relationship, and address of

the person the applicant seeks to have appointed as

guardian;(3) whether guardianship of the person or estate,

or both, is sought;(3-a) whether alternatives to

guardianship and available supports and services to avoid

guardianship were considered;(3-b) whether any

alternatives to guardianship and supports and services

available to the proposed ward considered are feasible and

would avoid the need for a guardianship;

https://statutes.capitol.texas.gov/Docs/ES/htm/ES.1101.htm

good design presents information to users in a way that makes information both easier to understand
(review sample below from Texas Health and Human Services)

The actual application for guardianship includes an introduction to the need for
guardianship, basic demographic information, a statement to establish residency in
that county and the relationship of the person filing for guardianship. The application
must also identify other family members and/or interested parties and those parties
must be served notice that the application has been filed. The Texas statutes are
specific about what is to be included in the application.

and easier to find (review sample below, modified from the above):

What does the guardianship application include?
The application for guardianship includes:

• an introduction to the need for guardianship
• basic demographic information
• a statement to

o establish residency in that county
o the relationship of the person filing for guardianship.

• Identification of family members and/or interested parties

The last example uses headings and lists to help readers who are scanning the document in ways the
other documents help only readers who read all details or use keyword searches. The heading itself also
engages the user by asking a question. Like question headings, verb headings (like all first-level headings
in this document) help to engage actively with the content. Noun headings allow more passive
engagement.

Considering the Elements

When we design, we think about both what elements we use and how to place them to effectively craft
a message. Although there are many elements that we can consider, the following are the most
common elements:

• Color
• Size
• Weight
• Shape
• Type (text, graphic, photo, white space, etc.).

https://hhs.texas.gov/sites/default/files/documents/laws-regulations/legal-information/guardianship/pub395-guardianship

Following the Basic Principles (CRAP)

Once we know the elements, we often say, “Great. Now what? How do I know what to put where?”
Robin Williams answers these questions in her 2008 handbook The Non-Designer’s Design Book by
offering four basic principles of design.

Using these principles involves arranging elements to create visual and typographic cues that help users
to find and access information. The four basic principles are:

• Contrast
• Repetition
• Alignment
• Proximity

Following, we will review each of these principles.

Contrast
We will focus first on the Contrast principle, which is what attracts a reader to the page and helps to
organize the page for the reader. We all unconsciously search for similarities and differences in our
surroundings. By using elements that are different from each other, we signal users to pay attention.

For example, users will attend to the bulleted lists of elements and principles in the previous section.
The surrounding white space helps draw their attention in, and the bullets make clear that this
information is somehow different.

Applying any design principle involves thinking about ways to use elements to get and maintain the
interest of users. Below, we will apply the contrast principle to understand how to leverage differences
in element color, size, weight, shape, and type to accomplish those goals.

Color
One way to create contrast is to use multiple colors. However, to create effective contrast, color choices
must be intentional. Weak contrast can prevent a user from using or even accessing information.

For example, yellow text on a white background, or blue text on a dark blue background, creates low
contrast that makes text difficult to see.

This text is harder to read.

This text is harder to read

Using color intentionally can create higher contrast. For example, placing black text on a white
background, makes text easier to see.

This text is easier to read.

So how do we know what colors to use? Understanding how colors relate to each other helps us use
color more intentionally.

For greatest contrast, we need to use colors that are opposite each other on a color map or color wheel
(review color map below). Contrasting colors, like yellow and blue, are farther from each other on the
color map than white is from yellow or dark blue is from blue.

Figure 1: Color Map. By Onjacktallcuca – Own work, Public Domain

However, because we do not all perceive color in the same way, color should never be the only means
of contrast.

Size
Contrast can also be created through the use of elements of different sizes. We generally know some of
the ways to use size effectively without realizing it. We all probably know that the title of a document is
usually is biggest element. We are also familiar with the use of headings and body text to help us
organize information. Take for example Figure 2 below which shows the first section of this document.

Figure 2: Sample – Contrast/Size

Although the black body text and the blue heading are different colors that are both easily readable
against their shared white background, color is not the only element used to create contrast. Size is also
used. Both use the same font, Calibri, but the body text is 11 point while the heading is 16 point.

Body text should typically be a minimum of 11-12 point to ensure it can be read easily at a comfortable
distance. In bad applications of design, size is used to discourage readers (often unethically) from
reading text. You may be familiar with the expression “the fine print.” This use of small text (usually 10
point or smaller) means that it takes more effort for the user to access the information; this also makes
it less usable.

Defining Design
Information design, sometimes also referred to as document design, has a two-part definition. The first
part considers information design as a product and refers to the presentation of information on page
and screen. The second part considers information design as a process and refers to what we do to
develop a document “that works for its users” (Reddish).

Size contrast can be created manually to emphasize an individual word within a given text block.
Increased font size (like the 14-point “emphasize” in the previous sentence) can help to draw positive
attention to a specific word. While decreased font size also draws attention to the word (like the 8-
point “manually” in the first sentence of the paragraph, the attention it draws may be negative. contrast

Manually creating a hierarchy of titles, headings, subheadings, body text, and lists can be difficult to do.
To ensure both consistency across these elements and accessibility for individuals who access the
document through the use of screen readers and/or use the navigation pane, use the Styles tool. Using
Styles also enables you to easily add automatic tables of contents for your documents. Styles are preset,
but you can modify them.

Weight
Using different weights or thicknesses also creates contrast between elements. You are likely already
familiar with the use of boldface type as a way to emphasize a word (the word “emphasize” in this
sentence is in boldface type). Bold text has a heavier weight than plain text.

Shape
Differences in shape create contrast as well. In text, this happens when we use different fonts. An
effective way to create contrast in text using shape is to use both a serif and a sans serif font.

“Serif” essentially means “feet,” and “sans serif” means “without feet.” So, a serif font can be identified
by its feet, or the lines that appear at its base. The “T” on the left below is in a common serif font –
Times New Roman. The “T” on the right has no feet and is in a common serif font – Arial.

T T
In general, serif fonts are easier to read in printed documents, and sans serif fonts are easier to read on
screen. The feet on serifs can tend to create lines for readers that are useful on a written page. On the
screen, these feet can become bothersome.

Some common serifs and san serifs include:

Common Serifs
Times New Roman

Courier

Garamond

Droid

Georgia

Common Sans Serifs
Arial

Calibri

Verdana

Droid Sans

Helvetica

Varying the shape of headings and body text along with size can help to create additional contrast.
Figure 3 below is the original formatting of the first section of this document that we looked at earlier.
It includes contrast in both size and color, but not shape, using the same sans serif font for both the
heading and body text. Figure 5 uses the same sans serif font for the heading but uses a serif font for
the body text, and Figure 6 uses a serif font for the heading but keeps the same sans serif font for the
body text.

Figure 3: Sample – Sans Serif Heading and Sans Serif Body

Figure 4: Sample – Sans Serif Heading and Serif Body

Figure 5: : Sample – Serif Heading and Sans Serif Body

Type
One last type of contrast can be created by combining different types of elements. All of the elements
above can be applied to text only or graphics only. Another way to create contrast is to use both
together.

For example, the full-color photo to the left is the first one
to appear in this document, so it creates contrast, and users
are likely to notice it.

To ensure all users can perceive this photo, good design
includes alt-text (alternative text) for images that describe
the photo.

Figure 6 – This Photo by Unknown Author is licensed under CC BY-NC-ND

Hyperlinks will also stand out. It’s important to ensure that all hyperlinks are descriptive meaning the
hyperlink text describes what the link leads to rather than providing a URL. This resource offers
additional information about using features in Word to make documents accessible.

Repetition
Repetition is the second principle. Repeating elements, like using contrasting elements, creates
emphasis to draw attention and help organize a document, but it does so by using the same elements
rather than different elements.

Repetition helps to unify design and to create a blueprint to aid memory. Elements used only once in a
document stand out significantly but are not necessarily emphasized in ways that will help the reader to
remember information.

The repetition of these visual cues lets the reader know that the value of element is relative to the other
items that are formatted in the same way.

One clear example of repetition you are likely familiar with is the use of headings on documents or
slides. This repetition in style and pattern helps readers to know how to skim a document.

Another example often employed is the use of lists. Bulleted lists, like those used for ingredients and
tools in the recipe below, denote items of equal value that can be considered or gathered in any order.
Numbered lists, like those used for the list of steps in the recipe below, offer items that must be
considered in order so that the process can be successful.

Peanut Butter and Jelly Sandwich
Ingredients

• Bread
• Peanut butter
• Jelly

Tools

• Knife
• Plate

Steps

1. Set the plate on a flat surface.
2. Open the bread.
3. Get out two slices of bread.
4. Place the slices on the plate.

Alignment
Alignment is the third principle. To make design look unified and clean, it is important that each
element lines up with another in some way.

For example, all of the headings and body text in this document are aligned to the left of the page. A
centered heading, then, would disrupt the organization and flow of the document.

In addition, every visual example used in this document is indented from the left by the same distance
so that all of those elements align with each other. If I suddenly indented from the right instead, it
would make it harder for the user to access and process it.

https://support.microsoft.com/en-us/office/make-your-word-documents-accessible-to-people-with-disabilities-d9bf3683-87ac-47ea-b91a-78dcacb3c66d

Proximity
Proximity is the last principle. Elements that are related to each other should be grouped closer
together. Elements that are unrelated should be farther apart from each other. These related elements
may sometimes be called families.

For example, in our peanut butter and jelly sandwich recipe (below), like items are grouped together:

Peanut Butter and Jelly Sandwich
Ingredients

• Bread
• Peanut butter
• Jelly

Tools

• Knife
• Plate

Steps

5. Set the plate on a flat surface.
6. Open the bread.
7. Get out two slices of bread.
8. Place the slices on the plate.

The consumable items used up in the process of creation (ingredients) are in a single list . The reusable
item (tools) are in a different list. If I instead we included peanut butter and plate in one list and knife,
jelly, and bread in another, we would confuse our users. The grouping would not make sense, and it
would cause them extra time and effort in sorting out the like elements.

Similarly, text that relates to an image should be close to the image, not on a different page. Related
text should also not break across pages (which would force the user to look in multiple pages for needed
information).

Putting it All Together

Review the differences between Figure 7 and Figure 8 below. What differences make Figure 8 a better
design?

Figure 7: Principles Not Followed (Williams)

Figure 8: Principles Followed (Williams)

Here are some actions taken to Figure 7 to create the better design in Figure 8:

• Removed the unnecessary border
• Changed the serif font to a sans serif font, added color, and italicized commentary (Contrast)
• Repeated the pattern of bold statement/italicized commentary (Repetition)
• Created stronger text alignments to guide the user with less effort (alignment)
• Added space between steps to group like items together (proximity)
• Removed the unnecessary numbers

When principles are used effectively, the resulting good design gains and maintains users’ attention and
facilitates easy access and use.

References

Reddish, Ginny. “What is Information Design?” Teaching Technical Communication: Critical Issues for the
Classroom, edited by James Dubinsky. Bedford St. Martin’s, 2004, pp. 211-217.

Williams, Robin. The Non-Designer’s Design Book, 4th ed. Peachpit Press, 2015, p. 12-13 and 225.

Understanding What You Already Know

Keeping it Simple

Considering the Elements

Following the Basic Principles (CRAP)

Contrast

Color

Size

Weight

Shape

Common Serifs

Common Sans Serifs