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 10 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.
All right, before we get too far into the 60 30 10 rule,
好的 那在我们详细介绍60 30 10原则之前
make sure that you like and subscribe to this channel
and hit that little Bell notification icon.
So you know when other videos like this one come out,
let’s jump over to Figma so we can talk a little bit about the 60-30-10 rule.
I have an image that I pulled from a great blog post
that will leave a link in the description,
by a designer who’s talking about the 60-30-10 rule.
And she has a really great contrast to comparison before and after.
I thought it would be a great use case or case study for us,
but I’ve taken that initial UI design that she shows in her post
and it looks like a yard sale. It is really immature.
The usage of color is just distracting. It’s overbearing.
I don’t know where I’m supposed to look or where I’m supposed to go.
Let’s make a little bit of sense with this. In our 60-30-10 rule,
I have three blocks of color up here,
and each rectangle is 1000 pixels wide,
which represents our 100% of color usage.
In our 60-30-10 rule, we want to make sure that we’re using
60% of our neutral or our base color.
It’s going to be a neutral color. It could be a creamy color, a white color.
中性色 奶油色 白色都可以作为主色
If you’re doing a dark interface, it’s going to be some sort of dark color.
Now, later on, we’ll talk about how you can flip this around
and do really bright interfaces and use 60% of a brighter color.
But for now, let’s stick with the more neutralized version.
60% is going to be this color.
So let’s just take this really quickly and type 600 pixels
that represents our 60%.
Then you’re going to have some sort of primary color, right?
This might be a brand color.
This primary color is important,
but it’s not going to be as important as our call to action color.
Our secondary color.
This one, we want to be 30%.
So let’s do 300 here and we’ll just pop this up into place.
And then you guessed it, our call to action.
It should be used sparingly. Our secondary color.
This is the thing that says, Click me, look at me, I’m active. Do something with me.
它好像在说“快点击我 我是激活状态 做点什么”
We want that to only be 10%. So let’s take it down to 100.
And now we have a color palette that we can use for 60-30-10.
And you can see this 60-30-10 is not well represented in this version of the design,
but I would say it is much more represented in this next iterated
updated version of her design
where she’s now she’s really done away with a lot of the excess use of color.
She stripped it down.
She’s kind of neutralized thing now.
Yes, there’s some other fixes here, some copy fixes, some iconography fixes.
But even if you kept all the other little mistakes in this previous design,
the color is just heads and shoulders, heads and tails, whatever you want to say.
A much better version of color implementation here,
much more neutralized here. Right.
Our primary colors being used for important areas.
And our call to action color is only in very important areas.
Click me. Do something with me. Pay attention to me.
吸引人们点击 交互 关注
This is for you user. These call to action areas.
And so that’s the 60 30 10 rule.
Let’s really quickly take a look at some other implementations of the 60 30 10.
But keep in mind, it’s just a guideline.
I’m going to show you some great kind of uses of 60 30 10.
But they’re breaking it a little bit and that’s okay with me.
It should be okay with you as well.
I pulled some Figma community files in here.
Now, you might say
that this neutral color is whatever this kind of like grayish color is that works.
It looks kind of like white, but it’s not really. But maybe it is white. That’s fine.
它看起来似白非白 但也许就是白色 这很好
And then you might say that your secondary color. Right.
And they’re breaking it a little bit here is maybe kind of like this bluish color.
And then your excuse me,
your primary and then your call to action color
is definitely discounted kind of purpley color,
but that’s still kind of 60 30 10.
They’re throwing some fun gradients on the top and playing with it.
But I’d say this is more of a two color design
and they’re just kind of utilizing some hues of that color.
Let’s do this one over here by Mohit Designs.
We got a really similar thing happening.
We got white. Right.
And then you’re going to see throughout over like kind of a span of multiple screens
that maybe are primary colors, kind of this Gray.
But that call to action color is really this kind of warm kind of burnt Orange color.
We can see a really beautiful color palette.
So it’s a good usage of the rule in UI design.
Let’s look at a couple more examples online.
Here’s some great examples on Dribbble.
This one by Gulam Razul.
这个是Gulam Razul 设计的
This is an example of kind of the reverse of it where your bright color is 60%. Right.
这是一个反色案例 亮色占比60% 是不是
And then you can see we have 30% is a lighter hue,
but look still 10% on the actionable colors.
We’re still doing the 60 30 10.
We’re just using color instead of a neutral.
That’s okay, I’m down with that.
Here’s another one by the same designer.
He’s just kind of like flipped it to a dark interface look.
Same kind of like guidelines.
Even in a dark interface 60% is going to be this real dark color,
30% is going to be these lighter colors.
He’s bringing some gradients into them.
That’s fine with me but only 10% is being used for that accent color.
Let’s do another one by Euroart 93 again
we zoom in, we see 60% right 30% 10%
放大后我们可以看到60% 30% 10%
and last one just to drive the idea home one more time.
This one is by sub one this beautiful little bit of UI design here.
Even when you have images that’s fine images are doing their own thing b
如果你有图片 那很好 图片有其作用
ut 60% being kind of like this grayish neutralized color,
30% for the white cards, 10% for the call to action buttons
and there you have it, your 60 30 10 rule.
I hope you enjoyed that video.
If you did make sure that you leave a thumbs up subscribe to the channel,
all that stuff because I make videos like this all the time about UI design,
about graphic design, about web design
so make sure that you stick around for more videos when they come out.
If you have any questions, leave those down in the comments.
I hope you’re having an amazing week using color in a really beautiful and mature way.
We’ll see you in the next one.
How can you use color inside of your mobile UI design projects