15 Web Design Trends to Look for in 2016

Yay, we’re here! 2016! The beginning of the year is always the perfect time to talk trends. Web design trends in particular.

The year 2015 has surely brought a lot of interesting things, new approaches, new design styles, new technologies, new tools, and so on. But what’s to come in 2016? Well, today we find out. Here’s our list of 15 web design trends to look for in 2016:

1. Designs being 100% mobile-first

Mobile web is here to stay. This seems like a natural thing to say. But don’t forget that up until recently, making your design mobile-friendly basically meant introducing some changes to the desktop version of the design. In other words, you started with a design meant for desktop browsing, and only then made it mobile-friendly.

This already works pretty much the other way around these days, and it’s likely to remain the new standard in 2016.

Mobile web is just too huge to ignore. According to various stats, US adults now spend more time consuming media on mobile (51 percent) than on desktop (42 percent). In an environment like that, it’s no wonder that websites should be designed for mobile first, and only then adapted for desktop computers.

2. Simplifying website navigation

So we’ve covered the mobile-first thing above, but let’s stay on the topic for one more minute.

What I want to talk about specifically, is the trend of simplifying the traditional website navigation.

I’m talking about things like the hamburger icon and every sub-trend that follow suit.

At first, the hamburger icon was meant for mobile devices, as a way to hide the main menu on a small screen and make the rest of the page more readable – putting additional focus on the main content block. Makes sense, right?

But then, since we’ve started transitioning to a mobile-first era, hamburger icons begun to appear all over the place (not only on mobile, but also desktop).

Currently, many – even mainstream – sites have opted for this simplified model of navigation. For example, here’s what Time Magazine does:

time

This trend is likely to advance into 2016 and going forward. It makes most designs look sleek and a lot easier to grasp for a first-time visitor.

However, this also has its flaws. While the page that the visitor is looking at indeed is easier to grasp, the question, “How do I get to other content?” becomes more difficult to answer with every new step towards simplifying navigation. I guess we’ll have to wait and see where this gets us.

3. Single-page websites bonanza

If I were to point out one main trend that got incredibly popular in 2015, that would be single-page websites.

The idea is simple. If you’re building a site that might not have that much content to offer its audience, why not just present all of it on a single page?

This is especially true for small business sites, sites for apps, or small service sites.

More so, single-page sites are also great at telling a story. They guide the visitor nicely from section to section until some main important goal is achieved.

In the past, the problem with that whole idea was that we didn’t have good enough CMS technology that would do the heavy lifting. Basically, crafting such a design required too much manual work (with things like JavaScript and etc.).

Nowadays, however, there are multiple tools, ready-made themes/templates, and libraries to help us out. A good single-page design can be brought to life quickly, it can feature nice transitions between individual blocks on the page (with animation), and even offer custom functionality (like contact forms, “buy” buttons and so on).

Lastly, this type of design is surprisingly friendly for mobile viewing. Single-page websites encourage the visitor to scroll, and scrolling is the native thing you do on a touchscreen.

Speaking of scrolling:

4. Parallax scrolling

Parallax scrolling effects are really cool if you ask me. In short, they’re all about creating an illusion of 3D motion and depth by altering the speeds at which both the background and the foreground scroll.

When done right, it gives the website this unique feel and makes everything very pleasing on the eye. Not to mention dynamic.

The most common application of the parallax effect is to use either one image in the background, two images (one “closer” to the screen than the other), or even a video, and then to put a block of text in the foreground.

Demo:

parallax-demo

The trend is likely to extend into 2016, and we’ll probably see some new and creative ways of utilizing it on websites.

5. Grand hero sections

I really don’t know why we love hero images so much. They’re big. They take up all of the space above the fold. They keep the visitor from consuming the actual content on the page. Yet … they’re still cool.

Exhibit a):

huge-hero

All signs on heaven and Earth indicate that hero sections are here to stay. Only, in their modern iteration, they feature not only images but also videos, plus they utilize the aforementioned parallax scrolling effects.

6. “Looking-the-same-ness” epidemic

