1. Understanding Design Elements6
Understanding Design Elements
Desktop Publishing: Chapter 6
©2008Thomson/South-Western

2. Objectives Discover how grids can help you use design components.
Learn about design options that Rule of Thirds provides.
Explore ways to create pages that have a harmony of design.

3. Topics Web Grids Rule of Thirds Harmony of Design Tension
Layout Components
Web Grids
Rule of Thirds
Harmony of Design
Tension
Digital Desktop Publishing: Chapter 6

4. Layout Components Three Basic Elements Grid Rhythm Text Images
White Space
Grid
Division of a page into text, images, and white space in order to design a page
Rhythm
Flow and movement of the page
Proportion
Making each element a size reflecting its importance on the page
Digital Desktop Publishing: Chapter 6

5. Layout Components Organization Consistency
(continued)
Organization
Logical arrangement of information and graphics on a page
Do not separate information that is related
Consistency
Attention to detail
Same type choices
Same background
Same paragraph spacing
Digital Desktop Publishing: Chapter 6

6. Web Grids Design tools for Web pages
Frames
Tables
Way Web page viewed is out of control of the designer
Some monitors oriented vertically and some horizontally
Design to a percentage of the screen size
Digital Desktop Publishing: Chapter 6

7. Rule of Thirds
Pages arranged in thirds are more successful than pages in halves or fourths
Golden Terms
Golden ratio
Math that results in or pi
Other terms include golden triangle, golden mean, golden spiral, and golden rectangle
Use of math precision to describe arrangements in nature and design
Fibonacci Sequence
Series of numbers beginning with 1 where the next number in line is the sum of previous two

8. Rule of Thirds
(continued)
Disorderly Grid
Orderly Grid

9. Harmony of Design
Design in which all pieces work together to produce a readable and interesting page
Repetition
Builds consistency into a document
Use of same image on every page
Use of same image in a different size and location
Duplication of other elements on every page developing a theme to the site

10. Harmony of Design Balance Type of repetition
(continued)
Balance
Type of repetition
Similar elements in size or shape are placed so that they counter each other

11. Harmony of Design Poorly designed business card
(continued)
Poorly designed business card
Better designed business card

12. Harmony of Design Web Thirds No vertical margin limits
(continued)
Web Thirds
No vertical margin limits
Pages can be scrolled down so not easy to divide into thirds vertically
Horizontal thirds
Common design choice

13. Harmony of Design Web Consistency
(continued)
Web Consistency
Improves the usefulness of the document
Looking for inconsistencies is part of Web designer’s job
Constant elements
Navigation links
Headings

14. Tension Deviation from harmony Symmetry
Page or elements are perfectly balanced

15. Tension
(continued)
Balance Sample

16. Tension Web Repetition
(continued)
Web Repetition
Identifies to the reader that the page is part of the original site
Reduces distraction occurring when pages are different

17. Tension Web Balance Vertical balance is not part of Web design
(continued)
Web Balance
Vertical balance is not part of Web design
Horizontally balanced pages
Easier to read
Harmonious feel

18. Tension Asymmetry Closure Alignment
(continued)
Asymmetry
Pages that are not perfectly balanced
Closure
Mind attempting to finish that which is left undone
Creates reader interest
Adds to page’s stickiness
Keeping readers on the page
Alignment
Placement of text or images so that one line of text falls exactly below another
Placement of images so that they line up with the text above or below

19. Tension
(continued)
Alignment Sample

20. Business of Publishing
Skill sets
Design
Software
Need wide variety of skills
Salaries based on
Size of employer
Industry
Years of experience
Credentials
Range from $39,000 to $50,000

21. Proofreading Tips Extra spaces between words
Extra space at the beginning of a paragraph
Unevenly spaced lines of copy
Learning to see these type of errors requires practice

22. Workplace Ethics Designing pages
Time consuming
Difficult
Give credit to those producing the art

23. Changing Workplace
Use what has been learned in designing print pages in web design
Develop sense of control and harmony in Web pages

24. Assignments…Review What is harmony of design?
What is rhythm, as used in page design?
What is proportion as it pertains to page design?
What is organization in page design?
What is consistency in page design?
What is repetition in page design?
Tell why using a grid is a good way to experiment with design options.

25. Assignments…Review Explain how the Rule of Thirds “rules” the Web.
Describe why dividing a page into thirds is appealing in the design process.
Tell some ways to create harmony of design.
Discuss the important of using consistency in page design.
Discuss why repetition is important in web design.
Analyze the difference between symmetry and assymmetry.

26. Assignments…Activity #1 Layout
Using your dtp software (INDESIGN), w/default setup, place TEXT and IMAGES **Create a text box of any size filled with black. ***Using the 3 elements, fill the page with these elements. Use copy and paste to create longer articles of text, small and large versions of the same images, and resizing of text to fill the page with the elements. Use the black text box to show white space in the page design. Save as either Ch. 6 Act. 1 or Layout_Practice

27. Assignments…Activity #4 Harmony
Using your dtp software (INDESIGN), create a new landscape document demonstrating repetition, alignment, and balance. Place alignment and balance. Place alignment at the top left horizontally to 20p and vertically to 15p. Place balance at the bottom right from 30p to 60p horizontally and 30p to 45p vertically. This creates a balance in the design. *Place consistency and place it at 20p to 40p horizontally and 18p to 33p vertically. Import/Place image and place at the bottom left of the page***Import/Place balance_image and place at the top right of the page. ****Align all titles in text at center with size 34 font. Leave the paragph text in the imported articles left-aligned. This creates alignment and consistency, which brings about harmony in the design. Save as Ch. 6 Act. 4 or harmony