Web design trends & fads for 2020
What’s happening in 2020
Even though we have just entered the new decade, it is easy to see some of the trends emerging in web design.
Some techniques have carried over from 2019, and some universal “truths” about web design are evolving and becoming something new. So without further ado, here are some techniques to look out for when designing for web in 2020.
What’s still popular
Isometric Illustrations
In simple terms, isometric means “of equal parts”. Isometric illustrations are sort of like faux-3D in the sense that you are only seeing two sides of a 3D object on a 2D plane… do you follow?
Breaking the Grid
When we talk about “the grid” in design, it’s kind of a big deal. Knowing how to make a grid and use it to create a consistent look and feel is an important rule in both print design and web design. However, rules are meant to be broken. The concept of breaking the grid in web design originates from “Material Design” which emerged a few year back. By making objects break outside of their containers (in a well-designed way) it allows for the user to identify depth and rationalize the concept that the web is fluid.
Rise of the blue people
The web is a big place where user’s nationality and race can vary. Designers don’t want to exclude people, so to ensure your inclusive of everyone, use blue people. But why blue? Blue is the most commonly used colour on the web dating back when all hyperlinks were blue. This makes it the most suitable colour for nondescript characters.
New for 2020
Heavy use of modern CSS techniques
CSS isn’t what it used to be. When we first started in this industry the ability to make layouts with CSS vs. using tables was revolutionary. Today CSS is so much more than that. By utilizing CSS to make impactful designs, not only does it reduce the weight of your site (by not using heavy embedded images) but it also makes your designs way more flexible.
Some CSS techniques used include; drop shadows, rounded corners, gradients, animated transitions to name a few.
Suggestive Animations
User Experience has become the focal point of most websites and rightfully so. How useful is a “beautiful” website if it is impossible to use. With the use of Suggestive animations you can help guide your user through the product you created to ensure they get the best experience possible.
Adaptive vs. Responsive layouts
Mobile-first design is nothing new. The idea that you should design a website with the idea that it will also have to work on a mobile device brought light to the concept of responsive design. Responsive design is when containers scale, columns stack, and menus collapse. This ensures that your designs work across all screen sizes.
Where adaptive design comes into play is when objects are added or removed, plus layouts change in an unorthodox non-responsive way. Adaptive design doesn’t simply move things to fit on a smaller screen, it creates a layout that is suited for the device.
Patterns, Shapes & Solid Colours
Going back to the days Bauhaus design, the use of geometric shapes and repeating patterns is dominating the web.
Trends that have died (or should)
Parallax in layouts
I wasn’t a fan of single page parallaxing websites when they first emerged and I am glad to see them go. One of the main rules of UX design is to never “hijack” the user’s experience. Because you interact with websites it is difficult to anticipate how fast or slow someone will browse your content. This as a result can make objects that parallax feel unnatural.
The alternative is to use a “slider” like effect where each section of the website is accessible by hitting an external control or with the wheel on your mouse — thus hijacking the experience. To make a website parallax, it requires a large amount of code and heavy transparent images ultimately slowing down your website.
Cinemagraphs
Cinemagraphs are photos with one element that animates. For example, a photo of a cup of coffee with animated steam looping out of the cup. There is a misconception that anyone can make a cinemagraph out of any photo. The truth is you either require special software or need the help of a motionographer. The cinemagraph itself is also just a video file (which can be quite heavy) or an animated GIF for most mobile devices. Ultimately, cinemagraphs do noting for the experience of the user… other than look cool?
In Conclusion
Trends change all the time, but it is important to identify what trends are a part of progress vs. those that are just there to make things “pop”. As technologies evolve, techniques become easier to execute and priorities shift. Always think of the user, and always apply the trends that fit the needs of that user.
