8 Web Design Trends That Are Outdated in 2020

Table of Contents

    As with anything, in the past year, web design trends have already changed. As we all keep updating our mobile devices with new technology, so does our idea of what constitutes good aesthetics and user interface. As technology keeps expanding, so does a website’s need to keep improving.

    See my blog post about when you know it’s time to update your website.

    With each new round of studies that consultants and developers do on how we best experience a website, what was cool and trendy last year is old, outdated, and downright useless this year.

    Out with old and on to the new!

    So what is the biggest change I’ve seen when it comes to web design these past few months?

    These might surprise you!

    1. Sliders with meaningless calls to action

    Keep it simple and to the point. Folks just don’t watch these anymore. It’s like white noise. Often times they scroll too fast that you miss the message. They can be so bad that only 1% of your visitors are actually clicking on them.

    You lose valuable space here if this section keeps rotating. It’s the same issue that I talk about in my eBook, 8 Things You Can Do With Your Website Now To Improve Conversions.

    A couple of things wrong with your slider: (1) too much happening and (2) no clear call to actions.

    The website below had several images with a lot to say.

    slideshow example

    Illuminea had the right idea with their video on how sliders are bad for you: https://illuminea.com/sliders-bad-for-website-health/

    Need more? Here is a usability study from Yale University. “Using full-width images on the home screen by comments users make such [on the Yale website] as “it makes me feel like Yale doesn’t want me to do my work.”

    Nielsen Norman Group found that, even when a user was looking for a specific piece of content, they couldn’t find it because of an auto-forwarding carousel.

    2. Big, huge hero images

    On the flip side, a hero image is defined as “a large, featured image or series of images prominently displayed on the homepage.” The problem is, like all trends, they tend to take over and be the band-aid. “Well, all I need is a super cool photo and a button.” But there is more to it than that.

    I prefer to keep these hero images within the top section of your monitor but not take over the entire screen. Most of my clients even tell me to make these sections smaller. That was a big indicator for me. As designers, we love the imagery but from a user’s perspective, it pushes the important content further down.

    Yes, you need a single goal and call to action but most companies are more than a single action. Spotify, Dropbox, Evernote have a single purpose for visitors.. get them to subscribe.

    But a home contractor or pipeline company might have 2 – 3 goals for their website. Yes, focus on the primary and that should be represented your hero image but don’t forget the other 45% of traffic that might have a different purpose of being there.

    This HR website, kinhr.com,  did it right, keeping the call to actions minimal and in front of you. But they also let users know that there is more below the image by using the arrow.

    hero image

    3. Obvious Stock Photos

    You’ve seen them, right? It’s obvious! Those photos are used everywhere. It could be from iStockphoto or Unstock but they show up everywhere. I am not saying not to use stock photos. Heck! I must download 2-3 per day for my business and my customers.

    I am saying to find unique photos and photos that might be more realistic. Even better, try to hire your own photographer for branded images. Below is an example of one of our customers, Howell Services, who was able to get a huge stash of photos that we can use for the blog posts we write and social media.

    example of company branded photos

    Unstock photos like Unspash.com and DeathToTheStockPhoto.com are becoming overly used now. Don’t get me wrong though. They are great photos and I have a small subscription to one of them. How can you tell they are being overused? For one reason, they are free which lends itself to thousands downloading them and another is that applications are pulling them into their software to use as background images or for easily assessable social media photos.

    Here is my list of unstock photo sites.

    Then there are the photos that just look, well, out of touch.

    If you want a quick laugh see how Vince Vaughn lampooned them.

    vince vaughn stock photo example

    4. Flat, boring graphics

    First, we had Geocities where every color of the rainbow was used. Then, in 2007, we had sites like The Food Network with its big buttons and 3D gradients and shadows.

    To counteract this design overload, we progressed to a flat design. Flat design is a feature that was only meant to be used sparingly but somehow it caught on and spread to fill websites. The problem with a flat design is we couldn’t figure out what was a button. It all started to blend together and nothing gave you an indication that something was interactive. Microsoft took this to the extreme with Windows 8’s Metro.

    flat design example

    Google established what is called ‘material design.’ A concept that incorporates a “three-dimensional environment containing light, material, and cast shadows.” As our technology from mobile devices and touch screens allow for more 3-dimensional interaction with a website, utilizing thickness and shadows allow for better user experience.

    Remember that “accessible design allows users of all abilities to navigate, understand, and use your UI (website) successfully.

    The Montere.it website uses a combination flat-design but it incorporates cues for the user like hover-effect and shading. This lets the user know that this is an active area and clickable.

    flat design

    The Bottomline? If you use flat design include some dimension so you don’t make things difficult for your users.

    5. Hamburger menus are out

    Yes, mobile design is important but please keep your mobile design on a mobile device. Many of us still use a desktop or a laptop to surf the internet. If I can’t find your menu because you hid it behind a hamburger menu, like any mystery navigation, you’ve already frustrated me.

    The Nielsen Norman Group goes into much further detail about the effectiveness of hamburger menus. “Navigation on mobile (whether hidden under a menu or partially visible) takes a larger proportion of the screen space than on the desktop, simply because the screen is smaller. Thus, people are more likely to notice it and use it.”

    Notice the Cnn.com website’s hamburger menu and the lost ‘Home’ link. CNN navigation is lost here as it confuses users with the ‘Home’ text.

    mobile hamburger menu

    More: https://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/

    6. Sidebars

    Now, this depends on the topic and the purpose of the page, but I’ve started removing sidebars on certain pages. I switch back and forth between them to watch the interaction. Blog posts tend to have sidebars to help traffic move between different topics. But I will remove sidebars from my specific service pages to focus the user on that topic scrolling down the page to learn more. The top menu and footer have enough distraction to get clients to visit other areas of my website.

    Then I have internal links and buttons that might guide my users along a path that I have designated. A sidebar might take them away from that path.

    Check out the FoxNews.com website. Talk about overkill. Do you really need the weather on your sidebar? It’s even showing New York weather. I am in Houston! Then they clutter it with 2 sidebars of content. No wonder news sites are struggling. Let’s not even go into the fact that their website is not responsive so the sidebars are not even visible on mobile devices.


    In contrast, NBC news keeps it fairly simple. The issue though is that their related posts are clickbait.


    Another reason that sidebars tend to lose their effectiveness is on mobile. Sidebars are moved to the bottom of the screen anyway.

    7. Stale typography.

    With the growth of Google fonts, your options to utilize better typography has expanded. When I started years ago, you were limited to just a few fonts that you could as the actual text. If you wanted anything other than Arial, Helvetica, and Times New Roman you needed to create the text as an image. This wasn’t good for usability. For example, people with sight disabilities use special readers who cannot read or understand an actual image without an alternate text.

    Having these great font options makes it a little more fun and interesting.

    Even Suzanne Collins, the author of the Hunger Games, could use some help with a more varied use of typography. But, let’s be honest, there is a lot missing here.

    boring website typography

    But, be careful of adding too many fonts on your website to the extreme as with this restaurant website.

    In addition, you no longer have to rely on images with text because you want to use a specific font. This is good news for accessibility as well as the content. The text below is all text but uses Google fonts as real text.

    Here is a great history of typography on the web: https://instapage.com/blog/what-are-google-fonts

    bad infinite scrolling example8. Infinite scrolling web pages

    Actually, this is one feature I wish would go away. Call me old school but I like to go to a topic by clicking or touching a button or link and having it send me to that page. Scrolling to helpfully find what I need or clicking a menu item that all of a sudden sends me to the bottom of the page is disconcerting and tells me that you are lazy.

    For god sake! Create a page for that content!

    Another case is websites with infinite scrolling that never let users reach the footer. For example, the Onnit.com website (to left) kept scrolling and loading. I wondered if it would ever end. Talk about not having a purpose or goal.

    More information: https://www.webdesignerdepot.com/2015/11/how-infinite-scrolling-breaks-ux/

    Design Lessons Learned
    A lesson learned from me is to listen to my customers who are website users. I can’t assume that my notion of great design cannot be challenged. yes, I’ve been building websites for 20 years but if I didn’t listen to my customers and, ultimately their customers, I’d still be stuck with animated gifs.

    7 Outdated Web Design Trends blog

    Blog Categories


    Christina Hawkins

    Since 1999, Christina has been designing and building exceptional websites partnering with small businesses to help them grow and increase revenue. With many years of experience in creating thousands of websites, she understands the need for continuing education in her field and, therefore, is constantly learning and teaching others about internet marketing and digital processes. In addition to her ability as a digital marketer, Christina serves as a coach and mentor with Agency Mavericks to other digital marketing freelancers, helping them grow their businesses. She is a sponsor and co-leader of Houston's WordPress Meetup. Recently, she spearheaded the next Houston WordCamp 2020 as its coordinator after a 10 year hiatus. She is currently President of the Houston Interactive Marketing Association.


    1. jessica on January 9, 2017 at 12:20 am

      There are lots of information about latest technology and how to get trained in them, like this have spread around the web, but this is a unique one according to me. The strategy you have updated here will make me to get trained in future technologies. By the way you are running a great blog. Thanks for sharing this.

      • Christina Hawkins on January 9, 2017 at 10:54 am

        Thank you for your kind words, Jessica. I think the best course of action is constant education.

        • Andy thousand on December 13, 2017 at 5:27 pm

          Thank you for the following tips. Running any website is hard work and we usually only have one chance to get their attention and keep it. Turning visitors into loyal followers is another topic altogether so we have to get it right.

    2. 5 signs you need to redesign your website | stickee - technology that sticks on June 22, 2017 at 5:37 am

      […] outdated design trends you might want to get rid of include, sliding headers and […]

    3. stickee technology on June 29, 2017 at 4:30 am

      […] outdated design trends you might want to get rid of include, sliding headers and […]

    Leave a Comment