let's talk

9 Web Design Trends to Avoid

8 min read

Quality, on-brand, modern website design is an integral part of any comprehensive digital marketing strategy.

If a website is functional, well-written, and optimized, but poorly designed, it can never hope to fulfill its potential. It simply won’t be good enough to attract, convert, and retain a significant number of visitors.

Designing it in accordance with the latest web design trends and best practices would definitely help it boast more impressive results.

But, given the average cost of website design, there are some trends that are better avoided. Here are nine of them, accompanied by examples of how to do it right (and how not to do it).

1. Using Stock Photos

Stock photos are the more cost-effective and readily available way to add visual content to your website. Unfortunately, they are also the wrong choice.

Stock photos will never genuinely reflect your brand’s personality. They can make your brand more difficult to relate to, as they don’t perfectly align with your key messaging and ethos.

When it comes to your blog posts — sure, stock photos can be a decent option. For your service pages, homepage, and especially your “About us” page, shoot customer images that will better tell your brand’s unique story.

Lifesize uses a lot of stock photography on its website. And while the website does look good, some more on-brand photography might have been a better solution.

Digitarial Agency has done a much better job. They feature their team members on their homepage and have a more detailed “about” page. This design choice makes it much easier for potential clients to “click” with the brand.

It’s clear that the images were all taken on the same day, so the use of custom photos did not break the bank. Yet, they’re much more effective than any stock photo ever could be.

2. Dark Backgrounds

Dark background can convey a sense of chic sophistication. A black-and-white design goes very well with edgy, fashionable brands. But if you don’t want to impair user experience, you have to make sure to execute them well.

The main issue with the white-on-dark design is readability. Visitors will spend less time on your website if they have a tough time reading what’s on the page. They might bounce off rapidly, reducing your rankings in the process.

Now, that doesn’t mean you should never use light fonts on dark backgrounds. Just make an effort to find a contrast that is easy on the eyes. After all, the dark mode works by that principle, and it’s not an uncomfortable, eye-straining experience.

Let’s compare two black-and-white websites. Imotion Factory, while laid out well, is more difficult to read than Will Ventures. The difference in contrast is only slightly noticeable, but it’s enough to drive the point home.

The key is in the choice of font. The bolder, larger font makes it easier to read the white on black. There is also much less text to read, so Will Ventures manages to convey that sense of style without venturing into the unreadable (pun intended).

3. A Monochrome Look

Monochrome has been a trend for a while now, both in fashion and in web design. But here’s the thing: it has the tendency to slip into the mundane, the boring, and the dull.

A website needs to grab a visitor’s interest and hold on to it for as long as possible. With a monochrome design, you lose a lot of that power. It also prevents the most important elements, like the CTAs, from popping enough. Everything blends into one uniform mass, compromising some of the visual hierarchy.

Your design aim should be to choose a color palette that matches your brand’s personality and directs the visitor’s focus to where you want it.

The two websites to compare this time are FilsDeGraphiste and Brakes to You. The first one is bland and monotone, while the second one draws the eye exactly where it should be going.

There is also plenty of visual uniformity and branding. The greens and the purples are vibrant and go well with the tone of the brand.

4. Trying to Get Creative with the Use of Font

The choice of the font gives website designers a chance to get creative and make a website stand out. However, using the wrong kind of font can quickly turn into an unreadable nightmare.

Put plenty of thought into choosing design fonts. They need to deepen the meaning behind the brand and define how your audience perceives it. Font sizes, letter spacing, and different ways of capitalization can all achieve slightly different effects.

Your best course of action is to run A/B tests to see how each variation performs.

The first important step is to choose web-safe fonts. These fonts are easy to read across a variety of screens and resolutions and won’t demand extra focus. Cursive, for example, is a bad choice. Comic Sans is also notorious for being one of the worst web fonts.

Take a look at The Gas Guy. How easy is it to read the hero of this page? Does it send a message of competence and professionalism? Or do you get the feeling you would be doing business with a semi-childish company?

Now, take a look at the Mailchimp page for a better example of font use. It’s certainly not mundane, but it’s also easy to read, and you don’t get a sense of chaos. You get a feeling of creativity and variety.

5. Making Poor Use of Space

Negative space is a vital part of every webpage. It needs to make the other elements pop, and it should serve any visual hierarchy goal you may have. Pages that are too crowded and have too little negative space will seem cluttered and more difficult to navigate.

However, you can also go overboard with the use of negative space, making a page feel empty. Your aim should be to convey the right amount of information at just the right time.

Don’t make visitors look at nothingness if they are looking for something else: a product, an image, a heading.

Also, note these two crucial points:

  • Negative space does not have to be white.
  • You need to align how much information you present on a page with your audience’s interests, needs, and search intent.

For example, take a look at the Yeezy website. It looks much more empty than it should. Kanye West must have had some sort of minimalist dream with it, but from a design perspective, it’s too empty and too monotone.

Now, let’s look at the MarketBeat website. At first glance, it might seem too crowded and jam-packed with too much information. But when you consider its purpose, it makes much more sense.

The website is about finances and financial news. Anyone in the finance industry will tell you they want to gather as much information in as little time as possible. They don’t have time to waste on negative space. They want to know the latest and move on.

6. Autoplaying Video

