2016 Web Design Trends

The following 2016 web design trends will keep you informed of what to expect in the ever-changing tech industry.

Author credit: Amber Leigh Turner

Design trends often span several years (even decades for some types of design), but Web design is a quickly moving and changing industry where trends come and go quite often.

We’re still working with some of those trends now: responsive web design, flat design, performance and speed, and perfecting the user experience. However, what are some of the new and emerging trends we can expect to see in 2016?

Let’s look through some of the trends we can expect to see more of this year.

Navigation and Menus:As a Web designer myself, I’ve noticed we just can’t seem to get the navigation or menu of a website down. We keep playing with it, experimenting, and doing different things to get it to work well and be useful.

We do things such as put it in a new and unexpected place, hide it behind a hamburger icon (a trend I mentioned for 2015), or just throw it up there because we know it is needed but it doesn’t look very good.

We struggle to figure out exactly the best way to showcase this important piece of content to make it usable no matter the screen it’s being viewed on. We continue to experiment in ways to figure out what works best. For example, Shellshock above is experimenting with both the hamburger icon menu reveal with a card inspired layout for their navigation.

Expect to see more experimentation as we work through trying to figure out how to do navigations and menus well.

Scrolling: Have we reached the point where scrolling increases readership, but we want less scrolling? Possibly. For 2016, I anticipate some sites going with minimal scrolling while others embracing the long scroll.

There are benefits and drawbacks to both: long scrolling feels natural and is easier than clicking but it spaces out content and makes it harder to scan to find info while shorter scroll gets to the point quickly but it may be so quick that causes bounce rates to increase.

Above, Uppercase has opted to go with a no-scroll site. What you see in the screenshot is what their site currently loads. All of what you need is right there without needing to scroll further.

It will be interesting to see the scrolling battle play out in 2016 and which one comes out on top. Currently, there are more long scrolling sites than shorter scrolling sites, but only time will tell which is truly the best way to consume content.

Module design: Have we reached the point where scrolling increases readership, but we want less scrolling? Possibly. For 2016, I anticipate some sites going with minimal scrolling while others embracing the long scroll.

There are benefits and drawbacks to both: long scrolling feels natural and is easier than clicking but it spaces out content and makes it harder to scan to find info while shorter scroll gets to the point quickly but it may be so quick that causes bounce rates to increase.

Above, Uppercase has opted to go with a no-scroll site. What you see in the screenshot is what their site currently loads. All of what you need is right there without needing to scroll further.

It will be interesting to see the scrolling battle play out in 2016 and which one comes out on top. Currently, there are more long scrolling sites than shorter scrolling sites, but only time will tell which is truly the best way to consume content.

Flat design: With responsive design pretty much taken over the Web, expect a flat design to continue to be a dominate design aesthetic throughout 2016. Not only will there be websites that launch with flat designs, those sites that’ve already embraced the flat design trend will look to make things even flatter.

Take for example Google’s logo. The company changed its logo to make it flatter (losing the bevels) and changed the font. It found that a cleaner sans-serif font for its logo helped cut the size of the logo file used on sites by more than half. Google also found that it was easier to read on smaller devices.

This includes updates to logos (like Google), icons, images, and other elements that maybe didn’t get fully flattened the first first time. You can thank the drive and determination to get our websites to load faster and snappier, weigh less, and get content to viewers more effectively.

Material design: Google released its Material design language back in June 2014 but the adoption has been a bit slow. However, designers now have a better understanding of the Material design and I anticipate they will start opting to use it more in their designs as documentation and examples become more widespread.

The material design focuses on tactile but dynamic elements that remind us of paper and ink. Shadows that are realistic, items that overlap do so with regards to reality, interactions stay inside of the material and don’t impact other material around it.

Since we’ve seemed to have reached peak flat design, designers are opting for the next thing, and Google offers that up in their Material design language. I anticipate many more sites to follow this same material design aesthetic in 2016.

Ditch stock elements: We’re starting to see more and more websites ditching the use of stock elements such as stock photography and icon sets over something that feels much more designed and personal to the site itself.

Some websites are opting for using their own photography for use on their home pages or blog posts instead of picking a stock photo. Other websites are ditching stock photography for videos, infographics, or even GIFs to help convey their message. For example, Flatiron Health has opted for their own photography in areas of their website to help be more inviting and personable and less corporate.

Icon sets are another stock element that’s being dropped in favor of something more custom. There are thousands of sets out there, so it’s easy just to pick one and run with it, but for designers, they’re noticing that little extra touch to create custom icons can help set a site apart from others.

Full screen forms: Much like I talked about a year ago with responsive Web design practices being carried throughout an entire website instead of just the mobile versions, this trend also has come from the wide-spread adaptation of responsive website design.

More sites and apps are going with the full-screen forms and input screens (such as signups and logins) instead of it existing in only one small part of the site. Click on “login” and or “contact” and you may be greeted with a full-screen overlay with the form needed instead of being sent to a different page. A great example of this is Eighty East’s contact form. When clicking “contact” you get a full-screen contact form.

As mentioned above, this trend comes from responsive design best practices for several reasons: keeps another screen from being loaded, gives more screen space for easier touch by fingers on touch screens, and encourages users to complete the form (for those forms that present one input at a time).

Animations: As Web design is flattening out, websites are starting to look more and more alike. One way designers have been trying to help make their sites stand apart from the crowd is through the use of rich, clever but subtle animations throughout.

Designers are opting for changing the everyday animations we’ve all grown accustomed to but still serve a purpose. For example, Slack’s own loading screen takes that boring circle loading animation and ditches it for a custom loading animation featuring Slack’s own logo. It still serves the purpose of letting the user know it’s working, but in a clever and rich way.

Better function: Users are caring more about how a site functions than looks
Having a nice design site is great and all, but it really doesn’t matter all that much if your site doesn’t function well. Users are becoming more keenly aware of when something doesn’t work properly on a website.

It’s becoming more common for users to leave a website because they’ve encountered something that isn’t working well for them. Imagine how bad this could be for an e-commerce site?

Designers want their sites to look good, so it’s important that they can make the site function properly as well. Give the people what they want: function and design.

Designing in browser: Some Web designers currently design only in the browser. There are benefits to this: cuts development time down, allows you to see the limitations and reactions of the actual browser with regards to the design, and is more natural than designing in a program that has nothing to do with the Web.

It’s pretty common for Web designers to know how to code at least the front end of websites (HTML/CSS/JS), so designing in the browser makes sense to them. With the trend of Web design moving out of Photoshop, Illustrator, and Sketch and into the browser more, I anticipate many other Web designers starting to work on their HTML and CSS chops.

What are some design trends you anticipate for 2016?