5 Bad Web Designs You Should Be Aware Of

Have you ever done something you've regretted? Like the rest of us, you've probably had your fair share of blunders. Such is life.

But when it comes to web designs, you can't just shrug it off — not when your company or brand is at stake. That's why we think it's necessary to learn from other people's mistakes.

Don't just focus your attention on soaking up concepts of the best web designs. It would also do you a world of good to observe how others could (and should!) have done it better.

In this article, let us show you the ropes. We'll look through some of the most poorly designed websites so that you can avoid making the same mistakes.

To be clear, we're not here to shame anyone. We simply want elements of the following websites to serve as a cautionary tale for others. Think back to the time before you went ahead with your "mistake", we bet you wished that someone warned you about the repercussions of your actions, right?

As Warren Buffet once said, "It's good to learn from your mistakes. It's better to learn from other people's mistakes."

It makes total sense. If you're not aware of the possible mistakes, how can you steer clear of them and excel? You need to know where you should improve and what to exclude.

So, be prudent and grow from these oversights.

Arngren

Imagine being in a maze. And as if that's not enough, the maze has plenty of obstacles to boot.

Once you get to the Arngen homepage, it's hard to figure out where you are. It looks like you've landed right smack in the middle of an endless catalogue, but not exactly. There is just so much going on.

An overloaded page can be too overwhelming for web visitors, not knowing where to look or where to begin. And such a first impression can cause them to engage no further. They are more likely to click the back button or close the chaotic tab straight off.

The problem here is not a lack of information since product details are available all over the place. Unfortunately, the website has lost its clarity, direction and purpose due to its unsystematic design.

On top of this, the website has a really poor navigation. Aside from the confusing display, the nav design makes it harder for users to understand the content they can find on this site and won't have any guidance on where to go, which might give the feeling of being trapped in this mayhem.

Our Solution: How We Could Make It Butter

We'd start by stepping back to the fundamentals and right to the core of their website needs. What is it exactly they are after? We can see that they are all about ATV, but is the website's primary purpose to put them on display and sell them? Or perhaps, it's only meant to impart information?

We believe defining the website's goals and who their target audience is would help Arngren in a big way. And then by meeting these goals, Arngen would align to become a lot more well-suited to the needs of their target audience.

Once the audience and goals have been sorted out, our next stop would be the navigation bar (navbar).

Based on years of web design experience, we've concluded that the main navbar should possess the overarching categories and bits of information - the highest of the hierarchy.

So we would seek to eliminate any distractions by drafting a simpler and cleaner framework, which would be the basis of prioritisation and content structure. This would help Argren offer their users the right buttons they are looking for depending on what they need from that page.

Following the navigation, we would look to iron out the homepage content and make sure it's in the same tune as the newly-improved navigation bar.

We've come up with a couple of ideas, but the one on our table is using blocks to segregate all relevant pieces of content on the homepage.

Let's paint a clearer picture, shall we?

If the navigation bar had buttons for Home, About Us, Products, and Contact Us, all of these would have their own individual block. Each of which would consist of a preview snippet of the expected content on that particular page. We'd also add a "see more" button at the bottom of the block that could transport users to that page if they wanted to find out more. Sort of like a page of contents, it is a different way for users to browse the nav and see what type of content is on this site.

Last but not least, we would work on developing the brand aesthetic and then bringing this to life on the site. This means creating a brand design and specifying fonts, colour palettes, image styles, logos and more to really bring out the unique personality of this particular website.

Serene-Naturist

Serene Naturist's website is brimming with too many "rest and relaxation" elements. They got right perception in place, but they went overboard with the execution.

It looks like they listed out all the possible details they could think of during their brainstorm session, and then just ran with it, making sure to utilize each one of them on their website.. and then some more.

Flying doves? Check.

Candles? Check.

Palm trees? Check.

Pictures of people having a massage? Check.

Blue? Seeing that it's all you can take note of, check and check.

And oh, let's not forget the "nature" sounds blaring in the background.

Again, the concept of peace and relaxation is an excellent place to start when marketing a spa, but there's a right and wrong way to do it on your website.

Let's start with the poor choice of imagery. Most of the overlaid images are too sensual, and the way all the images clash with the collage background is no sight for sore eyes.

The outdated pictures and floating images clutter up the whole space. In fact, you won't have time to gaze at the texts because the images grab your attention — in the wrong way.

Speaking of the text, putting them in electric blue might have been done to call attention to what Serene-Naturist has to say to their target customers, but when everything is in that colour, it unfortunately makes none of it stand out and is just hard to read overall.

