Annoying Trends in Modern Web Design

This is an exciting time for web developers and web users.  In recent years, technology and techniques have evolved that allow for fantastic designs.  Much of this evolution is manifested as looks and layouts with fancy buzzword names.  “Responsive,” “minimalist,” “flat,” “metro.”  As with many trends, there are excellent showcases of the designs and annoying misuses of them.  I want to draw attention to some of these misuses below.

Wasted Space in Minimalist Designs

Minimalism is the practice of reducing fluff and streamlining websites.  When done correctly, this is very pleasing to the eye and makes finding what you want easy.  But when taken to far, your page becomes pointless.  Removing all the useful information and content in favor of empty space is annoying.  You are forcing the user to go to another page in order to find anything out when you have prime real estate to spare.

Minimalist trend: Too much whitespace; not enough content.

Minimalism should be about making content front and center instead of banners, logos, and other fluff.  It is about showing the user only what is necessary, in order to make their experience more pleasant.  Don’t remove the content to minimize; remove the fluff!


Huge Photos or Logos Instead of Content

Huge photos taking center stage is “in.”  It’s what all the cool kids are doing, and it’s what you want to do.  When done correctly, these huge photos are great.  The problem with huge photos is that they take away space for that valuable content mentioned above.  Every once in a while, a site embracing this trend will throw up a photo on the main page… and that’s practically it.  Sure, there may be some navigation up top, or fineprint in the footer, or a slight spattering of hard to read text.  But the primary purpose of the page is to showcase a big-ass photo.

Huge photo trend: Photo replaces content.

And that’s not the point.  Photos are to break up text.  It’s a splash of color and appeal to keep the visitors attention.  In the vast majority of cases, a picture should only be supporting material.  It’s not the main product, its the window dressing.  Go ahead.  Use photos.  Use big photos.  But don’t substitute the content of the site with a big photo, supplement the content.


Limited Contrast Colors

To be fair, this is not a new problem.  It has been around since the dawn of the website era.  In the past however, this problem was largely relegated to smaller websites.  Now however, with the advent of flat design and the more subdued look of modern websites, this problem is more mainstream.  Sites with grey text on white backgrounds are a dime a dozen now.

Flat/Subdued Trend: Low contrast, grey text on a white background

Content should pop out at the user, even with a subtle, subdued design.  If the background is light colored, it should be very light colored and the text very dark.  If the background is dark, it should be very dark and the color very light or plain white.  Having to strain the eyes to read a website is a turn-off to visitors.  Contrast, contrast, contrast!


Unprompted Modals

With the advent of pop-up blockers in every major web browser, unwanted pop-up windows have all but disappeared.  However the use of modal windows has grown significantly, and they are heading down the road that killed off pop-ups.  Some people might know of modals as lightboxes, and they look something like this:

Modal trend: Unprompted modal restricts access to content.

These rebooted pop-up windows are very useful when done sparingly and in appropriate places.  An example of an excellent modal is to show enlarged photos when a thumbnail is clicked.  In that use case, they prevent separate page loads, and keep the user where they were.

But they are frequently abused, as in the case of the website screenshot above.  That website displays this modal on their home page without provocation.  This means every time someone visits their home page, they are assaulted by this message, whether they’ve seen it before or not.  Modals should NOT automatically fire on a page load.  Especially with an ad or a site registration form.  You are keeping your customers from the good stuff on your page.  Use modals sparingly and in a support role, when prompted, only.


Intro Videos or Animations

Ugh… These… I hate these!  I was so excited that we had been moving away from gaudy Flash videos and animations every time a website is loaded.  But now, with HTML 5, CSS 3, and JavaScript, this horrible trend is making a comeback.  I have honestly never understood the idea.  Maybe, and that is a big maybe, your intro is interesting enough for a first time visitor to sit through.  But what if someone wants to revisit your site for information later?  What if the person isn’t looking for the content your video provides, but what the page that eventually shows up after the video does?  Now they have to sit through that thing, or manually skip it if you are nice enough to provide a “skip intro” button.

