A brief introduction for you to understand what we are going to talk about and if the content herein under is worth your attention.
There are so many articles out there on the net telling us about different web design trends that it may be pretty obscure to understand which style is still in vogue and which is already considered outdated. We believe that all of us need a kind of ‘bird’s eye view’, a global, generalized review of the newest web design history in order not to get confused in all these minor details that differentiate one trend from another. This article is aimed on covering the brief history of latest web design trends and their main distinctive features.
Here we are going to discuss visual evolution of web design with short digressions on essential technological development milestones. Nobody will argue that the technologies affect is noticeable however it can hardly be called really crucial. For instance, you can develop either skeuomorphic or flat design with one and the same technologies set.
Now, when you know what is waiting for you, we can start our short historical excursus.
Let’s begin with the first decade of the XXI century, the so-called ‘caramel’ web 2.0
Here is a list of features that flash our mind when we speak about web 2.0 style. According to Elliot Jay Stocks, a famous American designer’s speech at Future of Web Design conference in New York, these features are characteristic for web 2.0 websites:
- bright colors;
- ‘Limited/special time offer’ badges, stickers and labels pinned to the page;
- glossy, glass and ‘caramel’ elements in icons and illustrations design;
- rounded corners;
- patterns with diagonal lines used as backgrounds;
These clichés flooded the internet mainly from 2003 to 2010. Sometimes technologies fell behind the web fashion. Just remember the rounded corners markup. It has been made with the help of images. So, it’s safe to say that trends urged the technologies on.
2011 – skeuomorphism
With the beginning of the second decade of the XXI century, realistic design came to replace the ‘caramel’ trend. Yes, it was skeuomorphism – the usage of elements in web design that look similar to their real life analogues. For instance, drawn to detail 3D recycle bin or leather background of iOS calendar application of that time are skeuomorphic.
The features of skeuomorphism:
- 3D elements;
- soft, natural color schemes;
- elements that look like cloth, leather or other physical material with realistic stitches and texture;
- relief letters;
- curtains, ribbons and stamps.
Together with this trend, more fundamental things were coming into fashion. They were connected with browser technologies development, simplifying of coders work and forming of good web designers’ taste. Web designer became a separate profession at last.
The features below are still in vogue:
- interesting, varied typography;
- following the laws of print design in text styling;
- big background photos.
In fact, Apple with its innovative corporate image had been the only trendsetter all this time. Web 2.0 elements as well as skeuomorphism appeared on their websites and applications first.
But in 2010-2011 this giant brand faced the competition of two other peers.
2010 – Windows Metro style (or Microsoft design language or Modern UI)
In 2010 Microsoft presented the world its new design, which completely differentiated from the previous one. Main emphasis in their style guide has been made on flat elements and typography which contrasted with the icon interfaces. These changes were announced as a truly digital design.
Apple also started to bring in the elements of minimalism and this has become a popular trend very soon.
Such overwhelming popularity of flat design has been strongly connected with technical requirements of the epoch of startups and mobile devices. It was utterly important to create websites and applications rendering correctly both on desktop and smartphone screens. It’s difficult to create a responsive design with skeuomorphic elements, but it’s easy to do this with flat ones. And the design will look classy.
2011 – Twitter Bootstrap advent
Twitter Bootstrap has been developed as a framework aimed to simplify the life of the front-end programmers, but actually became a bearer of the new style.
Simplicity and visual appeal of the framework played an important role in its quick spread. But main reason of such lightning advancement was surely a turn-key solution for the whole heap of front-end development tasks. The fact that it’s possible to get a quality code suitable for all platforms together with good design surely attracted thousands of developers. This gave the fertile ground to the internet gossip that all websites have acquired the same look.
Nevertheless, they say that Bootstrap is not a trendsetter now and never was the one. The framework is more likely the reflection of trends. Bootstrap 1.0 used gradients, more shadows and other unobtrusive 3D elements, characteristic for skeuomorphism epoch decline.
2012 – Flat Design
Skeuomorphism almost turned into a swearword and flat design came into full reign at last. Here are the most prominent of trend’s visual features:
- 2D environments, without shadows and depth;
- content on the foreground;
- bright colors come back.
Even the button with its traditional affordance design – protrudent form, similar to that of the physical buttons, – became a flat rectangle.
Meanwhile, some of the trends that have become popular in the epoch of skeuomorphism continue to thrive:
- interesting typography and keeping the print design in mind;
- big photos and even videos as websites backgrounds.
2013 – trends combat
The collision between the attacking flat design and skeuomorphism that doesn’t want to leave the battle field reaches its climax. This became one of the most disputed topics on the internet not only among web designers. The Argentinean agency ‘In tacto’ even released the game on the topic.
Flat VS Realism
The agency boasted game success in their famous video.
Thus, the progress can’t stand still and two visual languages appeared in 2014. Who knows, maybe they will decide the outcome of the battle.
2014 – Google Material Design
A detailed style guide from Google impresses not only with the novelty of design, but with the level of promotion and the coverage of audience. Google really managed to become a trendsetter in application design, the guide was targeted at. However, very soon several Material Design frameworks for the web appeared and most of them were made not by Google (Material Design in Angular.js, for instance)).
The designer, John Weley explained the idea behind Google’s Material Design on the Google I/O 2014 conference. He said that as contrasted with Microsoft’s approach, who claimed their Metro style “authentically digital”, Google wanted to return to real, non-digital world, to find natural, maybe even a bit skeuomorphic metaphor for the interface. Though, the metaphor they have chosen turned out to be the flattest thing existing in physical world. It’s paper, as you know.
Almost everything in the interface looks and behaves like paper, accordingly. The screens are sheets of paper with ink on them. The shadows came back to design. They are thrown when one sheet is placed above the other. The protruded button also came back, but now it is not pressed (goes down) on click. It shows the effect of the running ink. We would like to draw your attention that Google’s paper has some unreal properties. For instance, it has no texture and its sheets can seamlessly join and part.
Google Material Design style in general upholds the tendencies of minimalism, the usage of bright colors and interesting typography.
Here are a few absolutely new features introduced by Google Material Design:
- the return of shadows and depth into design;
- the extensive usage of icons that are mainly flat, but have shadows, folds and depth;
- animation made in paper sheets metaphor style.
For the first time animation upholds the general style idea so adequately and almost steps to the foreground of style guide plan. Nearly each section of the plan contains examples with interesting and well-grounded animation.
2014 – IMB Design Language
At the end of the previous year, IBM Company released their new design language.
According to IBM blog, the new design has been inspired by the parallel with human languages. Language is the mean that allows people communicate, understand each other and solve tasks together. Visual or design language is aimed on helping designers and product developers start to speak the same language with one another and their products users.
IBM Design Language unlike Google Material Design doesn’t give guidelines on spacing, padding and margin sizes. It sets a good general philosophical pace in design. For example, they have several paragraphs about the golden ratio and variants of grid, but there are no any templates or constrains, supposing that if you neglect them, your design will not fit the IBM style. While Material Design is all about constrains. The authors of the style guide explain IBM’s reluctance to give lazy-bones ready-made templates by their desire to let new ideas break free. Don’t you think that this sounds great, especially on the background of all those talks about the attack of clone sites and applications?
Sometimes it is possible to find the accurate numbers and guidelines. For instance, the Infografics section includes the following recommendation: don’t make the corners round, and the icons will have a stricter ‘scientific look’.
IBM Design Language pays much attention to better user experience and puts content as well as animation into focus. They took the immortal principles of Disney animation as the basis of movement concept. The secrets of attraction and stylishness of some tricks are revealed briefly but straight to the point. They also give some interesting examples like the one with the warning block that is moving heavily, slowly. It grabs attention and creates the impression of importance by this ponderosity.
2015, what to wait?
Due to the accent on elements movement in two sensational styles of 2014, we can arrive at the conclusion that animation might become the new field for trends battle.
This is quite understandable, as technologies made creation of animated effects simple like never before. As to visual side of web design, currently it is probably difficult to invent something revolutionary. This leads to the situation when trendsetters don’t try to reform flat design radically. They just shift the accent on animations to make them their recognizable zest. So, sure enough, the most intriguing things are waiting for us in future.