The Rule of Thirds

Your constantly-updated definition of The Rule of Thirds and collection of videos and articles
155 shares

What is The Rule of Thirds?

The rule of thirds is a design technique where designers divide a layout into nine equal parts through two equally spaced horizontal lines and two equally spaced vertical lines. This technique ensures key elements—such as images, text or calls to action—appear along these lines or at their intersections to enhance user engagement and create a balanced, visually appealing interface. 

An illustration of a grid with 3 rows and 3 columns.

© Interaction Design Foundation, CC BY-SA 4.0

Why is The Rule of Thirds Important in Design?

The rule of thirds has deep roots in the theory of proportions, which emphasizes the relationship between individual components (micro) and the overall structure (macro) in design. The rule of thirds comes from Painter and Engraver, John Thomas Smith's 1797 insights in Remarks on Rural Scenery. This principle has evolved to become a cornerstone of design alongside the golden ratio and the rule of proportions.  

Designers, photographers and others who work in the visual arts have leveraged the rule of thirds design principle in captivating and effective works, to create a sense of harmony, intrigue and more. These compositions feature strategically placed elements along the grid lines or their intersections—or the “sweet spots”—to create visual interest and balance. For example, the rule of thirds in graphic design is a staple technique of visual communication. It can access viewers in a storytelling manner or arouse their interest in other compelling ways.

An image of a person looking at a sky within a grid to illustrate the rule of thirds.

The rule of thirds is a design staple that speaks volumes through the compositions it frames.

Unsurprisingly, the rule of thirds is an essential visual design technique that features greatly in UX (user experience) design. Designers particularly value it as a way to help optimize the user experience in digital products such as web pages. When designers work on user interfaces (UIs), they use the rule of thirds to guide the eyes of their target audience naturally to the most crucial parts of a site or mobile app. They can therefore improve usability and aesthetic appeal as they help users establish a sense of order, intrigue and trust in their design works. 

When designers apply the rule of thirds, they align key interface elements, such as navigation bars, call-to-action buttons and key information, along these strategic points. Here are the main benefits of the rule of thirds in UI design: 

1. Visual Hierarchy, Harmony and Balance

Designers apply the rule of thirds to establish a clear visual hierarchy in web design and elsewhere. This arrangement helps highlight the most crucial elements, such as call-to-action buttons or key information. It makes them easily accessible and noticeable to users.  

The rule of thirds also helps achieve a balanced composition. When designers distribute elements evenly across the grid, they can avoid overcrowding and ensure that each component receives adequate space to “breathe.” This technique enhances the overall clarity and readability of the interface. Also, when designers apply the rule of thirds across websites they design, it can contribute to a consistent and professional look. 

2. Enhanced User Interaction and Conversion

When designers place elements strategically according to the rule of thirds, it not only captures user attention. It also guides users’ interactions across the interface. This guidance can significantly improve navigation and usability. It can lead to better user engagement and potentially higher conversion rates. For example, if designers place a primary call-to-action at an intersection point within the grid, it can naturally draw users’ eyes towards it. Therefore, users will be more likely to interact with the call-to-action.  

The rule of thirds can help improve the user experience when users encounter static elements such as information architecture on a webpage. However, it also applies to dynamic elements in interactive designs, where user focus is critical.

An illustration of the rule of thirds as a grid with four percentages for eye attention at the four sweet spots.

© lovish verma, Fair Use

3. Adaptability Across Devices

Another significant advantage of the rule of thirds is its flexibility and effectiveness across different screen sizes and orientations. This adaptability is crucial in responsive design, where user interfaces must function seamlessly across a range of devices from desktops to smartphones. With the rule of thirds, designers can create layouts that maintain visual appeal and functionality regardless of the device. This ensures a consistent user experience everywhere. 

4. Enhanced Visual Interest

The rule of thirds also encourages designers to experiment with asymmetry to create more dynamic and visually interesting layouts. For instance, designers can place an image near two-thirds of one side rather than center it. That way, they can break the monotony of a symmetrical design. This adds an element of surprise and visual interest. The technique is particularly effective to draw the user's eye to specific areas of the screen. It also enhances both the design's aesthetic quality and its functional efficiency. 

A screenshot from Amazon.com showing the rule of thirds grids too.

