MODULE 3 - Mastering The Divi Builder
Live Q&A
MODULE 4 - Building Our Website

03 The importance of contrast in web design

In this ;video, I’m going to show you how these colors need to be put together in order for them to work for your website. I’ve signed up for a software called Figma. It’s an online tool that you can use it’s more like Photoshop or sketch, but in this video you don’t have to do anything.

This is just me showing you how these colors are meant to work well together. All right. Let’s dive in and let me show you so over here, I have a blank canvas. And as you can see here on the top, it’s I’m signed up for this online tool. So what I’m going to do here is I am going to start with a rectangle and import all my colors onto this canvas.

Okay. I’m just going to make sure I have quite a few of these so I can have all my colors here.

Okay. I’m going to come over here to my color. And I’m going to start choosing all my colors. This is the hex decimal value. I’m gonna copy that. Come back over here. And I’m just going to update this paste that want to the next one. All right. I’ve added all my colors here. Now, as I look at this, I can see I’d really have a lot of dark colors here.

This is really dark, that’s dark, and these two are quite dark as well. So what I’m going to do now is I’m going to tweak this so that I have a bit of, a vibrancy in this color palette. Okay. When I click here, you can see. Then I can play around with these colors here until I get the color that I would like to have in my color palette.

I think I’m going to go with something like that. Now you don’t have to do this in a Figma is I mentioned, you can also do this in your color palette software. So let’s say over here, if you click on the shades, this is where you can go in and choose your color just like that. And as you can see here, these colors are pretty, pretty cool.

Let me copy this. And bring it over here and paste it. Okay. So this is going to be my color palette here. I think I’m pretty happy with this, but let’s see how, how it goes. Okay. So the reason why I’ve laid these out, like this is, I need to make sure that as I design elements on myself, They are going to have the right contrast.

Now contrast is very important in design and this is where a lot of people get you wrong. So it’s important that you take a look at this and see how you can apply your colors in your design. I mentioned that we would like to have some texts, uh on our side. So straight away, I can see here that if I were to have some time.

So when you take a look at our texts here, we can see that it works really well on a white background. So let’s see what happens when we apply a dark background and also use our grace. So what I’m going to do now is I’m going to just use one of these rectangles. So I can see now that these two colors here work really well together for my text.

So this would be, how I will have my side, with my text. So this, this can also be on a white background, so it could work very well in a white background and also on this background. Now let’s see what this looks like when I add other backgrounds. So I’m going to try this now on this background. So let’s go and choose our color.

Now, when I applied this blue onto this text straightaway, you can see that does not work well together because when now people come to our website and they try to read this, it’s going to be very difficult because the contrast is not really there. You really need to have a color, which is. Or when it’s on a dark background and the opposite also applies.

So make sure that you have your contrast, right? In this case, how can we fix this? Well, the answer to that is we need to either use this color right here. I’m going to go in and copy it and then come over here and paste it. I’m going to use that light gray, and now you can see it’s much easier to read.

Now let’s go and do a few more examples. I’m just going to duplicate that. If we’re trying to use this gray here on this background, again, this shouldn’t work and I’m sure you can agree with me when I paste this, background color here for my color palette. Again, we have a problem it’s quite difficult to read.

This wouldn’t work. In a situation where you want to have a lighter background with a really light color, it won’t work. But if you then change this and let’s say, use a color like this, in fact, we might need to try this, to see if this is going to work. So let’s go ahead and try that. So let’s see.

Now, if this is going to work now, not really. And again, you can see here, it’s not really working, so you need to be able to go in and try these colors until you’re happy with how these colors are going to be working well together. So what I’m going to do now is I’m going to choose a color, which is dark.

So I can either go for this dark gray here and let’s see how that looks paste it. And that looks much, much better, so you can see it’s much easier to read. Now let’s also try a few, maybe one more color here and test and see if our contrast is, working. Over here now what I’m going to do is I’m going to change the background and this time let’s use this color here.

Okay, so that’s okay. That could work because we do really have a contrast there. Now let’s see what other color combinations that we can use when we design elements on our website using this color palette. All right. Let’s take a look and see how our contrast also works when you start putting these colors together.

Over here, now we can see that here we have beautiful contrast. And across pretty much, the top over here using our colors that we’ve chosen here on the bottom. We have all our colors in place. The next step now is to apply these colors onto our website as we design it step by step. Remember it is very important that if you have colors, you want to have contrast.

Contrast is very, very important. It makes it easier for visitors on your website to read your message easier. See in the next video.