5 Most Common Web Design Mistakes to Avoid

on today's episode I'm gonna show you mistake that you're gonna say in 2020 do people still make these web design mistakes oh yeah they do and I'm gonna teach you how to avoid them stay tuned [Music] hey everybody what is up my name is Ron sago welcome back to phlox if you're new here welcome to our channel we're talking about everything design and web design today I'm going to show you some pretty ugly website and we're gonna talk about why they are so bad and how you can avoid doing these critical mistakes when you're designing websites for your clients or yourself let's dive into this this website for Delta Dental Arizona has lots of mistake what we're gonna talk about the first one which you can't even see by looking at this and this is that this website on mobile let me open it up on my mobile here I don't know if you can see this so let's do this right here it looks the same on mobile right so if I'll jump here into the mobile view nothing changes which is just you know you can't literally read anything here it's just so small right this is completely unusable a website that doesn't have a mobile responsive view in 2020 this is completely unacceptable today every even if you're using a template most templates have kind of a responsive you know web design especially if you're building on tools like web flow that has immediately kind of a responsive to see how your website would look like on mobile this is completely unacceptable unusable probably over half the traffic of your website is gonna be coming from mobile so you have to think more about mobile responsive and if not even mobile first meaning assume that people are gonna log in from their mobile so design make sure that the website looks fantastic on mobile before you even care about the desktop people are on the road googling finding your website logging in have to make sure that it looks great on mobile so no mobile responsive or no mobile view completely unacceptable now the second mistake that I want to talk about that you can see here is that there is no call to action here no call to action is a clear kind of a or something that says here's what you need to do right now click here by this submit this what do you want me to do here on this website and when I'm looking at this Delta Dental Arizona here there's obviously lots of things going on here but it's not clear to me what am I supposed to do they're saying here I'm a member dentist employer broker so I am I expected to click here what will happen if I click this I don't even know underneath is there's new del new - Delta Dental enroll now so is this the call to action I don't even know here we have register or signing there's so many things going on here that I don't really know there's no clear call to action which just confuses me which means that I'm probably going to leave the website without taking any action at all so critical mistake number two no call to action this is something that you should definitely definitely avoid make sure that it's very very clear when people log into your website who you are what you do and what do you want them to do next so very clear call to action month might be a text might be a button might be a form something but help people clearly understand what they need to do I want to move into the next website which this one even though it has you know a call to action right contact us now and there's a open forum here this website is is suffering from a critical mistake number what number are we here I think it's number three which is there's just too much going on here they just couldn't make the the difficult mistakes of focus making the decision on what is really important what do we want people to know and do when they're coming into our website so there's just so much things going on here first we have this Kovan notice here jumping at us with red then we have a big logo which has so much going on even just in Loe itself where we have a very big navigation we have the contact as we have all the contact us details here we have the open form here we have this free consultation then our team that all these things going on here there's really no hierarchy now Harry hierarchy means that there is very clear look here first look here next and here first guiding the user through the process of visiting the website here everything just jumps at you everything is the most important thing on the website and it's just overwhelming so this is critical mistake number three trying to have too much going on you need to have very very clear definition of what you want people to achieve here focus on one message and then you know a website people scroll through the website people have different pages on the website so you can convey a lot of different things and a lot of different messages it's just not all at once so prioritize and decides what is important message number one and then number two and then number street people scroll down the page and we'll learn more as they scroll but if you try to convey all the messages add one once they've logged in it's gonna be just too overwhelming and people are going to leave your website now rolling into the next the next mistake I want to talk a little bit about navigation and here we have a navigation that is a little bit on the side of too much navigation now you have to remember there's here there's one two three four five six seven buttons and then we have the search and then on top of everything else that's going on you need to remember that people can't hold that much information in their head I think there's the the mental thing is you can hold maybe six or seven items in your memory short-term memory for a while so this is kind of on the limit but then you have to remember this is just this is a lot this is overwhelming and I think we just on a previous video we showed stripe website which stripe and I'm pretty sure it's a ten times or a hundred times bigger company than these lawyer company and even their little check this out this website is you check out how many pages they have here and then they were still able to minimize everything that's going on on this website too for thinks here and they've kind of separated this so this is clearly just four buttons so I think they could have done a better job you know minimizing everything that's going on here too overwhelm and so the critical mistake number four is when it comes to navigation there's two mistakes this is a little bit of a too much navigation the other mistake which is often done and is critical just the same is hiding your navigation and here's the the complete opposite so here on this certified accountant Janus website we just have this hamburger menu so if we click this we can see that there's a lot of navigation going on here but they've just completely hidden it maybe they wanted to not overwhelm you with so much information which is a good good intent but then again I'm looking here I just arrived on this website I don't even know what's in here I don't even know where can i navigate from here so this is a very critical mistake number four hiding your navigation if I don't know what's available what do you do or what can I see here on the website that kind of reduces the chances of me continuing somewhere else on the website so that is critical mistake number four never completely hide your navigation now this is sometimes a solution that's used in mobile this hamburger menu because we're very limited on mobile when it comes to navigation even there if you can just bring in one two maybe three items on mobile that's preferable to hiding everything under this navigation but sometimes it's more acceptable to hide it on mobile but on desktop there's just no reason to hide your navigation the last mistake that I want to talk about which is I have a more of a graphic design kind of mistake in web design is just bad contrast like very low contrast see what's going on here they've put this image and on top of the image they're putting white text now on this side of the image the image is pretty you know dark but here it's pretty light and then so we have a light text on the light background which means it's just very difficult to see what's going on here on top of that this is a very busy image here in the background there's a lot going on and when you put text on that it's very very hard to read the text so putting kind of an overlaying text on top of a busy image with without enough sufficient contrast that is a very very common design mistake web design mistake and the way to solve this is one ad very big contrast so kind of overlay this with color that you just slightly see the image in the background or just pick an image which is not very busy so if this image had a very like plain background or the desk or something where there's not too much going on under the text that would make this much much easier to read but the way that it's structured right now it's suffering from both you know lack of contrast so why don't light and also white on you know text on busy we just make this very very hard to read and not a great experience obviously if I can't read the text I'm not gonna stay here to understand what's going on so those were kind of like five key mistakes that so many people are doing still right now in 2020 if you want to learn how to avoid them we have a playlist I'll link it here or below with a free intro course to web design will recover a lot of these things and will help you avoid this mistakes so hope you see you there on the next video and see you next time

Channel: Flux

Views: 25,510

Rating: 4.949367 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: uIoatHd7GW4

Length: 10min 10sec (610 seconds)

Published: Wed Jul 15 2020