掌握60-30-10配色法则提升您的UI设计技巧

Article Highlights:

• Understanding the 60, 30, 10 rule for color usage in design.
• The importance of text readability and avoiding high contrast between pure black and pure white.
• How to effectively use text alignment for better readability.
• The significance of spacing and maintaining symmetry in design.
• Utilizing the eight point grid system for consistent design scaling.
• The role of visual hierarchy and white space in enhancing user experience.

So first of all, let's talk about color. Let's talk about the 60, 30, 10 rule. Now if you've never heard of this, it basically breaks down the color or colors you've used in your design into three component parts.

60% which would be your dominant color. So this could be things like the background color, it could be a pale gray, it could be all manner of colors, almost black, those kinds of things.

Then you have your complementary color which makes up the 30%. This would make up larger portions. So it could be things like your navigation bar, your footer, those kinds of things.

Finally, you have the 10% which is your accent color.

So let's take a look at a couple of examples and break things down just so you can see how this works with some practical examples of both the color ratio and also using them in designs.

So let's take a look inside Figma, which is what I'm going to use to just highlight things today. This is a good example of a 60, 30, 10 split. You can see 60% is this pale gray, our dominant color. 30% makes up our primary color and 10% makes up our accent color.

Let's take a look at this as another example. Underneath, you can see if we were working with a dark mode, we may choose to have an almost black color for the background and then have these two other colors to call attention to the various different parts of your site.

It's a relatively simple principle and no one's stopping you using shades of those same colors or introducing complementary colors into these different sections. But they still should make up the 63, 10 splits.

So there's a couple of examples of the color breakdown. Let's take a quick look now at some examples of exactly how this works and how we can improve your designs massively.

Here's a great example. This is taken from a site that I've seen. Put a link in the description so you can check this out; it's a great little article about this if you want to read more. You can see on the left-hand side is the starting design. And while fundamentally there's nothing technically wrong with it, it doesn't really look that professional.

If we take a look on the right-hand side where the 60, 30, 10 rule has been used, you can see things really do pull together a lot better. Generally, most of the same elements are inside this design, but things are cleaned up. You can see that in this example, white is the background color, and we've got a pale gray drop shadow to highlight and accent these buttons as opposed to on the left-hand side where this is white and gray which doesn't, like I say, technically look bad, but everything looks a little bit more polished on the right.

The same thing goes then for this large banner section at the top; you can see again utilizing the two key colors, we've got that dominant blue and that highlight or accent green color using a gradient with the text. However, when you simplify things, everything just looks considerably better. Just using that 30% blue, you can see that highlights things.

This is being used again inside the numbers and also the titles as part of the overall sections. Then finally, we have our accent color, this sort of aqua green that is then used to call attention to things like the buttons to play.

You've also got the icons at the bottom which use that to signify exactly which one is active. And also at the top where we've got this selection that's saying this is the active link or tab, things just look considered better.

So that's a basic example of the 60, 30, 10 rule and why you may want to consider using this to improve your UI designs.

Let's talk black and white. Let's talk about when it comes to text, backgrounds and those kinds of things. Now, as always, all the rules can be broken once you understand what the rules actually are.

But breaking them for the sake of breaking them, not necessarily the right way of going about it. Now, when it comes to dealing with text, dealing with reading things, there are a couple of things that you generally tend to want to avoid, especially if you have larger amounts of text.

One of the key things is using a solid or natural pure black background with a totally pure white text on top. Let me just demonstrate what I'm talking about. Here's a good example of three different ways in which you can show text in solid colored backgrounds.

The first one, which is pure black and pure white at first glance looks perfectly fine. If you spend any time sitting there reading content on a web page on a website that has a lot of this high contrast black background with pure white foreground text, it gets quite difficult. I know for me, I really struggle reading text like this for a long time.

Generally, it tends to be better to move away from that pure black and use something that's more of a dark gray or maybe even introduce one of your key accent colors into that. If we take a look at the second example, we've got a paler gray, very, very close to white, which is almost white.

