20 Bad Website Design Examples and How to Avoid Them

Some say there is no such thing as bad publicity. However, when it comes to the digital expanses where aesthetical judgments are a real thing, a bad website can ruin everything.

Whatever niche you are in, it is vital to make sure your website excels in both form and function. There are just two requirements to meet. However, it can be challenging. The thing is, as no experts, entrepreneurs quite often fall victims to inexperienced designers and developers who make big promises that can't be kept. As a result, we can witness millions of bad websites on the web.

How to avoid joining the rank of terrible websites? Easy. Follow these five steps.

1. Choose an executor from the leading website agencies with an impressive web developer portfolio.
2. Always ask for a web design RFP.
3. Use only high-quality visual material, like renderings provided by Ramotion website design agency.
4. Prepare interview questions.
5. Avoid bad practices at all costs, even if they help to save funds.

While the first points are self-explanatory, the last one requires special attention. Let's consider it closely.

Many things we deem bad practices for websites is hard to quantify. However, we will give it a try. We are going to start with some apparent techniques that may turn any website into a bad website. They are:

Let's consider them closely.

Not Following Trends

Staying indifferent to the trends may earn you a rebel title, but it won't certainly earn you quality leads. Companies that live in a vacuum and ditch all modern trends look stale, tasteless, and boring. Aesthetical judgments heavily influence the decision-making process. Therefore, if your design does not live up to the current customer's expectations, you have a bad website.

Be Unresponsive

Responsiveness is no longer a tendency; it is a must-have. Your web UI should look and work flawlessly across all devices. Otherwise, your message will be distorted. Even though making website design responsive is getting more challenging since you need to handle the ever-growing device market, it should still be done, no questions asked.

Confuse Mobile-friendliness

Being mobile-friendly and being responsive are two different things. Even though they have similarities, still they are not interchangeable. Being mobile-friendly means optimizing the interface for mobile users. Some things should get more prominent, like buttons and font, whereas traditional elements like the hero area should become smaller. Mobile-friendliness requires some sacrifices. However, they should be made.

Ignore Usability

A good website is not only about how it looks but also about how it feels. Much like people confuse responsiveness and mobile-friendliness, many website owners believe that they ensure good usability by creating good design. Everything is much more complicated. Usability involves understanding how people interact with your website. It helps create a comfortable environment where visitors get information right here right now.

Ditch Accessibility

Accessibility, much like responsiveness, is must-have. No barriers should be erected on the web. The more inclusive your website, the wider audience you can serve. It means more traffic and more revenue.

Not Optimize for SEO

SEO quite often stays overlooked since it is done on the back. However, it is crucial for your business to thrive. Good SEO makes a website easily crawlable, stands behind high ranks, and generates traffic.

Neglect Security

Neglecting security is a quick path to a bad website. If your website smells fishy, then it will fail any mission. Trustworthiness is a deal-breaker these days. It requires you to have SSL in order, provide a secure connection, protect your website from DDoS attacks, and much more. Without security measures, you will end up with a bad website and a bad reputation.

We have featured some huge issues. Each one on its own can destroy any website. However, that's not all. Tiny details are what sometimes make the whole difference. Even the website with modern design, responsive behavior, excellent performance, and good SEO may be bad due to other tiny flaws. Let's find out what are other things that we should avoid.

• Create a website without any particular goal.
• Do not know your target market and its needs.
• Do not satisfy user intent.
• Choose company-centered instead of user-centered content.
• Not invest in creating a thoughtful organizational structure.
• Do not validate code.
• Do not improve performance.

It is one thing to know the theory (what practices to avoid, what issues to fix, what elements to focus on), but quite another to see it yourself. Real-life examples of websites can give you lots of food for thoughts. Therefore, we have built a collection of horrible websites to prove that investing in your website and improving it from every side is the only way to success.

We are going to start with two terrible websites that were intentionally made ugly and disgusting to show people around the World how websites should not look like.

1. The World's Worst Website Ever

The first one is "The World's Worst Website Ever." The name speaks for itself. Created more than a decade ago, it encapsulates all the worst practices that you can find on the web. It is an iconic website since all those design solutions are still considered to be bad.

Here, you can see what color combinations should be avoided, how poorly optimized animation can ruin the overall impression, and how bad formatting and the absence of information hierarchy destroy readability.

This website provides a teachable moment for all of us.

2. The Big Ugly Website

Again, the nameplate is self-explanatory. The project is dedicated to some drastic design solutions that were intentionally brought to life so that you can see how poor decisions based on old-timey trends can destroy everything.

Here you can see a two-column layout fixed to the left side, bad color combinations, negligence of information hierarchy, overplay with a visual component, and actually no content whatsoever, only links.

If you think it is a big joke. Well, yes, both websites are a big joke. However, believe it or not, there are still websites that look almost the same. Take a look at the next creepy website example.

3. PNWX

