Last year has been a turbulent year, from the coronavirus pandemic to a new wave of social justice movements and controversial presidential elections. Many of us don’t think about how broader social events and technological developments are affecting design, but especially when creating for the fast paced web, designers need to be informed of broader trends.
As we design for the web in 2021, there are several emerging trends that need to be considered from 2020 onwards. From a stronger focus on inclusive design to broader experiences, these trends will map the future of web design in 2021 and beyond.
Below are the top six web design trends that I think will hit the internet this year. If you plan to use them in your own work, make sure you have the right web design tools to implement them.
01. Web inspired by print
(Image credit: Mackenzie Child)
Print-inspired images meet the viewer’s need to connect with something in the real world – especially at a time when many of those connections are broken. What may seem out of date is drawing inspiration and improving best practices for informing and engaging an audience.
You can draw from the print without your website feeling outdated or clunky. We’ve achieved success when designers perform the following key steps:
- Choose the right typography: This can be easily achieved, especially when considering headlines that are larger, bolder and should be designed so that they can be quickly scanned by the viewer. (You can find many typography options in our free fonts.)
- Design for readability: A thick-bordered block layout can clearly group a section of a website, reminiscent of a style found in comics. In doing so, it is important to focus on flow and readability, as Mackenzie Child does in many of his projects and portfolio and can be seen in the picture above.
In addition, designers can easily orientate themselves on the layouts used in newspapers and magazines for inspiration as they scale. In the past, newspapers filled the entire page. This is a valuable lesson web designers should learn when studying the size and canvas size of the web.
02. Immersive experiences with AR
Augmented Reality (AR) is an underused method to reach your target audience and introduce them to your product in a more comprehensive and convincing way. It can be used for both business-to-consumer (B2C) and business-to-business (B2B) businesses as it is completely immersive for the user and this experience can be customized for any organization or product.
As the pandemic continues, many people cannot experience a product in person and are looking for alternatives that will continue to allow them to experience a brand and a potential purchase. Additionally, sales teams hurt because they can’t travel for business meetings, product demos, and events. Since AR helps with data visualization and prototyping, some B2B brands are using it to create immersive experiences. Nutanix designed a comprehensive “booth” for a virtual conference in 2020 (above) that demonstrated both its technical expertise and its advanced use of AR to support customer needs.
If this feels daunting, there are plenty of ways to immerse yourself in the world of AR. Apple’s AR kit is a good place to start. However, if designers are looking for a simple project to dip their toes in, they can also create a branded AR filter for Instagram.
03. Custom cursors
(Image credit: The Pen Tool)
Cursors are typically not viewed as an area of significant web design, so designers have plenty of room to turn them into something memorable. Small, personalized details like custom cursors can help people feel more connected to your website and therefore the message, brand, or product it is presenting.
There are a few simple things to keep in mind when updating cursors. First, think about the key images or aspects that make your brand unique and try to anchor them around the design of the cursor. Keep it simple and something that looks appealing in small state. detailed or complicated ideas do not translate well.
Also, remember that the core purpose of a cursor is to communicate its function. Make sure you choose a custom cursor that adds personality and reflects your brand while retaining functionality. Test your cursor across multiple browsers and add fallback for cases where your cursor is not supported.
The pen tool above is an example of a marker that uses animation and text in its circular cursor. The result is a web page that easily catches the viewer’s eye.
04. Muted colors
(Photo credit: Magic Theater Studio)
Since shades are depreciating year after year (remember the millennial pink trend we saw in 2016?), Updating your website is important to communicate that you are a modern, adaptable organization.
Muted colors will be great this year as they naturally draw the viewer’s gaze to the illustration or focus of the web page. Muted colors reduce eye strain and let people know that they can take their time on your website. Muted colors are the perfect complement, especially in view of the increasing use of hand-drawn illustrations and grain-emphasized backgrounds.
A good example is the Magic Theater Studio website, which uses a light color scheme in addition to dark blocks of color to create a very high-contrast look that characterizes sections of the website.
To be most effective with this type of design, make sure you choose colors with enough contrast so that all of the text is still legible to the visually impaired. One tool with which this can be checked very easily is the WebAim Contrast Checker.
05. No code website design
(Image credit: Webflow)
No code web design may sound irritating, but it doesn’t mean the complete end of coding a website. Rather, it democratizes the building of the web for people of different backgrounds, rather than leaving it to the few who have a deep understanding or experience with complex coding and website design.
If you worry about how no code websites will show up, you can be sure that your design will still look as nifty and modern as you want it to be. Lattice is a brand that built their website with no code. As you can see above, their website feels and looks no different from an encoded one. The advantages of this, of course, are that you are less dependent on a specific person or their skills and can update your website more regularly and with contributions from a large number of people. This will be critical in 2021 as more teams work remotely and need an “all hands-on-deck” approach to accommodate these changes in schedules and priorities.
If those first few days of 2021 are any indicator, it is clear that this year will continue to be full of unprecedented events. Without a crystal ball, it is difficult to predict exactly which web design trends will best complement the future, but ultimately, creativity and user focus are at the core of any good website design (and they are all reflected in the trends above).
If you want to learn more about trends, check out the breakdown of this year’s web design trends through Webflow.