trending web design 2018

Web Design Trends 2018: What Will Make an Impact This Year?

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); the adoption of HTML5, CSS3 and the rise of front end javascript frameworks; 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 framed navigation 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. dursun website 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.