PNWX is an official website with a current catalog of Pacific Northwest X-Ray Inc. It is a real website, and it is pretty much alive. Even though it is dated back to 1997, that is a pretty solid age, but it does not evoke any respect. The deal is if you have a bad website, no one can save your reputation, even the best developers in the World.

Even though the homepage features a search input, categories, navigation, and some useful links, it still scares away rather than lures viewers in. The only way out is to make a total makeover and improve user experience, SEO, performance, and accessibility.

4. MGBD Parts and Services

Although this website feels like a huge improvement to the previous one, the truth is, it is not. It is the same terrible website as featured above case.

Images hurt the eyes. Not only do they overwhelm right off the bat, but they also destroy readability making navigation hard.

Coloring is too extreme. As for contrast, the majority of crucial elements like navigation and links lack it. To make matters worse, running animation makes it hard to concentrate on the content.

5. Industrial Painter

With our next bad website example, you may think that we are set on the path of improvement. Again, you are wrong. Even though Joomla-inspired interfaces were popular a decade ago, today, they are mauvais ton.

The deal is, this outdated structure makes it challenging to work with websites not only on huge desktops but also on small screens such as cellphones and phablets.

The layout stays the same all the time. The font size is not adjusted to small screens, and the contrast ratio is minimal.

Although you can locate information, still this is not the quality you expect from a modern website.

6. Arngren

All those of you who believe that grid-based structures are flawless, here is a vivid example that without professional developers who know how to handle them properly, you can end up with chaos.

The homepage of Arngren is a real mess. Even though the information is arranged with the help of a grid where some cells have obvious borders, this still does not save the day. User experience, usability, and readability are gross.

Content-heavy websites are complicated to run. You need to champion formatting, layout, and spacing as well. Obviously, the author has forgotten about that. Therefore, Arngren is one of the worst websites on the web.

7. Gates N Fences

Much like Industrial Painter (number 5 in our collection), this is another blast from the past, where the three-column layout still rules the roost. However, this time we can see another type of arrangement where sidebars are placed together.

This solution was popular more than a decade ago, but now it feels lame.

Many things betray its age:

• First of all, menu links made as skeuomorphic buttons.
• Second, heavily patterned background that tries to imitate real surface.
• Third, the content arrangement that has an old-timey feeling.

We have also tested it across devices. No responsive behavior or mobile-friendliness whatsoever. This makes it almost unreachable for all those users who are on the go. As we all know, these users occupy the lion's share of the current market. That's a significant loss for any company.

8. Craigslist

Craigslist is a veteran of the web. We all respect Craig Newmark, who was the first one to introduce classified advertisement websites giving start to all online directories and information-overload platforms. Nevertheless, it is one of the worst websites, even though it has a neutral design.

So, what are the main flaws? A three-column layout that is based on a classic fixed grid system that causes difficulties for browsing. Poor usability: it is time-consuming to locate the information. Mobile version that is available only on click.

No visual cues whatsoever.

9. MIT Center for Advanced Visual Studies Special Collection

Websites of universities and government are notoriously famous for being outdated or using design solutions that not everyone can fully understand or accept. The official website of the MIT center is a representative example of that.

Although some eccentric people may find it awesome due to offbeat solutions, still, when it comes to the regular crowd with a short attention span and desire to locate information as quickly as possible, it can become a real challenge.

The main flaw of this website lies in overdoing with parallax. The latter is a powerful tool in terms of creating an engaging user experience. However, with great power comes great responsibility. And when you overdo it, you may end up with a bad website and poor user experience.

10. Sport LED Panels

The official website of the company that sells sport LED panels looks relatively modern. However, still, it can't be called a good website for some strong reasons.

• First and foremost, there is too much interactivity. Everything is rotating, moving, and flipping. There are even sounds. Again, parallax is overdone. The interface reminds a flash website - technology that was popular 10 years ago.
• Second, links do not work at once. Sometimes you need to click twice or three times to activate them.
• Third, there are inconsistencies in layout. Even though the website looks and works well on small screens, some flaws make it a bad website.

11. Apptivation

Apptivation is one of the web companies that are building applications for clients. The competition in this niche is tough; therefore, you can't afford to look old. However, this is not the case of Apptivation since it seems that the team does not follow the trends at all. The design is absolutely outdated.

More so, it is utterly unacceptable to use device mockups that are dated back to 2014 to promote your services. The first impression is ruined, so does the overall one. Ignoring modern trends can turn any online portfolio into a bad website.

12. Federal Trade Commission

As we have already said, government websites often lack modern solutions. They are also rarely updated. Therefore, you can witness some mauvais ton like fixed grid systems or bad responsive behavior. The official website of the Federal Trade Commission is a case in point.

Even though it has a mobile version, still the design is stale. The usability is not well-thought-out. It takes time and lots of effort to locate the required information.

Finally, the website is not inclusive. Some images do not have alts, even though they should. There is a problem with contrast, and, the worst thing, there are empty buttons.

13. GAO

This is another government website in our collection. This time we are going to focus on the official website of the U.S. Government Accountability Office. Unlike the previous one, it positions itself as a news portal.

