1. WEB DESIGN PRINCIPLES: Balance Web Design & Animation II Mr. Huang Voorhees High School Photo © rebuiltworld.co.uk and designmeltdown.comrebuiltworld.co.ukdesignmeltdown.com

2. THE DESIGN PRINCIPLES Balance Emphasis Proportion Alignment Unity

3. BALANCE Balance – equal distribution of visual weight in a design Balance is used not only in Web Design, but also in Graphic Design and Architectural Design

4. FORMAL BALANCE Formal balance – equal distribution of weight on both halves of a design from a central axis, creating symmetry In other words, designs with formal balance are mirrored on both halves.

5. FORMAL BALANCE To check if a design has formal balance, draw an imaginary line down the middle and compare both halves. If you were to fold both halves, the outlines/shapes of the design elements should overlap. A common technique to use formal balance is to center every single element across a page layout. This technique creates a clean look, but is novice, easy, plain, and sometimes boring.

6. WEB PAGES with FORMAL BALANCE Photo © rebuiltworld.co.uk and designmeltdown.comrebuiltworld.co.ukdesignmeltdown.com Photo © http://ndale.co.uk/cv_root/note_des/design.htmhttp://ndale.co.uk/cv_root/note_des/design.htm

7. INFORMAL BALANCE Informal balance – equal distribution of weight on both halves of a design from a central axis, creating asymmetry In other words, designs with informal balance are not mirrored on both halves.

8. INFORMAL BALANCE As an example, one half of a page layout may contain one large block of information, and the other half of the layout may contain smaller blocks of information. A common technique to use informal balance is to have design elements vary in size, shape, and/or placement. This technique creates an abstract look, and is unique, versatile, and appealing.

9. WEB PAGES with INFORMAL BALANCE Photo © greenrenaissance.org/ and designmeltdown.comgreenrenaissance.org/ designmeltdown.comPhoto © hicksdesign.co.uk/ and designmeltdown.comhicksdesign.co.uk/designmeltdown.com

10. WHITE SPACE White space refers to the negative space on a design and represents the space between design elements such as text and graphics. Compare the amount of white space on both halves of a design to see if it has balance. White space is needed in order to create a layout that is not too cluttered or busy.