eb design lives at the intersection of form and function. It makes sense, therefore, that web design trends are heavily influenced by technology, be it the types of devices we use, their processing power, the sophistication of our browsers or the programing libraries available to us. But they’re also impacted by design principals and philosophies.
>> Check out the 2018 web design trends
web design trends 2017
The past few years have given us several technological shifts and advances, including:
the rising popularity of mobile devices;
the introduction of native, in-browser 3D support (via WebGL);
and increased network bandwidth (both on mobile and home internet).
These technologies have combined to create a huge shift in the web design paradigm, creating, most notably, a responsive (or increasingly mobile-first) design philosophy.
On the aesthetic side, 3 years ago flat design reigned supreme. And then Google introduced Material design, which brought us slightly out of abstraction. 2017 marks the year design takes one more step back into reality. Whether it’s through form, color choice or functionality, 2017 is a year of hybrids, where reality and technology collide to create a seamless browsing experience.
Here are the 9 web design trends we think are going to bridge that gap:
1. Menus that defy navigation paradigms
Since dark ages of web design (i.e. 20 years ago) there have been two standard types of navigation: top and sidebar. With the rise of responsive web design, we’ve seen the addition of the hamburger menu to this short list. The hamburger is a workable solution for mobile, but it’s not perfect. It’s been accused of:
hindering user engagement;
having low discoverability;
being less efficient (both for users and design/development teams);
and even of “having no smell.”
With these sorts of mixed, ambivalent feelings, and the continued rise of mobile browsing, we expect to see a lot of menu experimentation in 2017. Here are a few ways to buck the burger trend:
Make your menu a frame
Hillsiderancho.com uses a unique framing menu that combines top, left, right and scrolling navigation.
Don’t use a menu at all
Users don’t have to be told what to do on websites anymore; they understand the action of scrolling and will naturally do so until they find what they want. Some designers are choosing to ditch the menu almost entirely and allowing users to find content organically as they explore. With mobile and tablet becoming more popular, this also opens up opportunities for side scrolling.
no menu web design trend
The Anonymous Hamburger does not use a menu and instead asks viewers to scroll to access more content.
Embrace the hamburger and make it the only way to navigate
Rather than design two different menus, one for desktop and the other for mobile browsing, many sites are opting to make the hamburger ubiquitous. Since people are learning those three little lines = menu, there’s no need to take up screen real estate with an actual navigation bar anymore. Of course, you don’t have to use the actual hamburger icon. We’re also seeing designers start to play with typography to indicate where a user should click to access the menu.
The Dursun website uses a hamburger navigation on all versions of their site, including desktop.
Dess uses the word “all” to let us know where to click.
Marmo Elite replaces the hamburger icon with stacked typography.
Pop the menu up
We’ve been so blinded by the “drop-down” paradigm that we’ve failed to explore a simple alternative: navigation that pops up! (Or, as is the case in this example, pops to the middle of the screen.) There are lots of places to place a menu that make it visible and accessible that aren’t necessarily top-down.
pop up menu design trend
Clicking on the elegant hamburger in the sidebar prompts a centered popup navigation menu. Via circlesconference.com
Or pop it over
A variation of popup navigation is the “popover,” which covers the entire page with the navigation. It’s bold, but still feels natural. It’s a bit of a callback to table of contents sections in print publications.