50 Website Design Mistakes (And Why)

50 web design mistakes and explanations, that you can learn to avoid making the same mistakes yourself.

[WeirdSnakeGal]

I agree with a lot of them but some of those are very partial. So if we follow ALL those rules we end up with the same boring websites everywhere. Design is in constant evolution and it'll only do you a disservice ignoring designs just because you don't like it.

[ajdrag]

You know, I've been designing web pages since the '90s. And I've never been comfortable with all the flashiness of these newer designs. Seemed to take away from what a website is truly meant to do. And I was told I was being old-fashioned and maybe shouldn't even be in the business of web design. But now I know that it wasn't me all along. It wasn't me. IT REALLY WASN'T ME!!! Great video.

[guacamolen]

To put it in a paraphrase from Jacob Nielsen: "No one cares about your splash screen. Users just want to get in, do what they need to, and get out as quickly as possible."
Most of these (if not all) sins against web design just add flair at the cost of user efficiency. Good list, I approve.

[Adam-yfss]

Great video. My views…

2003: make it more animated, more unique, more multimedia.

2023: make it more like Craigslist

[ILoveWordPress]

I agree with all but one of these. #15 is actually a big accessibility "pain point". People got used to dropdowns on hover, but technically it should be on click.
This is one of those things that got adopted even though it's an incorrect pattern.

[Avarn]

As a recent boot camp graduate and looking to build a portfolio website; thank you for these tips. They are really helpful.

[theq]

I agree having less form fields is generally better, though having both first and last names is valuable and probably worth keeping for many

[HeyQuinton]

While I agree with many (if not all), it is the be handled subjectively. If you are making a website that is more fashion over function, then do whatever you want to achieve it. If you want a Henry Ford-esque guide to an effective user experience, this is the list to follow. It’s not sexy, but it works.

[susanherda]

Would love an updated list that takes into account ADA compliance requirements. Several of these reference design choices that don’t meet WCAG 2.1 (2.2 is being finalized soon, too). As designers, it’s our job to make content accessible to all. Thank you for taking steps to move the community forward.

[Asxish]

I love your straight forward explanation, and same for me, these annoys me a lot, where I've to think twice where the button is, what the site really stands for, and literally the pre loading shit, i don't have that much of time to wait for couple of minutes for the site to load it's stuff.
I really liked your explanation, would really love to see more content in the future, till then lemme watch some of your old ones.

You do make good points, but a lot of these seem like they stem from a belief that there's a set 'correct' way to make a website. While there are certainly 'incorrect' ways, some of which you did touch on, there's also shades of gray within all this. I think you demonstrated this bad/good approach best with your point about not using emojis in your design, since it doesn't look professional — maybe, but not everything in life is 'professional', there are brands out there that may benefit from the goofiness of a crying laughing emoji. There are also brands that may benefit from a mostly eyecandy website, since websites aren't always about being a cold conversion funnel, building brand image is not a thing you can really always box with the same old tired 'we're a company that does things for these clients, contact us' layout. Contact buttons aren't always bad, too. You may not care much about leads, in which case a simple button taking the user to their mail client is perfectly fine.

Context matters, and context varies, vastly.

[EternalAwait]

Came across some of your videos while trying to design my own website. I agree with everything you say and can't believe more web designers don't realize the negatives of their designs.

Thanks for the knowledge

[peqghgk]

Really good video, I learned a lot and I am glad that someone has put to words some of my own bugbears. 3:02, I will say one thing though 'Don't mess with web design standards' - The reason we have standards and that they change is because people messed with what considered standard at that time, and they were found to be better. If someone didn't mess with standard when websites first becamse available on touch screen, imagine all the 2004 styles header navbar content footer pages we would have to try to click through on portrait mode

[bx]

Thank you for this. I've been stuck with designing rather than creating content to my site. More power to you

[nhwhn]

Hey, could you make the exact list but with opposite areguments? I think id'd be fun to see the completely different ouput with a different perspective. Great content btw. Thank you as alwyas

[anilsuyal]

Loved watching - stop wasting my time, great session! Thank you so much.

[catchnote]

Yes a Part 2 please. I seriously enjoy learning from your videos. I find them to be the best. Thanks

[sucoder]

Notes of the video:
* Using sliders: They are ineffective and very few people will see the content beyond the first slide.
* Auto-playing sliders: They do not promote a good user experience.
* Making users click to see the navigation: If the navigation can fit on one screen, put it on the screen.
* Center aligning everything: Especially text that has more than three lines, it becomes annoying to read.
* Using justified text alignment: The inconsistency between the spacings of each word makes it harder to read.
* Using right alignment for text: Same reason why you shouldn't use center alignment.
* Splash pages: They make users work extra to get to the website content.
* Slow-loading animations: They make it impossible to quickly scan a website for content.
* Hiding the scroll bar: It creates a bad user experience.
* Styling the scroll bar: The scroll bar is meant to be a consistent feature to navigate websites.
* Horizontally scrolling marquees: They are annoying to look at and difficult to read.
* Changing the background color of the website as you scroll: It takes away from the content and it's distracting.
* Customizing the cursor: It confuses users.
* Forcing users to click a dropdown in the navigation for it to appear: It should appear on hover.
* Turning the entire website into a vertical slider: Scrolling should be consistent from website to website.
* Using emojis: It looks unprofessional.
* Not following web design standards: There's a reason why they exist.
* Wasting time with time-consuming opening messages.
* Wasting time with long menu animations.
* Making the hamburger icon button not look like a hamburger icon.
* Using vague h1s on the home page: It's bad for user understanding and SEO.
* Using typewriter text changing effects: It's annoying and hurts user experience.
* Horizontal submenus: Users expect them to be vertical.
* Making the color of your call to action the same color as everything else on your website.
* Sticky menus that don't have a background color.
* Having separate first and last name fields for forms in small to medium size forms: Combine the two fields into one full name field.
* Horizontal scrolling websites.
* Small home pages: The home page should be informative enough.
* Center aligned text forms: They should always be left aligned for better usability.
* Having a menu that just has icons in it: New users shouldn't have to think to be able to use a menu.
* Square buttons: People expect buttons to be wide.
* Forms without labels.
* Hero sections that span the entire height of the screen: It creates a false impression that the website doesn't have more content.
* 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.
* Websites that automatically play sound.
* Making users hover over something to see the titles.
* Logos that don't have the name of the company in it.
* Navigation should always be at the top.
* Vertically aligning text: This is another example of sacrificing ux for ui.
* Not having the home link in the navigation.
* Unloading content with an animation to only have to load it back with more animation.
* Preloaders for the making of this video.
* Home pages that are just slideshows.
* Interrupting vertical scrolling for horizontal scrolling.
* 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.
* Overusing visual effects.
* Smooth scrolling.

[Kellhound]

"Instead of having to hide how slow your website is...." LMFAO. This is fantastic. I am showing this to my web design class. Thank you!

[TomiOnDesign]

i actually find hover menus annoying. Cause sometimes Im trying to reach something else but it gets in the way. I think so, e of these are fine for portfolio because you are trying to show off what you do and flashy can get the client’s attention