Trends in web design, like fashion trends, come and go. Sometimes trends are dictated by necessity (like responsive design). Other trends are industry shifts, such as the change from skeuomorphism to flat design.
The decision to follow a trend must depend on the needs of your users and your business. The decision should never be based solely on “it’s what the cool sites are doing”. Fads fade. A site built only on trends quickly becomes out of date.
With that in mind, let’s look at the design trends that you might want to think twice about using.
As mobile devices became commonplace, designers started simplifying navigation and hiding it under a hamburger menu. It’s a trend that’s also crept into the desktop version of websites.
For example, the Squarespace site uses a navigational drawer across its site, regardless of device.
As you can see in the image above and below, the global navigation is hidden in the ubiquitous hamburger menu.
It’s understandable why this is appealing. Placing navigation under a hamburger menu makes a site cleaner, sleeker. And most people are familiar enough with the pattern. But this isn’t something that works for every site and can reduce discoverability.
The consequences can be harmful for e-commerce sites and news sites, where discoverability of topics and items is critical to the experience. As explained in Web Design Trends 2015 & 2016, forcing users to open the navigation menu in this situation may create unnecessary friction.
On Time’s website, you’ll find a variety of news topics hidden in the hamburger menu. However, Time combats the discoverability issue with a ticker on the side of recent news stories. There’s also a search feature prominently atop the ticker.
As pointed out in an excellent Nielsen Norman Group article, “Killing Off the Global Navigation: One Trend to Avoid,” hidden navigation could still alienate users.
As writers Jennifer Cardello and Kathryn Whitenton point out:
“Even if the global navigation is difficult to design and hard to maintain, most sites will still be better off showing top-level categories to users right away. It’s simply one of the most effective ways of helping users quickly understand what the site is about.”
As they point out, here’s a couple ways to tell if hiding global navigation is for you:
User behavior determines whether you should use a hidden navigation drawer on a full-desktop site. Don’t sacrifice usability and discoverability for pure aesthetics.
These days, carousels seem to be everywhere. They can add visual interest and reduce clutter. But with their overwhelming use, they’ve made a lot of sites feel cookie cutter.
Not to mention, there’s an argument that this is one trend we should put to rest.
A few things to consider:
All of this is not to say that you shouldn’t use carousels at all in your designs, but you should have a good reason for their inclusion aside from that the client likes it. Carousels can work, but they should be carefully crafted and optimized to ensure that they don’t compromise UX and accessibility.
The sliding animation powering carousels, for instance, is certainly a useful tool for other design elements. For instance, you can try a sliding navigation drawer for your mobile viewport. As shown in the below prototype created in UXPin with the no-code animations editor, the sliding animation allows the user to “shelve” and reveal content as needed.
Unlike a carousel, a sliding animation doesn’t require a user to scroll through multiple frames. The content simply pops in and out of view as required.
In recent years we’ve seen more sites appear that make use of parallax scrolling.
The parallax technique allows the foreground and background content to scroll at different speeds, creating an illusion of depth. It can be used to very good effect, but it’s debatable if it can be described as having good UX.
Parallax has a few potential issues:
However, parallax scrolling can add another dimension to a site and allow it to stand out. But as we listed, there are trade-offs if you want to create a site that works on both desktop and mobile, then parallax really isn’t for you.
And it is, even if it’s a little cartoon-like, it’s quite well done and tells a story as you move down the page. This is the strength of parallax scrolling; it allows you to effectively tell a story using mostly graphical elements. The page above has imagery, text and video embedded into it, so we put it into GT Metrix to see how it stood up to scrutiny when it came to speed.
As you can see, the page has a score of A from PageSpeed and C from YSlow. That’s not terrible, but take a look at the page load time … it’s 18.2 seconds, which is hugely slower than most commercial sites that you’ll come across (according the GT Metrix, the average is 6.6s).
According to GTMetrix, the site should also – amongst other things – avoid character sets in the meta tag,
“The following resources have a character set specified in a meta tag. Specifying a character set in a meta tag disables the lookahead downloader in IE8. To improve resource download parallelization, move the character set to the HTTP Content-Type response header.”
Other tips include:
So if you’re considering creating a parallax site, ask yourself if the story you want to tell is worth losing visitors due to a reduction in performance. Parallax has to be done well and it has to be a little different in order to capture and hold the attention of the user.
Remember back in the day when you might hit a website only to be greeted with a Flash animated load screen that you were forced to sit through before you could enter a site? Users will bolt from a site that takes more than 10 seconds, and that could affect your bottom line.
In the example above, you have to sit through a flash video that lasts 41 seconds. There’s no clue as to what the site is even about. And there’s no navigation, leaving users perplexed.
We can assume the site has something to do with filmmaking, but there’s nothing really to confirm our assumptions. The Apple icon allows you to open the video in iTunes, but the URL when entered on iPad just says server can’t be found.The second example above is somewhat tedious and you find yourself watching the counter slowly climbing to 100%. As the image and percentage counter is right in the center bottom of the screen, it’s also quite dull.
The second example above is somewhat tedious and you find yourself watching the counter slowly climbing to 100%. As the image and percentage counter is right in the center bottom of the screen, it’s also quite dull.
However, when the page does finally load, it’s clear what the site is all about. And that could leave you wondering why all the build up.
In this example, the load screen could be created using the below only, which wobbles when you hover over certain elements. It’s just enough to hold your attention. The interaction is fairly simple, it’s clear that when you hover over certain elements that they can be used and this also means it doesn’t affect performance too much.
Here’s a good example of a fun, interactive screen load that makes good use of graphics and sounds. Initially, it loads the graphics by bouncing them in one at a time, with a rocket at the beginning. It fully loads in around four seconds and uses simple music to keep things interesting.
Once the screen is fully loaded, there’s plenty of interactive options. Elements bounce in quickly and the navigation options are clear. Moving the mouse around also moves the stars in the background. This creates consistency with the load screen and also pays off for the user waiting.
While you can use multiple typefaces, I generally wouldn’t recommend more than two.
Too many typefaces creates a confusing and cluttered looking site, which reduces legibility and readability.
However, rules are made to be broken and there’s nothing to say that you can’t use more than two typefaces to good effect.
The example below from the UXPin site uses fonts from the same family (Proxima Nova), a tactic that works quite well for clarity. However, spacing is important too and it’s not essential that they should be from the same family, just that they work well together.
Here’s a few tips:
Some fantastic trends have emerged as best practices in recent years.
Minimalism inspired a raft of sites that are clean, fast and easy-to-use. Meanwhile responsive web design helps many businesses worry less about designing for a constant stream of new devices. Good trends come along and tend to stick, but there will always be some that are ill thought out.
Above all else, user needs must inform your design the most. When a new trend pops up, always consider it from every angle before following the crowd.
For advice on the 10 most useful web design trends, check out the free e-book Web Design Trends 2015 and 2016. The book includes 100 resources and analysis of 166 examples from companies like Google, Apple, Reebok, Intercom, Adidas, Dropbox, and others.