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:
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.
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.
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.
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:
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:
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.
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.
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.
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?