Custom Web Design with the 60/30/10 Rule

Hey, WordPress developers and marketers, are you on the lookout for a design principle that can transform your website into a visually stunning masterpiece?

While working on a website redesign project myself, I stumbled upon the powerful 60/30/10 rule – a simple yet highly effective technique for creating balanced and harmonious color schemes.

Join me as we explore the 60/30/10 rule, its benefits, and how you can apply it to elevate your website design. I’ll also share real-world examples of websites that have perfectly executed this rule and suggest WordPress tools and plugins to help you implement the 60/30/10 rule with ease.

So let’s dive into the world of color harmony and balance.

What is the 60/30/10 Rule?

The 60/30/10 rule is a time-tested principle in design that suggests dividing color usage into three distinct proportions:

60% for the dominant color, 30% for the secondary color, and 10% for the accent color.

The rule promotes a visually appealing balance in your design, creating a hierarchy that guides the user’s eye through the content.

Benefits of Applying the 60/30/10 Rule

Designing a website that will be remembered by visitors is tough. People are exposed to so much content online that we’re all fighting for a bit of their attention.

But how many times have you recognized a brand or company based solely on its color scheme?

That’s why it’s so important to get the color in your design right.

Let’s look at the Hipcamp website as an example.

Enhancing Visual Appeal

A well-balanced color scheme improves the aesthetic value of your website, making it more attractive to users and leaving a lasting impression.

Hipcamp does this with its light-grey background and green accents that represent nature, as well as imagery that fits in with the theme and color scheme.

Improving User Experience

A clear hierarchy and visual structure make it easier for users to navigate and find information on your website, reducing frustration and enhancing their overall experience.

Notice how your eyes start on the “Find yourself outside” text which tells you why you’re here and stands out thanks to the green color and bold text. You then follow the page down to the smaller text and on to the search field, which is the action they want you to take.

Reinforcing Brand Identity

Consistent color usage strengthens your brand image and helps users recognize your website and company, increasing trust and loyalty.

As I mentioned above, the green from their logo is used throughout the main text and creates a connection with the brand’s nature-focused identity.

Increasing User Engagement

A visually pleasing website encourages users to explore further and engage with your content, driving more conversions and revenue.

Following on from the user experience above, the website leads you gently into the search fields, inviting you to engage with it.

Simplifying Design Decisions

The 60/30/10 rule provides a clear framework for making design choices, streamlining the process, and reducing the likelihood of design inconsistencies.

The Hipcamp website designers could have easily used multiple colors to make their site feel more unique, but they kept it simple, clean, and consistent.

How to Apply the 60/30/10 Rule in Your Website Design

I found that approaching the rule in 3 steps helped me to simplify the process, from color selection to completing the entire website design.

1. Choose the Color Palette and Apply Proportions

The 60%

Begin by selecting a dominant accent color that represents your brand. This will be used for large areas like backgrounds, so it’s typically white, black, or variations of either of them.

The 30%

The secondary color should complement the dominant color without standing out. It could be used in areas such as headers and sidebars.

The 10%

Finally, the accent color is the color that draws the visitors’ eye to where we want it on the page. Think of call-to-action elements or important text.

Keep website accessibility in mind when making these decisions. Make sure that the colors you choose have enough contrast for readability.

You can use color theory and tools like Coolors or Adobe Color to help guide your choices.

2. Test and Adjust

Review your design and adjust the color proportions if needed.

Gather feedback from users and colleagues to ensure your design is visually appealing and easy to navigate.

Another good tip I got from a designer years ago was to stand up, move two meters back from your screen, and look at your work again.

Do the right areas and colors stand out?

3. Stay Consistent

Apply the 60/30/10 rule consistently across your entire website to reinforce your brand identity and provide a cohesive user experience.

Beyond your website, applying the same rule to your other marketing material will help even more.

Disclaimer

When your website is image-heavy, it does make it harder to apply this rule effectively. In that case, sticking to a more neutral color palette will help the accent color stand out more.

Real-World Examples

Once you see it implemented in the real world, you’ll understand why it’s so effective and how much it can benefit your next website design.

Canva

Being a design tool itself, you’d expect Canva to get this right and they don’t disappoint.

They’ve got white as their 60% dominant color and purple as the 10% accent color. The other 30% is blue, but they’ve used it to create depth in their designs by varying the hue of the blue on different pages and in different sections.

Alice Writes Copy

The Alice Writes Copy website is a perfect example of the 60/30/10 rule implemented with a darker color strategy. Dark blue represents the 60% dominant color with grey being the secondary color and peach being the stand-out accent color.

Something worth noticing here is that even though the image takes up a large part of the hero section, the designer maintained color balance on the page by using lighter, natural colors in the photo.

MailChimp

MailChimp is a website that many of us have visited, and even though opinions on their service vary, we can’t fault their homepage design. Notice how white makes up the majority of the hero section with the natural tones of the images below being the secondary “color” and yellow as the accent color.

Once again, although the imagery is a big part of the design, none of the photos used are overbearing. Rather, they fit perfectly into the design and complement the rest of the colors.

Spotlight

Okay, this is a biased example since Spotlight is our own WordPress plugin and we designed its website in-house. But still, it’s a great example of this rule in action.

White remains the most popular 60% dominant color while we used a light blue for the 30% secondary color and the brand’s red as the 10% accent color.

Revamping Your Website with the 60/30/10 Rule

You might be thinking that you don’t want to redesign your entire WordPress site, which is understandable, but there are still ways of applying the 60/30/10 rule to your existing design.

If you’re using a website builder such as Elementor, its Global Colors option is a great way of adjusting a color scheme without touching the layouts themselves.

The same applies to Beaver Builder with its color palette, and to GeneratePress with its Global Colors. The same can be said for almost all page builders and block plugins.

If you’re not using a block plugin or page builder and you don’t want to touch any CSS code, you’ll want to check out our CSS Hero review.

However, if the task of revamping your website feels too daunting, or you simply don’t have the time to invest in a redesign, consider seeking professional help. Partnering with an experienced agency that specializes in website redesigns and rewrites can be a game-changer. They’ll handle all the complexities of applying the 60/30/10 rule, tailoring it specifically to your brand’s needs. Their expertise ensures a visually balanced and engaging website, enabling you to focus on your core business activities.

Wrapping Up: Master the 60/30/10 Rule

By incorporating the 60/30/10 rule into your website design, you can significantly enhance its visual appeal, user experience, and overall effectiveness.

Follow the guidelines outlined in this article and leverage the recommended tools and WordPress plugins to create stunning, balanced, and engaging websites.

If you’re interested in learning more about the 60/30/10 rule and other design strategies, consider watching some of the videos on YouTube or enrolling in design courses on websites like Udemy or Skillshare.

Lastly, if you’re also designing UIs for products, the rule can also be applied there. Take a look a the example in the video below.

Don’t forget to explore other resources on WPMayor, like this guide on cloning a website’s design.

Now it’s time to experiment and iterate until you achieve the perfect balance of colors for your site.