Bad Websites: 12 Website Elements to Avoid (With Examples)

The internet is packed full of websites. Many of them are great! A lot of them are good. Some of them are functional but mediocre. And a lot of them are downright bad.

Let’s investigate the most common elements that make a website bad and why you want to avoid them.

1: Pacific North X-Ray

For those of you who are old enough to remember the early days of the internet, what does this site remind you of? Something Geocities-adjacent, right? This is a legitimate business and a legitimate website! But today, it looks like a completely untrustworthy spam site or a parody of old web design because it was initially created in 1997 and – according to the Wayback Machine – hasn’t changed significantly since.

Anything that doesn’t change in 25+ years is going to be dated and fall behind the times, and websites are among the most rapidly-changing elements of our modern culture. Web standards evolve rapidly, and this site is as far behind the times as it’s possible to get. Where do you even start?

Just at first glance:

• The images are low-resolution and artifact-covered from compression and poor transparency.
• The background is busy and disruptive without adding anything.
• The aesthetics are dated.
• Product images are inconsistent.

If there’s one good thing you can say about it, it’s that the site is very fast loading because it was designed to load over dial-up connections and hasn’t added to the load since. It doesn’t have any scripts or ads, either. You absolutely wouldn’t trust it with an online ordering form – it’s not even using SSL security – but they don’t have an online ordering system, just a phone number to call, a fax to send, or an email address to message.

2: Smiley the Hip Hop Clown

This one almost feels bad to include on this list, like it’s punching down at someone who doesn’t deserve it. But this is their business website, so it will be judged as a business website. This is a clown performer’s website with packages and booking information.

Apart from the very busy design, with clashing colors and poor contrast, you have:

• No navigation at the top; instead, it’s an ad for a free web host.
• The bulk of the page is taken up by an image that is a clickable link to… the image.
• Very little content (so it has almost nothing in terms of SEO.)

It loads quickly, but that’s about it. Now, this clearly isn’t a professionally-made business site for an entrepreneur, it’s a quick project made by a small-time hobbyist as a glorified business card, and that’s fine. It’s just a good example of a lot of common web design practices not being followed.

3: Berkshire Hathaway

You might expect Warren Buffett’s massively profitable holding company to have an impressive website, and you’d be right, in the wrong sort of way. The website is impressive, alright; impressive in that it has somehow withstood the test of time as an artifact of uselessness.

On the plus side, it has links to useful information like their SEC filings, Buffett’s letters to his shareholders, and various corporate statements.

On the other hand, it looks like something someone slapped together in an evening using basic HTML, not the kind of website a massive company would operate. If you saw this, you might think it was a lame attempt at a phishing site, except it doesn’t request user information anywhere. It just doesn’t look or feel real and official. Plus, what’s up with that Geico advertisement? Sure, Berkshire Hathaway owns Geico these days, but why is it the only company they own that gets an ad on their homepage?

4: Yale University School of Art

What do you get when you prioritize aesthetics and form over function? This website. Yale obviously lets their students design the website, and it changes every so often as the collaborative team that designs it makes changes to it. There’s just one consistent throughline, which is that it sucks.

As of the time of this writing, the bulk of the site is taken up by a rapidly flashing multicolored background wishing you a happy holiday and triggering epilepsy. Every subpage has different backgrounds and elements but the same general left-justified, text-with-background-colored layout. Yale might be a prestigious university with a great art school, but they definitely don’t teach web design.

5: Rock Auto

Rock Auto is a national, well-regarded retailer of auto parts. If you DIY repairs on your vehicle, you can get anything you could possibly need here, from tiny electrical parts to chunks of frame and everything in between.

Check out that navigation! This is less of a website and more of a part-picking piece of software that happens to be on the web, like a proto-SaaS platform. You need to select from various options, drilling down from make to year to model to part or search for part numbers. The whole thing feels vaguely untrustworthy and certainly isn’t designed with modern needs in mind.

6: Paradise Drinking Water

This is a company providing bottled drinking water to Southern California. It’s also a great example of a website that almost works but just doesn’t quite make it.

At first glance, the design is fine. It has a top bar navigation structure, it has plenty of content, and it has images that represent the site. It has some graphical flourishes that are maybe unnecessary, but that’s fine.

Then you look a little closer and try to use it and see how bad it actually is:

• Images are artifact-covered and low resolution, with text that is decidedly difficult to read.
• There’s a slide-in notice for Covid updates, overlapping the content, and you can’t collapse or remove it.
• The font sizes are pretty small and can be hard to read on a large modern screen.

This site could be excellent if they refined it a little more. As it is, it has the structure and form of a good site, but like an insect mimicking something dangerous, it’s just not quite right on closer inspection.

7: Toronto Cupcake

This is a cupcake-specific bakery in Toronto, and there’s nothing wrong with that. It’s also a very interesting example of someone who has the right idea but doesn’t quite implement it properly.

See, on a PC, this website feels empty, collapsed, and small. There’s not much content, navigation is hidden and scrunched to the side when you open it, and even things like the logo are very small. But then you realize…

…this is a mobile site.

Or, it’s close to a mobile site. This site looks and feels a lot better on a phone (and it’s responsive, so points to them for that!), but it’s still not quite there. The elements are a little too small and don’t quite have the right flow for a mobile design. But the images look better on a phone, and it’s easier to navigate.

Click around a bit and see if you notice something. See how the pages have a lot of white space at the bottom of them? There’s actually text there. It’s unclear whether this is content that wasn’t meant to be there but somehow got injected into the footer or if they’re trying to do some weird Google SEO scam by making nearly-invisible text, but they should stop. That’s enough to warrant a Google penalty, anyway.

