WEB DESIGN PRINCIPLES:Proportion

Web Design & Animation IIMr. Huang

Voorhees High School

Photo © http://yingshun.co.uk/blog/?p=16

THE DESIGN PRINCIPLES

• Balance• Emphasis• Proportion• Alignment• Unity

PROPORTION

• Proportion – the size relationship between design elements

• You can use proportion on a web page to create emphasis as well.

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.

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!

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.

THE GOLDEN RATIO

Photo © http://www.novivus.com/blog/?p=692

THE GOLDEN RATIO

Photo © http://www.novivus.com/blog/?p=692

WEB PAGE LAYOUT with PROPORTION

Photo © http://www.iteisa.com/wordpress/archives/2006/05/04/redesigning-slashdot/

WEB PAGE LAYOUT with PROPORTION

Photo © http://www.communitymx.com/category.cfm?catID=3&typeid=2

WEB PAGE EXAMPLE with PROPORTION

Photo © http://margoridho.net/?page_id=180

WEB PAGE EXAMPLE with DISPROPORTION

WEB PAGE EXAMPLE with PROPORTION

Photo © http://www.thepassionoftheprogrammer.com