Blog

Web Design Trends in 2022

Here are some of the trends in web design we anticipate to have an ongoing impact in 2022:

1. Web-based scavenger hunts

   Websites’ structures actually lend themselves to puzzles and scavenger hunts incredibly well. You can daisy-chain pages and password-protect certain parts, making visitors provide answers or find clues to unlock the next page in the series.

   There are all sorts of creative ways to conceal and reveal prompts, clues, and answers. This is a case where you can use your web design prowess to create a puzzle that enthralls.

   Some ideas for clues:

   • Provide a word based on a riddle or clue
   • Find a word hidden in your main site or the scavenger hunt site
   • Find a hidden clickable element on the page
   • Draw a shape
   • Decode a cipher

   Just remember to give your audience some sort of hints or workarounds if you really want everyone to be able to make it to the end. A scavenger hunt can be used to reveal a product launch, release a new video, or give the viewer a hidden piece of information.

   Marketing agency ThreeSixtyEight made a scavenger hunt to reveal the location of its company retreat to its team. It created a mysterious atmosphere with music and an opacity adjustment around the cursor that a visitor can use to reveal selective parts of the page while hunting for clues.

2. App-like experiences

   Jeremy Beyt, co-founder of ThreeSixtyEight, strongly believes these sorts of smaller, experience-focused sites are the future of web design. He explains: “A front-end-driven web experience that’s really overblown from a design standpoint is a whole new way of using the web that hasn’t existed before; it’s an app-like experience. That, to me, is the opportunity right now.” The world has gotten used to apps, where interaction, animation, and dynamic experiences are the norm. The logical next step is bringing that energy to websites and creating more unique experiences there.

   Some imagine we’re headed back to times where sites were self-contained, esoteric, and curious. But new tools for site building, such as no-code, make dynamic, interaction-focused designs significantly easier to build. ThreeSixtyEight even added a full interaction-design-focused step to its development process.

3. One-page websites

   Sometimes the most effective site is the least complex one. We have seen the increasing popularity of the one-page website that forgoes menus and navigation in favor of simple scroll navigation. One-page sites work best when their subject matter is narrower, like a portfolio or the presentation of a single idea.

   These sites evoke the feeling of holding a flyer or reading a poster. All the information you need to review is in one place without the distraction of navigation or searching multiple pages.

   This website for Indi Harris (built by Jordan Hughes) is a digital resume. It lets its subject be the focus of attention. This makes it more likely that a casual viewer will read the entire resume since everything they need is right up front.

4. Fewer images in heroes

   This year, many designers are opting to craft hero sections and landing pages that speak with design rather than relying on photographs or illustrations. Hero images give a big visual impact right off the bat, but sometimes eliminating the distraction of a splashy image puts the focus more on style and content.

   These four websites from Humain, SVZ, Heyday, and RADAR are incredibly different, but each uses layout, typography, color, and shape to communicate strong, unique brand identity. Forgoing images also creates a bit of mystery, enticing visitors to find out what else lies beyond the hero section.

5. Interactive fonts

   Taking the use of text even further, some designers have been finding creative ways to make their text move and play with the user’s mouse. An easy way to make text interactive is by applying a hover-state change like you would with a button. It helps that it’s now easier to create more elaborate effects using modern no-code platforms than it used to be to try to write these interactions by hand. When employing interactivity onto fonts, it’s important to keep legibility in mind as some people are distracted by moving characters.

   The website for Dillinger uses a font that changes weight when the cursor hovers over the text. Note that the text shrinking against the black background makes the selected text more legible, a great addition for usability. The exaggerated cursor size also makes the site feel more immersive. Designer Tim Ricks was kind enough to make a cloneable version of this site for anyone who wants to see how the effect was created.

We enjoyed navigating the sites that inspired this list so much. We anticipate a year of playfulness and creative revisioning as designers move away from some of the trends that have become so ubiquitous over the past few years. We can’t wait to see what you all create for the web in 2022.