About the app

Natural Logic is a design tool for assisting in the creation of wireframes and mockups for responsive projects. Templates ease UI/UX challenges by designating the size and placement of content areas, and finding good guidelines for content density.

How then do you use this magic number in the composition of your web page? The math may seem like a stifling box that your creativity will struggle in, but the golden ratio is simply a useful guideline. Having a basic guideline to build from can end up giving you more creative room by taking some of the guesswork out of proportions and placement. Think of it as a tool instead of a cage.

Templates allow to construct own grid schemes in a drag-and-drop action, flipping, layering, and zooming them. Build your grids depending on the project's need, and your professional sense of design, making sure that the golden ratio principles supplement your work with divine proportions.

Golden Ratio Templates

Block divine composition

At its most basic, you can use the golden ratio to designate the size and placement of content areas and side bars. A fixed-width layout is the easiest application. Decide on the overall size of your layout via the method for creating a golden rectangle.

Remember that your rectangle can be flipped around to suit your purposes, putting the sidebar at the top, bottom, or opposite side. As long as the ratio holds, your design will feel harmonious.

The Rule of Thirds

If math isn't your cup of tea, the concept of the golden ratio can be simplified. The rule of thirds governs the placement of points of interest in a scene. Divide any given image into thirds both horizontally and vertically. You'll get 9 grids.

According to the rule of thirds, the vertices of those lines (where the lines cross) are the ideal placement for points of interest. People scanning the page are more likely to notice things placed near the points, and the division is comfortable to view. More complex design is possible by breaking down those thirds into further thirds.

In short, the eye can be lazy and not have to search for important details. Our brains like this. Major images, news boxes, search bars and any other points of interest can be nestled on or near the vertices. This neat little shortcut will give you a design that is both easy on the eyes and makes people drawn to key pieces of data.

Fibonacci Sequences

Another simple tool for web design linked to the golden ratio is Fibonacci numbers. A Fibonacci sequence begins with 0 and 1. The previous two numbers are added together to produce the next number in the sequence: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34... and so on.

A little math tells us that the relationship between sequential Fibonacci sequence numbers is startlingly close to the golden ratio – divide the any number in the sequence with the number before it and you will get – you guessed it – 1.618.

As with the golden ratio, Fibonacci numbers can be used to dictate the relationship between header and content text sizes. It could also be used to designate the width of columns and is especially effective in blogs and other text-dense layouts. Composition could also be built upon the concept of Fibonacci tiling, in which tile size is built upon using the Fibonacci sequence.

Golden Spiral

Another possible method of using both the golden ratio and Fibonacci numbers are the golden spirals and Fibonacci spirals. Golden spirals get wider by a factor equal to the golden ratio for every quarter turn they make, and Fibonacci spirals are formed using Fibonacci tiling.

The spirals have been used in artwork for as long as the numbers and ratios themselves. The theory is that areas of negative space and visual interested should fit within the spiral. Within this graceful layout, as with the rule of thirds, the eye is naturally drawn to the centre of the spiral to look for details.

The spirals can serve as a guideline for content density and clustering. They can serve as the foundation for the ratio of your website header images, search bars and tool bars.

When choosing the ideal image for a front page built around large graphics, such as store home pages and photography websites, you can also benefit from the golden and Fibonacci spirals.


The Golden Ratio Grid Generator project is a creative collaboration from developer James Rowland and creator/designer Lana Milley. The idea behind the application appeared naturally - where a classic art tool met new web technologies. The article "Applying The Golden Ratio In Modern Designs" by Chris Pentago was a great inspirational start as well. Our templates were created to assist your design ideas and make the creative process deeper and even geekier. We are planning on continuing work on the app, debugging elements, bringing new templates, adding a font generator, SVG file download option, etc.

It would be awesome to receive your feedback, ideas, or to just chat with us. Please check our websites and say hi.

© Copyright 2015