And if we take a look at the background color, you can see this is using basically almost black with a hint of blue. You can see there. If we take a look at the example where it is on the color spectrum.

But what this does is it makes it easier to read. The contrast is still high enough to make it perfectly legible, but not enough to make it distracting or uncomfortable to read. The same kind of thing goes for the next example where I flip this on its head.

We've now got a gray background, which is great if you want to avoid pure white backgrounds. And we're using pretty much the same bluish gray color for the text. Again, you can see there's a high enough contrast there to make it easily distinguishable, but not that high that it makes it uncomfortable to read.

Let me give you a good example of this in a use case. If we take a look at this typical card layout, you can see that I've used that similar bluish gray background color, that almost white text. And we've then got some contrast in accent colors from the 60, 30, 10 rule.

But you can see this looks so much nicer to look at. Let's just duplicate this a second and let's just change that background and that text. So let's just select our background, let's change that to pure black and let's grab our text and just change that to pure white.

Now there's nothing inherently wrong with that, but I think for me the contrast on the left-hand side is a little softer, which means that it's easier to read, especially when there's a lot of content to read. Whereas the one on the right-hand side where it is pure white and pure black makes it just a little bit more harsh.

Like I say, once you understand the rules used sparingly, this can be incredibly powerful. But for a general use case, I would tend to stay away from a solid pure black and a solid pure white on top of that black for too much contrast.

Now let's talk about alignment, specifically text alignment and when and where to use different kinds of alignment. So let's take a look at our card example one more time.

If we look on the left-hand side, we've got a left-aligned text content inside our card, which is traditional to what you see inside books, magazines, and those kinds of things.

Now obviously, if you're coming from a country that uses RTL or right to left, you'd flip this to the right-hand side because that's the natural way that you're used to reading.

However, if we take a look at the example on the right-hand side where I've central aligned the text, it doesn't look quite so comfortable. Not so easy to read; perfectly fine if you want to use central lining when you have a small amount of information, maybe one or two lines along a heading, that works perfectly fine.

However, when you've got more content to read 3, 4, 5 lines plus it does make it a little bit more difficult. And the layout generally doesn't look as consistent as we would like it to.

Now, obviously, if you're dealing with things like poems and things like that, where generally they're going to be central-aligned, throw that ruler to the window.

But for general uses, either stick to the left line for your content or right align if you're in a country that uses RTL typing.

Okay, so let's take a look at spacing and how important that is when it comes to design. How it can draw the attention away from the key factors, your call to action, the content, the things you want people to take notes of on the page.

For this example, we've got a simple kind of card layout, typical to what you'd expect to see in a blog or a kind of news site, those kinds of things. If we take a look at the first example, you can see the horizontal and vertical spacing is identical which means that there's a symmetry to everything, and it just draws your eye into the key things, which is things like the read more button and the actual title of each of the cards.

However, if we take a look at another example where the spacing isn't so consistent, you can see there is a bit of a disconnect between the horizontal and the vertical, and that immediately draws your attention to it. You can see we've got identical spacing when it comes to the vertical.

However, when we look at the horizontal gap, it's around twice the spacing. This just leads to a disconnect and can just kind of cause things to look like they're separate sections when in fact they're actually all part of the same key thing.

If we take a look at another slightly more extreme example, you can see we've got the same problem in reverse now. We have too little gap in between the two different rows, and we've also got a difference in spacing between each of the individual cards.

This again draws your attention to the wrong things. Everything looks too cluttered, too squashed up, too close to each other, therefore just kind of breaks what you're trying to do, which is focus on that call to action.

So make sure that when you're working with these designs that your spacing is consistent and cohesive. This can make the whole design just hang together, considered better and in combination with all the different things we're covering in this UI video, these can help set your designs apart and just take you up another level when you're working with clients or building sites for yourself.

