How the 60-30-10 rule saved the day
As we gather more experience as designers we sometimes forget some fundamental design rules and how they can make designing easier when applied.
I was reminded of this yesterday as I had a Design Review session with a budding UX Designer Adedamilola.
During the review session, we identified a couple of issues in the app but for the purpose of this article, we will focus on one which had to do with the color imbalance and how it made the screen look cluttered. This seemed to be prevalent across some screens in the application under review.
The concept I will be sharing is the 60–30–10 rule and how as a beginner you can use it for color application in your app design.
The App was an “Exam Studying App” and to explain the 60-30-10 rule to Adedamola I selected the “Course Information” screen shown below.
PS: All of these were done virtually thanks to collaborative design tools like Figma.
Now what is the 60-30-10 rule and how did we apply this to make the screen below look cleaner, better, and more appealing?
Note that this article assumes you have a color palette but you are struggling in terms of application.
The 60-30-10 rule
60% is your dominant hue, 30% is secondary color and 10% is for accent color.
This rule helps you create a proper and well-balanced color application for your design. The idea here is simply dedicating the 60% of the palette to one color (usually, it’s a neutral color), another (complementary) color makes up 30% of the palette, and a third color (accent) is used for the remaining 10% of the design.
This works because it helps to create a sense of balance and allows the eye to move comfortably from one focal point to the next. By the way, it's easy and simple to use.
How did we apply the 60–30–10 rule?
- Firstly, we had to set our color ratio based on the existing palette. We set the dominant hue (60%) to White (#ffffff), secondary to blue (#191645), and the accent color to green(#43C6AC)
- We removed elements such as the name of the user, picture, and date as they weren’t useful in the context of the screen. This helps to free up real estate.
- We started analysing the elements and which color each would take. The screen background and card color will remain white.
- The big card containing subject information will change from its initial gradient color to our blue(#191645).
- Icons and tab bars can be in our accent color green (#43C6AC)
- For contrast, elements against a blue background will be white(#ffffff) to help with text hierarchy. Elements against white backgrounds will be blue (#) and a shade of grey(#888888) for hierarchy.
- Dedamilola went ahead to implement the new color ratio to the screen
Just like Harry Porter’s magic wand , this did a lot of magic to the screen and behold the transformation. Tadaa!!!!
Okay!!! 🙄 It wasn’t as dramatic as implied above 😁 but the new screen was cleaner, more appealing with better balance achieved. And this was achieved under 30minutes with our simple 60–30–10 rule.
This is a typical example of how fundamental principles still work and how designers starting their design careers can leverage all these principles to make their journey easier.
Dedamilola is exploring ways to improve the interface as well as the experience for users and will be showing the world this app soon. Watch out! Thanks for reading!!! This is my first article ever and I appreciate feedback and comments.