Amazon structures its homepage around a grid divided into nine equal parts, leveraging the rule of thirds to optimize visual flow and user engagement.

© Angela Fabunan, Fair Use

How Do Designers Apply the Rule of Thirds in Website Design?

UI designers use the rule of thirds in website design to organize and position elements effectively. Here's how they do it: 

1. Layout Composition

Designers position key elements such as logos, navigation menus and call-to-action buttons at the intersection points or along the lines. This creates a more balanced and visually engaging layout. 

2. Content Placement

Designers often place images, text blocks and other content in a way that aligns with the rule of thirds grid. They draw attention to important content and create a natural flow for the user's eye. 

3. Visual Hierarchy

When designers align important content or interactive elements with the intersecting points or lines, they can establish a clear visual hierarchy and guide the user's focus to specific areas of the website. 

Image of a webpage featuring a pilot inside a cockpit, with the rule of thirds grids shown for illustration.

Breitling watch’s design balances many elements well on one screen.

© Camren Browne, Fair Use

4. Balance Negative Space

Designers use the rule of thirds to ensure an optimal distribution of negative space or white space. This can enhance readability and overall user experience. 

5. Responsive Design

When designers create content for different screen sizes, the rule of thirds helps them maintain a balanced composition and adapt the layout effectively across various devices. 

CEO of Experience Dynamics, Frank Spillers explains responsive design: 

Show Hide video transcript
  1. Transcript loading…
 

Advanced Techniques and Examples

For more sophisticated applications, designers might choose to utilize variations such as focusing on just the columns or rows of the grid. This can help to emphasize specific aspects of the content more strongly.  

Image of a Nike webpage featuring the rule of thirds grid lines shown over it as an illustration.

Nike utilizes the rule of thirds by ensuring that these focal points capture the viewer's attention.

© Angela Fabunan, Fair Use

Step-by-Step Guide to Implement the Rule of Thirds

To design rule of thirds compositions well, designers can follow these steps: 

1. Establish the Grid

Designers should set up a basic grid on their design canvas, which divides the space into nine equal sections. This grid will serve as the foundation to strategically place design elements. It’s important to make sure that the grid lines are even in spacing both horizontally and vertically to create a balanced layout. 

2. Place Key Elements

Designers should focus on positioning important elements such as logos, navigation menus, call-to-action buttons and key content at the intersections of these grid lines. These points typically attract the most viewer attention and can significantly enhance the visual impact of a design. The top-left intersection, for example, receives the highest visual attention at over 40%. That makes it an ideal spot for the most important information or interactive elements. 

3. Utilize Visual Weight and Balance

Designers should distribute elements across the grid to maintain visual balance. Avoid overcrowding any one part of the grid, especially the intersections. The rule of thirds encourages not just the placement of elements at the intersections but also along the lines themselves. That can help to achieve a well-proportioned and aesthetically pleasing design. 

Image of a Soulful Vibes Co. webpage exemplifying the rule of thirds.

This design’s main focus—on the crystal rocks and the beaded bracelet with an elephant—is on the left and right thirds sections, which ensures the visitor focuses on the center text itself: "It's not just a movement, it's a lifestyle."

© Caroline Forsey, Fair Use

4. Apply the Rule in Photography and Graphics

When designers incorporate images or graphical elements, they should align the subject or focal point with the grid intersections or along the lines. This technique is crucial not only in UI/UX design but also in photography, where the rule of thirds is a foundational skill. For example, in a landscape photo, to place the horizon line along the top or bottom horizontal grid line—rather than the center—can create a more captivating composition. 

5. Practice Continuously and Make Adjustments

The best way to master the rule of thirds is through continuous practice and experimentation. Designers should apply this rule in different projects to see how it changes the user interaction and visual appeal of their designs. They should use tools like cropping and re-aligning in post-production to refine the placement of elements according to the rule of thirds. This can also help train their designer’s eye to naturally recognize these balance points in future projects. 

6. Conduct Usability Testing

Designers can ensure how effective their rule-of-thirds web designs and other visual designers are when they conduct user testing well. Regular feedback mechanisms such as A/B testing and heatmaps can further refine the application of the rule of thirds. They can help designers understand how users interact with their creations and where adjustments may be necessary. When designers regularly revisit these principles and adapt them based on specific project needs and user feedback, it can lead to more refined and successful design outcomes. 

