Using the Rule of Thirds in Web Design

The rule of thirds is most commonly associated with photography, but it also applies in web design if you want a professional website that is pleasing to end users. The rule of thirds is a very basic concept and easy to understand, so it is worth the time for you to see if you should be applying it more often to your work.

The Rule of Thirds in Art

The rule of thirds has been implemented in traditional art for thousands of years. An object can be split into nine even sections, just like a tic-tac-toe board. All parts of the art that are eye-catching should be lined up to appear at the intersections of this imaginary tic-tac-toe board. By doing this, the art has the most impact on the observer. This is most useful in asymmetrical art, but even in a perfectly symmetrical photograph, the results can be astounding.

The Rule of Thirds in Web Design

While the main idea of photography as a form of art is to capture something on film in such a way that the onlooker is drawn to a specific part of the image, web design is a bit different. Websites are usually not there to be a piece of art, but rather a gateway for information. By correctly utilizing the rule of thirds, you can be sure that the information you want the site’s visitors to see is in the most optimal place on the page – the intersections of your imaginary tic-tac-toe board. You can make visitors focus on what you feel is the most important part of the website right from the start.

The first thing to do is lay out your tic-tac-toe board, or grid, so that you have nine perfectly identical boxes lined up in three rows of three columns. After it is laid out, you will have your nine boxes, but even more importantly, you have your four major intersections; the four hot spots of attention that you can now begin to focus on.

Website Reading Patterns

Since most people scan a website in what is called a ‘Z’ pattern, (moving from left to right and then top to bottom), or an ‘F’ pattern, (top to bottom), the area to be most concerned with is the top left intersection. This is the first intersection in which we want to place something of importance to the user. Something that will not only grab their attention, but also something that will remain in their minds long after they leave the website. This is the first way we can use the rule of thirds to really impact website visitors. By affecting them in this way, we can have visitors remembering things we choose them to. You can see examples of the rule of thirds being put to good effect in Web-Dorado’s WordPress theme demo.

Don’t Overdo the Rule of Thirds

The intersecting points on your page do not necessarily always have to be covering anything of importance, but have your link, image or textual data very close to that spot. The rule also only applies to the page when it first loads. In other words, when someone clicks an external link to your home page or type it into their browser, the page they see and the placement of that page in regards to their browser is the only part that matters. Once the page is scrolled, then the rule is no longer relevant since webpages are usually much longer than they are wide. Therefore, it is important to get this right and include all of the most important information into the first loaded view.

Do not try to build your entire website around this rule. The rule of thirds is great from making some adjustments in your design, but it is not intended to be an architectural grid-line tool. Use it to help draw attention to the important information you have to offer the web user and then forget about it after that. It is a great tool to use, sure, but do not get caught up in some frenzy to make every single webpage follow this significant rule. Use it to tweak the site layout a little bit or to add or modify information. Use it to your advantage.

Tweaking Web Design Elements

Some great uses might be to reposition search boxes, text areas and special savings announcements. If you have a large banner or slideshow at the top of your page, or if your header is very tall, then you may have to implement some kind of design change within those elements to be sure that the rule will benefit you the most. In fact, a slide show that happened to line up with the rule of thirds intersecting points would be very beneficial, since the user may watch to see the next slides, each displaying unique content right on that first intersecting point and at each subsequent point on the grid.

The use of Web-Dorado’s WordPress Slider WD and Post Slider WD plugins can help you achieve your goals through the rule of thirds. These plugins allow you to highlight features of your product or recent posts to WordPress in a prominent location on your site. If the imagery you use and positioning on the page follows the rule of thirds, then it will make an excellent impression on your visitors.

The one thing to remember is to avoid making a page symmetrical if it can be dodged. While symmetry is nice, it often results in people missing key things when reading or even just looking at something on your site. Make sure to break it up enough that their eyes do not simply glide over important information. While it may seem a little strange to consider at first, a website design that is unbalanced draws the attention of our eyes and makes us look again at things. So, use the rule of thirds for the correct reasons and apply them accurately.

Optimize Your Website for Maximum Sales

The rule of thirds is a great tool for you to use to optimize your website and to ensure that the most efficient way of delivering information to site visitors is being implemented. By remembering just a few simple rules, tips and tricks, you can ensure that your visitors are going to get the information you want them to get and that they will remember the information well after they have moved on to another site. The rule of thirds is a great tool to use in website design when used wisely.

Web developer Richard Sutherland has been working with WordPress, Joomla, Drupal and other content management systems for over a decade. Graduating from Edinburgh’s Heriot-Watt University in 2000 with a Bachelor of Science in Computer Science, Richard has held a number of prominent website development roles at major companies such as Samsung, ASDA and Prudential.

Leave a Reply

Your email address will not be published. Required fields are marked *