The hottest web design trends for 2016

It’s not every year that we experience big changes. With such rapid growth in technology over the past few years, we’re sure that the big 2016 web design trends will focus on maturing and expanding on those developments.

Flat design will get more texture, “cinematic experiences” will become more common, and the use of JavaScript libraries will enable more experimentation. Growing popularity in WebGL and virtual reality are sure to transform websites as we know them, giving way to new and exciting interactive possibilities.

In this article, we’ll break down 11 of the biggest 2016 web design trends we’re expecting to see this year. So get comfortable and start reading – we have a lot to cover!

1. WebGL (Web Graphics Library)

In terms of newer advancements, there’s a notable new kid on the block: WebGL (Web Graphics Library). This technology powers many of the most astonishing websites created recently.

Simply speaking, WebGL is a way to render interactive 3D and 2D graphics inside browsers with hardware acceleration, without any plugin.

Interactive 3D WebGL application

2016 web design trends: Interactive 3D WebGL application
Experience Curiosity by NASA

WebGL was a big thing during 2015’s SIGGRAPH conference. The complete hour and a half presentation on 3D graphics and WebGL can be watched on YouTube here.

During the video, you’re introduced to NASA’s web application “Experience Curiosity,” which marks the third anniversary of the Curiosity rover landing on Mars. It allows visitors to experience a 3D NASA rover on Mars’ surface and manipulate its robotic arm.

2016 web design trends: WebGL
Website Beloola uses three.js JavaScript library

To build this website, Blend4Web (online, interactive 3D visualization) and Blender (3D modeling and animation suite) were used.

Beloola is the first fully web-based social network constructed as an immersive 3D world. It resembles Linden Lab’s Second Life, but doesn’t require any special software except for the browser.

3d WEBGL “VIDEO”

2016 web design trends: 3D webGL
Angry Wife by Madeo

Another flavor of 3D in WebGL is the “Angry Wife” gaming promo. It looks like a video when you first look at it, but it’s not. It’s actually a 3D scene turned into web page using the three.js JavaScript library.

2016 web design trends: 3D WebGL (The Boat)
The Boat by SBS TV (Australia)

Australia’s SBS TV adapted Nam Le’s story, “The Boat,” about escaping Vietnam and turned it into an interactive video story using WebGL. The award-winning project is broken down into chapters featuring stunning animations and hand-drawn illustrations. It uses the three.js library, the same as the previous example.

2016 web design trends: 3D WebGL (Recollection)
BecauseRecollection

Because Recollection is an “interactive journey through ten years of sound.” It is built with PIXI as a series of clips with interactive elements – lots of clicking, grabbing and holding – to increase user engagement.

Data visualization with WebGL

2016 web design trends: Data Visualization (Histography by Matan Stauber)
Histography by Matan Stauber

Histography visualizes historic events noted in Wikipedia on an interactive timeline. It may not sound very exciting, but experience it yourself and you may be surprised how such a vast amount of data is flawlessly transformed into a simple, sexy and responsive interface. It’s responsive in terms of both size and speed.

2016 web design trends: Datat Visualization (The Museum of The World by The British Museum and Google)
The Museum of The World  by The British Museum and Google

A similar idea was performed in a very different way with the British Museum collection. The Museum of the World – the result of a partnership between the British Museum and Google Cultural Institute – shows objects from the British Museum’s collection across time and space inside a 3D, WebGL driven interface.

You can navigate in time via the Z- or Y-axis and on continents using the X-axis. The menu allows you to turn on tags to group objects by subject (such as “Trade and conflict”).

WebGL-based 2D animation

2016 web design trends: WebGL animation (Nouvelles-Ecritures by FranceTV)
Nouvelles-Ecritures by FranceTV

FranceTV’s “Nouvelles Ecritures” – or “Modern Scrolls” – site is an amazing example of a 2D WebGL animation inside a browser. It gives you the sensation of reading an illustrated, vertical scroll by using the Pixi.js JavaScript library.

From a technical point of view, it could be described as a continuous 2D animation rendered inside the browser in a pseudo-3D space. Pretty spectacular stuff.

2. VR (Virtual Reality)

Virtual Reality (VR) is a related technology expected to shake the gadget world in 2016. And soon things may get even more interesting.

Have you heard of Google Cardboard? With an Android phone and a piece of a cardboard, you can create your own homemade VR experience. Google adds to the DIY VR ecosystem with Cardboard Camera, an Android app that makes VR photos – one of The Guardian’s picks for 2016’s January apps of the month.

If you want a more refined VR experience, you can preorder the Rift VR set by Oculus (~$600USD). A product with a price tag somewhere between Google Cardboard and Oculus is Samsung VR GEAR (100 USD).

But does this matter for web design? Not yet, but take a look at the WebVR initiative (a JavaScript API that that provides access to VR devices) for some ideas of where this technology is heading. Working examples can be found from the Mozilla VR team, whose goal is “to help bring high performance virtual reality to the open web.”

VR video

2016 web design trends: VR Video (Catch the Dragon by Peugeot)
Catch the Dragon by Peugeot

