1. CHAPTER Planning for Focus and Flow 5 Desktop Publishing: Chapter 5 ©2008Thomson/South-Western

2. 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. Objectives

3. Topics Focal Point Flow White Space Web Page Design Principles Web Page Structure Standard Design Design Decisions 3Digital Desktop Publishing: Chapter 5

4. Visual element in a page design that the viewer notices first Focal Point 4Digital Desktop Publishing: Chapter 5

5. 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 Point (continued) 5Digital Desktop Publishing: Chapter 5

6. The following slides can be used to discuss good/bad design examples. 6Digital Desktop Publishing: Chapter 5

7. 7

8. 8

9. 9

10. 10Digital Desktop Publishing: Chapter 5

11. 11Digital Desktop Publishing: Chapter 5

12. 12Digital Desktop Publishing: Chapter 5

13. 13Digital Desktop Publishing: Chapter 5

14. 14Digital Desktop Publishing: Chapter 5

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

16. 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 White Space 16Digital Desktop Publishing: Chapter 5

17. Design consisted of limited control Restricted by limits of HTML code More options available today Now designed with rules of their own Web Page Design Principles 17Digital Desktop Publishing: Chapter 5

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

19. 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 Standard Design 19Digital Desktop Publishing: Chapter 5

20. 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 Design Decisions 20Digital Desktop Publishing: Chapter 5

21. 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

22. 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 2

23. 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…