UX Strategist and Consultant, William Hudson explains A/B testing in this video: 

Show Hide video transcript
  1. Transcript loading…
 

Software and Tools to Implement the Rule of Thirds

Designers can choose from numerous tools to implement the rule of thirds, including the following: 

1. Grid Systems in Design Software

Design software like Adobe Photoshop, Illustrator or Sketch often include grid systems that allow designers to overlay a rule of thirds grid on their designs. This helps designers align and position elements according to the rule. 

2. Grid Plugins and Extensions

Many design softwares offer plugins and extensions specifically for grid systems and composition, such as "GuideGuide" for Photoshop and "Grid Guide" for Sketch, which enable designers to create and align designs based on the rule of thirds. 

3. Grid Generators

Online grid generators such as "Gridulator" and "Gridpak" allow designers to generate custom grid systems, including the rule of thirds, and download them for use in their design projects. 

4. Grid Paper and Templates

Physical grid paper and printable templates with the rule of thirds grid are ideal for sketching and initial wireframing before designers transition to digital design software. 

5. Mobile Apps

There are mobile apps specifically for applying the rule of thirds to photographs that smartphone users take. These apps overlay the grid on the camera viewfinder, helping photographers align their shots according to the rule. 

Image of a Photoshop screen.

Photoshop features a handy way to apply the rule of thirds: click "View" → "Show" → "Grid".

© Caroline Forsey, Fair Use

Considerations and Risks about the Rule of Thirds

While the rule of thirds is a fundamental design principle in UX and UI design, it’s crucial to be aware of potential limitations and risks that may affect the effectiveness of a design. When designers understand these considerations, it can help them make more informed decisions and potentially avoid common pitfalls. 

1. Limitations in Creative Freedom

To rely heavily on the rule of thirds may inadvertently stifle creativity. It might lead to designs that lack uniqueness and personal touch. This overreliance can make interfaces feel standardized, monotonous and uninspiring. They therefore might not resonate well with users who seek innovative and engaging experiences. 

2. Suitability for Various Design Approaches

The rule of thirds might not always be the best choice for every design scenario. For instance, minimalistic interfaces, which thrive on simplicity and ample white space, or data-heavy interfaces, which require a different approach to information hierarchy and layout, might not benefit from the strict adherence to this rule. 

3. Risks of Overcrowding and Clutter

Designers might feel tempted to place too many elements at the intersections of the grid, believing it will capture user attention more effectively. However, this can lead to a cluttered and overwhelming interface, where the user finds it difficult to focus or locate important information. 

4. Balance and Composition Challenges

If designers apply the rule of thirds incorrectly, it can result in unbalanced and visually confusing compositions. If designers fail to thoughtfully align elements or if they misuse the grid, the overall aesthetic and functional quality of the design may suffer. This can cause a poor user experience. 

5. Overemphasis on Aesthetics Over Usability

While it’s important to create visually appealing designs, designers who overemphasize aesthetics at the cost of usability can create interfaces that are beautiful yet difficult to navigate and understand. This misalignment often results in frustrated users who may not engage deeply with the product. 

6. Inflexibility Across Different Devices

The rigidity of the rule of thirds can sometimes hinder its application across various screen sizes and resolutions. Designs that look perfect on a desktop might not translate well to smaller mobile screens. This can lead to issues in visual coherence and user interaction. 

7. Content-Design Disconnect

If designers stick too strictly to the rule of thirds, they might make designs that do not adequately consider the content they should display. This can create a disconnect between what the design emphasizes and the actual information or functionality that needs to come across to users, which can potentially mislead users. 

8. Accessibility Concerns

Designs that focus too heavily on aligning elements strictly according to the rule of thirds might overlook important accessibility considerations, such as readable text sizes and easily clickable buttons. This oversight can make the interface less accessible to users with disabilities, which is a significant risk in user-centered design. 

This video explains why accessibility is such a vital concern in design: 

Show Hide video transcript
  1. Transcript loading…
 

