Learn Dreamweaver

The Golden Ratio in Web Design

by monstertutor

Example of Golden Ratio

Golden Ratio is important in the design aspect of web design. If you have watched the movie “The Da Vinci Code” you are familiar with phi (approximately 1.62). This is a proportion that is around us. It’s unexplainable but it seems that this value is present on all things, from a human body to plants and animals.

Like nature, we can also use this value to create visually appealing designs in paintings, architecture, logos, sculpture, and web design.

Below is an example on how to use the golden ratio.

golden ratio in web design layout

Bloody? Now that you have the values satisfying the golden ratio, we can use 960px as the width of our web page and use 593px for the width of the main content and 367px for the sidebar.

We can also use this proportion in designing a logo, arranging fonts, graphics, buttons, etc.

Phimatrix.com offers a software in creating a grid that is based in a golden ratio. This software is not necessary but their examples are great. You better check their website.

golden ratio software

Golden Ratio has been simplified using the rule of thirds, which is our next lesson for this course.