hello them are going to spend on the Internet 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 gonna be the best saved at the end of this video that’s a lie I’m lying it’s just for watch time people do this kind of stuff I thought I’d give it a try but I cannot lie it’s hard I’m 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 gonna use that as our primary color and everything else is either gonna be black or white so let’s let’s fix this up we’re gonna take this blue just do a dark grey maybe like that it doesn’t have to be pure black we’re gonna take this background we’re gonna turn the two white like that and then we’re gonna take this button and we’re also gonna get that orange color from this click on that and then we go much better and I’m also gonna take this turn it to whites like that now this is a super simple example but take a look already much much better I’m also gonna take this GoPro if I want to put some emphasis on this also give this an orange color that’s gonna 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 gonna be white there and we’re gonna 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 gonna have enough contrast and the text is gonna 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 gonna 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 gonna 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 gonna 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 gonna 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 gonna 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 gonna 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 watching 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