Okay, so this one could probably find its place in any post titled, “Design Trends for the Year X.” Every new year brings some level of looking-the-same-ness with itself. And I’m afraid 2016 won’t be any different.

The most likely design style to take over in 2016 could be this:

common-design

In short, that’s a very minimal style, stripped of specific design elements (like borders, boxes, interface graphics), and instead relying on good stock imagery in the background (at full width), large fonts and overall short copy in the center part.

Two more examples:

common-design-2

common-design-3

The parallax scrolling effect is also very commonly found on this type of sites.

7. Material design on websites

The first time we heard about material design was during Google’s I/O keynote back in 2014. It was somewhat of a game-changer for the Android app design space, and an attempt to make Android easier to grasp on an app-to-app basis.

(We talked about this in a bit more detail a while ago.)

Nowadays, material design also slowly finds its way into web design, and not only for mobile devices, but for desktop as well.

A good example of this is the floating action button. It’s this small button that sits in the bottom right corner of the screen and is meant to make the primary action of the UI more easily accessible to the user.

floating-action

Image by Jay Lee on Behance.

On mobile, it works. It’s where your thumb is, so tapping the button feels very natural. On desktop, maybe not so much. But time will tell.

At the end of the day, material design feels like the “next step up” from flat design (with those added shadows, animation effects, etc.), so we should expect to see it more and more across the web.

8. More cards

Cards! Cards everywhere!” – just about sums it up. Card design has become very popular as a web design trend during the last 12 months.

The style is successfully used on sites like Google Now or Behance.

behance

Overall, cards seem to serve their purpose as a great way to organize content, make things mobile-friendly and cross-device consistent. Not to mention handling large amounts of content quite well (Pinterest taught us that).

The trend is expected to follow into 2016, with possible more “on-card” options and actions available.

9. Web pages growing in size

I was a bit stunned when I first saw this next piece of statistics. As it turns out, the average web page has been growing in weight consistently for at least five years straight.

Here’s the story as told by HTTP Archive:

  • Dec 2010 – 705 KB,
  • Dec 2011 – 960 KB,
  • Dec 2012 – 1285 KB,
  • Dec 2013 – 1701 KB,
  • Dec 2014 – 1953 KB,
  • Dec 2015 – 2219 KB.

web-page-size-2015

If you ask me, it doesn’t seem like the trend is going to stop in 2016…

10. Typography taking over

Remember the times when you could basically use only Arial, because you were risking making your design not web-friendly otherwise?

Nowadays, there’s a wide variety of web fonts to choose from, which makes designs much more diverse overall.

And it’s not only that we see more fonts in use on the web in general, but also more fonts used on a single website, rocking some creative combinations.

Not to mention the things you can do with text these days thanks to all the CSS trickery. Shadows, animations, transitions, you name it.

We’re probably going to see much more creative typography in 2016, or even entirely typography-based designs.

11. The “blur up” method

Blur up is a very interesting concept. It helps load large images by doing a rather clever trick. Facebook actually reports that it speeds up their pages by as much as 30 percent.

The whole idea is to take a really small version of a large image, apply some Gaussian blur to it, display it in place of the original, and then gradually load the large image in the background. This looks much better than having no image at all or looking at the image loading in the background the traditional way.

(How-to + explanation if you’re interested.)

A really cool trick that we’re likely to see more of in 2016. After all, copying Facebook’s design choices has become somewhat of a standard.

12. “Loading” animations

Loading animations are making a strange comeback. I mean, I thought that we done with them somewhere mid 2000s. It was at that point that we finally had the hardware that was able to load any application we might have on our computer without the need to display a loading icon. You don’t see those on your smartphones or tablets either.

Yet, in a rather strange turn of events, loading animations (or icons) are back on the web.

… On second thought, keeping in mind the thing about the average size of a web page being constantly on the rise since 2010, the need for loading animations is maybe not that strange.

The purpose is simple … to entertain the visitor while the page is being loaded. But what it actually says is, “We’re comfortable having you wait!”

Not a particularly nice trend, but with growing weight of web pages it’s probably here to stay.

13. Custom homepages will definitely stay

