How to apply the ‘Rule of Thirds’ to a design or an image?
The ‘Rule of Thirds’ is a composition guideline that places your subject in the right or left third of an image or web page, leaving the other two thirds open. While there are various other forms of composition, this rule generally leads to well-composed and compelling shots.- Put the marks at three uniform intervals on the paper’s top, bottom, right and left sides after dividing the height and breadth by three.
- Draw two horizontal and two vertical straight lines at every interval that you’ve marked.
- By using the two vertical and horizontal lines, the ‘Rule of Thirds’ divides the design into nine equal portions, and each of these portions will take roughly 33.33% of the vertical space and 33.33% of the horizontal space. And, they are called “Thirds” because of this reason.
- The image’s or web design layout’s essential components should be placed/organized around the intersections of these lines, and these serve as focus points.
The major use of the ‘Rule of Thirds’ in web designing
Almost all the graphics, including images, and virtually all web designs use the ‘Rule of Thirds’, consciously or unconsciously. The grid intersection points (also known as sweet spots) are the ideal indicators for – where to place a logo, text or subject. This is because the eye is consciously or subconsciously scanning the page when it lands on a sheet, screen, or image. There are many ways to apply the ‘Rule of Thirds’ while web designing. A few popular ones include – using it as a blueprint to design asymmetrical layouts, using diagonal lines for building tension and positioning crucial elements at intersections. Testing is always necessary to figure out what works best for your website. A few preferred software for utilizing the ‘Rule of Thirds’ in website designing are – Sketch, InDesign and Photoshop.Let’s take examples of a website’s homepage and product pages.
Homepage- When you apply the ‘Rule of Thirds’ to your website’s homepage or index pages, it is important to prioritize website-wide objectives.
- When examining your website, a person naturally gravitates towards certain parts (intersection points mentioned above) according to the ‘Rule of Thirds’.
- You can improve the composition of your homepage by understanding where these points lie and adding appealing items at these locations. The top-left intersection of the grid draws attention first, then the one below it, the top-right and bottom-right cross-sections, and then the intersection below it.
- Furthermore, using images on your website can also benefit from the ‘Rule of Thirds’. Make smarter scaling and cropping judgements with this rule’s assistance. Analyze where each image’s subject lies and the mood or emotion it evokes.
An ideal product image has the following elements:
- Product image
- Brand name
- Unique headline/tagline
- CTA button prompting action
- Description content
- Background image
Write A Comment