Applying the Rule of Thirds in Web Design

This is a fascinating subject that doesn’t always get discussed in the realm of web design. Photographers are probably familiar with the rule of thirds related to photo composition. But how can interface designers use the rule of thirds to create interesting digital designs?

In this post I want to explain the rule of thirds and share a few tips on applying the rule into a website layout. Not everyone will find this helpful and it’s often better to stick with a regiment that expedites the process. Yet the rule of thirds is such a basic concept that it’s definitely worth learning about how it works and how it applies to website layouts.

Why Fractions?

You may be asking yourself why the 3-way split is such a good idea? And where does this even come from anyway? Well you’ll be glad to know there isn’t a whole lot of math involved – at least not with absolute practical application. We could sit around the math club circle and talk about the magic of Fibonacci numbers but that’s not really necessary.

The rule of thirds comes from traditional art, especially photography, where a piece of work can be divided into 9 even squares. This is made with two vertical and two horizontal lines cutting through the composition. The rule states that eye-catching items should line up near the intersections of these lines for the most impactful results.

You can find a great example in this post on WDD. This is where art becomes real artsy-fartsy because the idea of asymmetry is usually more interesting than symmetry. But sometimes a photo with a little symmetry can be interesting – the rule of thirds plays a small part in this.

The ideal goal is to capture something in a unique way that draws attention into some part of the photograph. You want inequality because this forces some elements to appear more significant than others(even if it’s just clever photography).

Now we get to the question of web design. Well that wasn’t phrased like a question… so how does the rule of thirds relate to web design? It relates in the same way that you would draw attention to certain pieces of a photograph, you can also get people focused on important parts of a website.

Understanding The Grid

This technique breaks down into 9 squares with 4 crucial intersecting points. Most users have been known to scan websites in an F or Z pattern. So the eye will follow in the pattern of the letter F or Z from top to bottom. The top-left corner of a website is one of the first areas to grab attention.

This also means the top-left intersecting point should fall on or near an important part of the page. The intersecting point doesn’t need to be on top of a link or a photo(although it could be). It should be more like a marker to distinguish an important piece of the layout. For example the page heading might align somewhere near the first horizontal line and underneath this you may have a photo slideshow.

If you try out this technique I would recommend taking a screenshot above-the-fold in your browser. If you only have a mockup design crop the exact dimensions of a typical monitor display and use that as a screenshot. Full website mockups don’t present the most helpful results because they’re often much taller than they are wide. Also the rule of thirds is meant to be a UX concept, not a full design principle.

When a user first lands on your webpage they’re only seeing the interface elements located above the fold. This principle is used to analyze the canvas and determine sections of the page that naturally draw attention. Use it properly and you might find the 3×3 grid to be a pleasantly enlightening experience.

Make Tweaks not Designs

Now that we understand more about the use of this rule in web design I want to make a very important point. The rule of thirds isn’t supposed to be a grid structure for building impeccable designs. Instead use it as a tool for testing or tweaking an existing design.

There are plenty of free grid systems available to help you plan a full layout wireframe or mockup from scratch. The rule of thirds should behave more like a guiding principle when checking out the design. You might choose to adjust the navigation bar to be higher or lower, move the logo closer or further away from an intersection.

Thankfully you can test this ideology with almost any piece of software. Photoshop is my preference but even free alternatives like GIMP have enough functionality to create a simple grid on top of a design screenshot. It’s definitely better to just create something first – anything that you feel moves a project in the right direction.

Once you have a first draft then test it out with the rule of thirds. See where the elements fall and where they intersect the page. Over time you’ll begin to notice this effect on other websites and it’ll help you recognize where to implement the same features in your own designs.

Handling Symmetry

There are some cases where symmetrical page elements can be useful. But if this were the rule then art would be quite bland. In fact, asymmetry is very common in paintings and photography where a photo shows more land than sky, or has an object closer to one side than the other. It seems unbalanced yet this discord is exactly what draws our attention.

When it comes to layout design you might consider this very similar principle. If the page header uses a large hero image this may take up 2/3 of the entire grid. Similarly you might place oversized header text above smaller caption text for a contrasting effect. The implied meaning of this design says that the header text is very important and should be recognized first – and if it’s interesting enough the reader may also consider the secondary text.

Also consider the placement and size of photographs on a page. The rule of thirds isn’t always about the full composition. You might try placing the grid over the main content to see where it all lines up. This can be helpful to analyze paragraph sizes and line height relative to headers and images.

This principle relates directly to balance and symmetry which are both concepts of good design. Both print and web designers need proper balance – however this doesn’t always equate to symmetry. Don’t be afraid to play around and make some butt-ugly layouts. The quickest way to learn is by making hideous mistakes and subsequently correcting them.

Final Thoughts

As with most artistic forms of expression there really are no rules. Rules are very useful to someone who is still mastering the craft and this certainly applies to the rule of thirds in web design. Once you fully comprehend the purpose of this “rule” it’ll make appearances in your work subconsciously. This is when you start approaching mastery and it’s usually around this point when all the rules become like second nature. Then you can start breaking the rules on purpose!

I hope this post can elucidate some common uses for the rule of thirds in web design. Keep in mind that you don’t need to follow these guidelines if they don’t help you craft great interfaces. However many designers have found success with this rule of thirds methodology so it’s worth testing in your own workflow.