We create a lot of websites.  Mostly they are for housing our web portal systems, they generally follow a design already broadly laid out by the end client.  However, we also get commissioned to do more creative designs across different industry types. Creating a pleasing web design is rewarding in itself.  But a 'good design' also contributes to making sure users can easily use the site.  That they can access its features and, even more importantly, that they can easily absorb and take in the information being given.  

There are lots of training courses you can do on design with many concepts and tools.  What is 'good design' is somewhat subjective.  However it's not all about the look of a site.  We come across many that were designed with aesthetics first and foremost.  But many also fail the tests mentioned above, namely; making sure users can easily use the site and its features, and making sure they can easily absorb and take in the information being given.  Some common examples: icons are not always as intuitive to your users as they were to the web designer; navigation between sections and pages can be confusing if not made very obvious, and; overuse of pictures can end up with what may be a pleasing look but which results in less information being transferred.  The moral: sometimes, less is indeed more.

So give this, what can you usefully use to help with your web-design? We subscribe to the view that some design techniques are indeed broadly timeless - they just tend to work.  They wont work in every case and they don't need to be used all the time.  But unless you have well thought out other ideas, they do tend to just... work. One of these is called the 'Golden Ratio'.

The Golden Ratio, is a mathematical construction based around relative proportions.  It refers to the relationship (ratio) between similar elements of different size and positioning within a design.  It's this 'ratio' which is thought to be the most aesthetically pleasing for human eyes. In mathematical terms the 'Golden Ratio' equals 1:1.618.  It's actually a bit like Phi in that the decimals go on for ever.  But, 1:1.618 or even 1:1.6 is close enough for general use.  

If you do some research on this you will find many illustrations show it as shell-shaped spirals (see below). You can flip the diagram on its side or on top. It still works.


The Golden Ratio  is one that is commonly observed in nature and is prevalent in the seashells that inspired the diagram above.  Many ancient buildings as well as famous art works seem to use the ratio in their proportions.  The way it works, is that each of the boxes (or parts of the spiral) is either 1.1.618 smaller (or bigger) than its immediate neighbour.

The ratio can we think be easier understood by referring to a simple line (see below).  The shows more clearly the relationship between 'a'and 'b'  (i.e 1:1.6).

The example below is from one of our own websites.  It has a simple uncluttered front-page which makes it easier to get the point across.  This post is a December one, so the site currently has a Christmas theme with falling snow and a Santa.  We have taken the spiral model of the Golden Ratio and superimposed it on the screenshot.  What it shows, is that site is broadly based on the Golden Ratio with Santa right in the sweet spot. In actual use, he is just one of a series of images that flip in and out.  These images are where we want the attention on - we just could not resist using him in the screenshot.

The Golden Ratio works great like this when you are looking at a regular laptop or PC Screen as per our example above.  Interestingly, many screens have an aspect ratio (width to height) of 16:10.  This ratio (1.6) is itself very close to the Golden ratio (1.618).  You can of course resize a window on your PC and change the viewing overall proportions.  However, designing the look of webpages for users on PCs and laptops using the Golden Ratio often works well as an overall design rule of thumb.

However, things change when the same site is viewed on a phone.  A standard iPhone8 has an aspect ratio of close to 19:6.  This very different from that of a typical PC and very different to the Golden Ratio.  As an additonal factor, many phone users will be looking at your site in an up and down portrait position.  More modern websites are whats called: Responsive.  Responsive websites, are designed to adjust the flow of elements so the site dynamically repositions/resizes to the size of the device being used.  This is where the Golden Ratio breaks down somewhat.  The example below (scaled down) shows a screenshot of the same website - along with Santa - on an iPhone.


The proportions and positioning are very different.  The site was designed to change its sizing and postioning of some elements be to make the site easier to read on a phone or tablet.  So this website when viewed on a phone, now no longer has the same proportions as it did on a PC.   In positioning terms it's thus no longer following the Golden Ratio.  However this does not mean that the Golden Ratio is not a good overall design rule to follow.  Whilst the overall positioning on a phone will be different to that on a PC.  You can still use the rule in many other ways.  For example with images and font scaling.  

With fonts, the Golden Ratio can be used to set the amount of line height to font size, or header font size to text size or indeed to set the spacing between elements.   If you are not sure what the right amount is; try using the Golden ratio.  You will probably find in many situations it just seems to look better.

You can also use the golden ratio with images.  We have included an example below. Again we have superimposed the 'spirals' to show the relationship between the focus point and the rest of the picture.  Why not try this with your own images? It's all about where the eye is drawn to and what the eye perceives as being more intuitively comfortable and pleasing to look at.


So if you are interested in website design we suggest the Golden Ratio is a useful tool to use.  It also might explain and give context to some of your web-designer's suggestions and ideas.  We don't always use it - we don't suggest it needs used for everything, especially for overall structure.  Sometimes other constraints or design elements come into play.  But if you are looking for creative input, it is conceptually simple to use and often delivers the goods.