Designers should note that to break away from the rule of thirds can lead to unique and captivating designs. Depending on the project's requirements and creative direction, designers might deviate from this guideline and arrive at fresh perspectives and innovative solutions that stand out in the digital landscape. 

Overall, the rule of thirds is a time-tested tool that can help to improve user experience and boost engagement and conversion. It can also cast compelling imagery and build trust with a brand. As with other design principles, it’s important to apply it mindfully and create good-looking designs that users find useful, helpful and more. 

 Learn More about The Rule of Thirds

Take our Visual Design: The Ultimate Guide course. 

Read our piece, The Rule of Thirds: Know your layout sweet spots

Read our piece, Rule of Thirds: The Definitive Guide & Examples

Go to How to Use the Rule of Thirds in Web Design [Quick Tip] by Caroline Forsey for more helpful insights. 

Discover more details at Designing a landing page with the UX rule of thirds by Angela Fabunan

Visit What is the Rule of Thirds in Design? A Complete Guide by Camren Browne for further insights. 

Find more in-depth information in How is the rule of thirds used in design? by Nate Kadlac

Questions about Rule Of Thirds

How does the rule of thirds improve visual composition?

The rule of thirds is a fundamental composition principle in design and photography. It improves visual balance and interaction in a layout. When designers divide the image into a grid of three horizontal and three vertical segments, they place important elements along these lines or at their intersections. This technique encourages a more natural movement of the eye through the artwork. It enhances aesthetic appeal and makes the composition more dynamic and balanced. 

Take our Visual Design: The Ultimate Guide course. 

How does the rule of thirds relate to the golden ratio?

The rule of thirds and the golden ratio both guide the arrangement of elements in a design, but they do so in different ways. The rule of thirds divides the design space into nine equal parts with two horizontal and two vertical lines. To place key elements at the intersections or along these lines creates balance and directs the viewer's eye. 

The golden ratio, on the other hand, involves a more complex mathematical relationship of 1:1.618. It suggests a division of space that is asymmetrical yet naturally pleasing to the eye. When designers use the golden ratio, they often create a focal point that aligns with this ratio. That leads to a sense of aesthetic harmony that feels organic. 

Although both principles aim to enhance visual interest and harmony, many professionals see the golden ratio as more flexible due to its adaptability to different scales and its prevalence in nature. The rule of thirds is a kind of simplification of the golden ratio, which makes it easier to apply but sometimes less dynamic. 

Designers can choose between these principles based on their specific goals and the context of the project. Both methods help structure content in a way that is visually appealing and easy to navigate. 

Watch as UX Strategist and Consultant, William Hudson explains the golden ratio: 

Show Hide video transcript
  1. Transcript loading…
 

Take our UI Design Patterns for Successful Software course. 

Are there cultural variations in the use of the rule of thirds?

Yes, cultural variations affect how designers use the rule of thirds. While this composition principle is widely applicable, its implementation can differ based on cultural perceptions of space, balance and aesthetics. In Western cultures, for instance, designers often employ the rule of thirds to create dynamic visual interest. They position key elements off-center to guide the viewer’s eye in a specific narrative direction. 

Conversely, in many Asian cultures, there is a preference for more central and symmetric compositions. This reflects principles of balance and harmony that are prevalent in artistic traditions like Japanese Zen gardens and Chinese landscape paintings. Here, designers might still use the rule of thirds but in a way that emphasizes balance and tranquility rather than dynamic movement. 

These cultural preferences can influence everything from graphic design to web layouts, and it’s crucial to understand these differences for designers who work in global contexts. When they recognize and adapt to cultural variations in visual composition, designers can communicate more effectively with diverse audiences. 

Watch Author and Human-Computer Interaction Expert, Alan Dix explain why it’s important to design with culture in mind: 

Show Hide video transcript
  1. Transcript loading…
Video copyright info

Copyright holder: Tommi Vainikainen _ Appearance time: 2:56 - 3:03 Copyright license and terms: Public domain, via Wikimedia Commons

Copyright holder: Maik Meid _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY 2.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Norge_93.jpg

Copyright holder: Paju _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY-SA 3.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Kaivokselan_kaivokset_kyltti.jpg

Copyright holder: Tiia Monto _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY-SA 3.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Turku_-_harbour_sign.jpg

 

