1. WEB DESIGN PRINCIPLES: Proportion Web Design & Animation II Mr. Huang Voorhees High School Photo © http://yingshun.co.uk/blog/?p=16http://yingshun.co.uk/blog/?p=16

2. THE DESIGN PRINCIPLES Balance Emphasis Proportion Alignment Unity

3. PROPORTION Proportion – the size relationship between design elements You can use proportion on a web page to create emphasis as well.

4. PROPORTION w/EMPHASIS If you make important parts of a web page large in size, those parts will draw the viewer’s eye due to their large size. You can also create unrealistic proportions on a web page to draw the viewer’s eye. You can make large elements very small, and vice-versa to create isolation.

5. PROPORTION TECHNIQUES Make similar elements the same size! Paragraphs/block text Links Main headings Related images in a series (resize them so they’re all the same height or width) Footer info Use the golden ratio!

6. THE GOLDEN RATIO The Golden Ratio is an aesthetically pleasing rule for rectangular shapes or for shapes that are based off of rectangles. It has been used for thousands of years by architects, builders, and designers. The Golden Ratio between an object’s width and height is approximately 1.618.

7. THE GOLDEN RATIO Photo © http://www.novivus.com/blog/?p=692http://www.novivus.com/blog/?p=692

8. THE GOLDEN RATIO Photo © http://www.novivus.com/blog/?p=692http://www.novivus.com/blog/?p=692

9. WEB PAGE LAYOUT with PROPORTION Photo © http://www.iteisa.com/wordpress/archives/2006/05/04/redesigning-slashdot/http://www.iteisa.com/wordpress/archives/2006/05/04/redesigning-slashdot/

10. WEB PAGE LAYOUT with PROPORTION Photo © http://www.communitymx.com/category.cfm?catID=3&typeid=2http://www.communitymx.com/category.cfm?catID=3&typeid=2

11. WEB PAGE EXAMPLE with PROPORTION Photo © http://margoridho.net/?page_id=180http://margoridho.net/?page_id=180

12. WEB PAGE EXAMPLE with DISPROPORTION

13. WEB PAGE EXAMPLE with PROPORTION Photo © http://www.thepassionoftheprogrammer.comhttp://www.thepassionoftheprogrammer.com