{"id":1707,"date":"2025-01-03T03:25:44","date_gmt":"2025-01-03T03:25:44","guid":{"rendered":"https:\/\/kmfinfotech.com\/blogs\/2025\/01\/03\/custom-web-design-how-the-60-30-10-rule-transformed-our-website-designs-forever\/"},"modified":"2025-01-03T03:25:45","modified_gmt":"2025-01-03T03:25:45","slug":"custom-web-design-how-the-60-30-10-rule-transformed-our-website-designs-forever","status":"publish","type":"post","link":"https:\/\/kmfinfotech.com\/blogs\/custom-web-design-how-the-60-30-10-rule-transformed-our-website-designs-forever\/","title":{"rendered":"Custom Web Design: How the 60\/30\/10 Rule Transformed Our Website Designs Forever"},"content":{"rendered":"
\n

Mastering Custom Web Design with the 60\/30\/10 Rule<\/h1>\n

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 \u2013 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\u2019ll 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\u2019s dive into the world of color harmony and balance.<\/p>\n

What is the 60\/30\/10 Rule?<\/h2>\n

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

60% for the dominant color, 30% for the secondary color, and 10% for the accent color.<\/strong><\/p>\n

The rule promotes a visually appealing balance in your design, creating a hierarchy that guides the user\u2019s eye through the content. It originated from the interior design world but has been applied in web design to great effect.<\/p>\n

Source: The 60\/30\/10 rule by iniyavanappu<\/a> on Dribbble.<\/figcaption><\/figure>\n

Benefits of Applying the 60\/30\/10 Rule<\/h2>\n

Designing a website that will be remembered by visitors is tough. People are exposed to so much content online that we\u2019re all fighting for a bit of their attention.<\/p>\n

But how many times have you recognized a brand or company based solely on its color scheme? That\u2019s why it\u2019s so important to get the color in your design right. Let\u2019s look at the Hipcamp website<\/a> as an example.<\/p>\n

\n \"Hipcamp
\n <\/figure>\n

Enhancing Visual Appeal<\/h3>\n

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.<\/p>\n

Improving User Experience<\/h3>\n

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 \u201cFind yourself outside\u201d text which tells you why you\u2019re 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.<\/p>\n

Reinforcing Brand Identity<\/h3>\n

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\u2019s nature-focused identity.<\/p>\n

Increasing User Engagement<\/h3>\n

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.<\/p>\n

Simplifying Design Decisions<\/h3>\n

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.<\/p>\n

How to Apply the 60\/30\/10 Rule in Your Website Design<\/h2>\n

I found that approaching the rule in 3 steps helped me to simplify the process, from color selection to completing the entire website design.<\/p>\n

1. Choose the Color Palette and Apply Proportions<\/h3>\n

The 60%<\/h4>\n

Begin by selecting a dominant accent color that represents your brand. This will be used for large areas like backgrounds, so it\u2019s typically white, black, or variations of either of them.<\/p>\n

The 30%<\/h4>\n

The secondary color should complement the dominant color without standing out. It could be used in areas such as headers and sidebars.<\/p>\n

The 10%<\/h4>\n

Finally, the accent color is the color that draws the visitors\u2019 eye to where we want it on the page. Think of call-to-action elements or important text.<\/p>\n

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<\/a> or Adobe Color<\/a> to help guide your choices.<\/p>\n

2. Test and Adjust<\/h3>\n

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?<\/p>\n

3. Stay Consistent<\/h3>\n

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.<\/p>\n

Disclaimer<\/h3>\n

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.<\/p>\n

Real-World Examples<\/h2>\n

Once you see it implemented in the real world, you\u2019ll understand why it\u2019s so effective and how much it can benefit your next website design.<\/p>\n

Canva<\/h3>\n
\n \"The
\n <\/figure>\n

Being a design tool itself, you\u2019d expect Canva to get this right and they don\u2019t disappoint. They\u2019ve got white as their 60% dominant color and purple as the 10% accent color. The other 30% is blue, but they\u2019ve used it to create depth in their designs by varying the hue of the blue on different pages and in different sections.<\/p>\n

Alice Writes Copy<\/a><\/h3>\n
\n \"The
\n <\/figure>\n

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.<\/p>\n

MailChimp<\/a><\/h3>\n
\n \"The
\n <\/figure>\n

MailChimp is a website that many of us have visited, and even though opinions on their service vary, we can\u2019t 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 \u201ccolor\u201d 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.<\/p>\n

Spotlight<\/a><\/h3>\n
\n
\n \"The
\n <\/a>
\n <\/figure>\n

Okay, this is a biased example since Spotlight<\/a> is our own WordPress plugin and we designed its website in-house. But still, it\u2019s 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\u2019s red as the 10% accent color.<\/p>\n

Revamping Your Website with the 60\/30\/10 Rule<\/h2>\n

You might be thinking that you don\u2019t 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\u2019re using a website builder such as Elementor, its Global Colors<\/a> option is a great way of adjusting a color scheme without touching the layouts themselves.<\/p>\n

The same applies to Beaver Builder with its color palette<\/a>, and to GeneratePress with its Global Colors<\/a>. The same can be said for almost all page builders and block plugins.<\/p>\n

If you\u2019re not using a block plugin or page builder and you don\u2019t want to touch any CSS code, you\u2019ll want to check out our CSS Hero review. However, if the task of revamping your website feels too daunting, or you simply don\u2019t 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\u2019ll handle all the complexities of applying the 60\/30\/10 rule, tailoring it specifically to your brand\u2019s needs. Their expertise ensures a visually balanced and engaging website, enabling you to focus on your core business activities.<\/p>\n

Wrapping Up: Master the 60\/30\/10 Rule<\/h2>\n

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

Follow the guidelines outlined in this article and leverage the recommended tools and WordPress plugins to create stunning, balanced, and engaging websites. If you\u2019re 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<\/a>.<\/p>\n

Lastly, if you\u2019re also designing UIs for products, the rule can also be applied there. Take a look at the example in the video below.<\/p>\n

\n

\n