8: University of Advancing Technology

This is, ostensibly, a university dedicated to the cutting edge of technology and its advancement, a dream for technophiles everywhere.

In reality, who knows about the school, but the website is borderline unusable. It violates every common website convention. The navigation is on the side, with a button to expand it on the bottom. The main content of the homepage scrolls, but it scrolls horizontally, so you can’t actually move it with the scroll wheel on a mouse. Worse, they even know this isn’t usable, so most of their subpages are traditionally vertical.

It’s basically a case study on how not to design your website navigation.

9: eBay

No, major website giants are not exempt from bad web design; they just can get away with it because they don’t have to care. The eBay website – and, more specifically, individual item pages – are pretty poorly designed.

In part, this is because eBay gives individual sellers a lot of flexibility to add media and layouts to their listings, which results in a lot of amateur web design practices with basic tables and font usage. In another part, it’s because eBay tries to slam in as much information up-front as possible, so the design is impossibly cluttered, and you have to ignore 80% of it to find what you’re looking for. Everything serves a function, but good luck finding the specific information you want at a glance!

10: Arngren

Back in the early days of the internet, people weren’t really sure how it would be used, and many tried to mimic existing forms of media. One major modern example is craigslist, which took the idea of a classifieds listing and refined it with categories that lead to titles which lead to listings. They’ve stood the test of time as something functional, though not beautiful.

On the opposite end of the spectrum, you have Arngren. This Norwegian site tried the same thing, with online classified ads, except in a much more newspaper-like format. So, where do you even start?

Seriously, where do you start? Putting the language barrier aside, it’s just a mishmash of images and item listings, with pricing slammed wherever it can go. Plus, it doesn’t all fit on one screen. It scrolls vertically and also horizontally for maximum inability to find anything you’re looking for.

11: Goodreads

Probably one of the biggest social networks specifically for book nerds, Goodreads is an incredibly important site for authors looking for reviews and for friends to share their reading lists with one another. It’s also kind of a mess. It has editorial content, user content, book-specific content, reviews, recommendations, lists, searches, and a whole lot more, and it’s all just kind of there. It’s small, it’s cluttered, and nothing takes priority enough to give you an indication of what you should be doing at any given time.

Modern web design is very minimalist, and while there’s much to be discussed about that, Goodreads is a good example of how a cluttered design just seems off-putting to modern sensibilities. Will the pendulum swing back around in the future? Maybe, maybe not; who knows?

12: Bank of America

BofA is kind of representative of most banks and financial institutions here since they all have similar websites. They’re just so cluttered and heavy, laden with too many calls to action, too many options, and too little guidance.

If they’re your bank, you probably have figured out a path to get where you need to go at any given time, but it’s still a mess, and heaven help you if you need to find your way to some new feature.

Your Bad Web Design Examples Here

This is, of course, just scratching the surface of bad web design extant on the internet. There are so many more wonders to see, from cluttered messes to minimalist design that goes so far to the extreme that it might as well not exist. What are your “favorite” examples of bad design, and why? Let us know in the comments below.

If you want a website of your own and you want to avoid all of these potential pitfalls, why not contact us? We’re an industry-leading and award-winning web design agency, and we have plenty of experience and skilled designers on our team to ensure that you don’t ever fall into any of the same traps as the people who own the sites listed above. Just drop us a line; we’d love to chat about your projects.

Avoiding Bad Website Design FAQs

What are some key elements to consider in information architecture for a website?

Effective information architecture for a website involves organizing content in a logical and user-friendly manner. To achieve this, key elements such as navigation menus, page hierarchy, and labeling must be carefully considered. These elements create a clear and intuitive pathway for users to navigate the website, which in turn reduces confusion, enhances discoverability, and improves the overall user experience. Working with UX consultants and designers can ensure that the website’s information architecture aligns with best practices and established conventions, making it easier for users to find the information they are seeking.

Why is investing in professional expertise essential for online success?

Investing in professional expertise is crucial for online success as it provides access to experienced professionals who specialize in areas such as user experience (UX) design, user research, information architecture, visual design, and responsive design. These experts bring valuable skills and insights that help in creating websites that not only avoid common design mistakes but also deliver exceptional user experiences. By collaborating with professionals, businesses can effectively engage visitors, achieve their online goals, stay ahead of the competition, and ensure that their online presence captivates and delights users at every touchpoint. Ultimately, investing in professional expertise is an investment in the overall success of a business’s online platform.

What is responsive design, and why is it crucial in today’s digital landscape?

Responsive design is a design approach that aims to create websites that can adapt and display optimally on various devices, such as desktops, smartphones, and tablets. In today’s digital landscape, where users access websites using different devices, responsive design is crucial to ensure a consistent and user-friendly experience across all platforms. By implementing responsive design techniques, websites can adjust their layout, content, and functionalities based on the screen size and resolution of the device being used. This adaptability not only enhances user experience but also helps in maximizing user engagement and satisfaction by providing a seamless and visually appealing browsing experience regardless of the device being utilized.

Why is visual design important for conveying brand identity?

Visual design is essential for conveying brand identity because it helps in creating a visual representation of your brand that resonates with your target audience. When you work with UX consultants and designers, you can develop a visually appealing website that reflects your brand’s personality. By choosing appropriate color schemes, typography, imagery, and overall visual aesthetics aligned with your brand image, you can strengthen the emotional connection between your brand and users. A cohesive visual design not only enhances the user experience but also fosters trust and credibility with your audience.