Web Design Tutorial – 5 IMPORTANT Tips!

I have built my first website using Wix the power of Wix, and this is what I did take a look easy as peasy. When I first got started grading websites, my designs would look absolutely terrible. It would look like some colored rainbows mixed with different colors and poop brown, color and also fonts from the 90s, but we made the truth. We made the work we build out the things, but I learned a lot from that point in my life and in this episode I’m going to give you a few tips to greatly improve your designs in case you’re, struggling with that part of the process and the Last step is going to be the best saved at the end of this article.

That’s a lie. I’r lying! It’s just for read time. People do this kind of stuff. I thought I’d, give it a try, but I cannot lie it’s hard. I’r an honest man. Let’s give it two claps for honesty: that’s free moving on so number one on the list. The first big issue that a lot of people have is they pick out way too many colors. So, as you can see, you have too many colors. That makes your design look not that good and second of all, color is very important because, besides the actual design, the color, you can also use color to put emphasis on certain things on your page, such as the button or the nav or whatever you want.

The text in here and if you have certain a lot of colors, you don’t know what to look at what’s important on the page, so general rule of thumb as a beginner is either just use, white or black for the background and then use one primary color To put emphasis so to fix this, as you can see, this camera has this orange looking thing here, so we’re going to use that as our primary color and everything else is either going to be black or white.

So, let’s, let’s fix this up, we’re going to take this blue just do a dark grey, maybe like that it doesn’t have to be pure black. We’re going to take this background, we’re going to turn the two white like that and then we’re going to take this button and we’re also going to get that orange color from this click on that. And then we go much better and I’m also going to take this turn it to whites like that now.

This is a super simple example, but take a look already much much better. I’r also going to take this GoPro. If I want to put some emphasis on this, also give this an orange color, that’s going to be fine alright, so we are putting emphasis on the title and on the purchase button. Now, if this is a bit boring, we can add a gradient to this background. So, let’s go here to let’s do radial gradient.

I can put it on the actual product, drag this up and just add, maybe a slight darkness to it. So let’s go here: let’s darken this up! Actually, let’s reverse it. So this is going to be white there and we’re going to darken this part of the image and now working. Why is it not working alright, so this works. Let me just flip this around, like that. Okay, while you do this to me, there we go much improved second tip on the list is let’s say I like this gray, looking thing: okay, that looks okay, but the problem now is that I don’t have enough contrast here on my text, so this black still Looks okay here just because it’s super super dark right! That’s pure black, but this orange color is now looking that.

Well, as you can see, if we look here, it’s kind of bright, it’s not that dark! So take that into consideration when you’re building out a website or a design or anything, is that if you have a darker background in the darker text, you’re not going to have enough contrast and the text is going to be hard to see. And it’s not nice. So, in this case, something like a bright value will work just fine like that, that’s good! So if I do want a bit of gray, I can get away with that, and this not only effects like white and black.

It affects color as well. So I can have a bright color like this, like a reddish color and, as you can see, the black text tool works. But this orange is not looking that nice anymore, so not only darkness and lightness, but also the way color is mixed, which mix with each other also is going to affect this. So if I go to something like a bluish color, as you can see now it’s easier to see rather than closer to that orange color, that’s going to make it way harder to see so keep these two things in mind and besides that you can also use Contrast to put emphasis on something on your like a text so not only colored like this GoPro here.

Theoretically, what I can do is use black here, that’s perfectly fine same as the text, but what I can do now, rather than adding the color to this or to this is I can make this a bit more greyish and, as you can see right now, this Gopro pops out way more just because we have contrast, so you can use color to put emphasis on something and also contrast to put emphasis on something number tree on.

The list is going to be white space white space is extremely important to give your design a bit of room to breathe, because having too much information on your screen is going to be actually way harder for your viewers to read so rather than having as much Information on a screen as possible, what you need to do is clear it up and organize it make the your text smaller just have more white space.

So let’s take this example for here: let’s just clean everything up just have one text here maybe make this even smaller. Just have more space here all right, just like that. These are way too big, they’re too close to each other. Let’s make these smaller have some more white space going on here. Something like that, that’s good! So now we can bring these down a bit they’re, not so close to the big title: they’re.

Okay, let’s also move this here and now take these and kind of move right about there. Okay. Now we can kind of work inside this, because we have these large titles, large pictures and large text. So let’s give these a bit of room as well. Let’s take this image, make this way smaller, like that, put it in the center there. We go. Take this title now again. What we can do is just change the font size to just have that white space.

