The brightest web design trends in 2016
- Transfer
The world of web design is bright and diverse. Big changes do not occur here every year. This is confirmed by the rapid growth of technology, which over the past few years has shown that important trends in web design in the near future will focus on improving existing developments.
Flat design will become more textured, cinematic experiences will be more common, and using JavaScript libraries will allow more experimentation. We are confident that the growing popularity of WebGL and virtual reality will allow us to transform websites that we know into something new with interesting interactive features.
In this article, we will look at the 11 largest expected web design trends this year. So get comfortable and start reading!
Among the latest achievements is noticeable technology WebGL (Web Graphics Library). She uses a lot of amazing sites that have appeared recently.
In a simple way, WebGL is a way to render interactive 3D and 2D graphics in hardware accelerated browsers without any plugins.
Experience Curiosity (NASA)
WebGL was one of the central topics of the 2015 SIGGRAPH conference . You can watch the presentation on 3D graphics and WebGL on this YouTube channel.
From the one and a half hour video, you will learn about NASA's “ Experience Curiosity ” web application , the creation of which marked the third anniversary of the landing of the “Curiosity” rover on Mars. The application allows users to “roll” the three-dimensional NASA rover on the surface of Mars and “control” the manipulator arm.
To create this resource, Blend4Web (a framework for creating browser-based 3D applications) and Blender (a package for three-dimensional modeling and animation) were used.
Beloola website uses three.js (JavaScript library)
Beloola is the first social network designed in the form of a three-dimensional world. It resembles Linden Lab in Second Life, but does not require any special software other than the browser itself.
Angry Wife (Disp. Madeo)
Another type of 3D in WebGL is the Angry Wife game promotion . At first glance, it looks like a regular video, but it is not at all. In fact, the 3D scene integrated into the web page uses the three.js JavaScript library .
SBS TV's “The Boat” project (Australia)
Australian SSB TV transformed the story of Vietnam’s writer Nam Le “The Boat” and turned it into an interactive video story using WebGL. The application consists of several parts with excellent animation and manually painted illustrations. Three.js is also used here , as in the previous example.
BecauseRecollection
In ApplicationBecause Recollection the idea of creating a kind of time machine, but only in relation to music. A large number of sound effects are closely related to what is happening on the screen and depends on the user's actions. The project is made using PIXI in the form of a compiled series of clips that are activated by various interactive elements.
Histography (Matan Stauber)
Histography demonstrates historical events from Wikipedia on an interactive timeline (translator's note. A Chrome browser is required to run) . It probably doesn't seem very interesting, but try it yourself and you might be surprised how such a huge mass of data can be transformed into a simple and responsive tool.
“The Museum of The World” (developed by the British Museum and Google)
A similar idea was implemented in a slightly different way for the collection of the British Museum. The “ The Museum of The World ” project is the result of a partnership between the British Museum and the Google Institute of Culture. Historical objects from the museum’s collection are shown on a “timeline” made in 3D using WebGL.
You can move forward and backward in time along the Z or Y axes and continents using the X axis. Using the menu, you can select tags for objects that are grouped by key topics (trade, conflict, etc.).
Nouvelles-Ecritures from FranceTV
The project “ Nouvelles Ecritures ” (approx. Translator. “Modern Scrolls”) of the French television channel FranceTV is a site with a very interesting implementation of WebGL 2D animation in a browser. The feeling that you are reading a richly illustrated scroll that smoothly scrolls vertically. The project was implemented using the Pixi.js JavaScript library .
From a technical point of view, it is a continuous two-dimensional animation that runs in pseudo 3D space. It looks very impressive!
Virtual reality (VR) is a related technology that can shake the world of gadgets in 2016. Perhaps very soon everything will become much more interesting.
Have you heard of Google Cardboard ? With an Android phone and a piece of cardboard, you can get a sense of virtual reality at home. Google added to the makeshift glasses a special Android application - Cardboard Camera , which allows you to view virtual photos. This application was one of the best according to The Guardian in January 2016.
However, if you want a better “virtual reality”, you can pre-order the Rift VR suitefrom Oculus (approximately $ 600). There's a cross between Google Cardboard and Oculus - it 's Samsung’s
VR GEAR ($ 100).
Does it make any difference to web design? Not yet, but take a look at WebVR (the JavaScript API that provides access to VR devices) and some projects that use this technology. Working examples can be found on the Mozilla VR website . Here is what the developers themselves say: “We want to create an open, high-performance virtual reality system for sites.”
Catch the Dragon by Peugeot The
Peugeot 208 promo is a great example of how VR devices interact with video. At startup, it is proposed to select the desired viewing option: VR (for Google Cardboard) or 360 panoramic video. Both versions are fully interactive. If you use a device with a gyroscope, you will have to actively turn your head to “catch the dragon”.
Deutser Particle
systems in three-dimensional graphics began to be used since the 80s to emulate some natural phenomena, such as fog, smoke, fire, water, grass and clouds. Now with the advent of WebGL, it has become available for browsers.
An interesting example of particle use is the Deutser webpage . Watch how the elements fly apart and come back in the form of figures and symbols, responding to mouse movements. The result is really mesmerizing.
Rainforest (Rainforest) by Regnskogfondet
Rainforest is not just a panoramic picture. With each step, you are further and further immersed in the jungle with a full 360-degree view.
Here, high-quality three-dimensional scenery, full-screen panoramas. However, the integration of navigational elements into the structure of the “world” looks much more interesting.
Milka's Christmas Express (Christmas Express) uses a set of video episodes separated by interactive scenes.
Website Christmas Express also operates a full-screen video idea, but as I understand it, there is nothing to do with WebGL.
You will go through the steps of creating a Christmas letter. 10 minutes for writing a message and a day for delivery. Everything looks very real, the details are perfect and even the animation of the pen exactly follows the letter patterns. Christmas mood is provided!
Broadcasting ideas through animated retelling is not new. But still there is a trend that is constantly evolving over time. Interestingly, the transformations apply not only to the visual or technical aspects.
To create a good animation story is not enough to develop a design and find a performer. It takes courage to overcome corporate stereotypes and limitations of copyright holders. The result will look unusual, but sites using this technique will clearly stand out in the world of corporate web pages.
Annual Report by Danish Crown (Europe's largest pork producer)
Annual Reportover the past year, from the European food manufacturer Danish Crown, these are not the boring charts and tables that everyone is used to. The report page appeals to its investors in a simple and bold visual language, which actively uses abstract humor and funny illustrations. The style of the text is also designed in simple and vivid expressions.
And here is what the company’s representatives say: “It doesn’t look abstruse. Does not express someone’s view, does not convey the task, is not strewn with terms. This has nothing to do with the average core values - respect and initiative. For this reason, we do this. We show respect and initiative. ”
World's Easiest Decision
This kind of story is more common on the web pages of NGO organizations. So the Climate Reality Project website “World's Easiest Decision ”is an interactive comic strip on climate change. The visitor answers simple questions and, depending on his answers, a film is shown or it is proposed to sign a petition.
This example perfectly demonstrates how well flat design is combined with textures.
A few years ago, designers and developers did everything to avoid linear navigation. The main emphasis was on the convenience of the menu and the simplicity of moving through the pages of the resource.
Now it is impossible to imagine that scrolling on the site was once considered as something unsuccessful (yes it was). Although you can still hear about the mythical “above the fold” from some developers, clients or designers (note translator. “Above the fold” is the part of the page that is visible to the user without scrolling) .
In this article, we do not highlight the best business card sites of the year. Let's just try to find some new and interesting ways that designers use to create linear navigation on sites.
Portfolio video from Julien Belmonte
Filmmaker websiteJulien Belmonte contains all his films, and navigation on them is done in a very successful way. Films move horizontally from left to right and are highlighted one after another. A moving red line resembling a temporary marker is used.
There is almost no other navigation. Unless, in the “About” section, where the text looks like the final credits of any film.
Francesco Bertelli online CSV
Francesco Bertelli has come up with an innovative approach for her online CSV. The used interactive calendar looks aesthetically pleasing and is an effective tool for demonstrating one's own professional growth.
The interface allows you to quickly and easily navigate, helpfully crossing out the dates that you have already explored. When you select the desired item, the screen with information will open to the entire browser. This approach focuses the attention of the site visitor only on the topic he needs.
This type of navigation has been used for a long time. In the previous article “ Trends of 2013 ”, Bagiga website was an example of such types of navigation: “screen-after-screen” or “ previous / next ”.
Reading ordinary books, we turn page by page and some designers try to use this habit.
Manufacturer of Masterpieces Jewelry
manufacturer Imperiali Geneve takes a similar approach as Francesco Bertelli, when the user's attention is focused on each individual screen, which tells its own story. The site is linear, but without free scrolling. You move from screen to screen without any intermediaries.
It uses slide navigation, with interface elements for the beginning and end of each screen. All this looks more like transitions between movie scenes than scrolling through a business card site.
Van Gogh Museum in Amsterdam A
similar type of navigation is used on the site of the Van Gogh Museum in Amsterdam. The page number and their number, arrows in combination with slide transitions between screens - a complete feeling that you are reading a traditional book.
Designers strive to get closer to our usual solutions that use traditional sources of information. So what is web design in the future? So the frame around the page is an old trick, which is nevertheless often used.
Studies have shown that this trend is becoming more popular than we thought at the beginning. Similar ideas in web design have been developing for a long time, but they have never been executed with such taste and grace.
Ginger Bread Branch by The PNC Financial Services Group, Inc.
The site is dedicated to the first full-size jar made from real gingerbread cookies. It is also interesting as a guide for learning economics. On this resource, not only the frame inside the browser window is used, but also page navigation.
wloks
website Wloks offers graphical Asset chic and unique way. Instead of the usual electronic interface of stock photos, this site uses an interesting style of printed catalogs and fake murals., with a frame and a menu of elements placed in the corners of the screen.
Beer 34 Beer
producers of Beer 34 found their unique solution for controlling the screen in various resolutions, drawing inspiration from infographics and history. At the same time, the look of the old label is preserved. Everything is done quite simply and this is the most charming example in this set.
Stand4humanrights
Stand4HumanRights invites you to join the community by adding your photo to a social wall that looks like a huge curved surface. Then you can post on social networks. The “social wall” can be dragged and it is based on CSS transform. It looks interesting, however, it requires large computing power and is not as sensitive as one might expect.
Species In Pieces
Species In Pieces uses CSS animations for its interactive exhibit, which offers 30 endangered species from around the world to explore. Animal models are made up of separate pieces that add up when moving from one object to another(note translator. To work requires a Chrome browser) .
holohalo
It actually seems strange that there are so few pages using the classic Scalable Vector Graphics (SVG) technology to display something more interesting than scalable icons for different resolutions. Holo Halo is an exception to the rule and can serve as a source of inspiration for designers, showing what can be done with SVG.
Without a doubt, the leading trend in web design in 2016 is WebGL in all its manifestations: interactive video, games, animation and data visualization. Virtual reality is expected to have a great future, but much depends on the availability of VR devices.
Another common trend is the emphasis on standard media. This applies to hand drawing, stained and scanned items like The Boat project. The tendency to create web pages that resemble printed books, magazines, stickers, posters and comics is also visible. This is achieved through page-by-page navigation, the use of frames, and attempts to view the monitor screen as a “page” rather than a familiar “window”.
And if you manage to master this large article, you will get a small bonus - take a ride on Delahaye 165 :
Website timeshift165
Flat design will become more textured, cinematic experiences will be more common, and using JavaScript libraries will allow more experimentation. We are confident that the growing popularity of WebGL and virtual reality will allow us to transform websites that we know into something new with interesting interactive features.
In this article, we will look at the 11 largest expected web design trends this year. So get comfortable and start reading!
1. WebGL (Web Graphics Library)
Among the latest achievements is noticeable technology WebGL (Web Graphics Library). She uses a lot of amazing sites that have appeared recently.
In a simple way, WebGL is a way to render interactive 3D and 2D graphics in hardware accelerated browsers without any plugins.
1.1 WebGL Interactive 3D Application
Experience Curiosity (NASA)
WebGL was one of the central topics of the 2015 SIGGRAPH conference . You can watch the presentation on 3D graphics and WebGL on this YouTube channel.
From the one and a half hour video, you will learn about NASA's “ Experience Curiosity ” web application , the creation of which marked the third anniversary of the landing of the “Curiosity” rover on Mars. The application allows users to “roll” the three-dimensional NASA rover on the surface of Mars and “control” the manipulator arm.
To create this resource, Blend4Web (a framework for creating browser-based 3D applications) and Blender (a package for three-dimensional modeling and animation) were used.
Beloola website uses three.js (JavaScript library)
Beloola is the first social network designed in the form of a three-dimensional world. It resembles Linden Lab in Second Life, but does not require any special software other than the browser itself.
1.2 3D “Video” WEBGL
Angry Wife (Disp. Madeo)
Another type of 3D in WebGL is the Angry Wife game promotion . At first glance, it looks like a regular video, but it is not at all. In fact, the 3D scene integrated into the web page uses the three.js JavaScript library .
SBS TV's “The Boat” project (Australia)
Australian SSB TV transformed the story of Vietnam’s writer Nam Le “The Boat” and turned it into an interactive video story using WebGL. The application consists of several parts with excellent animation and manually painted illustrations. Three.js is also used here , as in the previous example.
BecauseRecollection
In ApplicationBecause Recollection the idea of creating a kind of time machine, but only in relation to music. A large number of sound effects are closely related to what is happening on the screen and depends on the user's actions. The project is made using PIXI in the form of a compiled series of clips that are activated by various interactive elements.
1.3 Data Visualization with WebGL
Histography (Matan Stauber)
Histography demonstrates historical events from Wikipedia on an interactive timeline (translator's note. A Chrome browser is required to run) . It probably doesn't seem very interesting, but try it yourself and you might be surprised how such a huge mass of data can be transformed into a simple and responsive tool.
“The Museum of The World” (developed by the British Museum and Google)
A similar idea was implemented in a slightly different way for the collection of the British Museum. The “ The Museum of The World ” project is the result of a partnership between the British Museum and the Google Institute of Culture. Historical objects from the museum’s collection are shown on a “timeline” made in 3D using WebGL.
You can move forward and backward in time along the Z or Y axes and continents using the X axis. Using the menu, you can select tags for objects that are grouped by key topics (trade, conflict, etc.).
1.4 2D animation based on WebGL
Nouvelles-Ecritures from FranceTV
The project “ Nouvelles Ecritures ” (approx. Translator. “Modern Scrolls”) of the French television channel FranceTV is a site with a very interesting implementation of WebGL 2D animation in a browser. The feeling that you are reading a richly illustrated scroll that smoothly scrolls vertically. The project was implemented using the Pixi.js JavaScript library .
From a technical point of view, it is a continuous two-dimensional animation that runs in pseudo 3D space. It looks very impressive!
2. VR (Virtual Reality)
Virtual reality (VR) is a related technology that can shake the world of gadgets in 2016. Perhaps very soon everything will become much more interesting.
Have you heard of Google Cardboard ? With an Android phone and a piece of cardboard, you can get a sense of virtual reality at home. Google added to the makeshift glasses a special Android application - Cardboard Camera , which allows you to view virtual photos. This application was one of the best according to The Guardian in January 2016.
However, if you want a better “virtual reality”, you can pre-order the Rift VR suitefrom Oculus (approximately $ 600). There's a cross between Google Cardboard and Oculus - it 's Samsung’s
VR GEAR ($ 100).
Does it make any difference to web design? Not yet, but take a look at WebVR (the JavaScript API that provides access to VR devices) and some projects that use this technology. Working examples can be found on the Mozilla VR website . Here is what the developers themselves say: “We want to create an open, high-performance virtual reality system for sites.”
2.1 VR video
Catch the Dragon by Peugeot The
Peugeot 208 promo is a great example of how VR devices interact with video. At startup, it is proposed to select the desired viewing option: VR (for Google Cardboard) or 360 panoramic video. Both versions are fully interactive. If you use a device with a gyroscope, you will have to actively turn your head to “catch the dragon”.
3. Particle systems
Deutser Particle
systems in three-dimensional graphics began to be used since the 80s to emulate some natural phenomena, such as fog, smoke, fire, water, grass and clouds. Now with the advent of WebGL, it has become available for browsers.
An interesting example of particle use is the Deutser webpage . Watch how the elements fly apart and come back in the form of figures and symbols, responding to mouse movements. The result is really mesmerizing.
4. Panoramic views
Rainforest (Rainforest) by Regnskogfondet
Rainforest is not just a panoramic picture. With each step, you are further and further immersed in the jungle with a full 360-degree view.
Here, high-quality three-dimensional scenery, full-screen panoramas. However, the integration of navigational elements into the structure of the “world” looks much more interesting.
5. Full screen video with interactive scenes and elements
Milka's Christmas Express (Christmas Express) uses a set of video episodes separated by interactive scenes.
Website Christmas Express also operates a full-screen video idea, but as I understand it, there is nothing to do with WebGL.
You will go through the steps of creating a Christmas letter. 10 minutes for writing a message and a day for delivery. Everything looks very real, the details are perfect and even the animation of the pen exactly follows the letter patterns. Christmas mood is provided!
6. Animation stories
Broadcasting ideas through animated retelling is not new. But still there is a trend that is constantly evolving over time. Interestingly, the transformations apply not only to the visual or technical aspects.
To create a good animation story is not enough to develop a design and find a performer. It takes courage to overcome corporate stereotypes and limitations of copyright holders. The result will look unusual, but sites using this technique will clearly stand out in the world of corporate web pages.
Annual Report by Danish Crown (Europe's largest pork producer)
Annual Reportover the past year, from the European food manufacturer Danish Crown, these are not the boring charts and tables that everyone is used to. The report page appeals to its investors in a simple and bold visual language, which actively uses abstract humor and funny illustrations. The style of the text is also designed in simple and vivid expressions.
And here is what the company’s representatives say: “It doesn’t look abstruse. Does not express someone’s view, does not convey the task, is not strewn with terms. This has nothing to do with the average core values - respect and initiative. For this reason, we do this. We show respect and initiative. ”
World's Easiest Decision
This kind of story is more common on the web pages of NGO organizations. So the Climate Reality Project website “World's Easiest Decision ”is an interactive comic strip on climate change. The visitor answers simple questions and, depending on his answers, a film is shown or it is proposed to sign a petition.
This example perfectly demonstrates how well flat design is combined with textures.
7. Linear navigation
A few years ago, designers and developers did everything to avoid linear navigation. The main emphasis was on the convenience of the menu and the simplicity of moving through the pages of the resource.
Now it is impossible to imagine that scrolling on the site was once considered as something unsuccessful (yes it was). Although you can still hear about the mythical “above the fold” from some developers, clients or designers (note translator. “Above the fold” is the part of the page that is visible to the user without scrolling) .
In this article, we do not highlight the best business card sites of the year. Let's just try to find some new and interesting ways that designers use to create linear navigation on sites.
Portfolio video from Julien Belmonte
Filmmaker websiteJulien Belmonte contains all his films, and navigation on them is done in a very successful way. Films move horizontally from left to right and are highlighted one after another. A moving red line resembling a temporary marker is used.
There is almost no other navigation. Unless, in the “About” section, where the text looks like the final credits of any film.
Francesco Bertelli online CSV
Francesco Bertelli has come up with an innovative approach for her online CSV. The used interactive calendar looks aesthetically pleasing and is an effective tool for demonstrating one's own professional growth.
The interface allows you to quickly and easily navigate, helpfully crossing out the dates that you have already explored. When you select the desired item, the screen with information will open to the entire browser. This approach focuses the attention of the site visitor only on the topic he needs.
8. Page navigation
This type of navigation has been used for a long time. In the previous article “ Trends of 2013 ”, Bagiga website was an example of such types of navigation: “screen-after-screen” or “ previous / next ”.
Reading ordinary books, we turn page by page and some designers try to use this habit.
Manufacturer of Masterpieces Jewelry
manufacturer Imperiali Geneve takes a similar approach as Francesco Bertelli, when the user's attention is focused on each individual screen, which tells its own story. The site is linear, but without free scrolling. You move from screen to screen without any intermediaries.
It uses slide navigation, with interface elements for the beginning and end of each screen. All this looks more like transitions between movie scenes than scrolling through a business card site.
Van Gogh Museum in Amsterdam A
similar type of navigation is used on the site of the Van Gogh Museum in Amsterdam. The page number and their number, arrows in combination with slide transitions between screens - a complete feeling that you are reading a traditional book.
Designers strive to get closer to our usual solutions that use traditional sources of information. So what is web design in the future? So the frame around the page is an old trick, which is nevertheless often used.
9. Framed page
Studies have shown that this trend is becoming more popular than we thought at the beginning. Similar ideas in web design have been developing for a long time, but they have never been executed with such taste and grace.
Ginger Bread Branch by The PNC Financial Services Group, Inc.
The site is dedicated to the first full-size jar made from real gingerbread cookies. It is also interesting as a guide for learning economics. On this resource, not only the frame inside the browser window is used, but also page navigation.
wloks
website Wloks offers graphical Asset chic and unique way. Instead of the usual electronic interface of stock photos, this site uses an interesting style of printed catalogs and fake murals., with a frame and a menu of elements placed in the corners of the screen.
Beer 34 Beer
producers of Beer 34 found their unique solution for controlling the screen in various resolutions, drawing inspiration from infographics and history. At the same time, the look of the old label is preserved. Everything is done quite simply and this is the most charming example in this set.
10. Getting to Know CSS Conversion
Stand4humanrights
Stand4HumanRights invites you to join the community by adding your photo to a social wall that looks like a huge curved surface. Then you can post on social networks. The “social wall” can be dragged and it is based on CSS transform. It looks interesting, however, it requires large computing power and is not as sensitive as one might expect.
Species In Pieces
Species In Pieces uses CSS animations for its interactive exhibit, which offers 30 endangered species from around the world to explore. Animal models are made up of separate pieces that add up when moving from one object to another(note translator. To work requires a Chrome browser) .
11. SVG animation
holohalo
It actually seems strange that there are so few pages using the classic Scalable Vector Graphics (SVG) technology to display something more interesting than scalable icons for different resolutions. Holo Halo is an exception to the rule and can serve as a source of inspiration for designers, showing what can be done with SVG.
Total
Without a doubt, the leading trend in web design in 2016 is WebGL in all its manifestations: interactive video, games, animation and data visualization. Virtual reality is expected to have a great future, but much depends on the availability of VR devices.
Another common trend is the emphasis on standard media. This applies to hand drawing, stained and scanned items like The Boat project. The tendency to create web pages that resemble printed books, magazines, stickers, posters and comics is also visible. This is achieved through page-by-page navigation, the use of frames, and attempts to view the monitor screen as a “page” rather than a familiar “window”.
And if you manage to master this large article, you will get a small bonus - take a ride on Delahaye 165 :
Website timeshift165