Design Layout: The Grid and the Golden Ratio

Jul 04 2012 Published by under Visual Design

This week in ICM 502 – Visual Design at Quinnipiac University we are talking about layout.  The specific ways of laying out websites that we are discussing is the grid and the Golden Ratio.

You could take cutouts of all of your images, text boxes and other elements of your design, throw them onto a piece of paper, and move them around for hours until you find the perfect layout for your pieces.  This can make for some interesting and unique layouts that sometimes even work well.  But when you are under the wire, and you need to get a project done in a limited amount of time, there are a couple of layout techniques that work really well, virtually every time.  These are the grid layout and the golden ratio (or the golden rectangle) layout.

Grid Layout

We as a species like things organized, set apart, grouped, compartmentalized and overall just have a good structure.  When things start to deviate from this order, we begin to get uneasy, uncomfortable, agitated, and even frustrated.  Unless you are looking to have your viewers uncomfortable, the grid layout is a great place to start with your design.

Grid

The easiest way to make a grid layout is by using the Rule of Thirds.  That is, you break your page up like a tic-tac-toe board (a grid of nine equal parts, three across and three down) and then you use that grid as your guide.

By using this grid, you can begin to lay in the parts, and they will fit together and look organized.  You can even overlap the pieces so that they take more than one part of the grid, and it will still look organized.  For example, if you had an image take up four blocks, and a text box take up two, it would still maintain the grid.

First, let’s look at an example with the grid over the layout:

Generic layout with grid over the top

As you can see, even though the title takes up three blocks, the image four, and the text two, the layout still looks clean and organized.  Let’s see what it looks like without the grid overlay:

Same layout without the grid

Still looks clean and organized.

The nice thing about the grid is that you don’t have to stick to a perfect square.  You also don’t need to stick with thirds.  If you look at Pinterest’s layout, you will notice that they have used a grid pattern as well.  The grid creates multiple columns which helps keep everything organized and simplified even though some of the images and text may be longer than others on the page.  It is still well organized and, in its simplicity, beautiful.

Golden Ratio

Math is beautiful.  I bet you never thought you would hear that from someone that didn’t major in the subject, but there is a reason why people love math.  There is beauty to the symmetry, the absoluteness, the formula.  In this case, we use the golden ratio to make our designs beautiful.  This occurs in nature, and that is why it works so well in design.

The golden ratio, in math, is represented by phi, or \varphi.  What this means is that a+b is to a as a is to b.  To break that down even more, the ratio continues to break down in perfect asymmetry, getting smaller and smaller, but keeping the same ratio the whole time.  The value for this is 1.6180339887…, but for the purposes of easy calculation, we can break this down to 1.62.  In rectangles, that looks like this:

Fibonacci Spiral

As you can see, as you break the rectangle into a square, it makes the remaining rectangle into another rectangle that, when broken into a square, creates another rectangle and so on, getting that perfect spiral.  That is why this is also called the Golden Rectangle.  You can use this to your advantage to draw the readers eye around your page in a spiraling format, rather than the traditional left-to-right, top-to-bottom, and it will still feel natural.  That is, if you are able to do it effectively.

Another method of design, similar to the Golden Rectangle, is the Golden Triangle.

Golden Triangle

Not that Golden Triangle.  The other one.

Golden Triangle

The Golden Triangle that I am referring to is placing things where the reader already scans in their interest level.  This tends to fall into an F shape.  As in, the will generally read farther from left to right at the top of the screen, then a about halfway across after a few lines, and then they tend to skim downwards the further down they get.  This makes for a triangle shape reading pattern on the left-hand side of the screen.  This can be seen in one of Foursquare’s website designs:

Golden Triangle on Foursquare's webpage

As you can see, the most important information is in the biggest chunk of the screen, and then it flows back from there.  Then it allows the user to fall into the Golden Ratio when the get bored of the left side of the screen.

Conclusion

As you can see, by using these different layouts, not only can you quickly put together a beautiful design, but you can make it look professional every time.  You can also help guide the eye of the reader to important parts of your layout in a sequence that is effective in conveying the message.

What do you notice as good design on web pages?

No responses yet

Leave a Reply