This trend upsets me to no end.  If I want to find your address or phone number, don’t make me sit through a damn intro video to do it.  I have always avoided Flash like the plague because it is was abused by this intro fluff, and 95% of the legitimate uses for Flash could be replicated with some creative JavaScript and CSS.  Please let these die!  If you want a video, make a video and post it somewhere on your website or on YouTube.  Loading gaudy, unnecessary videos and animations is not what websites are for!



With very few exceptions, loading should be considered evil.  Waiting for content to load is unacceptable.  There are only a handful of seconds before a web surfer determines whether to stick around or not.  You want to impress upon them as much good information as you can in that time.  A loading message is not good information.  You should not have long loading, flashy content in most situations.  If you’re doing something that requires loading simply because you can or to showcase a skill or catchy talent, don’t do it.  Content is king, don’t overdo the presentation and sacrifice the content (a theme seems to be arising here).


One Page When Multiple Will Do

Look, someone has got to say it.  Sometimes content deserves to be broken up into multiple pages.  Yes, having everything on a single page and then scrolling through it, or using navigation to jump around can be cool, and keeps users from having to load pages.  It seems like a logical extension of the don’t reload the page paradigm that AJAX forms and data retrieval allow.  But please don’t put random, unrelated items on a single page.  It’s confusing, makes utilizing search engines a pain, interferes with social sharing, and deviates from what is expected for no good reason.  Each page of your website should have a single, well-defined, clear purpose.  When that purpose is fulfilled, make a new page.



These annoyances that I have listed can be done tastefully and effectively, but doing so requires careful planning and execution by a skilled developer and designer.  If you are a developer and/or designer yourself, remember content is what the visitor is looking for.  Your job is to present that content in an easily navigated, efficient, and logical form.  Please don’t abuse modern tools and design!

Comments & Discussions

    • John Morris

      Good point. It is indeed a manner of opinion.

      Personally, I have a short attention span when it comes to browsing the net. If a site doesn’t get straight to the main content within a few seconds, I am inclined to leave.

  1. Brian

    Paypal website .. Super annoying.
    Livestream website .. Super annoying.

    I get so pissed when I visit such sites. How do they even begin to think these “designs” are good? Yeah I get it, people are using phones, tablets etc. but surely a monkey can code a website to look for a particular platform and redirect.

    Sigh. Hopefully this bucket of awful never catches on. If so, I’m leaving the internet :)

    • John Morris

      “Bucket of awful” – Perfect description!

      Fortunately, I believe this is a fad. It’s nearly impossible to be a web designer today without being beaten until you kneel at the alter of “responsive,” “minimalist,” and “mobile-first” design. I think (or perhaps hope), once this reaches critical mass, and everyone is doing it, a new fad will come along and we’ll be swept into a new “bucket of awful.”

      It’s a shame because I like the principle of responsive and minimalist design. It used to drive me nuts when nobody’s website worked on my smartphone. The adoption of this design has done wonders for mobile web browsing. But now it’s being taken too far and giving us these glorified mobile websites for every situation and bringing back terrible ideas that had finally died.

  2. Steve Arlington

    To the author (who is undoubtedly American), the word is “too”, not “to”. How has an entire country forgotten something as simple as this?

    • Kyle

      Because it doesn’t really matter if the message is conveyed. Correct grammar only postures grammar nazis an opportunity to point out incorrect grammar. Did you still understand the meaning, or were you too dense?

      • pussydestroyer69

        @Kyle stop acting clever, steve was absolutely right. Too and to are not the same things.

        Your usage of too also proves that. Your last sentence means “were you also dense?” whereas you probably meant “were you to dense?”

        • Garry Freemyer

          I usually chaulk it up to auto incorrect. It generates so many errors catching them all is like trying to sweep every grain of sand out of a shag rug washed up on the beach.

          I shall never forget the time I sent an email to a company asking “How do I setup repeating events?”. Imagine my horror and rage when they replied asking me to elaborate on the question “How do I fetus repeating events?”.

  3. Web Design Genie

    Nice post but I don’t think introduction video has anything negative about it. I find small businesses’ introduction videos more to the point than TV commercials that are unrealistic.
    Just a thought


Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">