A custom homepage is an interesting invention. Basically, it’s meant to take the main purpose of the site – its main goal – and put it on steroids by introducing a highly optimized look. That look is meant to grab the visitor’s attention and don’t let go until they’re led to a specific action … if that makes sense.

Custom homepages are basically a kind of a landing page. To some extent, they’re different from the rest of the website design and often more visual too.

At the end of the day, a good custom homepage provides a better way of welcoming a first-time visitor and is more effective at telling a story. Here’s a great example of the idea being executed (although not an actual homepage).

14. Sliders will probably stay

Most web designers hate sliders and carousels. Especially if those are meant to showcase some content on the homepage.

So why are they still in use? My guess is that it’s just too hard to convince a client that a slider will possibly do them more harm than good, despite that it might look kind of nice.

Sliders have their flaws, a lot of them, actually. They’re bad for SEO, they make content invisible (instead of putting additional focus on it), and they have a negative impact on loading times.

Yet … they still look good. That’s probably why we’ll see them in 2016 as well.

15. The death of non-responsive design

Granted, this is more of a wish than an actual trend.

Nevertheless, it’s about time for non-responsive websites to just go. We don’t need you here!

So what do you think about what’s coming in 2016? Are there any interesting web design trends we’ve missed?

Get Started

Free TrialInspired by what you've read? Kick off your next project with Dreamweaver. It's part of Creative Cloud. Download a trial for free!
  • Great article. I’m with you on the design for mobile first. But I’m having a hard time finding tools to help me do that. Could you let me know of any you are aware of? Even squarespace/wix, etc are all desktop first and you can’t edit it in the mobile view.

  • Thomas Heideman says:

    Great job on this page (Friendly sarcasm)

    Im reading this in my mobile, and as I scroll past the first point “1. Designs being 100% mobile-first”, I come across the headline “Simplifying website navigation” that’s running of the page.

    I would like to suggest that the #1 trend in 2016 (and every other year) should be that “great design is about the details”

  • Dean Flory says:

    Diggin’ the Blur Up technique on the background image.

  • Tabor Carlton says:

    I would personally use caution in the ‘mobile first’ approach. This entirely depends on the client you’re building for – I do work for a lot of B2Bs, a lot of their analytics show that their users are still overwhelmingly using desktop to access their sites. This is just good philosophy to approach any design though… know your audience.

  • Saurabh Sawla says:

    Wonderful post! Thanks for letting us know the top 15 website design trends for 2016, this would surely help the website designing companies across the globe build creative and modern-age websites. I recently got my website designed from a professional website design company, IZISS Technology which has created my website with the latest website design tools, techniques and technologies. Nice share !

  • Donald loggins says:

    Great points on the mobile future, but I was hoping Adobe would port it’s web design software to an iOS app. Dream weaver as an iOS app would be the gold standard of web creation apps.

  • Francisco Javier says:

    4,5, and 6 are really big with everyone, already. I wouldn’t call it imitation– just that it’s fresh and very attractive to the eye, so it makes sense. I’d say that site nav is gonna be very important if desktop browsing is to stay relevant.

  • Sundaravalli says:

    Great post. very useful blog for everyone.

  • I am fresher in web designing. I have bookmarked this page for doing website designing. I am grateful to you.

  • Informative post! This post for all web designers.

  • Great post. Very useful

  • Innothought says:

    Nice post, Thanks for 15 top website design trends, it will help in website design

  • Rock David says:

    And Karol Thanks for This Post

  • KinexMedia says:

    Sometimes trends not works towards user side because what we think is trend is headache for user, few times i found on hamburger menu option is headache for them they even don’t know where is menu option, where to go further for navigation on site but mobile UX & UI is important.

  • Thanks for the great read! I think #3 has been around for at least 3 years now. I like it because it plays to the tried & true KISS rule with all relavent info in one place. Always been a fan of parallax, too. Isn’t the loading trend more of a mobile feature, not so much on desktop design?

  • Website Designing Services says:

    You got a really useful blog I have been here reading for about an hour. I am a newbie and your success is very much an inspiration for me.

Share your thoughts

Your email address will not be published. Required fields are marked *

*