WEB DESIGN PRINCIPLES: Proportion Web Design & Animation II Mr. Huang Voorhees High School Photo ©...
-
date post
22-Dec-2015 -
Category
Documents
-
view
212 -
download
0
Transcript of WEB DESIGN PRINCIPLES: Proportion Web Design & Animation II Mr. Huang Voorhees High School Photo ©...
WEB DESIGN PRINCIPLES:Proportion
Web Design & Animation IIMr. Huang
Voorhees High School
Photo © http://yingshun.co.uk/blog/?p=16
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.
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 PROPORTION
Photo © http://www.thepassionoftheprogrammer.com