CHAPTER
5
Desktop Publishing: Chapter 5
©2008Thomson/South-Western
Planning for
Focus and Flow
Objectives
 Develop understanding of focal point.
 Learn to establish flow in a document.
 Incorporate white space as design principle.
 Explore differences between print and web
design.
Topics
 Focal Point
 Flow
 White Space
 Web Page Design Principles
 Web Page Structure
 Standard Design
 Design Decisions
Digital Desktop Publishing: Chapter 5
3
Focal Point
 Visual element in a page design that the
viewer notices first
Digital Desktop Publishing: Chapter 5
4
Focal Point
(continued)
 Text
◦ Attracts attention using
 Font sizes
 Color
 Bold
 Images
◦
◦
◦
◦
Attracts more attention than text
Bolder colors make more impact
People images pull the eye more
Angled images attract more attention than vertical or
horizontal images
Digital Desktop Publishing: Chapter 5
5
The following slides can be used to
discuss good/bad design examples.
Digital Desktop Publishing: Chapter 5
6
Digital Desktop Publishing: Chapter 5
7
Digital Desktop Publishing: Chapter 5
8
Digital Desktop Publishing: Chapter 5
9
Digital Desktop Publishing: Chapter 5
10
Digital Desktop Publishing: Chapter 5
11
Digital Desktop Publishing: Chapter 5
12
Digital Desktop Publishing: Chapter 5
13
Digital Desktop Publishing: Chapter 5
14
Flow
 Visual path created by arrangements of
elements within a page design
 Z Pattern
◦ Design in which eye moves from left to right, down to the
lower left and to the right again
◦ Duplicates usual pattern of reading text
 Other Patterns
◦ Linear path
◦ Straight down the page
Digital Desktop Publishing: Chapter 5
15
White Space
Part of the page in which there are no images or
text
 Doesn’t have to be white in color
 Part of the design
 Purposes

◦ Reduces busyness on the page
◦ Gives reader a chance to “rest”



Sometimes called Negative Space
Positive space is the text and images on the page
Observers see both positive and negative space
Digital Desktop Publishing: Chapter 5
16
Web Page Design Principles
 Design consisted of limited control
 Restricted by limits of HTML code
 More options available today
 Now designed with rules of their own
Digital Desktop Publishing: Chapter 5
17
Web Page Structure
 Focus is always at the top of the page and
flows down
 White space is more important
◦ No margins to provide openness
◦ Add white space by increasing line spacing
 Consistent page structure needed
◦ Get from link to link
◦ Know where they are going next
Digital Desktop Publishing: Chapter 5
18
Standard Design
 Links on the left side
 Information in the middle
 Image
◦ Top of the page or
◦ Left corner
◦ Purpose of image is to provide visual reference
 Bottom of page provides copyright or contact
information
Digital Desktop Publishing: Chapter 5
19
Design Decisions
 Good design isn’t a function of software
 Good design is a function of what the designer
needs to consider
 New designers should trust their judgment
Digital Desktop Publishing: Chapter 5
20
Assignments…Review
Answer the follow questions…
◦ What is the area of a page called that is the first thing that
the reader sees?
◦ What types of elements make good focal points?
◦ In a page with text only, what type of enhancements cause
some text to become the focal point of the page?
◦ What makes an image a stronger focal point?
◦ What does the term “flow” mean?
◦ What is Z pattern?
◦ Why is the Z pattern an important design standard to
remember?
◦ Once the focal point has been established, what encourages
the reader to continue reading the rest of the page?
Assignments…Review 2
 Answer the following questions…
◦
◦
◦
◦
What is white space?
What is negative space?
How can one “see” negative space more easily?
How does the design of a web page differ from that of a
printed page?
◦ Why is it important to maintain a consistent design from one
page of a website to another?
Assignments…
 Use an index card to answer the following:
◦ Explain the guidelines that you should remember when making
a decision about the focal point on your page.
◦ Describe a zigzag pattern used in a page design and what
makes it a good design choice.
◦ Explain why white space is considered a part of the design of
the page and what makes up white space.
◦ Explain the importance of the placement of white space on a
page.
◦ Explain the difference between the negative and positive
space.
◦ Explain the difference in designing for a print page and a web
page.
◦ Explain the use of someone’s page design as it pertains to
copyright law.