DESIGNING

DOCUMENTS
CHAPTER 5
WHAT IS EFFECTIVE DESIGN?

2
 WHAT IS EFFECTIVE DESIGN?

Designs that group ideas visually, structuring the flow of information in an inviting,
user-friendly way.
3
 EFFECTIVE DESIGN…

- Enhances credibility
- Saves time and money
- Builds a image of the creator
- Are they competent?
- Are the thoughtful?
- Are they audience oriented?

4
5
6
The Four Levels of Document Design

Intra Inter

Extra Supra
 INTRA-LEVEL
DESIGN
Design for individual letters or
words.

• Font style
• Font size
• CAPS
• Bold
• Italics

8
 INTER-LEVEL
DESIGN
Design choices for blocks of text.

• Use of Headings
• Use of White space
• Indents
• Lists
• Text Boxes

9
 EXTRA-LEVEL
DESIGN
Design choices for graphics that
accompany text.

• Photographs
• Charts
• Graphs
• Images

10
 SUPRA-LEVEL
DESIGN
Design choices for entire documents.

• Paper size
• Headers/Footers
• Index
• Table of Contents
• Color Schemes
• Layout
• Page #
11
12
INTRA-LEVEL DESIGN
13
INTER-LEVEL DESIGN
14
EXTRA-LEVEL DESIGN
15
SUPRA-LEVEL DESIGN
16
All Documents should be……

Visually Appealing = Functional

17
STEP 1: STRATEGIZE FONT
CHOICES

• Fixed vs. Proportional Fonts

• Serif vs. Sans Serif
• 12 point font

CREATE VISUALLY ATTRACTIVE AND FUNCTIONAL DOCUMENTS

18
STEP 1: STRATEGIZE FONT
e n t s
CHOICES
D o c u m
s i ne s s m o r e
Bu
• Fixed vs. Proportional Fonts
u s e n o
• Serif vs. Sans Serif
o u l d t s .
• 12 point font sh 2 f o n
t h a n
CREATE VISUALLY ATTRACTIVE AND FUNCTIONAL DOCUMENTS
19
 Step 2: Minimize ALL CAPS

-Loose ascenders and descenders

-CAPS ARE SEEN AS SHOUTING

Create visually attractive and functional documents 20

Step 3: Use White Space

• White Space =Empty Page Space

• Use Headings
• Mix paragraph lengths
• Use Lists

Create visually attractive and functional documents 21

Create visually attractive and functional documents 22
Create visually attractive and functional documents 23
STEP 4: STRATEGIZE MARGIN CHOICES

Full justification is when type lines up evenly on both

the right and left margins. This paragraph justifies both
margins.

Use full justification when:

• Using proportional fonts

• More formal look
• Want to use fewer pages

Create visually attractive and functional documents 24

STEP 4: STRATEGIZE MARGIN CHOICES

Left justification, or Left justification, or ragged-right margins, is when

margins are only justified on the left and the lines end in different places.
This paragraph is left justified.

Use left justification when:

• Not using a proportional font
• Wanting an informal look
• Using very short line lines

Create visually attractive and functional documents 25

STEP 5: PLACE ELEMENTS FOR DELIBERATE EMPHASIS

• Readers of English are accustomed to reading pages of text from top to

bottom and left to right
Use this habit to your advantage
Be strategic

Create visually attractive and functional documents 26

 Click icon to add picture

STEP 6: USE GRIDS

CREATE VISUALLY ATTRACTIVE AND FUNCTIONAL DOCUMENTS 27

STEP 7: USE HEADINGS

• Headings group points

• Divide documents into sections
• At a glance organization
• Makes items more interesting

28
STEP 8: DECORATIVE
STRATEGIES

• Consistent color scheme to create unity

• Match color with purpose
• Red = warning
• Light Blue = Calming
• Repetition creates rhythm
• Contrast to create visual interest

29
FOR DISCUSSION

• Discuss the design elements on the next two slides.

• Be able to explain the process you’d use to redesign one of the

sample pages. What design elements would make the page
stronger or weaker? What design elements would you change and
how? Given the audience, what characteristics might your design
take into account?

30
31
32
Inclusive Design

All design should be accessible and inclusive.

33
 Design for All Users
In 2015’s “Color Rush” game between the Bills and the Jets,
viewers with red-green colorblindness had a hard time
distinguishing which player was on which team

Photo Credit: Sporting News Media (2017).

 Designing Websites

Attracting attention:
• You have seconds
• Use simple, attractive design that avoids design flaws

Maintaining attention:
• Arrange content in an F-shaped pattern
• Use words important to your reader
 Create a Helpful Home Page and Navigation

• Simple and accessible with purpose

• Provide useful navigation tools
• Make clear what readers will get if they click on a link
• Make completing a task as easy as possible
Following Conventions: Avoid These Mistakes

Bad search engines

Links that don’t change color when visited
Large text blocks
Fixed font size
Content that doesn’t answer users’ questions
 Following Conventions: Use These Guidelines

• Use a white or light background for easy scanning

• Keep graphics small
• Provide visual variety in your text
• Provide a link to the home page on each page
• Keep animation to a minimum
• Provide “Off” button if your web pages include music
 ADAPTING TO DELIVERY METHODS

Mobile-first design: prioritizes functionality and accessibility across many

devices

Adaptive design: Responsive design:

• rearranges the full website’s • renders content specifically for a
content into a mobile window mobile screen
40
41
42
43
 Designing Inclusive Websites

To make your webpage accessible:

• Put a link to text-only version of site at top left
• Put navigation links, site map, and search box at top left
• Arrange navigation links alphabetically
• Provide alternative text for all images, applets, and submit buttons
• Provide a static alternative to flash or animation
• On hypertext links, use text that makes sense when read alone