3 years ago

For those of you out there that are web designers, or designers in general, this will be nothing new. For everyone else, these are just some of the design theories that we consider when creating a layout.

The Single Visual

Full screen websites, or the “single visual,” composition focuses on a large central image or graphic. All other elements, text / icons / nav etc are secondary and are there to compliment the image (Or at least not get in the way). We are seeing this more and more with the content focused paradigm shift.


Z and F Layouts

I’ve combined these intentionally because I see so many examples online than have been poorly explained. These compositions don't have strick rules but instead refer to the way the eye navigates over the page.

The “Z” composition is when the viewer looks from the top left all the way to the right side of the page before continuing on. It’s generally more minimalistic than the “F” composition which is where the viewer scans “line by line.” Both are useful when dealing with large amounts of copy.


Rule of Thirds

This is a composition theory from photography in which you divide and area up into a grid of nine rectangles. It dictates the optimal position for placing focal points within the frame. Of all the websites I have looked at I haven’t seen one that uses this composition theory. The ones that supposedly do just use a three column grid system which is not the same thing. I can see that it may be useful in the single visual layout.

Rule of Thirds

The Golden Ratio / Fibonacci Sequence

One of my favorite composition theories. Found in nature, the Golden Ratio is based on a numerical ratio of 1 : 1.618. This design theory is mostly used for asymmetrical compositions (where content is not balanced / symmetrical). As with most of these theories I find it’s best to use them when your stuck (They can help you decide where to place content) or to retrospectively justify your designs. Try overlaying this on any design layout you find, it’s surprising how many actually use it.


Grid Systems

Using a grid system is the key to web design. There are so many out there that it would be impossible for me to cover them all. Some points to note though are:

  • Fixed grid systems are dead, use a fluid grid system and make your design responsive.

  • As a rule of thumb paragraphs of text should not exceed 50-60 characters (including spaces) with a maximum of 75.

  • If something does not align to your grid system the Gestalt Principle of Proximity dictates it will be a focal point (make sure this is a conscious decision).

  • Your grid system is not a silver bullet for good design. Where you place things within it is very important when creating symmetry. alt

Summing it all up

There are many more rules you can draw on when creating a layout (gestalt principles for example) but remember they are only there to help you. These rules have been developed over many years and are predominantly based on sound / measurable psychology. Knowing these rules can often tell you why a design is working / not working. As with all rules though they are only a guide, when it comes down to it you have to go with your gut.