60-30-10 Color Rule

How can you use color inside of your mobile UI design projects to come out looking really mature and really seamless and really well thought out and not obnoxious and loud? And really the worst thing that it could be is distracting. Well, you might want to use a little rule or guideline called the 60 30 ten rule, which is going to help you to understand how to use color, how to implement color, and when to break that rule. We're going to talk all about that coming up next.

------------------------------------------------------------------------------------

🤝 //////////// Learn UI Design in 30 Days with me

🏆 //////////// Join my members community to get access to perks:

📫 ////////// Sign up for my Monthly Newsletter
------------------------------------------------------------------------------------
🎨 ////////// I design in Figma

🖥️ ////////// I build websites with Webflow

📅 ////////// I run my life with Notion

------------------------------------------------------------------------------------

Design Examples:

[GreenDimka]

As a developer, after watching this video, I am still confident that: a) designers are bad at math; b) I am bad at design, so will continue hiring designers for the design part.

[cody]

This was a great video, as a developer I've always struggled with colours so knowing these kinds of heuristics is super helpful!

[Jonpey]

Love how you don’t stretch out your videos unnecessarily. Great presentation and I learned something super quick!

[jennifermagpantay]

I had never heard bout this rule before! Now I can understand why my design looks immature! But now I know how to fix it! Thanks for sharing! Great video!!

[NotAnnaJones]

I’m an artist but I love using logic. This is why your method is so calming and satisfying to my nerves. Ahhhh. Thank you.

[massiah]

This is one of the best recommendations YouTube gave me.. Using synchronized colors was always a tough thing to do..

[thetechnologyblues]

This is probably one of the best Design suggestions I got in several years, that too finding it in a random Youtube Suggestion is absolutely a blessing. Thanks 😄

[jawsstech]

The simplicity, clarity, and overall usefulness of this video made me a subscriber.

[adevikthur]

I love how clean designs make the usability way easier.

[Pdrs]

I'm mostly a backend developer so this was pretty confusing when seeing a 4th color for the font and sometimes other colors being added. It's what I dislike about design, there are no absolutes or precise standards it needs a lot of intuition, or taste, that I don't have.

[noahpedraza]

This is the type of information that is going to stick on the back of my head and guide me. LOVE IT!

[noumanwajid]

So much value for a product designer in just 6 min. 🔥🔥

[CanadianChick]

What awesome timing. I'm a newly graduated and partially self taught designer who's been commissioned to create a Squarespace site. I'll totally implement this to it and my portfolio site.

[PresentationProcess]

Great tips for use in any kind of design! Keep attention focused on a very limited area with a bright color. Thank you for sharing.

[stevecarter]

The idea of a "call to action colour" was my main takeaway here. BFF not understood by enough people who have ui responsibility

Wow, this video has solved a lot of clashes that happens between designs, stakeholders & developers. Thank you for making this concept so simple. 👌🏾

[ahsath]

Really helpful didn't even knew this rule existed

[MeMyselfAi-kgep]

As a newer designer I am glad to have been recommended this video. Helped with my landing page, Thank you sir! You are a gentleman and a scholar!🎉

[mm_]

I always prefer the more simplified and clean application layout.
Now thanks to you I know what’s the reason behind this design - so called 60-30-10 rule, which I like a lot.

[brandonk]

I'm not a graphic designer. But as a consumer it have to say if I were scrolling through, I'd choose the original over the cut-down version. The first was much more inviting. So designers might want to do a few mock-ups and run it by people. Just my opinion as a consumer. In the first, the shading drew my eyes down to the lesson units, and the grays clearly delineated the sections. I like that. The second is hard on the eyes. Not a fan of white on black. Just personal preference.