There we go now. We can drag this up here now. We have enough space with the image and the title, so this is way easier to read and now we can also grab this text here, just like that, let’s actually make it smaller like 18, that’s good! Now! Another problem I have here it’s not only vertical space, but also horizontal space. As you can see, this is way too close to the card here, and it doesn’t look that nice so, let’s also add some horizontal space by dragging this pin just like that.

That’s much much better. Okay drag this up, just like that. Okay, now take a look at what we have. We can also do these a bit. Actually, I just have one text. Let me just add some spaces in here for now, but also space. That was out a bit more drop it in there, and this is what we have okay, so way easier to read way easier to get the information across than something like this number four is going to be symmetry and harmony.

So in this case, take a look. We have just more text in here, so what we have to do is actually expand this card all the way down here. But the problem is this: isn’t that good anymore, because we have cards that are shorter cards that are longer and cards that are just kind of in the middle okay, so symmetry is actually very important, making things look kind of the same. So, even though I have more text in here to make this look a bit better, what we can do is, even though I don’t have more text here.

I can also expand this down just to make it all symmetrical. Just like that now. Another important thing is also when it comes to white space, so even though the cards are okay, now the amount of space between the score and this card is not equal to this card. So here we have less face here. We have more space, so we can grab all three of them and also very important as to distribute horizontal spacing and there we go now.

We have equal spaces in here and what we can also do is add equal spaces between on the right of the page and left at the page. So this still doesn’t look. That good is against because we have more space here unless base here. So we can kind of center this around now these images are a bit stretched. So I apologize about that and let’s bring this back a bit like that, but there we go even though we have more text here.

We made everything symmetrical and nice-looking same thing. We can do with the title here, so let’s take this title and actually Center it like that, so it’s perfectly in the center, rather than being on the side here or like this or like this. Alright, just keep a nice symmetry between everything, and we can also do it down here. So I can make this footer stuff down here to kind of match up where the card starts so give that white space here on the left of the page.

So I can bring this up in here, so it starts at the same level as the card, and I can do the same thing with this. I can just bring it here where the card ends and there we go. We have way much more symmetry than the previous one, and harmony is a way. You kind of navigate your viewers to look at the information that you have on your page. So this is a harder example here. That’s that doesn’t really have any harmony.

It’s hard for me to read this word. I go. I go from here to down here to down here and this one is kind of just laying here and then we have a button up here, randomly laying that’s not on the same line. Things are just kind of put here together. This has harmony this last line. We have these images down here that I can just look from left to right. Alright, so, besides them being nicely and proportionately put on the page it it’s easy to read, it goes from left to right alright.

So this is a bit hard because we have just X laying around without any proper harmony. However, here’s another example: that’s a bit better. We have Tesla here or something here. As you can see, this has way much more harmony. If I read this page from up here to down here, I can do it very simply from left to right, from top to bottom left, right top to bottom top to bottom left to right left to right top to bottom.

So it’s very easy to read as where it comes to this. We just have a bunch of text laying around here. Alright, so that’s also very important. Besides. Symmetry is also have a nice harmony and, last but not least, even though you have great text good. Looking contrast and everything, if you have bad images, ugly, looking images, that’s going to ruin the whole experience, because images are probably one of the most important things on your website now, if you’re a beginner, I would highly recommend either going to pixels calm.

They have great images for you to use very high quality, great looking ones and also on splash ooh. There we go also on splash. Comm is very great. Sorry, I got distracted there, let’s go monetize, no! No, but if you can, if you do have a camera such as this guy, I would highly recommend you using your own pictures, because at the end of the day you are the only one that knows what exactly you are looking for.

So if you have a camera, take your own picture because that’s going to probably fit way better than anything on the stock image websites and even if you end up using a stock image, you can still take that and edit it and make it your own. So don’t just drag it inside your website. Think about it, see how it looks on your page. If it doesn’t maybe change the colors up a bit. Maybe you just want the model so cut out the model and insert it to your page like this, and then you can have way more customization this way, rather than just relying on whatever there is on that image, get key aspects and key things out of the Image and added to your website that way there you go, hope you enjoyed reading this episode and kind of taking a little bit of break from the programming self-adjust, because I’m working on that javascript course and that’s killing my soul.

I don’t, and I want my soul. I want right here so I want to make more of these alright, so that’s coming up in like a month or so, and that’s for exactly one. Don’t quote me on that one and until next time make sure to hit the like smack the ass okay and I’ll, see you at the next one.

Web Design
SEO Service
Google Citation Service
Contact us Today