Now, if you're getting value from this video or you'd like me to focus in a little bit more detail on any of the topics covered, let me know in the comment section below, and I'll do my best to create more detailed content for you.

Next up, we have the eight point grid system. This is a topic that I talk quite extensively in the recent micro course or mini course I released on design systems. It's a system that can help you consistently design scale things up with relative ease.

What exactly is it though? Again, let me show you a practical example. If we take a look at the eight point grid system, you can see it basically multiplies eight. So we start off with a spacing of eight going up to 16, 24, 32, 48, and beyond. You can also go down in size so you can go from eight to four because it's basically half of eight.

But the whole point of this is, well, there's actually quite a few different reasons. One of the key reasons is it's very, very easy to implement. And if you start using the eight point grid for your spacing, for your sizing, for your typography, sizing, all those kinds of things, when you want to scale up, you'll know exactly how to scale it.

The second thing is, because if you are working with mobile devices in mind, then if you take a look at Google and Android, the eight point system scales perfectly. If you go for slightly smaller or slightly larger, this can cause problems where you don't get nice crisp text, and the edges don't look fantastic.

It also works incredibly well with the Retina display when it comes to Apple devices. So there are many, many different reasons to use it. But once you kind of get your head into the whole process of using 8 points as the basis for everything, you'll know that it's very easy to scale those things up.

So let me just give you a practical example of how I've used this in the recent card design we took as part of this overall video series. Let's go down, and this is a great example. You can see it's all using that eight point grid system.

So the spacing, for example, there's a 32 pixel space between the image and the top of the title. Then there's a 24 pixel gap between the title and the meta description, 48 pixel gap, then we get to the actual content, 32 pixel gap before we get from the content of the button and so on and so forth. You kind of get where I'm coming from.

So then my spacing horizontally, vertically or the pad in the margins, everything you use using multiples of eight and that is basically the eight point grid system.

Now you may be wondering, well, why do I want to use it? I'm going to link to an article in the description below that goes into more detail than I can. But you'll find that if you start working with this eight point grid system in your mind, you'll very, very quickly get used to it and everything you'll do will be based upon that eight point grid.

Then all your designs will start to look more consistent because that spacing is so easy to scale, and it will look great across all the different kinds of devices that people are using to view your website. That's the eight point grid system in a very, very small nutshell.

Next up, let's talk about visual hierarchy and how important it can be when you actually want to get the user, the visitor to do something. In this example we've got two card designs. One is a good example, one is a pretty poor example. Let's break them down and see what's working and what's not.

So the first one, the one on the left-hand side, is what I would consider a pretty bad example. This is all about grabbing your attention, making you want to find out about this recipe, this meal, whatever it is, and the image is kind of just being broken down into probably about a third or a quarter of the overall card, therefore losing all visual impact.

This is not something you want to do unless of course you want to play the image down in various different examples, which point that would work great in this example though it's not really the right way to go about it.

Next up, if we take a look at the colors that are being used, we can see that we've got the button, a call to action, the title, something you want to entice people, and the meta-information, which is not really that important, all sharing exactly the same color. Therefore there's no real finding way of exactly what you want people to do.

It's a little bit sort of all over the shop. Then if we take a look at the text that's being used to describe this particular meal or recipe, whatever this card is about is in bold with a really strong contrast to the background, therefore making it quite difficult to separate what's important from what's not so important.

So if you take a look at the card on the right-hand side, this is a much better example. You can see the image is a focal point. It's grabbing your attention, it's making you want to look at it. It's using a larger portion of the overall card design over the section underneath.

Then we've got the title, which is bold, which immediately grabs your attention once you've seen the image. The meta information, which is not that important, but it's there is in a slightly lighter font, slightly lighter color, so it's kind of falling back into the background.

Then we've got the actual description of this particular meal, recipe, whatever, which is enough information there, but it's not vying for your attention. And finally, we have the button, the call to action, which is using that complementary accent color we covered in the 60, 30, 10 section of this video.

