What is the 70 20 10 rule in design?

The 70-20-10 rule in design, often called the "rule of thirds" or "visual hierarchy," is a principle that guides the distribution of elements within a composition. It suggests that approximately 70% of your design should be dedicated to a dominant element, 20% to a secondary element, and 10% to an accent element. This creates a balanced and visually appealing layout.

Understanding the 70-20-10 Rule in Design

The 70-20-10 rule is a fundamental concept in visual design, applicable across various fields like graphic design, web design, interior design, and even photography. It’s not a rigid mathematical formula but rather a guideline to achieve visual balance and direct the viewer’s eye effectively. By consciously allocating space and emphasis, designers can create more engaging and impactful compositions.

What is the Core Concept of the 70-20-10 Rule?

At its heart, the 70-20-10 rule helps establish a clear visual hierarchy. This hierarchy guides the audience’s attention, ensuring they notice the most important elements first.

70% Dominant Element: This is the primary focus of your design. It should be the most prominent and attention-grabbing element. Think of a large hero image on a website or the main subject in a photograph.
20% Secondary Element: This element supports the dominant one. It provides context, additional information, or a complementary visual. This could be a supporting headline, a call-to-action button, or a secondary image.
10% Accent Element: This is for the smallest, yet crucial, details. These are often used to add pops of color, highlight specific information, or provide subtle finishing touches. Think of small icons, fine print, or a bright, contrasting color used sparingly.

How Does the 70-20-10 Rule Enhance Design?

Applying this rule can significantly improve the effectiveness of your designs. It prevents elements from competing for attention, leading to a more cohesive and understandable visual experience.

Achieving Visual Balance and Harmony

When you distribute your design elements according to the 70-20-10 ratio, you naturally create a sense of harmony. The dominant element anchors the composition, while the secondary and accent elements provide depth and interest without overwhelming the main subject. This balance makes the design feel stable and pleasing to the eye.

Directing User Attention Effectively

In user interface (UI) design, for instance, the 70-20-10 rule is invaluable for guiding users. A website might use a large, compelling image (70%) for its main product, a clear headline and brief description (20%) to explain its benefits, and a brightly colored "Buy Now" button (10%) to encourage action. This structured approach ensures users understand the key message and know what to do next.

Improving Readability and Comprehension

For content-heavy designs, like brochures or articles, the 70-20-10 rule can make information more digestible. A large, engaging title and image (70%) can draw the reader in. Key subheadings and supporting text (20%) can break down information into manageable chunks. Small, impactful icons or pull quotes (10%) can highlight important takeaways, making the overall content easier to scan and comprehend.

Practical Applications of the 70-20-10 Rule in Design

The beauty of the 70-20-10 rule lies in its versatility. It can be adapted to almost any design project.

Graphic Design Examples

In a poster design, the main event or product would occupy the largest visual space (70%). Supporting details like date, time, and location might take up the secondary space (20%). A small logo or a special offer could serve as the accent element (10%). This ensures the core message is immediately clear.

Web Design and UI/UX Considerations

For a landing page, the hero section often embodies the 70-20-10 principle. A striking visual or video (70%) grabs attention. The primary call to action and a brief value proposition (20%) guide the user. Subtle navigation elements or social proof icons (10%) add credibility and functionality without distraction. This strategic use of space is key to conversion rate optimization.

Interior Design and Photography

Even in physical spaces, this principle applies. A large statement piece of furniture or a dominant color scheme (70%) sets the tone. Complementary furniture or accent walls (20%) add layers. Smaller decorative items like cushions or artwork (10%) provide personality and detail. Similarly, a photographer might frame their subject prominently (70%), use the background for context (20%), and a small detail like a glint in the eye as an accent (10%).

Implementing the 70-20-10 Rule: Tips for Success

While the rule is straightforward, effective implementation requires thoughtful consideration.

Start with Your Primary Message

Before you begin designing, clearly define what you want your audience to see and understand first. This will be your 70% element. Everything else should support this primary goal.

Use Contrast to Define Roles

Contrast is your best friend when applying the 70-20-10 rule. Use differences in size, color, typography, and spacing to clearly distinguish between your dominant, secondary, and accent elements. This makes the hierarchy obvious.

Don’t Be Afraid to Iterate

The 70-20-10 rule is a guideline, not a strict law. You may need to adjust the percentages based on your specific project and audience. Experiment with different layouts and get feedback to ensure your design is achieving its intended effect.