C H A P T E R 5

Planning for Focus and Flow

Desktop Publishing: Chapter 5 ©2008Thomson/South-Western

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.