And as you can see, we're kind of drawing people into the things that we want. Now, being a card design, the button isn't necessarily the most important thing because generally people are used to clicking on the image on a card, the overall card itself or a button.

So either or any of those will work well. So you don't have to worry quite so much. However, hopefully what you can see from this is by taking a little bit of time to make sure that we focus on the things that are needed, deal with that visual hierarchy to make sure people know exactly what to do and we can lead them in the right direction.

That's a much better example of using visual hierarchy to our benefits.

So next up, let's talk about how important white space is in your designs and how you can use this advantage to give you a clean pro look. We're going to be using this GeneratePress demo or test site as an example because I think it's a really solid example of how white space is working.

So let's take a quick look. You can see if we start at the top with the navigation, there's plenty of breathing room around each of the different elements, plenty of space above and below each of the different links.

If you then drop down to the HERO section, you can see we've got plenty of reading space above and below the HERO section, and also plenty of space in between each of the three key elements, as well as plenty of space on the right-hand side to let the watermarked image have enough impact while not being overlapped by text buttons and so on.

If we keep on scrolling down, you can see each of the different sections has plenty of headroom and foot of room just to give you plenty of breathing space. And the same can be said for each of the different key parts of that text block.

You can see we've got the subsection, we've got the title, and the actual text content itself with plenty of breathing room. Now, we're going to come on to in a few moments how important it is to allow your different paragraphs to have line spacing that allows you to breathe.

But that's just something we'll come on to in a moment. But you can see from this design, everything has plenty of breathing space. It allows each of the different elements to have its own unique space and not grab you and just sort of pull you under design.

So use white space to your advantage. There's no kind of rule to this. Just give yourself plenty of breathing space. Too much can be a little bit, well, too much, but you'll get a feel for this, and you'll learn to see what works well, what doesn't.

And there's various different ways in which you can do this. For example, if we come back up, you can see using two slightly opposing colors allows us to have plenty of breathing space and also separate the different sections.

So we're using a sense of contrast there, which, again, is another one of the tips that I want to give you. Use contrast to your advantage. You can see that this contrast allows you to see the various different sections and also the high contrast between the different colors.

We've got this sort of greeny teal kind of color which is really quite impactful. Look how sort of darker background is being used, using these illustrations, that consistency of the color to highlight and accent various different parts of it.

So this contrast is really being used in conjunction with white space to give you a fantastic and easy-on-the-eye design. Next, let's talk about typography.

Now, this is going to contain a couple of the different UI things that I think are important. So first of all, let's take a look at this style guide. This is going to break things down so we can easily see exactly what's being used.

And I would recommend getting into the habit of doing this for your designs because it does make the whole process of going back to seeing what your design was like six months ago, but also to visually see the separation between the typography, the weight spacing, all those things in one simple central location. It's really, really useful.

Okay, so as you can see, this tells us now that all of the titles, the H1 through H4 in this example are all using the font typeface Barlow and they're all using the weight of 600. If we come down to the body text, this is also used in Barlow, but this is using a lighter weight version of it. This is using the weight of 400.

And again, if we click on this, you can see Barlow 400. So we can very easily see the hierarchy that's being used here and how important it is. And you can see how this has a visual hierarchy, a visual weight given to it based upon the typography, the weight, those kinds of things.

And again, you can see all these things are working with the contrast. All these things work in conjunction with each other. And hopefully this will be one of the things you take away from this video is how important it is to have all these different things playing strengths of each other to give you a unified design that just helps the user do exactly what you need them to do.

So now that we've covered setting our fonts up, choosing the typography, setting the weights and those kinds of things, we need to talk about having consistency, consistency of fonts, typography that are being used.

So first of all, let's just make sure that we limit ourselves to the number of fonts that we use. I would generally recommend only using two fonts in a design so you don't get people confused with all different fonts being used across the entire site.

