2022 Web Design Trends

1. Mini-sites of delight Humor can take many forms, and a website that provokes a laugh is always fun to build. Why not have some fun with your build?

In the early days of Pixar, the studio began giving animators time to make a short film alongside every feature film they produced. These shorts were a creative free-for-all, a time for animators to be looser and more playful without the pressure involved in their feature films. They also ended up generating a lot of new techniques that pushed the field of animation forward. Web developers are discovering they can do the same with websites.

Crafting a fun mini-site gives designers time to just be creative, to practice and experiment with techniques, and to pull out all the design stops without worrying about going overboard on a professional gig. Sometimes creation for creation’s sake is a great way to get out of a rut.

You can experiment in a number of ways: by setting an intentionally playful UX design, or deliberately subverting expectations (but make sure you still build accessibly!). Bring humor into not just the copy and images but into the site navigation, menus, and interactions. Be subtle. Make it seem like it’s a serious site until it’s not. This is an opportunity to create a site that functions in unexpected ways. An Easter-egg-style marketing site for a professional purpose can work if it’s executed well.

Guns 2 Swords is a mini-site/enterprise in full ‘80s Dungeons & Dragons glory, with a taste of Choose Your Own Adventure. It was created by MSCHF, a group that is somewhere between gonzo artists and hype app creators, to be an actual service. Visitors could send their guns in to be forged into swords by a world-class blacksmith. Truly epic.

Blue Check Homes took the opposite approach of creating a fully legit-looking “serious” website. What started as a Twitter joke by Danielle Baskin might end up becoming a real mini-business selling “blue check” medallions (like those on verified Twitter accounts) for the homes of notable individuals.

‍2. 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.

3. 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.

4. 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.

Joshua Kaplan’s portfolio site is more complex but just as effective. He uses a consistent structure so that the viewer doesn’t get lost, reduces distracting elements (no background, big images, or movement), and makes his site feel a little retro-web with the linework and throwback copyright symbol logo.