Transcript for:
Common Web Design Mistakes to Avoid

[Music] websites nowadays are trying to stand out more and more to do this they push current web design trends out of their comfort zone for better or for worse however it seems by doing this they forget how to follow simple web design in user experience standards that result in websites being annoying or uneffective here are 50 web design mistakes and explanations that you can learn to avoid making the same mistakes yourself grab a pen this shit's going to be fun [Music] stop using sliders they aren't effective and very little people will actually use them and see the content beyond the first slide stop auto playing sliders how exactly does this promote a good user experience why are you trying to make me work by having to click to see the navigation if the navigation can fit on one screen put it on the screen don't add an extra step for the user just to make the website more minimal if you have a contact button call to action at the bottom of your home page do yourself a favor and don't just put the contact form on the page instead of adding an extra step for the user stop center aligning everything particularly don't center text that has more than three lines it ends up becoming annoying to read because the inconsistent starting points for each line stop using justified text alignment the inconsistency between the spacings of each word make it harder to read stop using right alignment for the same reasons why you shouldn't use center alignment splash pages don't make me work an extra step just to get to your website after having just entered your website i shouldn't have to then again enter your website not only that but splash pages hurt seo decrease conversions and waste users time don't have them stop using these slow-ass loading animations it makes it impossible to quickly scan a website for content if anyone isn't in the mood to watch your disney film it very quickly becomes annoying stop hiding the scroll bar ironically this is done to create an experience but at the cost of user experience stop styling the scroll bar the scroll bar is meant to be a consistent feature to navigate websites stop messing around with it i don't care if you have learned a new css pseudo element marquees or anything horizontally scrolling they're annoying to look at in difficult to read stop changing the background color of the website as i scroll it takes away from the content and it's just distracting stop customizing the cursor holy is this still the same site don't force me to click a drop down in the navigation for it appear it should appear on hover stop turning the entire website into a vertical slider by taking over my scrolling scrolling should be consistent from website to website stop trying to take control of it stop using emojis it just looks unprofessional don't mess with web design standards by trying to reinvent the wheel you're not special because you've put your logo on the right instead of the left stop wasting my time with these time consuming opening messages stop wasting my time with these long ass menu animations don't make the hamburger icon button not look like a hamburger icon in attempt to be special make it consistent so people know what it is and what it does stop using vague h1s on the home page this is bad for user understanding and seo can we stop using these typewriter text changing effects it's annoying as hell and it hurts user experience i've seen hundreds of these and i've always skipped over them horizontal submenus a design style no one asked for users expect it to be vertical again don't ignore web design standards in attempt to be special don't make the color of your call to action the same color as everything else on your website you're just losing out on conversions sticky menus that don't have a background color how is this a good thing did you just forget if your menu has sub menus in it it should always have an arrow to indicate that this makes for better user experience and understanding don't have a separate first and last name fields for your forms in small to medium size forms having less fields has shown to increase conversions combine the two fields into one full name field horizontal scrolling websites this is another example of people doing the opposite of web design standards stop trying to be special at the cost of user experience small home pages the home page in most cases is the most important page of your website so it should be informative enough to give the user at least a general idea about who you are and what you do center aligned to text forms they should always be left aligned for better usability having a menu that just has icons in it a new user to a website shouldn't have to think to be able to use a menu the new mailchimp design also does this as well and it's super annoying square buttons people expect buttons to be wide it just doesn't promote good user experience forms without labels this is bad user experience as well if i type anything at all and forget what the placeholder text said i have to delete everything i just did to know what the input field was for hero sections that span the entire height of the screen this creates a false impression that the website doesn't have more content and that you're at the end of the page this is called the illusion of completeness link in the description to read more about it if your design is so unintuitive that it requires you to tell me to scroll then your design has failed go back to the drawing board websites that automatically play sound do i even have to say why don't make me work to see content i shouldn't have to hover over something like this just to see the titles this is more of a graphic design thing but logos that don't have the name of the company in it how am i supposed to know who you are based on an icon you're not pepsi navigation should always be at the top a left menu can sometimes be okay but if you want to make it as easy as possible to use your website it should be at the top vertically align text this is another example of sacrificing ux for ui not having the home link in the navigation not every user knows that the logo is a reliable way to get to the home page you don't see this one often but unloading content with an animation to only have to load it back with more animation stop wasting my time by having me sit through all these animations preloaders for the making of this video i have opened up hundreds of websites on awards.com and a large portion of them had preloaders and a large portion of those sites didn't load at all because preloaders often can't tell when a site is actually done loading or not this is actually a very common problem with them instead of trying to hide how slow your website is how about you stop adding in all this eye candy so you don't need the pre-loaders in the first place home pages that are just slideshows there just isn't enough room to have the amount of information an effective home page requires with this layout and overall this doesn't promote good user experience stop trying to make your website a powerpoint presentation stop interrupting my vertical scrolling for horizontal scrolling it's unpredictable and it usually ends with me over scroll past the normal section after it overlays that aren't opaque enough to be able to clearly read the text in front of it text over background always not putting links in the footer people use them and expect them so put them there over using visual effects it takes away from the content and it adds more load and complexity to your website and lastly design mistake number 50 smooth scrolling so there it is there's 50 web design mistakes if you avoid these mistakes you will create a more effective easier to use and more understood website if i missed any mistakes let me know in the comments so i can make a part two thank you for [Music] watching