April 2, 2020
11 Web Design Trends for 2020
In 2019, we saw gradients making a comeback, adding depth and vibrant colors to designs, having the flexibility of variable fonts in web typography, and adding a relatable, humanistic, but abstract layer to branding through illustration. We can expect to see all these trends continue to grow—and some to fade out—but right now, we’re looking at what to keep an eye on and watch out for in 2020.
1. A New “Fold”
Gone are the days of concerns about things being “above the fold.” But with recent news and releases of foldable devices, like the Samsung Galaxy Fold and the Microsoft Surface Duo, a new realm of UX considerations come into play. So far, there isn’t a set of universal “guidelines” on how UX and UI designers should handle these interfaces, which means it’s up to us to set forth best practices and test the limits. As these devices and experiences become more prominent, we’ll see a new era of experimentation and experience patterns take hold, and designers and stakeholders alike will become less concerned with whether something is “above the fold” or not.
2. Scroll Effects
With the “fold” becoming less of a concern and endless scroll pages becoming more of the expectation, scroll effects—like the use of animation and parallax effects—have grown up a little bit over the last few years. We’ve seen it done elegantly on Apple’s landing pages for new products. What used to be a flashy, gimmicky add-on, when done tastefully, is becoming more of an integral part of the user experience and adds more than it detracts.
3. Purposeful Microinteractions & Animation
One good rule of thumb for animation—or design in general—is just because you can doesn’t mean you should. As far as microinteractions and animations go, when they have a purpose they can help inform and enhance the user experience. They can add moments of clarity and delight. They also can distract and detract from the task at hand, so use them sparingly and purposefully. Button hover states, progressive content loads, and confirmation sequences are all good examples of purposeful animation. Having that image flip 360 degrees on hover just because? Not so much.
4. Vertical Images
With the continued rise of smartphone usage and the nature of people holding screens upright, it only makes sense that we start to cherish vertical screen real estate more and more. As mentioned above, the fold doesn’t exist as it was once perceived. People scroll miles and miles a day through feeds, timelines, articles, and pages. On top of that, new and improved code functionality like Flexbox and CSS Grid give us seemingly unlimited possibilities when laying out a web site. While designing for desktop is certainly still key and creating a seamless experience from device to device is more important than ever, mobile experiences will still continue to drive the narrative.
Similar to the use of vertical images comes the trend of asymmetrical layouts. They offer more personality and customization. Templated layouts are becoming a thing of the past as designers further embrace white-space, overlapping elements, and elements floating throughout the page. There is still something nice about a well gridded-out layout, and asymmetry should be handled with care. When trying to make a statement, these layouts can offer more creative freedom—especially as they use some scroll effects and animation to create an even more immersive experience.
6. Dark Mode & Dark Interfaces
Dark Mode themes have been around for a while and rose to prominence in the last year or so. It seems that with Apple rolling out of the ability to change the iOS interface from light to dark, dark and light mode options for your favorite apps have been popping up left and right—Instagram and Twitter being two of the biggest social platforms to roll out the functionality.
7. A Focus on Words
A skill we all have in our arsenal as designers is the ability to communicate, but rarely do we use it in our own profession because we assume that because we’re designers, we’re not writers. Something you’ll see earning more attention is UX writing, meaning, things like microcopy, call-to-action buttons, form prompts, inputs, etc. It also means a shift from practical writing to humanistic writing. For instance, making the case for a button to say “my account” instead of “your account” can help conversion and click-through rates.
8. Accessibility & Inclusivity
Accessibility has been top of mind for the past few years. Now, it’s time to shift the focus beyond the bare minimum to pass WCAG 2. It’s time to look at how we can make our experiences not just accessible, but inclusive. It’s about looking at and thinking about differences. It means looking at things like adaptive formatting and optimizing content to be inclusive and relevant to those that may have different backgrounds than us. It means thinking about the implications of our design decisions and understanding that just because we have a preference for something doesn’t mean it’s the right solution.
9. Business of Design
Because of how integral design has become to most businesses, whether it’s a differentiator in their core product or part of the way they market themselves, designers are inadvertently becoming more in tune with business decisions and outcomes. After all, good, purposeful design is always based around something other than just looks, and we all want a way to know if it’s really working.
As more experimentation goes into UI and product design, the more styles there are to pull from. We all remember skeuomorphism, which led us to flat design, and now deep-flat design or neumorphism. Neumorphism (New + Skeuomorphism) is a design style that uses blur, angle, and intensity of an object’s shadow to highlight the object. It’s appealing because of its minimal, modern, and futuristic look. This style is trendy and brings up some accessibility and usability concerns.
11. Leading vs Following
As with all trends, you need to decide if you want to be a trendsetter or a trend follower. Innovations and breakthroughs come from pushing through the status quo and finding new ways to solve old problems. The world needs both types. As with all trends, you have to decide which approach is the best solution to your problem.
Overall, in 2020, we’ll see continuous improvement and experimentation based on the technology at hand. As people move deeper toward more mobile experiences, designers will have more and more screens to take into account. We’ll see the power of design used for good, and bad, and we’ll see some trends become footholds in web design for years to come while others fizzle out as quickly as they come. One thing is for sure though: the inclusive, business-minded, and multi-talented designer will always have a place in this field.
What trends do you think will stand the test of time?