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?
Still experimenting with navigations 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.
Expect to see more experimentation as we work through trying to figure out how to do navigations and menus well.
To scroll or not to scroll
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’s 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.
Designing in modules and components instead of entire pages
Web design is moving toward modular and component design instead of mocking up entire layouts and comps for a particular web page. These components often involve designing how the search function will work, how the navigation will be laid out, etc.
We’ve matured into knowing that we have repeated elements on different screens, and that these elements need to be designed both so that they work independently but can still work with the rest of the site.
Not only are we more concerned about how these components look in terms of design, but they all carry their individual functionalities with it too. Designing with components and modules allows the same functionality to be replicated no matter where it appears on the site.
Design continues to flatten out
With responsive design pretty much taken over the Web, expect 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 who’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 more flat (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 takes off
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 Material design and I anticipate they will start opting to use it more in their designs as documentation and examples become more widespread.
Material design focuses around 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 material and don’t impact other material around it.
Since we’ve seem 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.
Ditching the stock elements for something better
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.
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.
Forms and inputs go full-screen
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).
Rich but subtle 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 every day 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.
Another example is Twitter’s controversial “heart” icon for likes over the star for favorites. When clicking the start icon, the animation wasn’t as detailed as the new animation for the heart icon is. It adds a little extra interaction to the design while being subtle.
Users are caring more about how a site functions than looks
Having a nicely 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 to 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.
Designers move toward designing in the 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.
