馃攳
60-30-10 Color Rule - YouTube
Channel: Jesse Showalter
[0]
how can you use color inside of your
[2]
mobile ui design projects that come out
[4]
looking really mature and really
[6]
seamless and really well thought out and
[9]
not obnoxious and loud and really the
[12]
worst thing that it could be is
[14]
distracting well you might want to use a
[16]
little rule or guideline called the 60
[17]
30 10 rule which is going to help you to
[19]
understand how to use color how to
[21]
implement color and when to break that
[23]
rule we're going to talk all about that
[25]
coming up next
[27]
[Music]
[30]
all right before we get too far into the
[31]
60 30 10 rule make sure you like and
[33]
subscribe to this channel hit that
[35]
little bell notification icon so you
[36]
know when other videos like this one
[38]
come out let's jump over to figma so we
[40]
can talk a little bit about the 60 30 10
[43]
rule i have a an image that i pulled
[46]
from a great blog post that i'll leave a
[47]
link in the description by designer
[49]
who's talking about the 60 30 10 rule
[51]
and she has a really great contrast and
[53]
comparison a before and after i thought
[55]
it'd be a great use case or case study
[57]
for us but i've taken that initial ui
[60]
design that she shows in her post and
[63]
it's man it looks like a yard sale it is
[65]
really immature the usage of color is
[67]
just distracting it's overbearing i
[70]
don't know where i'm supposed to look or
[71]
where i'm supposed to go let's make a
[73]
little bit of sense with this in our 60
[74]
30 10 rule i have three blocks of color
[76]
up here and each rectangle is a thousand
[78]
pixels wide which represents our 100
[81]
percent of color usage in our 60 30 10
[85]
rule we want to make sure that we're
[86]
using
[87]
60
[88]
of our neutral or our base color it's
[90]
gonna be a neutral color could be a
[91]
creamy color a white color if you're
[93]
doing a dark interface it's gonna be
[94]
some sort of dark color now later on
[96]
we'll talk about how you can flip this
[97]
around
[98]
and do really bright interfaces and use
[101]
60 of a brighter color but for now let's
[103]
stick with the more neutralized version
[106]
60 is going to be this color so let's
[108]
just take this really quickly and type
[110]
600 pixels that represents our 60
[113]
then you're gonna have some sort of
[114]
primary color right this might be a
[116]
brand color this primary color is
[118]
important but it's not going to be as
[120]
important as our call to action color
[122]
our secondary color this one we want to
[124]
be 30 so let's do 300 here and we'll
[127]
just pop this up into place and then you
[129]
guessed it our call to action it should
[131]
be used sparingly our secondary color
[133]
this is the thing that says click me
[135]
look at me i'm active do something with
[137]
me we want that to only be 10 so let's
[140]
take it down to 100 and now we have a
[142]
color palette that we can use for 60 30
[146]
and 10. and you can see this 60 30 10 is
[149]
not well represented in this version of
[152]
the design but i would say it is much
[154]
more represented in this next this
[157]
iterated updated version of her design
[160]
where she's now
[161]
she's really like done away with a lot
[163]
of the excess use of color she's
[165]
stripped it down she's kind of
[167]
neutralized thing now yes there's some
[168]
other fixes here some copy fixes some
[171]
iconography fixes but even if you kept
[173]
all the other little mistakes in this
[175]
previous design the color is just heads
[178]
and shoulders heads and tails whatever
[180]
you want to say a much better version of
[182]
color implementation here much more
[184]
neutralized here right our primary
[187]
colors being used for important areas
[189]
and our call to action color is only in
[191]
very important areas click me do
[194]
something with me pay attention to me
[196]
this is for you user these call to
[197]
action areas and so that's the 60 30 10
[200]
rule let's really quickly take a look at
[202]
some other implementations of the 60 30
[204]
10 but keep in mind it's just a
[206]
guideline i'm going to show you some
[208]
great kind of uses of 60 30 10 but
[211]
they're breaking it a little bit and
[212]
that's okay with me it should be okay
[215]
with you as well i pulled some figma
[217]
community files in here now you might
[219]
say
[220]
that this
[221]
neutral color is whatever this kind of
[223]
like grayish color is that works oh it
[225]
looks kind of like white but it's not
[226]
really but maybe it is white that's fine
[228]
and then you might say that your
[230]
secondary color right and they're
[233]
breaking it a little bit here is maybe
[235]
kind of like this bluish color and then
[237]
your excuse me your primary and then
[239]
your call to action color is definitely
[242]
this kind of purpley color but that's
[243]
still kind of 60 30 10. they're throwing
[246]
some fun gradients in the top and
[248]
playing with it but i'd say this is more
[249]
of a two color design and they're just
[251]
kind of utilizing some hues of that
[253]
color let's do this one over here by mo
[255]
heat designs we got a really similar
[257]
thing happening we got white right and
[258]
then you're going to see throughout over
[261]
like kind of a
[262]
a span of multiple screens that maybe
[265]
our primary color is kind of this gray
[267]
but that call to action color is really
[269]
this kind of warm kind of burnt orange
[272]
color we can see a really beautiful
[274]
color palette so it's just a good
[276]
usage of the rule in ui design let's
[278]
look at a couple more examples online
[280]
here's some great examples on dribble
[282]
this one by gulen razoo this is an
[285]
example of kind of the reverse of it
[287]
where your bright color is 60
[290]
right and then you can see we have 30
[292]
percent is a lighter hue but look still
[295]
10
[296]
on the actionable colors we're still
[298]
doing the 60 30 10 we're just using
[300]
color instead of a neutral that's okay
[302]
i'm down with that here's another one by
[304]
the same designer he's just kind of like
[306]
flipped it to a dark interface look same
[309]
kind of like guidelines even in a dark
[311]
interface 60 is going to be this real
[313]
dark color 30 is going to be these
[316]
lighter colors he's bringing some
[317]
gradients into him that's fine with me
[319]
but only 10
[321]
is being used for that accent color
[323]
let's do another one by euro art 93
[326]
again we zoom in we see 60
[329]
right 30
[331]
10
[332]
and last one just to drive the idea home
[335]
one more time this one is by sub 1.
[338]
this beautiful little bit of ui design
[340]
here even when you have images that's
[341]
fine images are doing their own thing
[344]
but 60 being kind of like this grayish
[346]
neutralized color 30 for the white cards
[349]
10
[350]
for the call to action buttons and there
[352]
you have it your 60 30 10 rule i hope
[355]
you enjoyed that video if you did make
[357]
sure you leave a thumbs up subscribe to
[359]
the channel all that stuff because i
[360]
make videos like this all the time about
[362]
ui design about graphic design about web
[365]
design so make sure that you stick
[366]
around for more videos when they come
[368]
out if you have any questions leave
[369]
those down in the comments i hope you're
[371]
having an amazing week using color in a
[374]
really beautiful and mature way we'll
[375]
see you in the next one
Most Recent Videos:
You can go back to the homepage right here: Homepage