Looking back onto 2014 (and beyond), there have been a lot of new technologies, trends and techniques, which helped define the look and feel of many websites and other digital products. At present day a lot of those trends are widely practiced, but how useful are they and do they serve any real purpose to the overall user experience?

Here’s a list of some of the web design trends which I feel have greatly influenced and transformed many of today’s websites.

Parallax scrolling

From 2011 there was a sudden boom in parallax scrolling; many designers adopted the special scrolling technique to add an illusion of depth to their background images.

Parallax scrolling can enhance certain aspects of the user experience, but it does not necessarily improve the overall user experience.

Pros:

  • Adds a dynamic layer that has the potential to improve visual appeal
  • Subtle movement can attract the user’s attention and lead them around the website according to the designer’s intent
  • Allows content to be displayed on a single page and can help reduce user interaction to consume the content
  • Movement from parallax scrolling provokes the user’s curiosity and influence them to interact with content even more

Cons:

  • Extreme use could distract the user from focussing on more important content
  • Similarly to the above, excessive use of heavy animation could potentially take web pages longer to load
  • Requires more attention on media queries to ensure that they render properly on smaller screen displays and to function smoothly across all browsers
  • Some users may find parallax scrolling frustrating
Spotify website parallax scrolling effect
Spotify employs subtle parallax scrolling on its homepage

Fixed navigation

Also known as a ‘sticky’ navigation bar, this is a technique that is widely used in modern web design. A fixed navigation bar is positioned relatively to the to the browser window as opposed to the page itself, and follows the user as they scroll up or down the page.

Pros

  • Easy access to site navigation and content; the user is no longer forced to scroll back up when they want to navigate the rest of the site
  • Allows designers to incorporate important elements for easy access and even to persuade the user

Cons:

  • Reduces screen real-estate
  • Lack of support for mobile devices leads to potential of bad experience
Fixed Navigation on USA Today website
Fixed navigation on USA Today desktop website

The “Hamburger” menu

Nicknamed as the “Hamburger” or simply the “burger” menu, which is made of three stacked lines. The navigation menu icon is usually located in the top right of left corner of a website, and hints the user to click or tap to reveal more content.

Although the burger menu is widely used in modern web design (and particularly in responsive design), it has been under a lot fire and is the subject of many heated debates.

Pros:

  • Useful for organising large menus in responsive design
  • Allows the user to access content on small screen displays

Cons:

  • Increases lower discoverability; anything that is out of sight will clearly be ignored or even out of mind
  • The burger menu icon is not a strong visual representation of how it functions and may not be part of the user’s mental model
  • Even if the burger menu is part of the user’s mental model, it is less efficient than an instant navigation e.g., Twitter mobile App
  • Clashes with platform navigation patterns e.g., Google Chrome already features a burger menu
Examples of the hamburger menu navigation icon on small devices
From left to right: Booking.com, Fifa 2014 World Cup App, Rightmove App
Example of instant navigation
Example of instant or tabbed navigation on the Twitter App

Flat design

A minimalistic design approach that was greatly influenced by Apple’s iOS 7 and Microsoft’s new Windows interface. Clear and simple icons, less visual noise and a broad range of bold and vibrant colour are typical traits of flat design.

Pros:

  • Communicates messages more quickly
  • Likely to hold icons that can indicate universal actions or purposes
  • Reduces clutter and is less distracting
  • Quick for the user to grasp and store in their mental model

Cons:

  • Potential to lower affordance e.g., a flat button may appear less intuitive than a skeuomorphic button
  • Excessive use of flat design could result in sterile and emotionless design, or simply put, a lack of creativity
  • Over-reliance on colour can create huge problems for colour-blind users
Examples of Flat Design
From top left, right and bottom left: Windows 8, Apple iOS 7, 450 gsm

Responsive design

4-5 years in with this concept and a lot of large companies have either dismissed or failed to implement a mobile responsive website. Whilst a lot of designers, developers and consultants urge companies to go ‘responsive’, it is neither industry standard nor the answer as the ultimate online strategy

Pros:

  • Deliver content consistently to different devices
  • Quick, flexible and easy to work on most devices
  • Re-use code and content; no need to develop separate frameworks

Cons:

  • Potential to cause slow download speeds, especially for images
  • A poorly designed responsive layout can lead to more complex user interaction
  • Designing and testing can be difficult
  • Pre-existing sites require rebuild to accommodate responsive design

Responsive design Vs. Adaptive design

Checkout the responsive design vs. adaptive design article, which explores these trends in greater detail and poses various arguments.

The Work Cycle responsive website on a desktop on mobile device
The Work Cycle Responsive Website

CSS3 Transitions and Animations

In recent years, designers and front-end developers have taken a bigger interest in bringing their websites to life through the use of CSS3 animated effects. Transitions and animations have proved useful for dynamic interfaces and marketing communications

Pros:

  • Adds more depth and a visually compelling experience
  • Communicates a stronger and a more emotional message to the user
  • Subtle movement can be used to persuade the user to notice a key element in their peripheral vision; get the user to see what you want them to see
  • Great for marketing presentations; adds flow and curiosity

Cons:

  • Movement in the wrong places can distract and even annoy the user; e.g., avoid using animations in a checkout flow or an area where the user requires concentration
  • Unless the CSS or JavaScript is light-weight, there is a potential for too many animations to increase slower page load
Examples of CSS3 transitions and animations
From top left, right and bottom left: Animate.css, loading animation in Yelp App for iOS, CSS animation cheat sheet by Justin Aguilar