Date First Published: 30th July 2022
Topic: Web Design & Development
Subtopic: Web Design
Article Type: Computer Terms & Definitions
Difficulty: MediumDifficulty Level: 5/10
Learn more about what the rule of thirds is in this article.
In web design, the rule of thirds is a principle that states that placing items of interest on the thirds of an image keeps users more engaged and is more appealing to the eye than placing them in the centre. It is believed that placing the main objects of images in one of the thirds sections of the rule of thirds grid (divided into nine equal parts with two equally spaced horizontal and vertical lines) or on one of the intersecting points can capture the attention of visitors for longer and create a more pleasant composition compared to when they are placed in the centre of the image. This is necessary when trying to attract new visitors and keep them engaged.
This design principle is used in both portrait and landscape images and has exceptions as some designs may work better when items of interest are symmetrical. However, if a design was too symmetrical, some viewers might consider the images to be boring and won't look at them for too long.
The rule of thirds is the main reason why the grid appears in most photo applications, such as the iOS camera app every time a photo is taken. It helps guide people as to whether the main object of the photograph is in the thirds of the grid (either the left or right third) or the centre. Web designers often consider this web design principle before placing images onto a website. Even though it is not absolutely necessary for them to follow this rule, it is recommended as it will keep visitors more engaged and the images will look less bland. When unsure, always test both symmetrical designs and rule of thirds designs and figure out which one performs best to the target audience.
Even though the rule of thirds is a photography concept, it is just as important in web design as both web design and photography are concerned with appealingness and focusing on areas of importance. The rule of thirds can also be extended to include the design of webpages as regardless of whether the images, icons, and fonts are appealing, they would fail to work if the layout of the webpage is messy. Composition is a vital part of web design. Web designers make use of a grid structure for webpages in order to resolve this issue and organise the layout of a webpage.
Examples of the rule of thirds on websites can be seen below.
In this example, the designer has put the main focus on the shopping products in the right third section, ensuring that the visitor's focus is on the text in the centre above that provides quick links to sign in and sign up. The rule of thirds has been used to create a pleasant composition that looks more appealing than if the image was in the centre of the page.
In this second example, the designer has used the rule of thirds to draw attention to the bottle of wine on the left third and the glass of beer on the right third. This helps to balance out the page, which would be more difficult to achieve if the images were placed in the centre. This would also make the webpage a lot longer. The designer has put the text 'up to 25% off' in the centre to immediately draw visitor's attention to it and ensure that they do not miss out on that important information.
The term 'rule of thirds' was invented by John Thomas Smith in 1797. It has been around for hundreds of years. In his book 'Remarks on Rural Scenery', John Thomas Smith quoted a 1782 work by Sir Joshua Reynolds, where Sir Joshua Reynolds discusses the balance of dark and light in a painting. John Thomas Smith then extends on the idea, calling it the 'rule of thirds'.
John Thomas Smith's full idea can be seen below:
Two distinct, equal lights, should never appear in the same picture: One should be principal, and the rest subordinate, both in dimension and degree: Unequal parts and gradations lead the attention easily from part to part, whilst parts of equal appearance hold it awkwardly suspended, as if unable to determine which of those parts is to be considered as the subordinate. 'And to give the utmost force and solidity to your work, some part of the picture should be as light, and some as dark as possible: These two extremes are then to be matched and reconciled to each other.' (Reynolds' Annot. on Du Fresnoy.)
Analogous to this 'Rule of thirds', (if I may be allowed so to call it) I have presumed to think that, in connecting or in breaking the various lines of a picture, it would likewise be a good rule to do it, in general, by a similar scheme of proportion; for example, in a design of landscape, to determine the sky at about two-thirds; or else at about one-third, so that the material objects might occupy the other two: Again, two thirds of one element, (as of water) to one third of another element (as of land); and then both together to make but one third of the picture, of which the two other thirds should go for the sky and aerial perspectives.
This rule would likewise apply in breaking a length of a wall, or any other too great continuation of the line that it may be found necessary to break by crossing or hiding it with some other object: In short, in applying this invention, generally speaking, or to any other case, whether of light, shade, form, or colour, I have found the ratio of about two thirds to one third, or of one to two, a much better and more harmonizing proportion, than the precise formal half, the too-far-extending four-fifths—and, in short, than any other proportion whatever. I should think myself honoured by the opinion of any gentleman on this point; but until I shall be better informed, shall conclude this general proportion of two and one to be the most picturesque medium in all cases of breaking or otherwise qualifying straight lines and masses and groups, as Hogarth's line is agreed to be the most beautiful, (or, in other words, the most picturesque) medium of curves.
If so, it is important that you tell me as soon as possible on this page.
Network Services Network Setups Network Standards Network Hardware Network Identifiers Network Software Internet Protocols Internet Organisations Data Transmission Technologies Web Development Web Design Web Advertising Web Applications Web Organisations Web Technologies Web Services SEO Threats To Systems, Data & Information Threats To Individuals Security Mechanisms & Technologies Computer Hardware Computer Software Ethics & Sustainability Legislation & User Data Protection