Take our Visual Design: The Ultimate Guide course. 

 

Are there tools to help apply the rule of thirds in digital design?

Yes, several tools assist designers to apply the rule of thirds in digital design. These tools often integrate into graphic design software and applications, making it easier to align and place elements according to this compositional rule. 

One common feature is the grid overlay. Most photo editing and graphic design programs, such as Adobe Photoshop and Illustrator, offer a grid option that you can overlay on your canvas. This grid divides the image into nine equal parts, which matches the rule of thirds layout. Designers can place key elements at the intersections or along the lines to enhance visual interest and balance. 

Also, many camera apps on smartphones and digital cameras come with an option to display the rule of thirds grid on the screen while capturing photos. This aids photographers to frame their shots according to this principle, even before they edit the images. 

Some website and UI design tools also incorporate grid systems that adapt the rule of thirds. These tools help designers maintain alignment and proportion across different screen sizes, and ensure that the layout remains effective and aesthetically pleasing. 

Take our Master Class Accessible and Inclusive Design Patterns with Vitaly Friedman, Senior UX Consultant, European Parliament, and Creative Lead, Smashing Magazine. 

Take our Visual Design: The Ultimate Guide course. 

 

Can you combine the rule of thirds be with other design principles?

Yes, you can combine the rule of thirds with other design principles to create more compelling and effective compositions. This rule, which divides a design into nine equal parts with intersecting lines, works well alongside principles such as balance, alignment and contrast. 

For instance, when you use the rule of thirds to position key elements in a design, you can also apply the principle of balance to ensure that these elements distribute visual weight evenly. This avoids making the design feel too heavy on one side or the other. Alignment comes into play when you use the grid lines of the rule of thirds to line up text and other elements neatly. This can enhance the clarity and cohesiveness of the design. 

Contrast can also work in tandem with the rule of thirds by placing contrasting elements at the grid intersections or along the lines. This not only captures attention but also makes the composition more dynamic and engaging. 

Also, the principle of movement, where you arrange elements to lead the viewer's eye across the design, can benefit from the strategic placement that the rule of thirds encourages. This creates a natural flow that guides the viewer through the design in a deliberate manner. 

Take our Master Class Accessible and Inclusive Design Patterns with Vitaly Friedman, Senior UX Consultant, European Parliament, and Creative Lead, Smashing Magazine. 

Take our Visual Design: The Ultimate Guide course. 

 

How do you measure the effectiveness of the rule of thirds in a design?

To measure the effectiveness of the rule of thirds in a design, you can focus on several key aspects: viewer engagement, composition balance and the overall aesthetic appeal. 

First, assess viewer engagement by tracking how users interact with the design. In digital designs, tools like heat maps can show where viewers spend the most time looking. If these areas align with the intersections of the rule of thirds, it suggests that the rule is guiding viewer attention effectively. 

Next, evaluate the balance of the composition. A well-applied rule of thirds should create a visual balance that feels neither too cluttered on one side nor too empty on the other. This balance contributes to a more pleasant viewing experience, which you can subjectively assess by gathering feedback from users or other designers. 

Lastly, consider the overall aesthetic appeal. This involves looking at how well the elements within the design harmonize and contribute to a unified look. You can conduct surveys or A/B testing to see which designs viewers prefer. A design that applies the rule of thirds well will often receive more positive reactions, indicating its aesthetic effectiveness. 

Take our Master Class How to Get Started with Usability Testing with Cory Lebson, Principal and Owner of Lebsontech LLC. 

Take our Conducting Usability Testing course. 

Show Hide video transcript
  1. Transcript loading…
 

What are the common mistakes when applying the rule of thirds?

When designers apply the rule of thirds, they often make a few common mistakes that can diminish the effectiveness of their compositions. One typical error is over-reliance on the grid. While the rule of thirds provides a helpful guide, to rigidly place every element along the grid lines or intersections can make a design feel forced or unnatural. It's important to use the grid as a guideline rather than a strict rule, allowing some flexibility to achieve the best visual outcome. 

Another mistake is to ignore the context of the elements within the design. For instance, if a key element like a call-to-action button or a focal image aligns perfectly with a grid intersection but clashes with other important components or text, the overall composition might suffer. Designers must consider the interplay between all elements, and ensure they complement rather than compete with each other. 