Video is a powerful conversion tool. In fact, 72% of users prefer to be convinced to convert via video. So it’s not really a question of whether you should have one on the homepage or not. The only question is how you want to include it.

First, you need to remember that videos can slow a page down immensely, so the one you choose needs to be extremely well optimized.

Slow loading speeds hinder UX and rankings, so there will be no point in converting the few people who do make it through to the video.

What is probably the worst UX faux pas is autoplaying homepage videos. There are some UX laws you never want to get wrong, and this is one of them.

It’s distracting and annoying — especially if someone accidentally leaves the volume up on their device. Even if the video is silent, users will have to pause it if they don’t want to watch it immediately. And that’s one step more than you want them to take.

Look at this Wistia video. Are you able to focus on anything other than that? Can you read the rest of the page while it’s so colorful?

On the other hand, GetSafe did a much better job at using video on their homepage. It’s just as prominent and well-produced, but it does not autoplay.

A visitor can choose to watch it after they’ve gotten to know the brand and its product. They can also skip it completely if they are ready to convert without it.

7. Skimping on Mobile Optimization

Mobile-first has been a thing for years. With 7.1 billion mobile users in 2021, it’s no surprise that search engines are focusing on mobile experiences over desktops.

And yet, a lot of websites still create the exact same version for their mobile and desktop users. While this may work to an extent, designing mobile-first pages is a much better solution.

The way we use mobile phones is very specific. 73.1% of web designers agree that non-responsive design that does not take into account proper mobile UX is the top reason why most visitors will bounce off a mobile website. Thus, it is very important to make sure your site is up to speed.

Mobile-first design needs to consider factors such as:

  • CTA placement
  • the space between clickable elements
  • font size, etc.

Take a look at Leoneck. Their mobile website has a gaping hole between the hero and the search element, and nothing is easily clickable. The website looks great on a desktop, but it leaves a lot to be desired on a mobile screen.

Now, take a look at how Refreshing a Career did a much better job. They kept the search element at the top of the screen and removed all the elements that a mobile screen does not need.

While they do a good job of aiding navigation and filling up space on a large, landscape screen, they serve no purpose on a vertical screen.

8. Intrusive Pop-Ups

Pop-ups are a great way to increase conversions. They have an average conversion rate of 11%, so they can certainly help you hold on to the attention of visitors who are about to leave or who have spent enough time on your page but have not yet taken action.

But pop-ups can also be the underlying cause of high bounce rates. If they are shown every single time (even to repeat visitors) and if they pop up for any action (including entering a page or scrolling down), they will be an absolute nuisance.

Present pop-ups only at exit intent to avoid confusing visitors. Nike does this well and only shows you the pop-up as you are about to leave.

9. Infinite Scrolling

Finally, another web design trend to avoid is infinite scrolling. It certainly serves a purpose on websites that provide news or that are otherwise filled with content. Facebook, Mashable, and Buzzstream all do this, and the scrolling is not bothersome or annoying.

But if you are a business that has important elements in the footer, never being able to get to it makes for horrible UX.

Final Thoughts

There are plenty of web design trends that can help your business attract and retain your target audience. As for the nine practices we’ve listed here, make sure to avoid them.

Which one of these trends do you dislike the most, and which one do you still see the most often?

Recommended posts

How to Know That You Have Achieved Initial Success in SaaS

How to Know That You Have Achieved Initial Success in SaaS

Are you an entrepreneur who implements SaaS customer success but is clueless about how to determine its success rate? If so, read…

read more
How to Choose a Technology Stack for Web Development 2022: [A Step-By-Step Process]

How to Choose a Technology Stack for Web Development 2022: [A Step-By-Step Process]

Are you a startup founder, chief technology officer, or product manager that’s worried about how to choose a tech stack for your…

read more
10 Examples Of Good Website Design

10 Examples Of Good Website Design

It can be challenging to know where to start when it comes to website design. You want your website to look great,…

read more
10 Benefits Of Live Chat Software On Your Website

10 Benefits Of Live Chat Software On Your Website

In the digital age, we no longer want to be patient. Most channels in the customer service sector have a wait time….

read more
10 Web Development Trends For 2022 You Need To Know About

10 Web Development Trends For 2022 You Need To Know About

When you’re in the middle of the Web Development Trends game, it can be challenging to see beyond the present moment. While…

read more
How to Hire a Dedicated Front-end Development Team: Overview, Process, Tips

How to Hire a Dedicated Front-end Development Team: Overview, Process, Tips

Are you a startup founder, tech entrepreneur, or product manager looking to hire dedicated front-end developers? If yes, then read through this…

read more
7 Benefits Of Adopting A Consistent Social Media Content Strategy For E-Commerce Success

7 Benefits Of Adopting A Consistent Social Media Content Strategy For E-Commerce Success

Imagine you have just started your eCommerce business and need to create your startup marketing strategy. The first thing that can come…

read more
How to Make Your Website Stand Out From Competitors

How to Make Your Website Stand Out From Competitors

Your business website is how many customers first notice your brand. That means you need to make a killer first impression with…

read more
How To Design eCommerce Product Pages For Success Of Your Startup

How To Design eCommerce Product Pages For Success Of Your Startup

Digital shopping of products and services has risen tremendously over the years. Some of the principal reasons for opting to make purchases…

read more