60–30–10 Rule: Color Choosing in UI Design

::

The 60-30-10 rule is a design principle used in various creative fields, including UI (User Interface) design, to create visually appealing color schemes. It provides a simple guideline for how to distribute and balance colors in a design project. Here’s how it works:

1. 60% Dominant Color: This is the primary color that sets the overall tone and mood of your design. It is the most prominent color and is often used for background elements, such as the background of a website or app. This helps establish a visual hierarchy and should be easy on the eyes.
2. 30% Secondary Color: This color complements the dominant color and adds visual interest to your design. It’s typically used for things like headers, sidebars, or other important sections of your UI. The secondary color should contrast well with the dominant color to make key elements stand out.
3. 10% Accent Color: The accent color is the pop of color that draws attention to specific elements or calls to action within your design. This could include buttons, links, or other interactive elements. The accent color should contrast with both the dominant and secondary colors and should be used sparingly to guide the user’s focus.

 

Steps:

Identify the Dominant Color (60%):

• Determine the primary color that will set the overall tone of your design. This color should align with your brand identity and the emotions you want to convey.
• Consider factors like brand guidelines, target audience, and the purpose of your UI. For example, calming blues may be suitable for a healthcare app, while vibrant reds could work for an entertainment app.
• Use the dominant color for background elements and large areas of your UI, providing a cohesive and calming backdrop.

2. Select the Secondary Color (30%):

• Choose a color that complements the dominant color while providing visual contrast. This secondary color should help emphasize important sections and create visual interest.
• Consider using the secondary color for headers, sidebars, or other significant UI components.
• Ensure that the secondary color is harmonious with the dominant color and maintains legibility and accessibility.

3. Pick the Accent Color (10%):

• Select an accent color that stands out from both the dominant and secondary colors. This color will draw attention to specific UI elements and calls to action.
• Use the accent color sparingly for interactive elements like buttons, links, and important notifications.
• Ensure that the accent color maintains good contrast and readability, especially for text on backgrounds.

4. Test for Accessibility:

• Ensure that your chosen color scheme meets accessibility guidelines, particularly in terms of color contrast for text and background elements.
• Use tools and color contrast checkers to verify that your colors are legible for all users, including those with visual impairments.

5. Iterate and Fine-Tune:

• Experiment with different shades and variations of your chosen colors to find the right balance and harmony.
• Test your color scheme in the actual UI design to see how it looks and feels in practice.
• Seek feedback from colleagues or users to ensure that the colors resonate with your target audience and meet your design goals.

6. Document Your Color Choices:

• Create a style guide or design documentation that clearly outlines the dominant color, secondary color, and accent color, along with their specific uses in your UI design.
• Provide color codes (e.g., HEX, RGB) for easy reference and consistency across your design team.

Advantages

1. Visual Balance: The rule helps create a visually balanced and harmonious color scheme. The distribution of colors in the 60-30-10 ratio ensures that the UI design appears visually pleasing and well-structured.
2. Consistency: By following this rule, designers maintain consistency in color usage throughout the UI. This consistency enhances the user experience by making the UI feel coherent and easy to navigate.
3. Emphasis on Key Elements: The rule allows designers to emphasize important UI elements, such as headers, call-to-action buttons, and interactive elements. This makes it easier for users to identify and engage with essential features.
4. Branding: It enables designers to incorporate a brand’s primary color into the design while introducing complementary colors for variety. This helps reinforce brand recognition and identity within the UI.
5. Readability and Accessibility: Encourages designers to consider color contrast, ensuring that text remains readable against various background colors. This promotes accessibility and usability for all users.
6. Enhanced Aesthetics: A well-balanced color scheme created using this rule enhances the overall aesthetics of the UI, making it more visually appealing to users.
7. Guided Decision-Making: Designers can use the rule as a guideline to make informed decisions about color selection, reducing the guesswork involved in choosing colors for a project.
8. Simplicity: Simplifies the color selection process by breaking it down into three key categories. This simplification makes it easier for designers to create cohesive color schemes.
9. Testing and Iteration: Designers can experiment with different colors within each category to fine-tune the color scheme, ensuring it meets the project’s objectives and resonates with the target audience.
10. Adaptability: While the rule provides a framework, it is also flexible enough to adapt to different design contexts and project requirements. Designers can adjust the percentages and colors to suit specific needs.
11. Feedback and Collaboration: The rule can serve as a common reference point for design teams, making it easier to collaborate and provide feedback on color choices during the design process.
12. Time and Resource Efficiency: By providing a structured approach to color selection, the rule can save time and resources that might otherwise be spent on extensive color experimentation and revisions.

