Web design trend predictions for 2016 - 2017

A departure from cookie cutter sites

Credit: Mint Design Company

While everyone is predicting what the next design trend is going to be over the next year, I'm more interested in looking out a couple of years. Looking at 2015 doesn't really make any sense at this point, plus these things take a decent amount of time to manifest. For companies that take their websites seriously, looking forward is the only way to start a new project. 

Let me start out by saying that I'm not a designer. Nothing I do shapes the future of the web in any way, I simply implement the real visionaries' ideas technically. My company builds a lot of business websites in between larger projects so I see the present state of things very clearly. The future - not so much. 

While the current trend has been done to death, it was a welcome design improvement when it emerged about 18 months ago. It's also brought responsive design to a huge number of sites which is a great improvement for mobile browsing. The wide/fluid background sections combined with long vertical scrolling, hero sliders, and parallax feature strips have become incredibly common for any site created in the recent past. Coupled with the ever increasing popularity of Wordpress and its booming theme marketplace, it has become hard to even tell sites apart anymore. Our website is guilty of this as well having been built at the start of this trend:

cn Cypress North

Looks familiar I'm sure. If we were to start building our site again today, I can tell you that we wouldn't want to follow this trend again starting now. If you want a site that will still look good or appear modern in a year or two, what are the strategies and techniques to implement? The best anyone can do is guess, so here are my guesses.

Renewed emphasis on originality

The biggest problem with the current design trend is that it's very difficult to be original when using it. Pretty much any site following this pattern will feel the same, regardless of the minor color and image differences. This is a side effect of mass adoption. Folks who got in early on the current trend are no doubt feeling stale today as the trend continues.

My guess is that this originality is going to come in the form of an increase in custom drawn elements combined with carefully produced animations. With the passing from grace of flash, a dearth of HTML5/JS/CSS3 animation libraries have sprung up to help with this. There is no one-size-fits-all technique for achieving this so most of the well done executions will involve a good deal of effort and planning. 

mint Mint Design Company

Evolution of 'flat' design

The world ditched gradients some time ago and switched over to flat design. Unfortunately not a whole lot of thought was put into that switch. Often it's simply the case where the gradient is eliminated by choosing a color from one end of the spectrum and using it across the entire element. 

material Google

With the introduction of iOS 7/8 and Android 5.0, flat design received the attention and implementation it deserved, though primarily on mobile. Android contributed a great deal to the improvement of flat design via its material design pattern and reference which extends beyond mobile and on to the desktop. The 'card' concept is a good one and the use of white space, shadows, intentions, and motion work together nicely to provide a layered approach to 2D/3D design.

I think that the card layout as a means to group content and make it more digestible will continue, but ultimately will change into something better. The current implementation is great for mobile but less so for large screens. I can see white space playing a big role in the future though. 

I also think that classic and minimal design will prevail with the next crop of modern websites. I expect the parallax trend to fall off and the giant background images to be pared back. A clean site with clear and consistent color choices ages much better than a loud, cluttered one. 

Micro Experiences

That buzz phrase is vomit inducing but I'm not sure what else to call it. Mini-apps? App within an app? Appception? What I'm envisioning here are self-contained workflows that grow as they are interacted with. For example, a homepage may have 3 or 4 call out areas that have an obvious intention like registration, a tour, product offerings, etc. Initially they will have a small amount of content geared toward the begging of interaction. Once you trigger a workflow it will launch a mini application that will complete its intended purpose. Clicking on a registration element will alter that area into a registration wizard either directly in that area, optionally changing its location and size, or in a modal window.

micro Seattle Space Needle

These experiences may be simple or complex, but they'll have the goal of simplifying the initial navigation paths while still presenting a variety of choices without being overwhelming. They'll also have the side effect of reducing page changes and scrolling for tasks which can be completed in a few clicks. Instead of the ubiquitous scrolling header image, these micro experience cells or cards can be self-contained showcases for a particular area of business.

This technique could be particularly useful in web applications where, instead of transferring to a new screen to enter some data or complete a task, the cell simply adapts to allow the task to be completed right there on the spot.

Reduction in page height

This is more of a hope than a prediction. The common belief out there at the moment is that this trend of more vertical scrolling and less clicking will continue to grow. Personally I think that is a lousy experience. I like the use of scrolling as a way to phase in small portions of content or trigger animations, but I don't like it as a means to view an entire site

If sites were to consider their content and the goals of the interaction a little more, clicking to trigger a drill down into the site wouldn't be such a bad thing. Combined with micro experiences and modern front end programming, a mouse click or screen tap doesn't have to mean a jarring page refresh any longer. How people got to a point where you have to scroll or swipe 50 times to view the primary site content is beyond me, but I think sense will prevail in the next iteration. 

Focus on typography

Now that the web has grown up in terms of available typography, largely thanks to Google Fonts, developers and designers are no longer constrained to Arial and *shudder* Comic Sans for compatibility. 

fonts Google Fonts

I'm guessing that more care is going to be taken with choosing fonts, font sizes, and weighting in the near term. This has already started to happen in the better maintained sites but has yet to make its way to the majority of the web. It's a small but difficult change that makes a huge impact on the perception of a site. In fact, some of my favorite sites have become so due to their attractive and legible font choices.

So long and thanks for the step forward

Right or wrong, these are maybe my hopes for the future of web design more than a likely outcome. I'm itching to see the current style fade but truthfully it was a big improvement and a march forward into mobility, interactivity, and high res photography. Where do you see web design heading through 2017?

ITWorld DealPost: The best in tech deals and discounts.