At the turn of every year, we inevitably come across an assortment of articles forecasting the “Top 10” design trends for the year. For the most part, these articles discuss general aesthetic trends that have gained recent popularity, but a consistently missing part of the conversation is how these design trends could affect overall accessibility and usability.
We’ve combed through a handful of these lists for 2020, pinpointed the commonalities between them, and offer our perspective along with accessibility considerations for each design trend.
1) Dark Mode
2) 3D Elements
3) Mixing Illustration & Realism
4) Minimalist Navigation
5) Large Typography
6) Audio User Experiences
7) Gradients 2.0
8) Geometric Shapes
DARK MODE
Dark mode is essentially a toggle that reverses the color scheme of an interface—backgrounds become dark, and text becomes light. With Apple adding Dark Mode to both macOS and iOS in the past year, many applications have followed suit by offering a similar feature for their users.
Dark mode can also be expressed in terms of contrast polarity, which describes the contrast between the text and the background. Light mode has positive contrast polarity, meaning that there is dark text on a light background. Conversely, dark mode has negative contrast polarity, meaning that there is light text on a dark background.
Nielsen Norman Group has recently determined that both Dark Mode and Light Mode have particular advantages and disadvantages depending on what the screen is being used for. Generally speaking, for your standard user with normal vision, light mode is more advantageous, yet for a handful of low-vision users, dark mode may be a better option. Additionally, screens used for long-form reading should offer dark mode as an option.
Accessibility Considerations:
Because there isn’t a clear winner when it comes to Light Mode vs. Dark Mode, your best bet is to offer both to your users if possible. Understandably, translating a light mode design into dark mode is no easy task, especially when you need to maintain brand consistency. Yet because operating systems and browsers can sometimes cause your website to display in Dark Mode, it’s crucial that you have a different color scheme that your developer can implement for this scenario.
When there are certain branded colors used around a website—i.e red, green, or dark blue—this can easily decrease the overall contrast in Dark Mode, so the interfaces should prioritize appropriate contrast levels and color choices over brand consistency. Otherwise, not only can your webpage look much worse if you design only for Light Mode, but also your visually-impaired users could have a much more difficult time navigating the site if the colors and corresponding contrasts are not up to the standard.
In other situations, you may want to provide your users with an in-browser Dark Mode toggle, even if their operating system or browser settings are set to the default Light Mode. In this scenario, we suggest you keep the default setting of your website to Light Mode while making it easy for your users to find how to toggle between the different modes if they’d like.
3D ELEMENTS
One of the more recent trends in web design is the use of 3-D elements as a focal point. Part of this adaptation is due to faster processors and modernized browsers, as well as the continued advancement and affordability of 3-D rendering software. The growing trend towards using 3-D elements adds a ton of variability and diversity to web design, and we see this implemented in various ways, including 3-D-rendered scenes, illustrations, and photography.
Accessibility Considerations:
Utilizing 3-D elements in your web design can significantly improve the usability of your site. In the world of flat design, it became increasingly difficult to determine which elements served which purpose—for example, buttons often blended right into the page—and so incorporating a bit of realism back into the design allows the user to easily understand what each element is for.
On the other hand, it’s easy to overdo it, which can overwhelm your users. If you’re rendering a 3-D environment, it can put stress on older devices and browsers, making the viewing experience less enjoyable. It may also be more difficult to make your browsing experience fully responsive, so be sure to do thorough cross-device, cross-browser testing to ensure a consistent viewing experience.
MIXING ILLUSTRATION & REALISM
This next trend, which is related to the increased use of 3-D elements in design discussed above, is to combine realism with illustration. By mixing the two, designers get the best of both worlds by bridging the gap between flat design and skeuomorphism, allowing tons of room to flex their creative muscles and providing countless opportunities for establishing a unique look-and-feel.
Accessibility Considerations:
Similarly to the accessibility considerations to 3-D elements, it’s important to utilize this style to the extent where it is beneficial to your brand and not beyond that, as overdoing it can complicate the user experience. Keep in mind that if you want your website to create a memorable visual experience, it should still load quickly and remain easy to navigate.
MINIMALIST NAVIGATION
Minimalism has been a growing trend in web design for the greater part of the last decade, and one of the more recent phenomena is minimalist navigation. For the most part, minimalist design has emphasized simplifying the browsing experience for end users by getting rid of extra visual clutter, allowing the user to find what they need more easily and with fewer distractions.
Creating a minimalist design can be a surprisingly difficult task, especially if it’s for a content-rich website. One of the go-to design decisions for these websites that we’ve all come to recognize is the hamburger menu—and while it does fit in aesthetically with the concept of minimalist design, it has been a controversial design decision ever since it gained popularity because of how it decreases the discoverability of the navigation.
Accessibility Considerations:
Because our highest priority is usability, we want to encourage creating a minimalist navigation that is intuitive to the user and removes unnecessary content. A strong solution is often keeping the entire navigation visible and consolidating menu items when possible—too many menu options becomes cluttered and overwhelms the user. While hiding the navigation behind a hamburger menu is still a popular choice in web design, we recommend taking a slightly less minimalist approach by displaying the navigation items normally on the page. If you must use a hamburger menu, use one with a “menu” label in order to better direct your users.
LARGE TYPOGRAPHY
A design trend we’ve been coming across more and more is the use of large, bold typography as the focal point of a page. This is a pretty significant move away from the design trends we all remember from 2013, which typically consisted of a full-width hero image, 3 pillars of info below it, and large blocks of flat color (thanks to the release of Windows 8). With this trend, typography begins to play the role of a core visual element on the page, bringing the user’s focus to the content while also serving an artistic purpose.
Accessibility Considerations:
Keep in mind that while the type is serving as an attention-grabbing illustration in these instances, anything too large or too intricate can be overwhelming and difficult to read. Because it’s serving as an artistic focal point, it does not need to be as legible as standard body copy, but try to avoid making your users struggle to read the bold typography in the first place.
AUDIO USER EXPERIENCES
A growing trend that took us by surprise is the increased use of audio user experiences. The last time that was a popular feature on websites was during the MySpace era… right?
Luckily, these audio experiences differ from hearing a Top 40 autoplay on your friend’s profile page—they tend to focus more on storytelling, allowing a website to provide a more immersive experience for the user. Now that animations and other forms of moving image are all over the web, adding an audio component really completes the movie-like or game-like experience of visiting that site.
However, the increased use of audio user experiences has its downfalls, including the following: 1) it leaves hearing-impaired individuals out of the experience, 2) it may conflict with screen readers, 3) many users don’t like when their device plays audio when they don’t expect it to, and 4) it can add a significant load-time to your website.
Accessibility Considerations:
While audio experiences can provide a pleasant, immersive experience for users, it is best to save those for websites that utilize it as a storytelling component. For other types of websites, especially those that are used to convey important information, it could easily frustrate your users. If audio is a necessary component to your website, we suggest the following:
- Mute the audio by default and have the user opt in to turning up the volume if they desire
- If the user decides to opt in to the audio experience, make sure anything else playing out loud in the background is paused
- Utilize lazy-loading so that the audio file loads only if the user chooses to incorporate the audio into their experience
GRADIENTS 2.0
Gradients have been on the rise for the past few years, further distancing us from the flat-design trend of 2013. What’s been a more recent development is the refinement of those gradients to become a specific branding element. Some brands take a more minimalist approach, keeping the gradients subtle and using no more than two colors, while others push the limits with the amount of colors and how often those colors change.
There was a great deal of hesitation when gradients began to make a comeback because they reminded us of design from the 90s (WordArt, anyone?). But we’ve learned how to create modernized gradients that are visually appealing and can serve as a branding element. They help to add a new dimension to design by bringing back realism to objects, which flat design removed a lot of. Designers can use them to create bold statements, emphasize certain elements on the page, and even guide users’ eyes towards a focal point.
Accessibility Considerations:
Gradients can be a useful tool when it comes to establishing hierarchy on a page while also serving as a branded visual element. However, a big accessibility concern when it comes to utilizing gradients is how it affects color contrast if there are elements juxtaposed over the gradient. If you have type or other design elements that sit in front of a gradient, be sure that your color contrast ratio is at least 4.5:1 for normal text and 3:1 for large text or graphics. Additionally, make sure these color contrasts remain high on all devices and screen sizes, as colors in a gradient can shift as the browser window resizes.
GEOMETRIC SHAPES
We were surprised to come across geometric shapes as a popular design trend for 2020, mainly because the use of shapes in design has been around for nearly a century, but it’s a trend we’re a fan of nonetheless. Geometric shapes are a great way to take something universally familiar and create unique compositions to reinforce branding and enhance the overall design. Shapes can also help develop web page structure, specify the hierarchy of the content, and indicate points of user interaction.
Accessibility Considerations:
Geometric shapes can be a powerful tool for designers in that they can tremendously improve the user experience. However, they can be misused in a way that is counterintuitive to users, so it’s important to understand how to use them to your advantage.
Be sure to understand the hierarchy of your page so that you can use shapes to draw attention to the right places. Additionally, learn about the psychology behind shapes so that the meaning they convey matches the message you want to get across. Lastly, it’s crucial that any geometric shapes used solely for aesthetics and not functionality do not appear to be interactive—shapes are meant to bring order and simplicity to a design, and the last thing you want your users to experience is ambiguity and confusion.
To summarize, as much as we love seeing new design trends take off, it’s important to take the time to assess whether or not these trends will impact the accessibility of your website. Let’s push for accessibility concerns to become a bigger part of the discussion for web design trends moving forward!