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

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.

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

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

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

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

Rule of Thirds Pages arranged in thirds are more successful than pages in halves or fourths Golden Terms Golden ratio Math that results in 1.628 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

Rule of Thirds (continued) Disorderly Grid Orderly Grid

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

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

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

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

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

Tension Deviation from harmony Symmetry Page or elements are perfectly balanced

Tension (continued) Balance Sample

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

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

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

Tension (continued) Alignment Sample

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

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

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

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

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.

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.

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

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