Rule of Thirds in Web Design

Sandesh Rijal
3 min readApr 23, 2020

--

Rule of Thirds is basically a photography concept which is equally helpful in Web Design also because both photography and Web Design is concerned with beauty and knowing the sweet sports (focusing on area of significance). It proposes to imagine an image as being divided into nine equal parts by two equally spaced horizontal lines and two equally spaced vertical lines, and to place important compositional elements along these lines or their intersections. If aim is the best visual result, Rule of Third is what you need.

Rule of Thirds has been around for several hundred years, with the first published reference provided by John Thomas Smith in “Remarks on the Rural Scenery” (1797).

Rule of Thirds comes into any Web Design. The grid-shaped Rule of Thirds helps you understand where a person is naturally drawn when viewing a image or even your Web page. The most prominent points in theory are where the grid lines converge.

Composition is an important part of web design. Even the most enticing images and imaginative icons and fonts do not work if the website’s overall layout is a mess. Most designers use grid structure to resolve this issue and coordinate the layout. Yet not all of them are aware of the Thirds law which can be extended to Web Design as well. Rule of Thirds came from photography where it is commonly used to create pleasant and captivating compositions. Actually this law is based on the long-known Golden Ratio (or Divine Proportion) principle.

Understanding where these key points fall that allow you to better design an artwork or a photograph, decide a more attractive crop and even decide the placement of elements on the landing page of your website. The area that will attract first attention is generally the intersection of the top left line, followed by the intersection below it, and then the cross-sections of the top right and bottom right.

Consider about putting elements in your website in relation to Rule of Thirds. That third will be about 341 pixels wide by 262 deep at a typical screen resolution of 1,024 pixels broad by 786 pixels deep. Thought about the site layout. The banner usually falls side by side with the left-most top corner. A lot of your content probably starts around the top third grid line spot, with navigation above it. While deciding the location of key elements — posters, social media or interactivity icons, ads and even key parts of the content — apply the Rule of Thirds on homepages. Using the Rule of Thirds on subsequent or web pages to help you decide where photos should be put or help readers concentrate while visiting your site.

More specifically, Rule of Thirds can be extended to picture research on your site. Use this to help you get better images to crop and scale. Need to note where each photo’s object falls, and what kind of motion or feeling it makes.

Originally published at https://medium.com on April 23, 2020.

--

--

No responses yet