While the website works for desktop users, when it comes to mobile and tablet viewers, it fails since the team has forgotten to make it mobile-friendly. More so, it is not even responsive since the two-column structure stays the same regardless of the screen size. As a result, it is a real nightmare to browse the website on your cellphone.

As for accessibility, there are missing alternative texts, empty links, low contrast, and even suspicious links.

14. The Congress Movie

The congress movie made our list of poorly designed websites due to a wealth of errors. Even though WordPress proudly powers it, it still lacks so much to be called a good website.

First and foremost, obviously, the website was created to get high ranks in search engines since we can see some unhidden SEO text right in the header. Second, the design is lame. There is no character, style, or theme.

Third, there is no content.

Finally, it does not have proper navigation or search.

In a word, the website was created not for people but for search engines. Google considers such projects as bad websites, so do we.

15. Adam and Everywhere DDB

Content-heavy websites are complicated to manage. You need to strike a balance between being informative and being organized. As a rule, people overlook this. Consider Adam and Everywhere DDB and their bad website with visual overload.

Although the web design is much better than Arngren, it still overwhelms. The thing is, there is a whole bunch of vibrant images where each one commands the attention, causing a constant shift in focus. Cells are too small so that the front page looks dense and heavy. Also, not all of them are working.

Masonry layout can be a life-saver, but it still requires cutting and polishing.

16. Tavern

One of the main reasons why online properties become bad websites is that they stay in the past, like this official page of a Colorado-based restaurant that stuck in 2013.

The design is outdated. Even though it has some attractive features like the bold, charismatic typeface and some brutal textures still, it produces an unfavorable impression. It does not build trust and credibility, which is a deal-breaker.

Another huge flaw is that the website is not responsive nor mobile-friendly. It may seem that this fixed boxy layout looks good on cellphones; the truth is, it is not. The company loses a considerable share of the market.

17. Regal Capital Lenders

Although this website is not from 2013, as the above-stated Tavern, nevertheless, it is certainly not from 2021. It feels outdated and a bit lame. Even bright illustrations and animation do not make it better.

So, what are the flaws?

• First and foremost, header. It is too cartoonish and too outdated. Even though it features a somewhat meaningful animation, it is still not convincing.
• Second, the web site's theme and atmosphere do not align with the company's services and brand image. It looks like the website is for children, not for people who need a loan.
• Third, the block that qualifies the brand looks naive.
• Finally, there are issues with the mobile version, accessibility, usability, and performance.

18. Simon K

For someone who positions himself as a vivid artist with a keen eye for detail, such a web design portfolio is unacceptable. Simon fell a victim of overdoing with creativity. He focused on the artistic side of the website but not the functional one. As a result, he loses potential clients without any evident reason.

What are the main flaws that turn it into a bad website?

• First and foremost, it is challenging to move around. You are simply stuck on the first screen. The reason for that is that the scroll wheel does not work. You need to drag pages that is a bit confusing and tricky.
• Second, there is no evident navigation. You can't quickly move between pages. You are just stuck inside the cycle.
• Third, here everything is about the artist's work. However, what about case studies? We could use some context. Where is a bio? Where is educational background?
• Fourth, the contact form is poorly made.
• Finally, the design itself is outdated.

19. IBI

Much like a personal portfolio of Simon K, IBI's official website is very close to being called a good website. However, some things keep it away from this title.

First and foremost. It is a video in the header. Although it instantly grabs attention due to the glitch effect, however, this effect ruins everything. The deal is, it is not recommended to have due to accessibility reasons. Second, it does not bear any information. It is just a fancy distraction.

Second. There is no information hierarchy. Where to look next? Where to go next? To push users down the marketing funnel, you need to lead them. However, here users are left to themselves.

Third, you should exercise caution with a full-screen layout. Here, you need to move from the left side to the right side all the time. This certainly overwhelms users.

Finally, there are some accessibility issues. For example, the slider does not have any controls. Consequently, even people without impairments may feel uncomfortable here.

20. Adjust

Last but not least. You may have a modern design, excellent user experience, and well-thought-out usability, but the smallest bugs will ruin everything. Adjust is a case in point.

The website is great. It looks fine. It is refreshing. However, what does make it a bad website is a huge panel that informs about cookies. It just does not go away. It sticks all the time, destroying the entire impression and experience. It is like a sore thumb that plays on your nerves and distracts attention from the primary goal.

Obviously, it is a bug. However, the team does not care about it. So why should we care about their website?

In case you are still wondering, is web design dying, the answer is no. Without good web design and all other integral elements such as performance, usability, SEO, accessibility, etc., your company could not stay afloat.

Whether you need to create a saas web design, or startup web design, or eCommerce web design, it is crucial to make sure that it is far from being called a bad website.

So, what to do? Avoid bad practices, invest in web design, hire web designer or one of the professional web design agencies, prepare interview questions in advance, and always adjust your website to meet current requirements. Avoid a bad website at any cost.