It just makes things look terrible. Try to restrict yourself to two, three at a push if you need to. But two, because you can use different weights, you can use italic, those kinds of things to give you separation, but a consistency of the typography that's being used.

Okay, so let's take a look at this example page. This is a great example of how the different typography is being used to call attention to the various different parts of it. If we take a look at the top, we've got this recent development projects, let's open up what the font, and you can see this is using Barlow 600. Again, this is set up so we know this is the most important thing on the page.

If we come down to the second section, there's our typography for our body content. And again, that's using Barlow but 400 set to a font size of 18 pixels in this example. So we know that if we come down to this body text in the second section, it's using 18 pixels Barlow of 400.

Close that down, come to the next section, click on that. Again, it's all using the same consistent typography. If we go to the subheading, you can see this is our 36 font pixel size. Come to this section 36. So this is your heading 2, 3, so on.

Take a semantic side of things out of the way, but from a visual point of view, you also want to make sure you do this. So you can see this page has that consistency of typography weight and also using things in the same way.

So all our body text is the same, the line spacing is the same, our subheadings, which maybe H3 are all exactly the same. Again, you kind of get where I'm coming from with this. It's that consistency aspect.

Next up, let's talk about pattern consistency. Our brains are kind of configured or hardwired to find patterns because they're comforting, the things that we used to.

And again, you don't want to detract from what you're doing when it comes to your website. So if we take a look at this example one more time, you can see we have that pattern repetition. If we take a look at our custom API development, the images on the left-hand side using a consistent style, our typography is the same, our line spacing is the same, the layouts where we've got this REST API react and so on the button position.

Then if we take a look underneath, it's flipped but the recognition is still there, that pattern is still similar. Go down to the third one and again we flip it back over to the first one so the pattern is there.

And you can use this to your advantage in many different use cases. So don't underestimate how useful pattern repetition can be inside your designs. Again, like I say, if you take a look at this as an example, this is a really good eye-catching way of using that pattern repetition.

We break it at the top so people can grab onto that to read that. And then when they go on to the rest of the article, content, whatever it is, they feel comfortable in the knowledge that things are going to be where they want them to be.

Again, you can break these rules in the right circumstances and it can have a massive effect. However, generally knowing these rules, kind of getting comfortable with them, you can use them to your benefit with a little time and effort and learning how to use them.

Finally, let's talk about line height. Now this is something that can again have a big impact upon how good or bad your design layouts actually look. And using some simple maths we can really make sure that everything looks good.

Now the WCAG recommends a line height of 1.5 times your font. So for example, if we take a look at this right example, if we check the font out, you can see the typography is set to 18 pixels.

However, the line height is set to 21, which doesn't look very good. It all looks just a little bit too squashed up. However, on the left-hand side, if we open that up, you can see the line height in there is 27, which is 1.5 times the 18.

So if you kind of use this as a base starting point, you can make sure that your typography is as easy to see and as easy to read as possible. If you're using Ms or rems, the whole process is even easier because you can just use things to multiply based upon your base font size, which is generally going to be 16 pixels.

So using that you can easily work out exactly what needs to be set up for your line height and then you can go ahead, set that up for your typography, set that up in your style sheet and then you're pretty much set to go. But you can see how much difference it actually makes having the line height set correctly and how easy the text is to read.

Now the opposite of this is having too much. So if we try to make this a little bit too big. So let's just say with a like 36 for example, you can see everything looks but the button, everything looks really weird and too spaced out and doesn't make it very easy to read.

So just by taking some of these simple rules, you can really improve what you're doing with your typography. And that's 13 different ways in which you can improve your UI designs. Hopefully, you've taken something from this and it will help you create much more consistent, much more professional designs moving forward.

Now, if you found this useful and you want to learn even more about UI designs, check out the link you can see in the description below and also at the end of this video. As always, all the applicable links are in the description.

My name is Paul C, this is W.P. Tatson. Until next time, take care.