5 Common Beginner Web Design Mistakes To Avoid

on today's episode i'm going to cover some very very basic and very popular design mistakes that i want to help you avoid so stay tuned [Music] what is up designer friends my name is ron sego welcome back to flux as you may or may not know we sometimes challenge you the audience to practice your web design skills so that you can become a better designer now right now we've done a challenge called 30 days of web design and we've challenged people to design heroes of websites and post them as a practice and i've been watching them and there's some really really fantastic work that you've been doing however i do see some common patterns in mistakes that you are doing and i want to highlight i want to cover some of the works that i've been seeing for the last week and give you some pointers as to how you can avoid these mistakes and improve your web design so let's dive right into it so here's a common mistake and this is a common mistake that i see probably because people are doing these websites just as a mock-up and they're not really designing the full page and the the mistake is this the navigation that you have here on the website is actually huge if you look at that the the size of the navigation links is almost at the size of the logo so just imagine like even if you look at the width you know of the screen this login is probably like 10 of the width that would mean that we have a login button let's say in the in the width of this huge instagram logo here that is just way way way too big so whenever you're designing whether you're doing just a mock-up for practice or you're doing like a real web design you want to test out your design in a full screen in your browser put it on full screen and then see what the sizes look like because things that look like it's okay when you're doing a mock-up or playing with your design software when you put them in an actual browser in a full full width of an actual browser that would look actually huge to you also check out how much bigger this is than the actual paragraph text so it's just don't don't make your navigation way too big this is a very common mistake and uh yeah you want to try and avoid that the next thing is you know i'm looking at this web design which is rather pretty then and i i know what they were going for they were going for something very very minimalistic and you know minimalism is super trendy it's pretty cool that being said you know when you're taking minimalism over the edge it becomes kind of like too much and i'm looking at this and i don't even know what's going on here right it's just says destinations as a logo and then find your happy place as a button but i don't know where i am what are they doing here do they sell you know is this a zen meditation is this you know holidays is this hotel like i don't even know what this thing is about so you have to give context it was actually albert einstein who said things should be as simple as possible but not simpler and this is example where things have become too minimalistic too simple and i've actually lost context so this is again this is too much don't go over the edge minimalism is cool but you still want to give context into what this website is why we should check it out and so forth the next example that i want to show you is very very common in terms of the problem here is that there's just too many things going on and the problem is not that there's too many things going on there's too many things who want to be to grab my attention and to be the first priority now we talk about hierarchy here all the time because as i've said this is a super super common mistake the idea with hierarchy is that you've made you make a proper decision about what is the priority number one only one thing can be number one only one thing can be number two only the you know one thing can be number three and then you have all the rest if there's too many things trying to be number one i'm just lost here and everything grabs my attention and look there's a huge red find a pizza house here there's a huge actual pizza almost at the same size and you know color as this thing and then we have this huge pizza here and then we have this red pizza here everything is trying to grab my attention you want to be very ruthless in terms of your hierarchy just choose one thing as number one and number one should be clearly above number two and number three so you want to be very very clear about these things now here's another typical mistake and the the mistake here is that it really lacks contrast between the background images and the text on top of it really you can't really read what's going on here because you need contrast now there's multiple ways to do this ideally you would put an image you know where the color of the background really is highly contrasted with the text and there's you know a very clear area where you can place the text and there's not too many details behind it here in this case we have four like four different images all of them are very very busy some of them are already almost white to themselves so it really lacks contrast if you if you're in that situation if you have no control over you know the image or the details in the background you want to put some color overlay or something like this just to create a fake you know darken the image just so there's contrast between it and the white text but this is very very common you want to make sure that you avoid that by adding contrast next thing that i want to show is this one this one for example you can see that it has a busy background but because they've put a dark overlay on top of it there is contrast but here we have a different you know problem which is kind of like alignment i am not sure like what what is going on here in terms of alignment we have these objects which are centered aligned relative to one another but then they are also left aligned in the context of the whole layout and then we have these things which are you know aligned to the right and this one is kind of like bottom aligned to all of these things and so we don't have a consistent coherent way to consume this information usually you know people read from the top left and then they read kind of in an f pattern they would read left to right go to the next line all right and so you want to guide their you know their attention and here it's just like i don't know if i should read on the left i don't know if i should jump to the right there's just like no balance and no alignment here so you want to make some good decisions about the alignment and be consistent with it this is another example of this same thing right where you have the title here and then you have another image to the bottom and then some text here and then some text here and none of them is kind of like aligned to one another and also i would say that like from a visual balance perspective you know there is this image is very very big it's very very prominent you know all the details are there so it grabs my attention but it's pulling us to the left bottom corner while we do have things floating around in other directions but i i don't feel like this composition is very well balanced again it's kind of pushing me to the bottom left when there's other misaligned elements going around here um so again alignment a little bit of balance would help i'm not saying that it's not okay to overlay things on top of one another but it has to be in context and we have to think about again the reading experience how do people come to this website and uh and read it the last example that i want to show is this one which is actually i think here we have like a good layout and good you know look at the navigation and compared to what we said before this is really good the only thing here is that in terms of colors the colors here are very very prominent right the the both these uh this you know dark purple and the and the dark gray and because they are grabbing our our attention and they're actually very similar to the colors here on the car right dark and this you know dark purplish it's actually grabbing almost as much attention as the car and so again remember i was talking about hierarchies we have again conflicting hierarchies because it seems like the car wants to be number one but also these actually decorative elements right what's going on in the background is decoration and it's almost as prominent as the car itself and so again when there's competition it's very hard to understand where to focus and i think it's very clear in a car website you want to first focus on the car that is kind of the main product child make the main thing that you're selling here so i would really back down back down everything that's going down in the background so that it's not taking up so much attention so really either decrease you know the opacity or just a different color palette the the you know the one that we have here like these lightly light letters that is cool and these very small dots and stuff like that that is okay because again there is they are very low in terms of hierarchy they are not grabbing too much attention but the dark rays and the dark purples are way way way taking too much attention and then we're again losing the hierarchy all right so to sum up everything that we've been talking about in here you want to make sure that you're very clear and ruthless in terms of hierarchies make sure that the number one priority is the focus everything else is kind of backing back down you want to make sure that you're always testing out your designs in the browser in the real size so you can really see if things are not too big or too small and lastly while you want to keep things as simple as possible you don't want to make them too simple so that we're actually losing contacts and not really sure where we are well if you've enjoyed this tips make sure that you're subscribed here make sure you like this video so that youtube knows to bring you more of the awesome content that we're preparing for you and we'll see you on the next video bye

Channel: Flux

Views: 25,831

Rating: 4.9608541 out of 5

Keywords: become a graphic designer 2020, freelance web designer, graphic designer job, ran segall, web design, web design business 2020, web design freelance, web design freelancer, web designer career, web design 2020, flux academy

Id: UChVXNZ1enU

Length: 10min 52sec (652 seconds)

Published: Mon Mar 15 2021