Internet is deluged by thousands of articles on latest web design trends. Without a shadow of a doubt, web design trends are tremendously influenced by largest technology companies such as Apple, Google or Microsoft. But before we check out the latest trends in web design, let’s step back and take a closer look at the recent history of web design. This article tells a brief story on how flat design emerged and evolved, “flat vs skeuomorphism” crisis and the rise of unified visual design languages.
Web 2.0
Web 2.0 marked a cultural shift in web design and development. The very first standards of how websites were designed, developed and used, emerged in the beginning of the XXI century.The early days of Web 2.0 era saw the meteoric rise of social media (especially Facebook and Twitter), user-generated content such as blogs (WordPress was first released in 2003) , and video sharing sites such as YouTube. It has also been linked with very specific visual style that includes:
- linear background patterns
- reflective,glossy icons
- “special offer” badges
- rounded corners
- gradients
Skeuomorphism
In digital design, skeuomorphism is a catch-all term for a realistic-looking design – where interfaces look like the interfaces of real-world objects. It’s a very obvious concept as it takes visual cues directly from familiar physical objects and tries to emulate physical interfaces, interactions and behaviors on a 2D display.
Apple, company usually associated with innovation and great design, was one of the biggest skeumorphism ambassadors. For a very long time, mobile and desktop apps were styled mimicking real world objects such as leather, wood or paper. And only when iOS7 was released, it became clear, that Apple will scrap the “traditional” skeumorphic look.On the other hand, company leading in innovation and design, had no other choice; by the time iOS 7 was ready to be launched, flat design was already everywhere. Apple, clearly, didn’t want to be left behind.
Metro and the beginning of Modern UI
In 2010, Microsoft introduced its new Metro design language. It was a radically different visual approach from any previous Microsoft product design. In Metro design language main emphasis was on flat elements and typography.
This time, it was all about the content and the beauty of simplicity (that’s what we all love, isn’t?).It was Microsoft’s hope that the new Metro style will allow application users to have the exactly the same experience everywhere – on desktop, tablet and mobile phone. At around the same time, Apple also started to introduce simplified, minimalistic UI elements and so the global “flat” design trend began.
The popularity of “flat” design was partially influenced by the technical needs of flourishing era of web and mobile startups. It became more important than ever to make applications and websites, that would look and contain same UI experience on desktop and mobile device.
Twitter Bootstrap
In 2011, Bootstrap framework was released as tool, to make life easier for front-end developers and designers. But as it turned out, it became the conductor of the new style and marked new era of the need in front-end development simplicity. The fact that you can easily implement it and quickly develop applications, that look great on mobile and desktop, attracted thousands of developers worldwide. But Bootstrap was not a trend. It was rather a fulfillment of what was missing in web design and development domain. The emerge of variety of similar front-end CSS frameworks, justified the fact, that there was a urge for unified, easy to use front-end libraries.
The crisis of “flat vs skeuomorphism”
In 2013, skeuomorphism reached its zenith. The dilemma of whether “flat or skeuomorphism?” should be used was a hot topic.
But perhaps the best illustration, of how big and important this questions was, is a brilliant video (and infographic) created by multi-award-winning design agency inTacto :
Google’s Material Design
Before Material Design language was introduced at Google I/O 2014, majority of Google’s products looked pretty distracting in different ways. Every single product looked inconsistent on different platforms. Furthermore, Android mobile operating system haven’t always meshed very well in terms of their visual design neither. But everything changed when Google unveiled a unified design language called Material Design, which contains the same design and visual style across the Google’s Chrome browser, web applications and all Android mobile devices — including Google’s new pack of wearables.Material Design is highly influenced by Microsoft’s Metro and flat design. But this time, tech giant Google,took a step back and approached flat design and skeuomorphism combination from a different prospective: the real-world object, that Google chose as metaphor, ultimate example of flat surface and the epicenter of its design was paper. The paper, however, has a number of unrealistic properties; paper “sheets” can seamlessly appear, disappear, connect or disconnect.
Material Design is a new vision, how Google and Android can take down Apple, by doing what Apple has been able to do in the past only quicker and better. Apple was able to, by virtue of being a developer of hardware, software, and operating system, to develop a brand based off of a single principle of a unified experience. Regardless of which device, how large or small, your app would work the same exact way. Google’s Material Design language moves along this same theme by unifying the experience across devices and platforms. It is why Google Mail has a consistent look and feel now whether you are on your phone or your laptop.
IBM design language
At the end of 2014, IBM made its new design language available to the world. According to this IBM blog post, the inspiration for the new design language came from the analogy of human language. We won’t go into the details, but as many designers already noticed, IBM design language seems “copy/paste” version of Google’s Material Design. Check out official IBM design page and decide for your self.
So what’s next?
None of the above mentioned tools or design languages can be categorized as a trend or revolution. Everything what we have discussed so far in this article, is a logical and necessary pattern of web design evolution and a result of continuous user experience improvement. Bootstrap allowed us to develop mobile and web application UI simultaneously. It was a first step towards multiple device UI.
However, nowadays we have to think not only about mobile and web, but also about TV, wearables, smartwatches and plethora of other devices. And the only way , to keep same visual appearance, branding and recognition along all these different screen sizes and different devices, is to use unified design language.
#webdesign #materialdesign #Google #Apple #iOS #Android
That was a great article, although I’m not sure I’d really count Metro as simple. Flat, yes, and an important step in the right direction, but Windows 8 still has a lot of unnecessary clutter.