Finally, some designers forget to consider the viewer's natural reading patterns, which vary from culture to culture. For example, in Western cultures, people typically scan images and text from left to right. To place the most significant elements in a design accordingly can enhance readability and engagement. Failure to consider these patterns can lead to a disconnect with the audience. 

Watch Author and Human-Computer Interaction Expert, Alan Dix explain why it’s important to design with culture in mind: 

Show Hide video transcript
  1. Transcript loading…
Video copyright info

Copyright holder: Tommi Vainikainen _ Appearance time: 2:56 - 3:03 Copyright license and terms: Public domain, via Wikimedia Commons

Copyright holder: Maik Meid _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY 2.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Norge_93.jpg

Copyright holder: Paju _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY-SA 3.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Kaivokselan_kaivokset_kyltti.jpg

Copyright holder: Tiia Monto _ Appearance time: 2:56 - 3:03 Copyright license and terms: CC BY-SA 3.0, via Wikimedia Commons _ Link: https://commons.wikimedia.org/wiki/File:Turku_-_harbour_sign.jpg

 

Take our Visual Design: The Ultimate Guide course. 

 

Does the rule of thirds apply to mobile app design?

Yes, the rule of thirds applies to mobile app design and serves as a powerful tool to create visually appealing and functional interfaces. This rule helps designers place important elements like buttons, logos and navigation items in positions that are easy to access and notice. When designers divide the screen into nine equal parts with two horizontal and two vertical lines, they can identify strategic spots for these key components. 

To apply the rule of thirds in mobile app design enhances the user experience by ensuring that crucial information and interactive elements receive the attention they deserve. For example, to position a call-to-action button at one of the intersections can make it more prominent, and encourage users to click. Similarly, to align text or important content along these lines can improve readability and make the information more digestible. 

Moreover, this compositional rule helps maintain visual balance in the app’s layout, which is especially important given the limited space on mobile screens. By distributing elements thoughtfully across the grid, the design avoids overcrowding and creates a cleaner, more organized interface. 

CEO of Experience Dynamics, Frank Spillers explains UI patterns and how to use them: 

Show Hide video transcript
  1. Transcript loading…
 

Take our Mobile UI Design course. 

What are highly cited scientific articles about the subject of the rule of thirds?

Koliska, M. (2021). Guided by the Grid: Raising Attention with the Rule of Thirds. Journalism Practice, 15(4), 524-541. 

This publication has been influential because it provides a comprehensive analysis of the rule of thirds. Despite the widespread use of this rule, there is little research to understand how professionals apply it in practice. This study examines the use of the rule of thirds in photographic composition, drawing on a survey of 181 participants who evaluated 590 window views. The authors used a tree-regression model to predict view satisfaction based on the application of the rule of thirds. The findings suggest that the rule of thirds can be a useful tool to create visually engaging images, as it helps to draw the viewer's attention to key elements within the frame. This research contributes to a better understanding of the cognitive and perceptual processes involved in visual composition, and has implications for fields such as photography, graphic design and visual communication. 

What are some highly regarded books about the rule of thirds?

Samara, T. (2023). Making and Breaking the Grid, Third Edition: A Graphic Design Layout Workshop. Rockport Publishers.  

This book has been influential in the field of graphic design because it provides a comprehensive and accessible guide to understanding and applying the rule of thirds. The updated third edition of this classic text includes a cross-cultural and inclusive re-envisioning of design history related to the grid, as well as expanded discussions of grid use in interactive and UX/UI scenarios. The book is filled with hundreds of large, full-color layout concepts and diagrams that educate and inspire designers. It not only teaches the basics of the grid system, but also shows how to effectively break the rules to create unique and visually engaging layouts. This book is an essential resource for designers who work in any medium, as it helps them develop a deeper understanding of the cognitive and perceptual processes involved in visual composition. 

Answer a Short Quiz to Earn a Gift

Question 1

What is the rule of thirds?

1 point towards your gift

Question 2

How does the rule of thirds generally improve visual interest in a design?

1 point towards your gift

Question 3

Why should designers position crucial elements along the grid lines or intersections?

1 point towards your gift

Question 4

