The brightest trends of web design in 2016
The world of web design is bright and diverse. Big changes do not happen 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 change the websites we know into something new with interesting interactive features.
In this article, we will look at 11 of the largest expected trends in web design this year. So sit back and start reading!
Among the latest achievements there is a noticeable technology WebGL (Web Graphics Library). It uses many amazing sites that have appeared recently.
')
In a simple way, WebGL is a way to visualize interactive 3D and 2D graphics in hardware accelerated browsers, without any plug-ins.
Experience Curiosity (NASA)
WebGL was one of the central themes of the SIGGRAPH 2015 conference. You can watch a presentation on 3D graphics and WebGL on this YouTube channel.
From an hour and a half video, you will learn about the NASA “ 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 “ride” the NASA three-dimensional 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.
The 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 (Madeo)
Another type of 3D in WebGL is the Angry Wife game promo. At first glance, it looks like a normal video, but this is not at all the case. In fact, the 3D scene integrated into the web page uses the three.js JavaScript library.
Project “The Boat” by SBS TV (Australia)
Australian television SSB TV reworked the story of the writer Nam Le “The Boat” about escaping from Vietnam and turned it into an interactive video story using WebGL. The application consists of several parts with perfectly executed animation and hand-painted illustrations. It also uses three.js , as in the previous example.
BecauseRecollection
The application Because Recollection embodied the idea of ​​creating a kind of time machine, but only in terms of music. A large number of sound effects is closely related to what is happening on the screen and depends on the user's actions. The project was made with the help of PIXI in the form of a series of clips that are activated by various interactive elements.
Histography (Matan Stauber)
Histography shows historical events from Wikipedia on an interactive timeline (approx. Translator. Chrome browser is required for launch) . Probably, this does not seem very interesting, but try it yourself and you may be surprised at how such a huge amount of data can be transformed into a simple and responsive tool.
“The Museum of The World” (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 Cultural Institute. Historical objects from the museum's collection are shown on a “time scale” made in 3D using WebGL.
You can move forward and backward in time along the Z or Y axes, and across continents using the X axis. Using the menu, you can select tags to objects that are grouped by key themes (trade, conflict, etc.).
FranceTV Nouvelles-Ecritures
The project “ Nouvelles Ecritures ” (approx. Translator. “Modern Scrolls”) of the French TV channel FranceTV is a website with a very interesting implementation of 2D animation WebGL in the 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, this is a continuous two-dimensional animation that is performed in pseudo 3D space. Looks very impressive!
Virtual reality (VR) is a related technology that can shake up 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 has added a special Android application, Cardboard Camera , to self-made glasses, which allows you to view virtual photos. This application was one of the best in the opinion of The Guardian in January 2016.
However, if you want to get a better “virtual reality”, you can leave a pre-order for the Oculus Rift VR kit (approximately $ 600). There is something in between Google Cardboard and Oculus - Samsung’s GEAR from Samsung ($ 100).
Does it have any relevance for web design? Not yet, but take a look at WebVR (a 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 websites.”
Catch the Dragon (“Catch the Dragon”) from Peugeot
Promo Peugeot 208 is an excellent example of the interaction of virtual reality devices and video. At startup, you are prompted 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 turn your head actively 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, this has become available for browsers.
An interesting example of the use of particles is the “ Deutser ” web page. See how the elements fly away and come back in the form of figures and symbols, responding to mouse movements. The result is really hypnotizing.
Rainforest (Tropical Forest) by Regnskogfondet
Rainforest is not just a panoramic picture. With each step, you go deeper and deeper into the jungle with a full 360-degree view.
Here, high-quality three-dimensional scenery, panoramas on the whole screen. However, the integration of navigation 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.
The Christmas Express site also exploits the idea of ​​full-screen video, but as far as I understand, there is nothing in common with WebGL.
You will go through the stages of creating a Christmas letter. 10 minutes to write the message and the day for delivery. Everything looks very real, the details are perfect and even the animation of the pen exactly follows the lettering. Christmas mood provided!
Translating ideas through an animated retelling is not new. But still there is a tendency that is constantly evolving over time. Interestingly, the transformations do not refer 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 rights holders. The result will look unusual, but sites using such a technique will clearly stand out in the world of corporate web pages.
Danish Crown Annual Report (Europe's largest pork producer)
The annual report from the European food producer Danish Crown over the past year is not the boring charts and tables that everyone is used to. The report page addresses its investors in a simple and bold visual language, where abstract humor and funny illustrations are actively used. The style of the text is also sustained in simple and vivid expressions.
And that's what the representatives of the company themselves say: “It does not look abstruse. Does not express someone's opinion, does not transfer the task, is not covered with terms. This is not related to the average basic values ​​- respect and initiative. For this reason, we do it. We show respect and initiative. ”
World's Easiest Decision
This type of narration is more common for the web pages of NGOs. So the Climate Reality Project “ World's Easiest Decision ” is an interactive comic about climate change. The visitor answers simple questions and, depending on his answers, the film is shown or it is proposed to sign the petition.
This example perfectly demonstrates how well a flat design is combined with textures.
A few years ago, designers and developers did everything to avoid linear navigation. The main focus was on the convenience of the menu and ease of navigating through the pages of the resource.
Now it is impossible to imagine that scrolling on the site was once considered as something unfortunate (yes it was). Although you can still hear about the mythical “above the fold” from some developers, customers or designers (note the 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 cards 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
The site of film director Julien Belmonte (Julien Belmonte) contains all of his films, and navigation through them is done in a very good way. Movies move horizontally from left to right and are highlighted one after the other. It uses a moving red line, resembling a temporary marker.
There is almost no other navigation here. Is that in the section “About”, where the text looks like the final credits of any movie.
Francesco Bertelli online CSV
Francesco Bertelli has come up with an innovative approach for his online CSV. The interactive calendar used looks aesthetically pleasing and is an effective tool for demonstrating your own professional growth.
The interface allows you to quickly and easily navigate, helpfully crossing out the dates that you have already investigated. When you select the desired item, the screen with the 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 ”, the Bagiga website was an example of such types of navigation: “screen-after-screen” or “ previous / next ”.
Reading ordinary books, we turn over a page per page and some designers try to use this habit.
Manufacturer of Masterpieces
Jewelry maker Imperiali Geneve uses 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 beginning and end of each screen. All this is more like transitions between scenes of the film, rather than scrolling site business cards.
Van Gogh Museum in Amsterdam
A similar type of navigation is used on the website of the Van Gogh Museum in Amsterdam. The page number and their number, the arrows in combination with the slide transitions between the screens - the full feeling that you are reading a traditional book.
Designers seek to get closer to our usual solutions that use traditional sources of information. So what is the way for web design in the future? So the frame around the page is an old technique that 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 (The Gingerbread Branch) by The PNC Financial Services Group, Inc.
The site is dedicated to the first life-size jar made from real gingerbread. It is also interesting as a tool for learning economics. This resource not only uses the frame inside the browser window, but also paged navigation.
wloks
Wloks website offers graphic assets in a chic and unique way. Instead of the usual electronic interface of stock photos, this site uses an interesting style of printed catalogs and fraud murals , with a frame and a menu of items placed in the corners of the screen.
Beer 34
Beer 34 beer makers have found their unique solution to control 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 the set in question.
Stand4humanrights
Stand4HumanRights invites you to join the community by adding your photo on 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 the CSS transform. It looks interesting, however, it requires a lot of computational power and is not as sensitive as one would expect.
Species In Pieces (species in pieces)
Species In Pieces uses CSS animations for its interactive exhibit, which offers 30 endangered species from all over the world to explore. Animal models are made up of individual pieces that add up when moving from one object to another (approx. Translator. Work requires the Chrome browser) .
holohalo
In fact, it 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 be 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 refers to hand-drawn, painted and scanned items like The Boat project. There is also a tendency to create web pages that resemble printed books, magazines, stickers, posters and comics. This is achieved using page-by-page navigation, using frames and trying to treat the monitor screen as a “page” rather than the usual “window”.
And if you managed to master this great article, then get a small bonus - take a ride on the Delahaye 165 :
Timeshift165 website
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 change the websites we know into something new with interesting interactive features.
In this article, we will look at 11 of the largest expected trends in web design this year. So sit back and start reading!
1. WebGL (Web Graphics Library)
Among the latest achievements there is a noticeable technology WebGL (Web Graphics Library). It uses many amazing sites that have appeared recently.
')
In a simple way, WebGL is a way to visualize interactive 3D and 2D graphics in hardware accelerated browsers, without any plug-ins.
1.1 Interactive 3D WebGL application
Experience Curiosity (NASA)
WebGL was one of the central themes of the SIGGRAPH 2015 conference. You can watch a presentation on 3D graphics and WebGL on this YouTube channel.
From an hour and a half video, you will learn about the NASA “ 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 “ride” the NASA three-dimensional 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.
The 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 (Madeo)
Another type of 3D in WebGL is the Angry Wife game promo. At first glance, it looks like a normal video, but this is not at all the case. In fact, the 3D scene integrated into the web page uses the three.js JavaScript library.
Project “The Boat” by SBS TV (Australia)
Australian television SSB TV reworked the story of the writer Nam Le “The Boat” about escaping from Vietnam and turned it into an interactive video story using WebGL. The application consists of several parts with perfectly executed animation and hand-painted illustrations. It also uses three.js , as in the previous example.
BecauseRecollection
The application Because Recollection embodied the idea of ​​creating a kind of time machine, but only in terms of music. A large number of sound effects is closely related to what is happening on the screen and depends on the user's actions. The project was made with the help of PIXI in the form of a series of clips that are activated by various interactive elements.
1.3 Data Visualization with WebGL
Histography (Matan Stauber)
Histography shows historical events from Wikipedia on an interactive timeline (approx. Translator. Chrome browser is required for launch) . Probably, this does not seem very interesting, but try it yourself and you may be surprised at how such a huge amount of data can be transformed into a simple and responsive tool.
“The Museum of The World” (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 Cultural Institute. Historical objects from the museum's collection are shown on a “time scale” made in 3D using WebGL.
You can move forward and backward in time along the Z or Y axes, and across continents using the X axis. Using the menu, you can select tags to objects that are grouped by key themes (trade, conflict, etc.).
1.4 WebGL based 2D animation
FranceTV Nouvelles-Ecritures
The project “ Nouvelles Ecritures ” (approx. Translator. “Modern Scrolls”) of the French TV channel FranceTV is a website with a very interesting implementation of 2D animation WebGL in the 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, this is a continuous two-dimensional animation that is performed in pseudo 3D space. Looks very impressive!
2. VR (Virtual Reality)
Virtual reality (VR) is a related technology that can shake up 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 has added a special Android application, Cardboard Camera , to self-made glasses, which allows you to view virtual photos. This application was one of the best in the opinion of The Guardian in January 2016.
However, if you want to get a better “virtual reality”, you can leave a pre-order for the Oculus Rift VR kit (approximately $ 600). There is something in between Google Cardboard and Oculus - Samsung’s GEAR from Samsung ($ 100).
Does it have any relevance for web design? Not yet, but take a look at WebVR (a 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 websites.”
2.1 VR video
Catch the Dragon (“Catch the Dragon”) from Peugeot
Promo Peugeot 208 is an excellent example of the interaction of virtual reality devices and video. At startup, you are prompted 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 turn your head actively 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, this has become available for browsers.
An interesting example of the use of particles is the “ Deutser ” web page. See how the elements fly away and come back in the form of figures and symbols, responding to mouse movements. The result is really hypnotizing.
4. Panoramic panoramas
Rainforest (Tropical Forest) by Regnskogfondet
Rainforest is not just a panoramic picture. With each step, you go deeper and deeper into the jungle with a full 360-degree view.
Here, high-quality three-dimensional scenery, panoramas on the whole screen. However, the integration of navigation 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.
The Christmas Express site also exploits the idea of ​​full-screen video, but as far as I understand, there is nothing in common with WebGL.
You will go through the stages of creating a Christmas letter. 10 minutes to write the message and the day for delivery. Everything looks very real, the details are perfect and even the animation of the pen exactly follows the lettering. Christmas mood provided!
6. Animated stories
Translating ideas through an animated retelling is not new. But still there is a tendency that is constantly evolving over time. Interestingly, the transformations do not refer 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 rights holders. The result will look unusual, but sites using such a technique will clearly stand out in the world of corporate web pages.
Danish Crown Annual Report (Europe's largest pork producer)
The annual report from the European food producer Danish Crown over the past year is not the boring charts and tables that everyone is used to. The report page addresses its investors in a simple and bold visual language, where abstract humor and funny illustrations are actively used. The style of the text is also sustained in simple and vivid expressions.
And that's what the representatives of the company themselves say: “It does not look abstruse. Does not express someone's opinion, does not transfer the task, is not covered with terms. This is not related to the average basic values ​​- respect and initiative. For this reason, we do it. We show respect and initiative. ”
World's Easiest Decision
This type of narration is more common for the web pages of NGOs. So the Climate Reality Project “ World's Easiest Decision ” is an interactive comic about climate change. The visitor answers simple questions and, depending on his answers, the film is shown or it is proposed to sign the petition.
This example perfectly demonstrates how well a flat design is combined with textures.
7. Linear navigation
A few years ago, designers and developers did everything to avoid linear navigation. The main focus was on the convenience of the menu and ease of navigating through the pages of the resource.
Now it is impossible to imagine that scrolling on the site was once considered as something unfortunate (yes it was). Although you can still hear about the mythical “above the fold” from some developers, customers or designers (note the 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 cards 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
The site of film director Julien Belmonte (Julien Belmonte) contains all of his films, and navigation through them is done in a very good way. Movies move horizontally from left to right and are highlighted one after the other. It uses a moving red line, resembling a temporary marker.
There is almost no other navigation here. Is that in the section “About”, where the text looks like the final credits of any movie.
Francesco Bertelli online CSV
Francesco Bertelli has come up with an innovative approach for his online CSV. The interactive calendar used looks aesthetically pleasing and is an effective tool for demonstrating your own professional growth.
The interface allows you to quickly and easily navigate, helpfully crossing out the dates that you have already investigated. When you select the desired item, the screen with the information will open to the entire browser. This approach focuses the attention of the site visitor only on the topic he needs.
8. Paginated navigation
This type of navigation has been used for a long time. In the previous article “ Trends of 2013 ”, the Bagiga website was an example of such types of navigation: “screen-after-screen” or “ previous / next ”.
Reading ordinary books, we turn over a page per page and some designers try to use this habit.
Manufacturer of Masterpieces
Jewelry maker Imperiali Geneve uses 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 beginning and end of each screen. All this is more like transitions between scenes of the film, rather than scrolling site business cards.
Van Gogh Museum in Amsterdam
A similar type of navigation is used on the website of the Van Gogh Museum in Amsterdam. The page number and their number, the arrows in combination with the slide transitions between the screens - the full feeling that you are reading a traditional book.
Designers seek to get closer to our usual solutions that use traditional sources of information. So what is the way for web design in the future? So the frame around the page is an old technique that is nevertheless often used.
9. Page in the frame
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 (The Gingerbread Branch) by The PNC Financial Services Group, Inc.
The site is dedicated to the first life-size jar made from real gingerbread. It is also interesting as a tool for learning economics. This resource not only uses the frame inside the browser window, but also paged navigation.
wloks
Wloks website offers graphic assets in a chic and unique way. Instead of the usual electronic interface of stock photos, this site uses an interesting style of printed catalogs and fraud murals , with a frame and a menu of items placed in the corners of the screen.
Beer 34
Beer 34 beer makers have found their unique solution to control 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 the set in question.
10. Get to know CSS conversion
Stand4humanrights
Stand4HumanRights invites you to join the community by adding your photo on 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 the CSS transform. It looks interesting, however, it requires a lot of computational power and is not as sensitive as one would expect.
Species In Pieces (species in pieces)
Species In Pieces uses CSS animations for its interactive exhibit, which offers 30 endangered species from all over the world to explore. Animal models are made up of individual pieces that add up when moving from one object to another (approx. Translator. Work requires the Chrome browser) .
11. SVG animation
holohalo
In fact, it 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 be 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 refers to hand-drawn, painted and scanned items like The Boat project. There is also a tendency to create web pages that resemble printed books, magazines, stickers, posters and comics. This is achieved using page-by-page navigation, using frames and trying to treat the monitor screen as a “page” rather than the usual “window”.
And if you managed to master this great article, then get a small bonus - take a ride on the Delahaye 165 :
Timeshift165 website
Source: https://habr.com/ru/post/390413/
All Articles