Trends, by their very nature, come and go. In website design, some – like responsive design – evolve as an adaptation to newly emerging technologies, while others – such as the rise of flat design – reflect industry shifts in aesthetic preferences.
Before incorporating any trend into your site, you must evaluate whether it will enhance the experience of your users and help you advance your business objectives. You should never employ any design element just because it’s popular, especially if it runs the risk of causing annoyance or frustration to your users.
Here are seven trends that are common in modern website design that you should avoid – or at least explore whether your business and your visitors might be better served by a different, more user-friendly approach.
Here’s one trend that can present an obstacle to your visitors before they even reach your site. You’ve undoubtedly encountered such an experience any number of times during your travels around the web: You click a link to go to a website, and a large pop-up window appears on the screen, obscuring your view of that site and prompting you to take action before accessing its content. These are most often deployed in the form of a call-to-action soliciting you to sign up for an account or subscribe to a mailing list in exchange for a discount on your next purchase.
These popover interactions certainly command users’ attention in a way that a more subtle approach may not, and they have actually been shown to be fairly successful in garnering conversions. The problem, of course, is that you risk alienating visitors who are so annoyed by the in-your-face nature of the popover that they may just elect to leave your site altogether.
If you choose to use a popover interaction on your site, the following best practices will help to ensure that you minimize inconvenience to the user and optimize your chance of achieving a conversion. First, if you’re going to disrupt a visitor’s experience on your site, you should offer them something of value in exchange for doing so, whether that’s a discount or a freebie (usually in the form of value-add content, like a newsletter). Second, make sure that the action you’re asking the user to take is very clear and can be completed in a single step. Likewise, ensure that there is an obvious and prominent close button, so if they choose to decline your offer, they can quickly and easily continue on to your site.
Finally, make your popover as intelligent as possible. Consider adding programming logic so that a return visitor is not presented with the same pop-up every time they come to your site, which becomes quite tiresome on repeated visits.
Years ago, a template website was synonymous with poor design, since the ones that were available looked embarrassingly amateurish and cookie-cutter. Today’s templates and themes have come a long way, and there plenty of professionally designed options available at little to no cost. The problem, however, is not in the quality of these designs, per se, but in what you lose by using them.
First of all, there is a general overuse of themes and templates in the industry as a whole, which is why so many sites look the same. As a result, by using a one-size-fits all design, you sacrifice the chance to create a truly unique and impactful website experience that your visitors will remember, return to and share with others.
Also, by using a template, you forego the opportunity to start from the ground up in molding and shaping both the design and functionality of your site to perfectly fit the specific needs of your company and your audience. While it is true that a template can be nothing more than a starting point that can be customized to a certain extent, few companies ever go this far because doing so negates the primary benefits of using a template in the first place (i.e., time and cost savings).
If you are kicking off a website development (or redevelopment) project, invest in a design that is specific to your company and your requirements. There are certainly ways that you can reduce the cost of that project to fit within your budget, but sacrificing the custom design phase should not be one of them.
One trend that designers love is the use of oversized background images, as these create a major visual impact on first impression. However, sometimes these aesthetics, as lovely as they may be to look at, might overshadow or impede the communication of important information to your visitors, as they force the user to either scroll down or click to another page to get to the real “meat” of your site.
The use of full-screen background images on the Artsn website is the perfect marriage of form and function, as the beautiful, oversized product photos perfectly convey the brand’s signature handmade craftsmanship in a single glance.
However, if your brand’s story cannot be as succinctly summed up in stunning visuals, these types of images may actually be a hindrance to your cause, as they can take up valuable on-screen real estate that would be better served by another type of content.
Hamburger menus – so named because they are represented by a three-bar icon that looks like a hamburger and signifies an expandable, sliding drawer-style navigation that contains links to all major sections or pages of a website – have become increasingly commonplace as designers turn their focus toward making sure that all sites are mobile-friendly. The following examples from CNN’s website illustrate how these menus look when collapsed versus expanded.
The benefits of hiding an extensive navigation menu in this manner are obvious – it creates a cleaner, sleeker look and feel, especially for mobile users who must negotiate your site with minimal screen real estate.
The risks, however, can be great – especially for e-commerce or content-driven sites, as hiding key navigation options under a hamburger menu can limit a user’s inclination to delve deeper and discover the full breadth and depth of products or content available to them. Therefore, if you are going to employ a hamburger menu, it is best practice to also show your top-level navigation categories to users right away, as this remains the most effective way to help them quickly understand the scope of your site and what it has to offer them.
Parallax scrolling is an effect that allows content objects in the foreground and background to move at different speeds. The benefit of this technique is that it creates a major visual “wow” factor by adding a sense of depth and motion to the experience that can help to draw visitors in and engage them in the story you’re trying to tell. The Porchevolution site is an excellent example of how parallax scrolling can be deployed to great effect when done well.
If you are going to use parallax scrolling on your website, be smart about how you do so. Make sure it truly serves to enhance the visual presentation of your brand and that it’s optimized to minimize load time. Do not sacrifice function (how quickly the site loads) for form (how awesome the site looks and interacts).
Another potential scrolling pitfall involves combining infinite scrolling with footer content.
Infinite scrolling is yet another example of a trend that has emerged as an adaptation to today’s mobile-friendly web design culture. Rather than traditional pagination where a user must click to navigate from one page to the next in order to view more content (a common practice of catalog-style e-commerce sites), infinite scrolling continues to load more content automatically as the user scrolls down the page.
This mode of exploring content is an especially nice convenience for users on touch-based devices, who can browse all of the content available to them with the simple flick of a finger rather than having to negotiate tiny pagination buttons to move forward or back.
The problem comes when combining this mode of navigation with important and useful content in the website’s footer, as the user is forced to “chase” this content down the page until all of the content above has been loaded – a mild annoyance at best.
Here’s an example from DVF.com that illustrates why this is so problematic:
If you’re perusing the selection of dresses, it’s quite convenient to have the entire collection made available to you as you scroll down the page. Unfortunately, there are other important elements buried in the footer – social media links, a call-to-action to join the brand’s mailing list in exchange for a discount, store locator, customer service information and contact details – that are not accessible until you scroll through many pages and hundreds of dresses.
Moral of the story: if you wish to employ infinite scrolling to display your site’s content catalog, make sure all critical informational and navigational elements are accessible via the header, not the footer.
Whereas website designers were once restricted to using only a handful of web-friendly fonts, the choices are now much more bountiful and wide ranging. However, this is definitely a case of just because you can, doesn’t mean you should.
Combining too many different styles of typography on a page can be confusing to the eye and makes it difficult to establish a strong visual hierarchy that helps the user quickly identify and understand the most important information being presented.
A general rule of thumb is to use no more than two or three different type styles on a page. Multiple fonts work best together when they have similar proportion and scale and when they are well balanced in size, leading and measure. Look at specific characters in each font to see how similar they are as well as entire words.
In choosing your font selections, you want to make sure that you maintain a clean and streamlined presentation that reflects your brand’s visual style and personality. Just like colors, fonts elicit specific emotional responses from the viewer. For example, serif fonts convey an air of formality and traditionalism, whereas a script font might carry with it the perception of artistry and opulence.
Web design, like all forms of art, will always be subject to trends and new approaches. The mark of a successful website design is knowing which trends to use, which ones to avoid and how often you should evaluate the choices you have made so that you can change course as needed.Jeremy Girard