Every good web designer knows that a website needs to be harmonious as well as being functional. Some web designers, even those with years of experience, find it difficult to explain just what it is that’s crucial for harmony in a website. They instinctively know when they have created something that is pleasing to look at and flows well. Whether they are aware of or not, they may have achieved this result by using the golden ratio in web design.
Anyone who uses the golden ration in web design is working with the same concept that has been known to artists and architects over many centuries. This concept is based around a natural order of proportion that we as humans appreciate for its perfection.
Natural proportion is the basis of the golden ratio, also known as Phi from the Greek letter it has as its symbol. It’s a mathematical ratio that is sometimes referred to as the golden section or the golden mean. When the golden ratio is applied to any sort of design, it always creates a composition that looks very natural and is most pleasing to the eye.
In nature the golden ratio appears in many living organisms, including the human form. In ancient times the philosophers recognized this as being a divine proportion and it was used by the Ancient Greeks in all their designs for sculpture and architecture. We may not always recognize it in quite the same way, but the golden ratio is all around us in familiar buildings, art and designs, as well as existing in the natural world.
The definition
Phi is the symbol that represents the golden number of 1.618 and it relates to the Fibonacci Sequence. This is the math behind the golden ratio. It’s a sequence starting with 0, followed by 1 and then each figure is the double of the two numbers that precede it. After 1 and 2 comes 3, followed by 5, followed by 8, 13, 21 and so on.
The golden number represents the perfect ratio in any design where there are at least two segments and the ratio of the smaller one to the larger one is the same ratio as the larger segment to the sum of both.
A golden rectangle, for example, is any size of rectangle containing a smaller rectangle, where size of the inner rectangle has been worked out according to the golden ratio, so it is exactly in the right proportion to the larger rectangle.
The rule of thirds
For the less mathematically minded there is a far simpler way to apply the idea of a golden ratio in web design. This is known as the rule of thirds. It does not involve any precise calculations but it does result in getting the proportions right.
All that is required to follow the rule of thirds is to divide the first draft of a layout into nine equal squares. To do this you only need to place two equally divided lines across the layout and two vertical lines, separated by the same distance.
The points where lines meet in the grid are the hotspots for your web design. This means that there are four points where you need to place the most important elements of user-driven content.
If you go on to divide each column in the grid to form two equal halves, you will have a grid to work with for the entire site design. For instance you would place the logo or heading in the first square at the top on the left side. Less important content that is going to run vertically down the site will go in the top square on the right.
Using the golden ratio in web design
Image source
There is nothing magical about the golden ratio and you won’t get miracle results just by using 1.618 for all your calculations.
If you are not very good at math, or you don’t have a calculator handy, then a simple 3:5 ratio can be used in place of the golden ratio calculations. The results will not be exact, but they will be close to the proportions you would get from the golden ratio in web design.
A more precise method needs to be employed when using the golden ratio in web design. Widths can either be fixed or flexible but before you apply the golden ratio you will need to have a number to start working with. For a website design this would be the number of pixels in the width of the layout.
When, for example, you are working on a layout 1200 pixels wide you should divide this by Phi. To make things simpler Phi can be rounded up to 1.62. When you divide 1200 by 1.62 you get the width of the main column, which in this case will be 740 pixels.
To determine the width of the second column, simply subtract the width of the main column from the total width. In this example it would be 460 pixels.
You now have a two-column design with a 740 pixel column and a 460 column. By using the same simple calculation you will always arrive at the ideal proportions for your website columns.
For a flexible layout you need to bring percentages into the calculation. Dividing 100 percent by 1.62 gives you a main column that is 62 percent and a secondary column of 38 percent. You can then work out your flexible layout from those proportions.
Image source
The golden ratio can be used effectively to create small rectangles within the overall design. These can be used for navigation buttons, image captions, space for ads or to allow a flow of text around an image. Whatever their use, these mini-golden-rectangles will all be in proportion and the finished design will have a pleasing appearance.
The golden ratio is not a panacea for your website
Using the golden ratio in web design is no guarantee that the layout will be perfect, or that the website is going to work. Some web designers think that using a math formula is far too time-consuming, or much too complicated, so not everyone agrees that the golden ratio is a universal panacea.
The golden rectangle can be an effective part of a harmonious design with an inviting look. Images, blocks of text and sidebars can all be nicely showcased in small golden rectangles that form a beautifully balanced design, but the number of rectangles on each page should to be restricted. Nothing in web design should ever end up looking overdone.
It’ also important never to forget that many other factors need to be considered when creating a design that is going to be fit for purpose.
Golden ratio tools
Phi Calculator
When you enter any number into this free tool, which uses Phi in all its calculations, it will give you the result you need for the golden ratio. It’s free and very simple to use on a PC or a Mac.
Pearsonified Typography Calculator
This is a golden ratio web-based tool with a ‘Set My Type’ button. You simply click this after entering your content width and/or font size and the software calculates the best typography for your website. You also have the option to enter a CPL value. It will then optimize the characters per line for you.
UX Triggers Golden Ratio Tool
You can test any website using this free tool and it will quickly identify whether or not the Fibonacci Sequence is integral to its design.
Ending thoughts
Web pages have a more classical appearance when the principles of the golden ratio are incorporated into the design. It’s the same ratio that has been in use for more than two thousand years for balanced designs that look just right. Visitors will feel comfortable interacting with the content because the proportions will be familiar to them from many works of art and classical buildings.
When used in moderation the golden rectangle gives a sense of order to any design and it can make any website look good. You do need to take care though not to overuse these rectangles. Too many of them on a page will have the opposite effect and make a design appear too repetitive and less inviting.
A combination of mathematical calculations and organic structures in web design can create some wonderful results. An entire layout does not have to be designed using these principles, but it is worth trying to implement the rule of thirds or the golden ratio in web design. This will help you to get the proportions right and to slot everything into place.
You will definitely like these articles
Source: http://ift.tt/1woHPqG
