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 complement the image (Or at least not get in the way). We are seeing this more and more with the content-focused paradigm shift.
Z & F layouts
I’ve combined these intentionally because I see so many examples online than have been poorly explained. These compositions don’t have strict 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 an 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.
The Golden Ratio / Fibonacci Sequence
One of my favourite 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 you are 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 with 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.
To sum 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.
