UXMovement: Applying The Golden Ratio To Web Layouts And Objects
1.618 is a number all serious designers should know. It's known as the golden ratio found through out nature, art and architecture. Seashells, the Mona Lisa and the Parthenon all show the golden ratio. Our faces and bodies are also proportional to the golden ratio. It's so omnipresent that it's even found in sounds and intervals of time. If there ever was a mathematical way to explain and express natural beauty, the golden ratio is it.
The golden ratio gives us a divine sense of aesthetic that we can apply to web design. By applying the golden ratio properly, we can make our web sites visually compelling. The most common way to use the golden ratio is with layout. Using the golden ratio we can divide the width of our web site to create a "golden layout" of two columns.
For example, take your typical 960 pixel width layout and divide 960 by 1.618. You'll get about 594, which is the width of your main content column. To get the width of your sidebar, subtract 594 from 960 and you get 366. Put it all together and you have a two column layout with widths of the golden ratio.
There’s another completely different reason I also go with this structure — studies have shown that sites are easier to read when line length is limited.
The length? Between 550 and 600 pixels wide.
$99 Tough Love Resume and Portfolio Review
Tough love. Great Advice. Receive an one hour portfolio review and career coaching session online, or in person if you're in Seattle.
Other Posts On Usability Counts
- CMS Fridays: Designing Section 508 Accessible Websites
- Customers That Click: Seven Key Questions To Consider When Building A Best Class Website
- QuickTip Sundays: The Mobile Version Of UsabilityCounts.com
- David Cole: The Rise Of Product Design
- Typographic Design Patterns And Best Practices From The Best Blogs Of Today