Let’s move onto the background. The collage effect doesn't do good for these images on top. The combination is unflattering and all over the place.

Then, there's the colour of the website. There's nothing wrong with the electric blue colour itself, but it doesn't really comply with the goal of this website in promoting calmness and serenity. Not precisely a brand design and style you'd expect from a source of tranquillity and relaxation such as a spa. The brand identity has been lost to the sea of unflattering design and image choices.

Keep in mind that we are only using the Homepage for this evaluation. There are numerous other points and suggestions we could make on the other pages of the site too.

Our Solution: How We Could Make It Butter

For starters, we would get rid of the inappropriate pictures. Though Serene-Naturist probably feels like they are sending a good message by posting these, it does the exact opposite. A massage is more about privacy, comfort, calm, and relaxation, so the images we choose would reflect these attributes.

We'd also strongly suggest removing those fast-moving GIFs. There's something about them that takes you back to the 90s, making the whole website feel obsolete.

Should we involve moving elements on the website, we would probably stick to the tried-and-tested parallax and fades. Both of these are easy on the eyes and have a soft and pleasant feel to them - perfect for a gentle touch of interaction on a website dedicated to massage therapy.

Next, we would change the dominating blue colour. It’s hard to find elements that embellish this colour, but it's even worse to leave it in just that one solid shade. It would have been so much better if there were contrasting colours to complement it. So, for this business, we’d go for something more subtle and serene. And even then, we still wouldn't settle with a single shade. We’d find a palette that works and has its own hierarchy.

Lastly, let's talk about the website's overall framework. It's not easy to follow or engage in at all. Users spend about 5.59 seconds digesting written content, and if they can't in that timeframe, they're gone.

Therefore, we would arrange the design elements and informational content in a more user-centric order to create a hassle-free and enjoyable experience for users.

Pacific Northwest X-ray

As we stumbled upon Pacific Northwest X-ray website, our first impression was their rather primitive web design.

Just take a look at their font style and design choices. It might have been a decent one twenty years ago, but it looks like the website hasn't gone through a series of web development and design updates since its inception.

It's straight-to-the-point and fuss-free as it doesn't have too many elements like the two previous examples on the list. However, it's far from simple and defined.

We're also not fans of their slogan "Simply the best". You can't find in-your-face claims like this on high-quality websites.

Our Solution: How We Could Make It Butter

In Butter, we stand behind the golden rule of "Show, don't tell". So we'd remove the catchphrase from their website and instead focus on their design.

If the look was engaging enough, users would move around to see what they have to offer.

A website is the online representation of a company, so instead of branding yourself as the best, you need to back it up and strengthen it through your web development and design techniques. If you truly are the best in the field, the user will be able to come to that conclusion themselves.

About 75% of consumers judge a website's credibility based on web design. You'll easily lose three-quarters of your audience if you skimp out on it.

Bear in mind that being the best means having the capacity to shell out a few bucks to improve your web design, especially (in this case) when you're claiming to be top-notch in medical technology.

Pacific Northwest X-ray's target audience is more likely to entrust their needs to someone with state-of-the-art facilities, or at the very least, an updated website. So, we would look to showcase their latest innovation and quality of work on their website, instead of simply asserting their expertise through words.

One other thing we want to touch on is what it says at the bottom of the homepage: This website is our catalog, no printed catalog is available. If that's the case, we would recommend using higher quality, larger sized images and laying out the product information as clearly as possible.

Product category pages on E-Commerce websites should generally be treated as a physical shop storefront. While Pacific Northwest X-ray's product displays are clutter-free, they are not exactly enticing or creative.

In this case, the lack of detail doesn't contribute to a clean, clear, or minimalist design. It merely displays a lack of expertise and authority.

To remedy this, we would strategise to come up with more eye-catching visuals between white spaces. A zoom-in, zoom-out feature would also come in handy for interested buyers wanting to scrutinise the products. It would also be intuitive to make sure elements like product suggestions or things the user might be looking for is on those pages to keep them constantly engaged.

If there's one good thing about the website, they already have adequate product descriptions, which we’d make sure to put those to good use. It's important to highlight the best parts of your products and business and not to let them go to waste!

Though we would surely update the content structure and ask the company to develop more and comply with social proof.

Deque University

This example made by Deque University isn't too outdated like the others mentioned above, but it's far from ideal.

First, there's not much to go on here. Jump over to the website, and you'll only see slabs of text on a page and the logo. It doesn't make for a good user experience. No one's going to read chunks of long text, particularly when it's so dull to look at.

