An overarching trend we see for the upcoming year is an increased sense of playfulness in web design.
Day & Night, a short from Pixar in 2010 influenced animation approaches used in features like Inside Out and Soul.
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 huntsWebsites’ 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 clueFind a word hidden in your main site or the scavenger hunt siteFind a hidden clickable element on the pageDraw a shapeDecode 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 experiencesJeremy 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 websitesSometimes 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.
5. Sites with a strong sense of placeMaybe we are all just compensating for missing travel, but some websites seem to be gaining more sense of place. We are seeing photographs of locales featured on homepages and about sections calling attention to cities, towns, and natural places around where the creators live.The web can be a detached place where you often have no connection to where the site you’re browsing is coming from. Adding a note like “made with love in …” or featuring an image of your favorite nearby spot prompts visitors to picture where you are and creates a small real-world connection for them. If we have been traveling less, at least we can remember we are making connections all over the world online.Grace Potter uses this beautiful ocean image as her landing page, even though it isn’t directly related to her work. With this photograph, she grounds her website in her New Zealand roots, bringing the visitor into her world.
6. Art deco motifsWe are in the ‘20s again, after all! Art deco motifs fit well with the geometric designs that have been trending over the past few years. Though people’s first association with art deco style might be ornate speakeasy sites and Gatsby-themed wedding invites, it can make for beautifully minimalist designs.This year’s trend takes inspiration from the clean, curving lines and repetitive graphic shapes of art deco illustration and architecture. These elements can inspire beautiful logos, fonts, spacer motifs, borders, and illustrations. To effectively design in this style, it helps to understand the philosophy behind the original art deco movement.Art deco combined elements from the natural world with the modernity of the machine age — bold lines, symmetry, simplicity, and unvaried repetition of elements. See how the shapes in this dragonfly wing translate to the regular patterns of the classical art deco Chrysler Building.
The Alegria art style that BUCK designed for Facebook in 2017 appears to take a lot of cues from art deco’s depiction of human figures. The clean, curving lines, oval faces, reduced detail, and exaggerated proportions all call to mind this art style. Perhaps a new type of modernist figure design, like this stunning piece by illustrator Rodolfo Reyes, could be an updated version of this trend.
7. Fewer images in heroesThis 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.
8. Oversized typographyTypography of unusual size is a fresh, bold design trend for this year. At a certain size, words become more of a graphic element than simply part of the copy. This is a versatile technique that can be used in minimalist or maximalist designs just as effectively and can suit many different styles.This film portfolio website for Eva Habermann (made by Daniel Spatzek) overlays large text onto a moving film portfolio reel. The text partially blocks the image, making the viewer curious to see more, and a sans-serif font in two colors gives just the right amount of contrast without being illegible or overwhelming.
David Calle’s portfolio site uses oversized text to create a sophisticated, ultra-minimalist design. The neutral background color and serif font combine beautifully with subtle animated movement as the viewer scrolls.
9. Interactive fontsTaking 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.
10. Responsible motion design Now that we’re talking about interactivity, it’s time to talk about responsible motion design, which we see starting to become a standard practice. While movement is an intriguing facet of web design, it’s easy to not just go overboard, but also cause harm to people by causing motion sickness. Motion sickness is quite common, and animation like mouse-triggered scaling, parallax effects, or plane-shifted scrolling (also known as scrolljacking) should be avoided.Motion can be used in subtle ways and responsibly. Corey Moen, a Senior Brand Designer at featuredsite went into detail about how to build while taking into account the ‘Reduce motion’ setting in MacOS.
And while that’s important, it doesn’t mean you should use this as a catch-all and an excuse to use motion all over the place. Excessive motion is a confusing user experience, harmful to many, and simply not necessary. Related tutorial: How to build for those who prefer motion and those who don’t11. Collage illustrationCollage style graphics can give site illustrations a tactile feel, open up more white space in a design, and allow you to incorporate images without focusing the entire design around a photograph. Make sure you mix up shapes, patterns, and colors within a collage. You can add a monochrome effect, tint, or filter to photographs to help them blend with the overall design.Vanta’s site uses collage-style illustrations on the landing page and throughout the site. Editing its photographs for a collage-like appearance allows it to place graphics irregularly and off-axis, breaking up the site’s grid
13. Gradients with grainGradients are already popular, but with added grain, they create an entirely different effect. A perfect gradient is slick and modern, giving objects a futuristic glow or a shiny, technological feeling. Grain grounds a design, gives it texture, and helps it feel more natural.Depending on the treatment, grain can mimic film, photography, or print mediums. A fine, multi-color grain can look like analog film, while a larger monochrome grain can look like a silk screened poster. Grain and gradients that incorporate it can be used selectively or across the whole page, as a full background, or within specific objects.We used a number of grainy gradients on the website for the featuredsite 2021 No-Code Conference. Gradients are used in animated graphics, backgrounds, and elements all over the conference page, and we chose a mid-size grain that gives a print-media type effect.
Another creative use of gradients this year is issuing them within the borders of buttons and other types of elements. Here’s a tutorial for creating the following rainbow-bordered button.
14. LineworkA trend that feels in some ways both modern and throwback is linework. Designers can use lines to delineate sections, headers, paragraphs, and product galleries, or create a dynamic grid for the entire webpage. Add linework illustrations (abstract or representational) to bring this style even further. With this type of design, line weight is going to have the biggest impact on the final effect.Appart Agency’s website uses ultrafine lines. The effect is technical, sharp, and minimalist. The graphic design and orange, black and taupe color selection recall the Minimalist art movement of the 1960s. The motion of the horizontal lines on scroll is also a nice touch.
Breef uses thin lines too, but combines them with lighter typefaces and illustrative graphic elements. With the muted color palette and strikethrough mouseover feature, the overall effect is casual, in a grown-up millennial type way. Its site has a lot of information to communicate, and the clear section divisions, illustrations, and unfussy background help the content stand out.
CPGD uses bold black lines for a fantastically graphic effect. This design has more of a young, fun feeling. Each section within the lined grid is a different color, helping differentiate content, and the mouseover color change orients the user as well.
15. Split-screen websitesAn interesting way to break up a design is with a split-screen layout, which we have been noticing more recently. The dual layout gives your design contrast, visual interest, and natural separation of content. It’s also a great excuse to play with color.
var!－būt!’s festival website (built by ONEIGHT7) puts an interesting spin on this design with a fixed footer, marquee scroll, and contrasting scroll directions on the right and left sections. The split-screen here anchors the viewer so you can incorporate lots of movement without them getting lost.
16. More glassmorphismA gorgeous trend for this year is glassmorphism. A combination of transparency, blur, and movement can make elements of pages behave visually like glass. You can use this technique in logos, illustrations, or even full sections. There’s a fantastic tutorial by Tim Ricks on one way to create a glassmorphism effect here.The key to this style is diffusion, reflection, and shadow, which create the optical illusion. Combined with subtle movement, the glass effect can make a site feel 3D. The diffusion of the “frosted glass” within the image allows you to incorporate transparency into your design without it feeling too visually messy.Tyler Galpin uses glassmorphism to create a mesmerizing logo with movement.
Stefan Velikov uses glassmorphism in this cloneable featuredsite project to make this credit card illustration hover and pop off the page.
17. Less neumorphismNeumorphism, a new interpretation of skeuomorphism in design, is a minimalist style that started getting popular for apps and websites in 2020. It mimics modern device design — think of a new style remote or older iPod — by using low contrast monochrome elements, subtle shadows, and forgoing lines and sharp borders. Here’s an example from Dribble:
Neumorphism sticks out because it’s different from most web designs, but sometimes things are built in a standard way because it just works better. The reason we picked “less neumorphism” as a trend is simple — the style is terrible for accessibility.The lack of contrast and clear differentiation makes sites in this style very hard to navigate for anyone with reduced vision, and the shadowed elements make it hard for the user to tell which button they are pressing. The CDC puts the number of Americans with vision impairments at more than 3.22 million, but accessible design isn’t just important for those with disabilities. Everyone will encounter situational vision difficulties at some point, like bright environments that interfere with screen visibility, and neumorphism is hard to read in environments like that.Fifty-three million people in the US alone live with disabilities, and everyone experiences situational disabilities at some point in time. Accessibility is much more than a trend — it is a necessity and should always be a top consideration when designing for the web.18. Inclusive copyWe have noticed a lot more websites moving toward inclusive content and language in their designs. This should be a norm, and hopefully, this is a permanent shift toward a more universal awareness of the impact of language. More inclusive copy makes the web a place that is more welcoming and more accessible to more people.featuredsite has our own reference for inclusive language that we use to guide all our written output, and we have made it publicly available as part of our brand design system page. Language guidelines can be a useful feature to add to any company website.It’s not just what you say, it’s also how and where you say it. Alt text, legible text (font, size, and color), and avoiding text-as-image are all ways of making sure everyone will be able to read what your site has to say, regardless of language or ability.
19. Gender-neutral designAnother approach that we see becoming a standard is gender-neutral web design, which we already see being adopted more universally. The obvious first step is opting out of the unnecessarily gendered details that used to be so ubiquitous — aggressively pink personal care sites or hypermasculine fire-wolves-and-knives themes for camping equipment. Women buy power tools and men buy skincare, but it’s easy to default to societal assumptions without thinking.It has become standard to offer multiple gender options and pronouns in forms and drop-down menus. 42% percent of Americans now think multiple options should be included. Better yet, when websites don’t have a pressing need to include those options, they can take both out completely, as Snapchat has opted to.
When writing copy, the new standard is to opt for they rather than he or she when a gender is not specified. Even in ecommerce, many sites are becoming more inclusive by opting not to sort clothes by gender or by offering multiple sizing systems and modeled shots on various bodies to make their products more accessible.Avoid assuming the following about the people who might use your website: what their genders might be, and what they will be interested in because of their gender. Avoiding these assumptions is more respectful, and will be appreciated by your visitors.20. Page speed prioritizationOn the technical side, page speed has become a front-of-mind consideration for web developers this year. Google’s 2021 algorithm update makes speed a more important consideration than before for SEO. This also reflects users’ higher expectations for site speed performance since 53% of users will abandon a page that takes more than 3 seconds to load. Gone are the days of patiently waiting on loading screens.Google PageSpeed Insights or Lighthouse are tools that can be used to assess your page speed optimization. There are also a few simple steps developers (or their platform of choice) can take to make sure pages load quickly like image optimization and deferred offscreen image loading. Limiting how many fonts you are using can help as well. You also want to avoid developing your pages on a platform that relies too heavily on plug-ins since that can have a big impact.21. Building with dynamic contentDynamic content allows designers to build faster, build bigger, and include more complexity without increasing the amount of labor required to make adjustments. More available database tools and no-code platforms mean more people designing for the web can begin building this way, no matter their experience level. This is a significantly more efficient way of building for the web, and it’s becoming much more widely adopted.Dynamic content is built around a database linked to repeated structures. The structure can be changed in one place, and you can simultaneously change all your blog posts, for example, without having to manually adjust each one. This is great for anyone building a site with content that is constantly changing — like ecommerce, blogs, portfolios, restaurant menus, or news sites.Static content will still have some uses, but building with dynamic content is taking over the web.22. No-code being used for more teamsWe are seeing more and more teams incorporating no-code into their workflows and benefiting from the speed and independence it gives them. No-code has grown into a movement, empowering citizen creators to build for the web without having to have coding experience. Your team is probably already using a multitude of no-code tools to make their work more efficient.For businesses, this means more teams can create web assets for their company. HR departments can create training sites, resource repositories, or company directories. Design teams can make working prototypes or craft design systems that can be referenced by anyone across the company. Marketing can contribute directly to the parts of the site they use to connect with customers or even create microsites for specific campaigns or smaller regional initiatives.
The independence offered by no-code opens up more opportunities for innovation and experimentation and helps teams work a lot more quickly. We expect to see many more businesses incorporating no-code tools into their day-to-day workflows in a more significant way this year.We are excited to see how these get put into action in 2022We 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.Or take a trip back in time and check out web design trends from 2021, 2020, 2019, 2018, 2017, and 2016.