Creating Visual Harmony in Web Design

As a designer, I think the ideal website is harmonious as well as functional, not just pretty and colourful. There are a couple of ways to design an effective website, one of which is by using The Golden Ratio. When using The Golden Ratio in your website you can create harmony in your design that your users are more likely to engage with. Although it’s not a necessary to use this method in every design you do, as there are some beautiful designs that don’t use The Golden Ratio. But I like to use it where I can…

The Golden Ratio can be used as a guideline to make improvements and tweak a design. At times you will find a better way to design your website that doesn’t necessarily follow the rules. The Golden Ratio can be used separately but sparingly to create rectangles within the overall design.

One way would be, cropping your images, for instance, your homepage banner image would be a good idea as it is one of the first things your visitors will see when they visit your website. See example below of an image I have cropped. I have placed the smallest point of The Golden Ratio on the ladybird’s face.

Another way to implement this is within your typography. Using the ratio for the text on your website can make it more readable. Most people just pluck a number out of the air, but there is a better way. Here is a really simple way of using this for your body copy. For example, the font size and line height need to follow the 1:11.681 ratio, so if your body copy is 14pt to get the line height simply multiply 14pt by 1.618 which is 22.652 but we can round this up to 23. As you can see in the example below the text on the right is much more readable than the one on the left.

Although there is a much more complicated way of using The Golden Ratio in your copy which would take into account your content width and decide the size of the font to use for headings etc, this can be a very effective way to make your website copy more readable.

 

The Rule of Thirds

There is a far simpler way of applying The Golden Ratio to your design. Which is known as The Rule of Thirds. You can achieve this by creating a grid, 3 equal columns and 3 equal rows, which will split your page into 9 equal squares. You can further divide each section into equal halves to use for the whole site design. Use this grid by putting the most important elements of your design where the grid lines meet.

There is much more to know about The Golden Ratio and applying it to your design, however, these are just very simple ways to implement it into your website. These methods can be very effective in making your overall design look more aesthetically pleasing to viewers. By only applying this method in the slightest of ways can add more appeal to your design.

Want to find out more about our design work at Puddle? Sign up to our newsletter or follow us on Facebook or Twitter!

Prefer the good old fashion chat? Give us a call on 01535 63687 or email us at [email protected].