Transcript Digital Desktop Publishing: Chapter 5
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.