chapter planning for focus and flow 5 desktop publishing: chapter 5 ©2008thomson/south-western
TRANSCRIPT
![Page 1: CHAPTER Planning for Focus and Flow 5 Desktop Publishing: Chapter 5 ©2008Thomson/South-Western](https://reader036.vdocuments.site/reader036/viewer/2022070406/56649ddf5503460f94ad8f84/html5/thumbnails/1.jpg)
CHAPTER
Planning for Focus and Flow55
Desktop Publishing: Chapter 5©2008Thomson/South-Western
![Page 2: CHAPTER Planning for Focus and Flow 5 Desktop Publishing: Chapter 5 ©2008Thomson/South-Western](https://reader036.vdocuments.site/reader036/viewer/2022070406/56649ddf5503460f94ad8f84/html5/thumbnails/2.jpg)
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.
ObjectivesObjectives
![Page 3: CHAPTER Planning for Focus and Flow 5 Desktop Publishing: Chapter 5 ©2008Thomson/South-Western](https://reader036.vdocuments.site/reader036/viewer/2022070406/56649ddf5503460f94ad8f84/html5/thumbnails/3.jpg)
TopicsTopics
Focal PointFlowWhite SpaceWeb Page Design PrinciplesWeb Page StructureStandard DesignDesign Decisions
3Digital Desktop Publishing: Chapter 5
![Page 4: CHAPTER Planning for Focus and Flow 5 Desktop Publishing: Chapter 5 ©2008Thomson/South-Western](https://reader036.vdocuments.site/reader036/viewer/2022070406/56649ddf5503460f94ad8f84/html5/thumbnails/4.jpg)
Visual element in a page design that the viewer notices first
Focal PointFocal Point
4Digital Desktop Publishing: Chapter 5
![Page 5: CHAPTER Planning for Focus and Flow 5 Desktop Publishing: Chapter 5 ©2008Thomson/South-Western](https://reader036.vdocuments.site/reader036/viewer/2022070406/56649ddf5503460f94ad8f84/html5/thumbnails/5.jpg)
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
Focal PointFocal Point(continued)
5Digital Desktop Publishing: Chapter 5
![Page 6: CHAPTER Planning for Focus and Flow 5 Desktop Publishing: Chapter 5 ©2008Thomson/South-Western](https://reader036.vdocuments.site/reader036/viewer/2022070406/56649ddf5503460f94ad8f84/html5/thumbnails/6.jpg)
The following slides can be used to The following slides can be used to discuss good/bad design examples.discuss good/bad design examples.
6Digital Desktop Publishing: Chapter 5
![Page 7: CHAPTER Planning for Focus and Flow 5 Desktop Publishing: Chapter 5 ©2008Thomson/South-Western](https://reader036.vdocuments.site/reader036/viewer/2022070406/56649ddf5503460f94ad8f84/html5/thumbnails/7.jpg)
7Digital Desktop Publishing: Chapter 5
![Page 8: CHAPTER Planning for Focus and Flow 5 Desktop Publishing: Chapter 5 ©2008Thomson/South-Western](https://reader036.vdocuments.site/reader036/viewer/2022070406/56649ddf5503460f94ad8f84/html5/thumbnails/8.jpg)
8Digital Desktop Publishing: Chapter 5
![Page 9: CHAPTER Planning for Focus and Flow 5 Desktop Publishing: Chapter 5 ©2008Thomson/South-Western](https://reader036.vdocuments.site/reader036/viewer/2022070406/56649ddf5503460f94ad8f84/html5/thumbnails/9.jpg)
9Digital Desktop Publishing: Chapter 5
![Page 10: CHAPTER Planning for Focus and Flow 5 Desktop Publishing: Chapter 5 ©2008Thomson/South-Western](https://reader036.vdocuments.site/reader036/viewer/2022070406/56649ddf5503460f94ad8f84/html5/thumbnails/10.jpg)
10Digital Desktop Publishing: Chapter 5
![Page 11: CHAPTER Planning for Focus and Flow 5 Desktop Publishing: Chapter 5 ©2008Thomson/South-Western](https://reader036.vdocuments.site/reader036/viewer/2022070406/56649ddf5503460f94ad8f84/html5/thumbnails/11.jpg)
11Digital Desktop Publishing: Chapter 5
![Page 12: CHAPTER Planning for Focus and Flow 5 Desktop Publishing: Chapter 5 ©2008Thomson/South-Western](https://reader036.vdocuments.site/reader036/viewer/2022070406/56649ddf5503460f94ad8f84/html5/thumbnails/12.jpg)
12Digital Desktop Publishing: Chapter 5
![Page 13: CHAPTER Planning for Focus and Flow 5 Desktop Publishing: Chapter 5 ©2008Thomson/South-Western](https://reader036.vdocuments.site/reader036/viewer/2022070406/56649ddf5503460f94ad8f84/html5/thumbnails/13.jpg)
13Digital Desktop Publishing: Chapter 5
![Page 14: CHAPTER Planning for Focus and Flow 5 Desktop Publishing: Chapter 5 ©2008Thomson/South-Western](https://reader036.vdocuments.site/reader036/viewer/2022070406/56649ddf5503460f94ad8f84/html5/thumbnails/14.jpg)
14Digital Desktop Publishing: Chapter 5
![Page 15: CHAPTER Planning for Focus and Flow 5 Desktop Publishing: Chapter 5 ©2008Thomson/South-Western](https://reader036.vdocuments.site/reader036/viewer/2022070406/56649ddf5503460f94ad8f84/html5/thumbnails/15.jpg)
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
FlowFlow
15Digital Desktop Publishing: Chapter 5
![Page 16: CHAPTER Planning for Focus and Flow 5 Desktop Publishing: Chapter 5 ©2008Thomson/South-Western](https://reader036.vdocuments.site/reader036/viewer/2022070406/56649ddf5503460f94ad8f84/html5/thumbnails/16.jpg)
Part of the page in which there are no images or text
Doesn’t have to be white in colorPart of the designPurposes
◦Reduces busyness on the page◦Gives reader a chance to “rest”
Sometimes called Negative SpacePositive space is the text and images on the pageObservers see both positive and negative space
White SpaceWhite Space
16Digital Desktop Publishing: Chapter 5
![Page 17: CHAPTER Planning for Focus and Flow 5 Desktop Publishing: Chapter 5 ©2008Thomson/South-Western](https://reader036.vdocuments.site/reader036/viewer/2022070406/56649ddf5503460f94ad8f84/html5/thumbnails/17.jpg)
Design consisted of limited controlRestricted by limits of HTML codeMore options available todayNow designed with rules of their own
Web Page Design PrinciplesWeb Page Design Principles
17Digital Desktop Publishing: Chapter 5
![Page 18: CHAPTER Planning for Focus and Flow 5 Desktop Publishing: Chapter 5 ©2008Thomson/South-Western](https://reader036.vdocuments.site/reader036/viewer/2022070406/56649ddf5503460f94ad8f84/html5/thumbnails/18.jpg)
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
Web Page StructureWeb Page Structure
18Digital Desktop Publishing: Chapter 5
![Page 19: CHAPTER Planning for Focus and Flow 5 Desktop Publishing: Chapter 5 ©2008Thomson/South-Western](https://reader036.vdocuments.site/reader036/viewer/2022070406/56649ddf5503460f94ad8f84/html5/thumbnails/19.jpg)
Links on the left sideInformation in the middleImage
◦Top of the page or◦Left corner◦Purpose of image is to provide visual reference
Bottom of page provides copyright or contact information
Standard DesignStandard Design
19Digital Desktop Publishing: Chapter 5
![Page 20: CHAPTER Planning for Focus and Flow 5 Desktop Publishing: Chapter 5 ©2008Thomson/South-Western](https://reader036.vdocuments.site/reader036/viewer/2022070406/56649ddf5503460f94ad8f84/html5/thumbnails/20.jpg)
Good design isn’t a function of softwareGood design is a function of what the designer
needs to considerNew designers should trust their judgment
Design DecisionsDesign Decisions
20Digital Desktop Publishing: Chapter 5
![Page 21: CHAPTER Planning for Focus and Flow 5 Desktop Publishing: Chapter 5 ©2008Thomson/South-Western](https://reader036.vdocuments.site/reader036/viewer/2022070406/56649ddf5503460f94ad8f84/html5/thumbnails/21.jpg)
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…ReviewAssignments…Review
![Page 22: CHAPTER Planning for Focus and Flow 5 Desktop Publishing: Chapter 5 ©2008Thomson/South-Western](https://reader036.vdocuments.site/reader036/viewer/2022070406/56649ddf5503460f94ad8f84/html5/thumbnails/22.jpg)
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…Review 2Assignments…Review 2
![Page 23: CHAPTER Planning for Focus and Flow 5 Desktop Publishing: Chapter 5 ©2008Thomson/South-Western](https://reader036.vdocuments.site/reader036/viewer/2022070406/56649ddf5503460f94ad8f84/html5/thumbnails/23.jpg)
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.
Assignments…Assignments…