On the side, you can find accessible links to help you find your way through the website - the nav essentially. However, the font style and design doesn't really call your attention as it is not displayed as a priority, so it's easy to shrug these links off and scroll past them.

To top things off, the mobile design is the main issue. It doesn't adapt to different devices at all and you can visibly see where it trails off.

Note: This isn't really an actual website. It's just an actual example of a non-responsive web design.

Our Solution: How We Could Make It Butter

If we're given a chance to play around with this bare website, we'd start by bringing out the brand. We'd utilise more colours and appropriate imagery to develop and build up the brand identity. After all, colour enhances brand recognition by about 80%.

We also think it's important to strategise where the web elements should go, instead of propping them down without care. Homepages should never be taken for granted because it's the first thing your potential customers see. To conjure up an excellent lasting impression, make sure you expose your clients to a visually-appealing, captivating, and easy--to-use home page.

To break up the huge amount of text, we would place the information in blocks, and add related images and designs to each. We would want the written content and visual content to go hand in hand, evoking a particular feeling to the users and further strengthening that brand.

And of course, we wouldn't let the mobile web design go to waste. Non-responsive websites miss a significant amount of visitors since 50% of web traffic comes from smartphones. In Hong Kong alone, there are 6.25 million mobile phone users.

Read this article to see how responsive web design affects Hong Kong businesses.

Yale School of Art

When you hear "Yale", you'd expect to be blown away by an advanced, innovative design. Unfortunately, this isn't what you'd see on Yale School of Art's website, as upon first glance, it appears like a GIF-filled throwback website. However, we chose to include this as an example of bad web design, done right.

Their chosen background is distracting and can bring the eye away from the actual content. And to be honest, it's a bit confusing why they selected an image of a man vacuuming fire.

The content is off-centre; it's aligned towards the left and looks a bit unbalanced. Alignment contributes to how organised a design can come off. There's just something a little frustrating with a giant margin on one side and not on the other.

We also spotted that the navigation menu is very small and isn't too prominent. The navigation menu should typically be easy to see for new users. Otherwise, it's like you are making new users work a little bit to see what's on this site.

Despite all of these, we think the website has a interesting advantage — its user-friendliness. The designers have come up with a very straightforward platform. They cleverly challenged the style and have managed to serve their audience a pleasant user experience, save for the distracting visuals. If you open the site up on your mobile device, you'll see it is responsive and adapts to fit your screen and they added a burger menu on the top right to further comply with norms of mobile-browsing. Aesthetics aside, you really have everything you need made accessible.

We’d go as far as to say this website design is done right, albeit in retro taste.

Our Solution: How We Could Make It Butter

We'd start by letting go of the animated background and replacing it with a static design or something that doesn't clash with the content, but instead compliments it.

Technically-speaking, the current background was well thought out as it does not interfere with the page overlay. The use of blocks allows for an easy interpretation of the content because it's segregated into different elements and each one is dissociated from the background.

We mentioned the navigation was not very prominent - if it were, new users could more effortlessly find where they'd like to go. But this site isn't totally dedicated to new users, as it is familiar ones - students. They clearly wanted to give importance to the main content. As their target audience is a generation that is tech-driven, the designers were successful in assuming they would be able to find the nav in the top left corner even if it was small because this is a default.

Expanding on this, our eyes are naturally drawn to begin reading from the top left corner of a page. Don't you begin reading a book at the top left corner (in English)? This shows how they kept hierarchy in mind by cleverly placing the navigation there.

Finally, centring the content would be our next move. The designers probably curated the website this way for an edgier aesthetic. Some may argue that this comes off like the site never evolved and came to a complete standstill years ago. This is honestly just a style they chose, and that is completely fine as it doesn't interfere with the user's purpose of the site.

This site is a great example of a bad design, done right. Meaning that the creators deliberately challenged this style of web design and actually produced something that is very user-friendly, easy to use and straightforward, while also accomplishing the stimulating entertainment aspect too.

The Takeaway

Your business is judged through your website. Therefore, you need to take good care of how you present your brand online.

For the record, bad web design is not just about big and bold elements. Navigation and responsiveness are also factors just as significant. It is when these elements are in harmony, that makes a successful website.

The websites we've listed above happen to have received plenty of sighs of frustration over the years. If you don't want yours to suffer the same fate, take heed.

If you're looking for inspiring web design ideas, click on the link as we have an exciting read for you.

And if you're wondering how you can avoid committing grave web design mistakes for your website, send us a message and we'll gladly help you out.

Work with us:

• Website Design Hong Kong
• Ecommerce Digital Agency