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.
>> Check out our newest web design trends roundup here
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
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.
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”
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.
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
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.
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
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.
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
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
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
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.
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.”
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.
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.
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.
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.
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.
9. 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.
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.
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.
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
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.
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
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.
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:
Loved our 2016 web design trends article? Check out below: