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?

https://dribbble.com/shots/3823948-Savagely-Landing-Page-Exploration
https://dribbble.com/shots/4136433-Herdius-Case-Study

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.

https://famebit.com/
https://bff.co
https://www.acorns.com/

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.

http://lightsach.com/
https://shopify.com
https://www.digitalocean.com
https://asana.com/

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.

Gradients, Drop Shadows & Rounded Corners — https://kinsta.com/
Gradients, Drop Shadows & Rounded Corners — https://rentberry.com/

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.

https://dribbble.com/lezus
https://fixate.it
https://bibliu.com/
https://asana.com

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.

--

--

--

Lee Travaglini is the co-owner of Good Lookin Kids Inc. — A curated collective of designers, developers and makers. Find out more at https://goodlookinkids.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

RememberMe Design Process

Collaborations how-to guide

How to choose best font for your design.

14 Must Have Tools For Female Entrepreneurs

Free Social Media Content Plan

Best Youtube to Subscribe for Aspiring UX Designer

Body in White — Know about Automotive Manufacturing

The 3 C’s of Web/App Design

Incorporating Balance Mobile App & the Muse Headband

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Lee Travaglini

Lee Travaglini

Lee Travaglini is the co-owner of Good Lookin Kids Inc. — A curated collective of designers, developers and makers. Find out more at https://goodlookinkids.com

More from Medium

Refactoring UI by Adam Wathan & Steve Schoger — My Summary.

The cover page of the book “Refactoring UI” by Adam Wathan and Steve Schoger

The Optimal Way to Display Modals on Mobile Screens

Figma Plugins For College Students

Let’s talk about something real quick.