Disadvantages

1. Simplicity May Be Limiting: The rule’s simplicity can be a disadvantage in certain cases. Designers might feel constrained by the fixed percentages, limiting their creativity and flexibility in color selection, which could be more complex in some projects.
2. Not Suitable for All Projects: The rule is a guideline that works well for many UI design projects but may not be suitable for every situation. Some projects may require unique and unconventional color schemes that don’t adhere to the 60-30-10 ratio.
3. Potential for Generic Designs: Overreliance on the rule can lead to generic or cookie-cutter designs, as many designers may use it. This could result in a lack of distinctiveness and originality in UI designs.
4. Inadequate Consideration of Branding: While the rule allows for the incorporation of brand colors, it might not fully capture the unique identity and branding requirements of every organization. Some brands may need a more customized approach to color selection.
5. Complex Accessibility Requirements: The rule may not adequately address the complex accessibility needs of all users. Ensuring that a color scheme meets the highest accessibility standards often requires more in-depth analysis and adjustments beyond the 60-30-10 rule.
6. Dependence on Personal Taste: Color perception and preferences can vary widely among individuals. Relying solely on the rule might not account for the personal tastes and preferences of the target audience.
7. Limited Color Exploration: Some designers might use the rule as a shortcut and miss out on exploring other creative color options that could better suit the project’s goals.
8. Lack of Contextual Consideration: The rule does not take into account the specific context and cultural factors that can influence color perception and meaning. Colors can have different connotations in different cultures, and this may not be adequately addressed.
9. Difficulty in Finding the Right Shades: Selecting the perfect shades of colors within each category (dominant, secondary, accent) that harmonize well with each other can be challenging. Achieving the right balance of hues requires careful consideration.
10. Rigid Structure: The rigid structure of the rule might not adapt well to projects with evolving design trends or dynamic content that requires frequent color changes.

 

Examples

E-commerce Website

• Dominant Color (60%): A clean, white background for the website to provide a sense of cleanliness and simplicity.
• Secondary Color (30%): A muted gray for header bars, product category labels, and borders to create a visual hierarchy.
• Accent Color (10%): A vibrant, contrasting color like orange for call-to-action buttons, “Add to Cart” buttons, and other interactive elements to draw attention.

 

Social Media App

• Dominant Color (60%): A calming shade of blue as the primary background color, promoting a sense of trust and serenity.
• Secondary Color (30%): A lighter shade of blue for headers, profile banners, and navigation bars, maintaining consistency with the dominant color.
• Accent Color (10%): A bold red for notifications, like new messages or notifications of activity, making them stand out.

 

News and Content Aggregator App

• Dominant Color (60%): A neutral gray background to create a focus on the content rather than the UI.
• Secondary Color (30%): A subtle blue for section headings, article previews, and navigation menus, offering a sense of categorization and structure.
• Accent Color (10%): A bright yellow for highlighting trending topics, breaking news alerts, and clickable links, ensuring they grab the user’s attention.

 

Fitness Tracking Mobile App

• Dominant Color (60%): A fresh green background to convey health and vitality, aligning with the fitness theme.
• Secondary Color (30%): A darker green for progress bars, workout history, and menus to maintain a consistent theme.
• Accent Color (10%): A motivating bright orange for buttons to start workouts, log achievements, and set goals, encouraging user interaction.

 

Financial Dashboard Web Application

• Dominant Color (60%): A professional dark blue background to convey trustworthiness and seriousness.
• Secondary Color (30%): A lighter shade of blue for headers, graphs, and charts, ensuring readability and a unified look.
• Accent Color (10%): A bold red for alerts, critical notifications, and action buttons for transactions, making them unmistakably noticeable.