One great example of the upcoming technology is Peugeot 208‘s promo video, which offers both VR (for Google Cardboard) and 360 video viewing options on their site. Both versions are fully interactive and, while using devices equipped with gyroscope, you literally have to turn your head around to “catch the dragon”.

3. Particle systems

2016 web design trends: Particle Systems
Deutser

Particle systems have been used in 3D graphics since the early ‘80s to emulate irregular types of natural phenomena, such as fog, smoke, fire, water, grass and clouds. Now with WebGL programming, particles are starting to be used to convey visual ideas on web pages.

The Deutser web page is a nice example. Watch as the particles burst and come back together in clever shapes and symbols, reacting to your mouse movements. The result is pleasantly hypnotic.

4. 360degree panorama as a website

2016 web design trends: 360 degree panorama (Rainforest by Regnskogfondet)
Rainforest by Regnskogfondet

Regnskogfondet’s Rainforest doesn’t just use a simple panoramic image. It takes you deep into the jungle with 360° views, every step you take.

The most interesting thing about the Rainforest site is not just the use of a full screen panoramas or the nice 3D scenery, but the way they integrated navigational elements into the 360° experience.

5. Full screen video stories with interactive scenes & elements

2016 web design trends: Full-screen video (Christmas Express by Milka)
Christmas Express by Milka uses a a sequence of video episodes separated by interactive scenes

Milka’s Christmas Express website also uses the idea of full screen video narration, but as far as I know it has nothing to do with WebGL.

The site walks you through the experience of sending a Christmas letter, taking about 10 minutes to put together a simple e-mail and another 24 hours for delivery. Forced to take your time writing the letter with an animated pen, you’re really invited to dig into this process and feel the Christmas atmosphere. All details are perfect; even the pen animation precisely follows letter shapes.

6. Animated stories

Conveying ideas through an animated story is not something new, yet constantly evolves over time – and is sure to be one of the 2016 web design trends. The interesting part is that it’s transformation relates not just to visual or technical aspects.

The animated story needs more than a design and developer. It requires courage to go beyond corporate stereotypes and great copywriting. Those are not common commodities, which is why websites that use it successfully shine bright in the world of corporate web design.

2016 web design trends: Animated stories (Danish Crown annual report)
Danish Crown (Europe’s largest pork producer) annual report

Global food producer Danish Crown’s 2014/15 Annual Report is anything but boring diagrams and tables. The report page speaks to the reader with simple copy and bold visual language. They dared to use abstract humor and a kitschy, illustrative style to speak to their investors.

Aside from the visuals, the text is refreshing, direct and natural. As the company explains, “It’s not trying to be clever. It’s not a vision or mission or some such jargon. It’s nothing to do with the average core values – showing respect and leading the way. Because of course we do. Show respect and lead the way.”

