Trends in Web design 2020
23 Feb 2020
Web Design Trends 2020
Our yearly web design trend predictions: what we expect to see in web design during 2020. We also have a closer look at neumorphism, discussing its pros, cons, and origins.
Neumorphism
Neumorphism is a new trend in web design combining the two previous web design trends skeuomorphism and flat design.
To understand how and why neumorphism has evolved one needs to take a closer look at its predecessors.
Skeuomorphism
When websites and mobile apps were relatively new, it was important for users to have clear visual indicators in the user interface that could be related to similar functions in the real world. Users needed the extra visual impact of for example a beveled button to easier understand its function. It, therefore, became popular to create as realistic design elements as possible.
An older version of web browser Safari’s logotype, resembling a real compass.
Paper, leather bindings, wooden shelves, metal buttons, and shiny glass surfaces were used to elicit the intended functionality associations.
Apple was one of the most enthusiastic supporters of the trend, which got the name skeuomorphism.
The disadvantage of skeuomorphism was that the high level of detail required to create the images slowed down their production. The high level of detail also prevented the images from taking advantage of newer file formats that were smaller, more flexible and could be animated.
Flat Design
As users started to become more comfortable with interpreting digital user interfaces without the aid of clear visual similarities with real-world objects, the most prominent advantage of skeuomorphism disappeared.
Flat version of the web browser Safari logo. The image still depicts a compass but is not as realistic as the previous version.
Instead, focus shifted to being able to quickly create flexible and cost-effective user interfaces using image files that could change color depending on the theme, could be animated and at the same time have a small file size (were performant).
The file format SVG got better compatibility with different web browsers and could be used to a greater extent.
Skeuomorphism + Flat Design = Neumorphism
After a long period of flat design being the prevalent trend, skeuomorphism has made a minor comeback in the form of neumorphism: flat design with some realistic details.
Example of a neumorphism design by Marius Kasnauskas.
These details consist of using subtle shadows and gradients to create an illusion of depth in the image. The concept was introduced by Michal Malewicz and Jason Kelley.
Try out the design concept at neumorphism.io, an online tool for creating a typical neumorphism design.
😍 I have to admit, I’m liking this whole Neomorphism thing, and this generator makes it pretty easy to make those soft effects in the browser:
In before the replies, it’s ok if you don’t like it too! Just try not to turn it into a flame war.https://t.co/ne8vSXlObc
— Sarah Drasner (@sarah_edo) February 12, 2020
Longevity and Criticism
Since the neumorphism trend is relatively recent, it is impossible to foresee how long it will last at the time of writing. Critics have pointed out that neumorphism complicates accessibility since the contrast between for example buttons and their background becomes less apparent.
Additional problems could be that users have difficulty distinguishing which elements can be interacted with. Furthermore, these types of designs take longer to implement, leading to longer production times and higher production costs.
Others are of the opinion that the most suitable target group for flat design and neumorphism is primarily the younger generation. The younger generation has been using digital tools all of their lives and therefore do not need visual references to physical objects.
Why is This Trend Appearing Now?
In terms of cost, neumorphism is neither cheaper nor quicker to produce than flat design (rather the opposite). There is no other new technology that has become popular and that would promote neumorphism over any other type of design. Our guess is that it’s time for some visual change and that completely flat design no longer feels modern.
At the moment the trend seems to have gotten quite popular among designers. Time will tell whether or not neumorphism designs will make it all the way to production.
Dark Mode
With dark mode, users can switch from a light color theme to a dark one. The advantages of being able to switch to a dark theme are to increase accessibility for users with impaired vision, save energy consumption and offer a more relaxing reading mode.
Although dark mode mostly is a feature for websites and web apps where the user is expected to spend quite some time in front of the screen, the trend has led to darker web designs becoming a little more popular overall.
Light and dark mode from Google Material Design System.
Switching Between Light and Dark Mode
It has become easier technically to implement an alternative dark mode on the web, thanks to the possibility of taking into account whether the user prefers light or dark mode in CSS, using the media query prefers-color-scheme. (Read more about CSS in our Web Development and Web Design Glossary.)
The functionality is at the moment of writing supported in about 79% of all modern web browsers.
CSS Custom Properties is another functionality that helps make implementing different color themes on websites easier. Also called CSS Variables, the functionality is currently supported in about 93% of all modern web browsers. Read more about CSS Custom Properties on our tech blog.
Design Systems
Design systems have become more and more important with the rise of web applications and web-based software services. Larger web apps and digital products are often constructed by putting together smaller components to form a complete experience. In order to keep the design, branding and user experience consistent throughout the product, setting up specific rules to describe how components should be built and look have proven very effective. These unified rules constitute the design system.
“Design System” is a comprehensive description, encompassing concepts such as Brand Guidelines, UI Components and Pattern Library.
Examples of Design Systems from Google, Microsoft, and IBM. Also, notice the dark trend.
Several leading tech companies like Google, Microsoft and IBM have made their design systems publicly available, however, design systems are not just relevant to IT companies. The website adele.uxpin.com lists public design systems. On the list are companies from widely different industries – for example, Royal Canin and Financial Times.
For those who want to dig deeper into the subject of Design Systems, we recommend the (free) book ”Design Systems Handbook” published by inVision.
Contact us if you need help with your Design System.
