What is the 60%-30%-10% Rule?
The 60%-30%-10% rule is a color theory often used by interior designers, graphic designers, and fashion designers about choosing colors to achieve a balanced layout in a design. The rule requires that the dominant\primary color should take up 60% of the design, the secondary color should be 30% of the design, and an accent color should take up 10% of the design.
The dominant color of the design is the most prominent and visible color, making it the most significant and the one that sets the design’s overall mood. The secondary complements the primary one and provides visual interest. The accent color highlights specific features or parts of the design.
The 60%-30%-10% rule allows you to choose complementary shades and tones from the color wheel to create an effective color scheme for your website or mobile app design. Having a set of rules to follow for layout and design helps you create a sense of balance that is visually pleasing.
In this post, we’ll explain the importance of the 60%-30%-10% rule for UI design and layout and how to apply the rule for your UI design.
The Importance of the 60%-30-10% Rule
UI design is crucial for your website or mobile application because it plays a large role in your business’s branding.
The 60%-30%-10% rule provides a more polished, organized, and aesthetically pleasing website or mobile app, which makes it more attractive to your target audience and improves the user experience.
A high-quality user experience leads to more engagements and more chances of conversions. Color is a crucial part of UI design because it directs the users’ attention and can influence how they perceive your brand, establishes a mood, and can help you best depict a product or brand.
Tips for the 60%-30%-10% Rule
- Implementing the 60%-30%-10% rule involves knowing some user interface practices and strategic color selection. Here are some tips for executing the rule for your brand’s UI design.
- Begin by laying out your elements in grayscale (shades ranging from black to white). Grayscale is advantageous in design, as it is the portion that won’t be removed and allows you to focus on creating a solid visual hierarchy.
- From there, make sure your text is readable by providing adequate contrast. Having enough contrast can make your interface less confusing and easier for users to navigate. An example of contrast in UI design is arranging opposite elements and effects like dark and light colors or large and small shapes.
- Avoid using a completely black or gray color. Try to add some saturation to make the design appear more authentic.
- Consider using a color generator to help you identify a well-balanced color scheme. Applying color psychology, like which colors evoke certain moods can guide you in the right direction when choosing colors to use.
How to Apply the 60%-30%-10% Rule
- Choose your primary color.
Utilize your brand’s colors as the dominant color to set the foundation for the mood you would like to set in the design. The mood you decide will depend on your target audience. For example, a brand like DoorDash which offers food delivery services uses red for its app and logo color because red often makes people feel more impulsive and hungry.
After selecting a dominant color, you’ll want to look at the color wheel and identify a color that best complements it based on color theory. The purpose of the secondary color is to provide contrast with your primary color. In other words, if your dominant color is dark, you may want to use a lighter secondary color. The secondary color can be utilized to highlight important elements of your design.
- Choose an accent color.
Lastly, you should pick an accent color. This color’s role is to add excitement and contrast to the design. In order to add excitement and contrast, the accent color must contrast with your primary and secondary colors. While this color is only 10% of the design, it can make it more visually interesting and dynamic. Because it is the smallest portion, however, it needs to be used sparingly to draw attention to elements like links or badges.
While the 60%-30%-10% rule can seem intimidating, it gives you solid color percentages to follow for a UI design project and achieve a balanced, well-coordinated design. UI design is worth investing in because people are interested in innovative, creative, and new designs. A functional and enjoyable user experience will lead to better business for your brand.
Implement 60%-30%-10% Rule Today
Are you looking to utilize the 60%-30%-10% rule for your brand’s next design project? Our team at Dream Media Designs can help set you apart and elevate your business today!