2016 web design trends: Animated stories (World's Easiest Decision)
World’s Easiest Decision

This kind of storytelling is more common with NGO websites. The Climate Reality Project’s site, “World’s Easiest Decision”, is an interactive comic book on climate change. It tells the story through silly yes or no questions that trigger a handful of sassy responses and CTAs aimed at getting you to either watch a film or sign a petition.

In this example, we can also notice how flat design was successfully married with textures.

7. Linear navigation

Several years ago, designers and developers did everything to avoid linear navigation. It was all about menus and clicking paths. Then the single pagers arrived and stayed with us for good. Now it’s almost unimaginable that scrolling website were considered something bad (yes it was, by many designers, clients, developers – still, you can hear about the “above the fold” myth).

For 2016 web design trends, however, we aren’t looking for the best one-pagers of the year. Let’s try to find some of the new and innovative ways designers are creating linear navigation for web pages.

2016 web design trends: Linear Navigation (Julien Belmonte portfolio)
Julien Belmonte online film portfolio

Film director Julien Belmonte’s website is all about films – so it’s a brilliant to base the site’s navigation concept off of them too. One film after another is highlighted in a horizontal left to right movement, with a moving thin, red line reminiscent of a time marker.

Beyond that, there is almost no navigation. The text in the “About” section is not scrollable, evocative of a movie’s closing credits.

2016 web design trends: Linear Navigation
Francesco Bertelli online CSV

Francesco Bertelli took an innovative approach with his online CV. His use of an interactive calendar is an aesthetic and effective way to show one’s own professional development.

The navigation forces visitors to focus on one thing at a time by expanding across 100% of screen to tell about each particular event. At the same time it remains fast and easy to navigate, helpfully crossing out the dates that you’ve already investigated.

8. Screen after screen navigation

This type of navigation has been used for some time. In our 2013 web trends article, Bagigia was an example of the “screen-after-screen” or “previous/next” navigation. Traditional books accustomed us to the page-after-page navigation paradigm, so it is only natural to see more and more pages reusing this idea.

2016 web design trends: Screen after screen navigation
Manufacturer of Masterpieces

Imperiali Geneve’s “Manufacturer of Masterpieces” uses a similar approach to Francesco Bertelli by focusing user attention on each individual screen to tell their story. The page is linear, but not freely scrollable. You move from screen to screen with no in-betweens.

They use slide-in and slide-out navigation to mark the start and end of each screen. This way it resembles movie scene transitions, rather than scrolling a one-pager website.

2016 web design trends: Screen after screen navigation
Van Gogh Museum in Amsterdam

You can see this navigation paradigm even more clearly on the website of the Van Gogh Museum in Amsterdam. The current/total page numbers and arrows coupled with sliding transition between pages make you feel like you’re reading a traditional book.

The longing for a level of control over the layout that a designer could execute in traditional media becomes more and more visible. What’s the web design trend to look for next? A custom-fixed margin or frame around page is a centuries old concept that’s sure to be renewed.

12. Page in frame

Research proved that this trend is becoming more popular than we initially thought. Similar ideas in web design evolve since some time before, but never so far it was performed in such a perfectionist and tasteful way.

2016 web design trends: Page in frame
Ginger Bread Branch by The PNC Financial Services Group, Inc.

PNC’s Ginger Bread Branch is a website devoted to the first life-sized bank made of real gingerbread. It is also a tool for educators to teach about the economy. This page not only employs a frame inside the browser window, but also uses an after-screen navigation pattern.

2016 web design trends: Page in frame
wloks

Wloks website sells graphical assets in a chic and unique way. Instead of the usual stock photo e-commerce interface, this site offers a style evoking the look of classy, printed catalogues and Trompe-l’œil painting, with frame and menu elements placed in the screen corners.

2016 web design trends: Page in frame
Beer 34

Beer 34 found their own way to control screen layout in every resolution, drawing inspiration from infographics and storytelling. At the same time, the site preserves the look and feel of an old label. Made with relatively simple means, it’s one the most adorable examples in this set.

10. Exploring CSS transformations

2016 web design trends: CSS transformations
Stand4humanrights

Stand4HumanRights asks you to join the movement by adding your image to a social wall that looks like a huge curved surface, and then post it to social media. Powered by CSS transformations, this draggable “social wall” is a unique experience – but uses a lot of processing power and is not as responsive as one might expect.

2016 web design trends: CSS transformations
Species In Pieces

Species in Pieces uses CSS animations to create and interactive, online exhibition that studies 30 endangered species from around the world. Playing off the metaphor that their survival is in literal “pieces”, the animations shatter and then piece back together to form each of the featured animals.

11. SVG animation

2016 web design trends: SVG animation
holohalo

It seems strange that there are so few pages that use the classic, stable Scalable Vector Graphics (SVG) technology for something more interesting that displaying resolution independent icons, logos or fonts. Holo Halo is an exception to the rule – and an inspiration for 2016 web design trends and to web designers everywhere – showing what can be done with SVG.

Summary

There’s no doubt that the biggest 2016 web design trend is WebGL in all it’s flavors – interactive video, games, animation and data visualization. Virtual Reality is expected to be a big deal soon – however that depends a lot on VR devices’ accessibility.

Another general trend is an emphasis on natural media. This relates to hand-drawn, painted and scanned elements – sometimes coupled with the highest level of technical solidification, like in The Boat example. But this trend also has the tendency to make web pages resemble printed books, magazines, labels, posters and comic books. This is achieved with page-by-page navigation, use of frames and – generally speaking – an attempt to treat monitors more like “a page” than “a window”.

Now if you managed to get all the way through this lengthy article, here’s a small bonus. Drive a Delahaye 165 to save it from oblivion:

timeshift165
Website timeshift165

Loved our 2016 web design trends article? Check out past predictions below:

Have any other 2016 web design trends to add? Share yours in the comments below!

The author

Joanna Krenz Kurowska & Jerzy Kurowski
Joanna Krenz Kurowska & Jerzy Kurowski

Joanna Krenz-Kurowska has been working as a freelance graphic designer and web designer for 13 years. She lives in the mountains in the south-west of Poland. She has spent the last few years working for clients on five continents, writing about web design and technology for the 99designs community blog, winning dozens of web design contests and following her passions: art photography, running marathons, and graphic arts. She is a member of the New Mill Artists' Colony art union. Teaming up with Jerzy Kurowski, she creates complete digital products like websites or multimedia programs. She loves challenges like bathing in ice air holes, long-distance mountain running, or exploring new areas in web design. More about her work on 23dragons.com. My 99designs profile: http://99designs.com/users/413631. Email: jkk2332@gmail.com

Related articles

The fundamentals of responsive website design

The fundamentals of responsive website design

The days of designing a website for a single desktop screen are well and truly over. Technology and the expansion of mobile websites are pushing web designers to re-think how their work is displayed across various devices. Think about it: how much browsing do you do every day on your phone vs. your desktop? Enter:…

The new Google Fonts is a win for designers

The new Google Fonts is a win for designers

Google launched Google Fonts in 2010 to provide web fonts free of charge. Over the next six years it grew considerably, becoming very popular with web designers—for the obvious reason of affordability. The original website was definitely what the startup world would call an MVP: minimal viable product. It got the job done, but it…

Current Design Contests

Designers, check out these contests so you can start building your career.
0%