In which situation should designers break the rule of thirds?

1 point towards your gift

Question 5

In which design discipline is the rule of thirds frequently applied to improve composition?

1 point towards your gift

Better luck next time!

0 out of 5 questions answered correctly

Do you want to improve your UX / UI Design skills? Join us now

Congratulations! You did amazing

5 out of 5 questions answered correctly

You earned your gift with a perfect score! Let us send it to you.

Letter from IxDF

Check Your Inbox

We’ve emailed your gift to name@email.com.

Do you want to improve your UX / UI Design skills? Join us now

Literature on The Rule of Thirds

Here’s the entire UX literature on The Rule of Thirds by the Interaction Design Foundation, collated in one place:

Learn more about The Rule of Thirds

Take a deep dive into Rule of Thirds with our course Visual Design: The Ultimate Guide .

In this course, you will gain a holistic understanding of visual design and increase your knowledge of visual principles, color theory, typography, grid systems and history. You’ll also learn why visual design is so important, how history influences the present, and practical applications to improve your own work. These insights will help you to achieve the best possible user experience.

In the first lesson, you’ll learn the difference between visual design elements and visual design principles. You’ll also learn how to effectively use visual design elements and principles by deconstructing several well-known designs. 

In the second lesson, you’ll learn about the science and importance of color. You’ll gain a better understanding of color modes, color schemes and color systems. You’ll also learn how to confidently use color by understanding its cultural symbolism and context of use. 

In the third lesson, you’ll learn best practices for designing with type and how to effectively use type for communication. We’ll provide you with a basic understanding of the anatomy of type, type classifications, type styles and typographic terms. You’ll also learn practical tips for selecting a typeface, when to mix typefaces and how to talk type with fellow designers. 

In the final lesson, you’ll learn about grid systems and their importance in providing structure within design. You’ll also learn about the types of grid systems and how to effectively use grids to improve your work.

You’ll be taught by some of the world’s leading experts. The experts we’ve handpicked for you are the Vignelli Distinguished Professor of Design Emeritus at RIT R. Roger Remington, author of “American Modernism: Graphic Design, 1920 to 1960”; Co-founder of The Book Doctors Arielle Eckstut and leading color consultant Joann Eckstut, co-authors of “What Is Color?” and “The Secret Language of Color”; Award-winning designer and educator Mia Cinelli, TEDx speaker of “The Power of Typography”; Betty Cooke and William O. Steinmetz Design Chair at MICA Ellen Lupton, author of “Thinking with Type”; Chair of the Graphic + Interactive communication department at the Ringling School of Art and Design Kimberly Elam, author of "Grid Systems: Principles of Organizing Type.”

Throughout the course, we’ll supply you with lots of templates and step-by-step guides so you can go right out and use what you learn in your everyday practice.

In the “Build Your Portfolio Project: Redesign,” you’ll find a series of fun exercises that build upon one another and cover the visual design topics discussed. If you want to complete these optional exercises, you will get hands-on experience with the methods you learn and in the process you’ll create a case study for your portfolio which you can show your future employer or freelance customers.

You can also learn with your fellow course-takers and use the discussion forums to get feedback and inspire other people who are learning alongside you. You and your fellow course-takers have a huge knowledge and experience base between you, so we think you should take advantage of it whenever possible.

You earn a verifiable and industry-trusted Course Certificate once you’ve completed the course. You can highlight it on your resume, your LinkedIn profile or your website.

All open-source articles on The Rule of Thirds

Please check the value and try again.

Open Access—Link to us!

We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change, , link to us, or join us to help us democratize design knowledge!

Share Knowledge, Get Respect!

Share on:

or copy link

Cite according to academic standards

Simply copy and paste the text below into your bibliographic reference list, onto your blog, or anywhere else. You can also just hyperlink to this page.

Interaction Design Foundation - IxDF. (2024, May 2). What is The Rule of Thirds?. Interaction Design Foundation - IxDF.

New to UX Design? We’re Giving You a Free ebook!

The Basics of User Experience Design

Download our free ebook The Basics of User Experience Design to learn about core concepts of UX design.

In 9 chapters, we’ll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

A valid email address is required.
312,273 designers enjoy our newsletter—sure you don’t want to receive it?