What is the 60 30 10 graphic design rule?
The 60 30 10 design rule is a guiding formation on how to effectively use the color palette to create a dynamic engaging and visually appealing design. This theory states that color should be applied in different percentages for a design to be visually appealing and functional.
The 60 30 10 rules in graphic design consist of the various color percentages:
- 60% (primary color)
- 30% (secondary color)
- 10% (accent color)
60% (primary color)
This theory states that 60% of your color palette should be assigned to a dominant color which will be the main color for the design and covers most areas in your design, mostly the background and every area that the foreground sits upon. It takes up 60% of the color palette and will be of any primary color of your choice ranging from red, green, white, blue, or black, and oftentimes would be the color of the brand in question.
30% (secondary color)
30% of your color palette will be made of a secondary color that will mostly act as a supporting color and also consist of elements having colors that complement and contrast with the primary color. This element could be typography, icons, shapes, or images. Just as the color theory explains, the secondary color is made up as a result of the mixture of two primary colors which could result in Red + yellow = orange, blue + brown = purple, and Yellow + Blue = Green.
10% (accent color)
Accent colors are supplementary colors that typically contrast or complement the primary and secondary colors used in a design. The 10% accent color in your design is applied or used on elements that call for attention. This could be for example the CTA buttons in an e-commerce shop, cookie alert notifications, and login section in a mobile app.
These buttons use high-contrast colors that complement both the primary and secondary colors to arrest your attention and also make any element of emphasis stand out from other design elements.
Applying the 60 30 10 rule in graphic design can help drive more sales on your online store if used correctly on your design. It has been used by professional designers on design projects like web design, promotional design, app design, and even environmental design.
Why is the 60 30 10 design rule important?
The 60 30 10 graphic design rule is a crucial design concept that determines to a great level the success of a design and is also one of the building blocks behind every appealing color application on a design. The importance of the 60 30 10 design rule spanned various crucial aspects of design that could break or make a design visually appealing.
Visual balance
Using the 60 30 10 graphic design rule helps you achieve a balanced design structure that isn’t just visually appealing but effective in carrying its intended purpose. Whether it’s being applied to a web design or UI design, it makes sure that it successfully guides the user’s eye to where it is supposed to be.
Emphasis on key elements
Making emphasis while using important elements that drive users to their end goal on your website, flyer design or app is one objective we must tick before their viewing time is exhausted. With the 60 30 10 graphic design rule you can make your design grab more attention by using the 10% accent color to draw attention or emphasis to call to action buttons like buy now, drop a message, register here, log in, etc.
You can still use this trick to emphasize or create a focal point on a flier design or on the landing page of your website. Just make sure that when you do, you use an accent color that contrasts and compliments the primary and secondary colors.
Consistency
Consistency is one of the essential principles in graphic design that must be adhered to to maintain a fluent or steady design flow. The 60 30 10 design rule can help create consistency all across your design by making sure a particular color palette follows a steady design rhythm. Using one dominant color, a secondary color, and an accent color can help create a clean visual that can be observed throughout your design.
Simplicity
Simplicity is a prerequisite that some designs require to achieve their goals effectively. This is true in design cases like logo design simplicity, web design simplicity, and UI/UX design simplicity. Applying the 60 30 10 rule in your design not only creates a consistent design flow but also makes the message of the design easy to grasp.
Using too much color in one design not only makes the design look unprofessional but can cause an eyesore for the viewer. Just use three sets of color palettes that represent your brand and designate the various percentages for each color using the 60 30 10 design rule.
How to choose your colors for the 60-30-10 rule?
Primary color (60%)
The main color serves as the core of your color scheme, shaping the overall mood of your design. Before making that million-dollar decision, here are considerations to take:
Align with brand colors
For instance, if you are working on a website UI(user interface) design, try to make the brand color more dominant than every other color. This will create domination and also ensure consistency and reinforce brand recognition.
Consider your audience
Tailor the main color to your target audience and the specific emotions you want to evoke. For example, if you’re creating a health app, according to the color theory you can opt for calming and soothing colors like blue and green. Color is one of the most powerful design elements, Of the influencing factors, 90% is based on color.
Reflect design objectives
Think about the purpose of your UI design and the message you intend to convey. Select vibrant and adventurous colors such as orange, blue, and yellow for a travel app.
After choosing your main color, ensure it dominates key design elements like the background, header, or main button.
Secondary color (30%)
Secondary colors are mostly applied to elements, subheadings, and icons on the design. While the secondary color is applied, the primary color helps complement the secondary in creating a harmonious and visually appealing design.
Here are some considerations you should have before making your color choice:
Color Harmony
Refer to the color wheel and pick a color that complements your dominant color. You can get help choosing amazing color palettes with the help of color generators like Adobe Color CC, Khroma, or Coolors. For instance, if your main color is blue, consider vibrant companions like orange or yellow.
Contrast Boost
Ensure your secondary color contrasts well with your dominant color for improved legibility of elements. If your primary color is dark, opt for a lighter secondary color to enhance accessibility. Alternatively, you could adjust the shades of various colors to see varieties that fit your design.
Mood Alignment
Align your secondary color with the emotions you want to convey. Based on the color theory, various niches or industries rhyme well with certain colors. Let’s take, for example, a fitness app, you can energize the design with a lively color like red or orange. For financial institutions, blue can be used as a representation of trustworthiness and security.
Highlight crucial design elements, such as headings and call-to-action buttons, with your chosen secondary color for maximum impact.
Accent color (10%)
The accent takes up 10% of the design area which is the smallest yet possesses the power to arrest the viewer’s attention in seconds. The accent color uses a third color that contrasts with both the primary and secondary colors. The accent is used on links, call-to-action buttons, and icons.
Color theory
Refer to the color wheel and opt for a hue that contrasts with your dominant and secondary colors. For instance, consider using an accent like pink or yellow if your main color is blue and your secondary is green.
Contrast Magic
Ensure your accent color contrasts well with both dominant and secondary colors for a visually dynamic design.
Mood Enhancement
Align your accent color with the emotions you aim to evoke. For a delicious food app, embrace warm and inviting hues like red or orange, or use pink or yellow for a candy brand.
Once chosen, apply your accent color sparingly to spotlight specific design elements like icons, badges, or links.
How to apply the 60-30-10 rule to your brand design?
Primary color
Knowing how to accordingly sprinkle the various proportions of the 60 30 10 graphic design rule on the surface of your brand is how you can easily achieve visually arresting brand visuals and aesthetics. The primary color which takes up to 60 % of your design area should be applied to major elements and areas of your brand to create a dominant impression.
Let’s take a website design, for example, you can apply your dominant color on the footer, header, or heading of your website. Doing this will make the primary color present and can be seen wherever the user navigates.
Secondary color
The second most important area in your design area will be making use of the secondary color which takes up to 30% of your canvas mass. The secondary colors should be applied to important sections like subheadings, categories, captions, or menus. This creates a harmonious flow of color combinations with the help of contrast.
Accent color
Last but not least of the 60 30 10 design rule is the accent color which takes up just 10% of your design color palette. The accent color is applied on subtle but crucial elements in your design which most times is used for the call to action buttons on a website or instruct viewer on what to do, it can also be applied on logos to grab attention to the brand.
Accent color uses a high-contrast color which helps them stand out and place emphasis on certain buttons and elements.
How to test and adjust the 60-30-10 rule in your brand design?
The 60-30-10 rule, a versatile guideline applicable to various design realms such as web design, app UI design, and interior design, offers a structured approach to creating visually appealing color schemes. However, its adaptability requires careful consideration of several factors.
Contextual Considerations
Size and Shape
Tailoring the rule to the dimensions of your design is crucial. For instance, posters may demand a higher utilization of secondary and accent colors to fill space effectively.
Style and Mood
The stylistic and emotional aspects of the design influence the distribution of dominant, secondary, and accent colors. Logo design, for instance, may necessitate a different balance compared to a poster.
Design Purpose and Audience
Design Goals
Aligning the 60-30-10 rule with the purpose of your design is essential. Websites catering to luxury brands might benefit from darker, richer tones for a sophisticated ambiance.
Target Audience
Understanding the preferences of the intended audience plays a pivotal role. Children’s event flyers may require lighter, brighter colors to foster a lively atmosphere.
Industry-specific Considerations
Health Care Industry
Designs for healthcare companies demand colors that convey trust and professionalism, ensuring a reassuring visual impression in brochures. According to the color theory, colors like blue and white perform well in such niches because of the emotion they create in our minds.
Social Media Campaigns
Banners for social media campaigns require strategic use of colors to elicit specific emotions and prompt action from the audience. Using visually striking colors that are engaging helps create appealing visuals and also guides the user’s eye to crucial pieces of information.
Benefits of the 60–30–10 Rule
The 60 30 10 rule in graphic design offers a lot of benefits that make our design legible, pop, and simple to the eye. Professional designers have executed with finesse the 60 30 10 rule in their design projects and haven’t regretted it. Here are the benefits of using the 60 30 10 rule in design:
Contrast
Using the 60 30 10 graphic design color rule allows various elements to stand out from each other creating room for legibility. Contrast is an essential principle that must obeyed in all levels department of graphic design, you must apply contrast if you want to organize your design and create a hierarchy – which simply means that your viewer should focus their attention on more important information. Apart from creating attention, it could also be used as a trick to gain visual interest.
Emphasis
There is an important message every design is trying to pass to the reader and emphasis draws the user closer to information which then leads the user to take action by clicking that CTA button or following the instructions described. Using the 60 30 10 design rule one sure way you can achieve creating emphasis on an area of your design.
Emphasis can be made by using the secondary or accent color to identify important elements or information you want users to see and react to.
Hierarchy
You can use the 60 30 10 color rule to organize elements according to their level of importance. The dominance of the primary color (60%) helps establish a clear visual hierarchy, while the 30% secondary color uses its contrasting color to draw attention to the most significant elements in the design, followed by the accent color 10% which may be smallest but can have a heavy impact on your design.