At the end of 2023, we predicted that the new year in web design would reflect emerging technology by both leaning into it and pulling back. And 2024 delivered.
Six months later, we've seen a maximalist design approach solidify its place on our screens, and users are continuing to merge traditional web design principles with Y2K design and early web design nostalgia in search of more differentiation.
But there’s also a return to more handmade elements and “anti-design” minimalism that signals a push against the wave of AI generated content inundating our screens. Here's a fresh update to our original breakdown of 2024 top web design trends, including how you can incorporate them into your work.
For more web design trends and expert guides, subscribe to the FWD newsletter.
2024’s top web design trends
01. Hyperreality
Hyperreality blurs the line between reality and simulation, making the simulated version feel more real or impactful than reality itself. This idea, introduced by Jean Baudrillard, often applies to media, art, and culture, where simulations can seem more compelling than real experiences.
We see this now more than ever largely in part to the global rise of AI. Within the last two years Google Trends has shown a 1,700% jump in searches for AI design tools and a massive 8,500% increase in 'Generative AI' searches. (Check out Wix Studio’s AI tools for generating text, images, responsive layouts and more.)
But AI is just part of what’s fueling the trend. Designers and creators are pushing limits of what’s possible both online and IRL. See: NPC characters on TikTok, MSCHF’s viral big red boots, Brompton House’s snackable brownies that you can take a bite out of with each click of your mouse, and Superorganism’s misty animation overlay that gives the feeling of being immersed in a tropical rainforest. MSCHF’s website is also full of surreal inspiration, especially the warped video banners and animated elements in their shop section.
Tap into the trend
Interactive 3D elements: Integrate interactive 3D elements that users can manipulate, like clickable objects that change state or appearance with each interaction, to create a more immersive experience.
Surreal animations: Use animations that alter the perception of the digital environment, like overlays or dynamically changing backgrounds, to give a sense of immersion and otherworldliness.
Unexpected design features: Implement playful design features, such as warped videos or animated elements, to surprise and engage users, making the online experience feel more dynamic and intriguing.
02. A human touch
Other designers are bringing a touch of warmth and humanity to the digital landscape through handmade illustrations and handwriting fonts.
Check out Dinner Ladies’s fancy script wordmark paired with colorful art that replicates hand drawn stipple and hatch mark techniques. Delicious Nuggets by the Earth Alliance also employs hand drawn illustrations in a loose pencil sketch style. So does anti-inflammatory food brand Superkeen, which adds a subtle gradient to the outline of their whimsical cartoon mascots. These bespoke visuals featuring unique, imperfect lines and organic textures, stand in stark contrast to the polished perfection of digital graphics we see every day, making these websites feel more approachable and relatable.
Tap into the trend
Handmade illustrations: Use hand-drawn illustrations with visible textures and organic linework to add a personal touch. Consider integrating these into hero images, icons or backgrounds to make your site feel more inviting.
Script lettering: Pair handmade illustrations with script lettering to enhance the handcrafted feel. Use script fonts for headings or key text elements to create a warm, approachable aesthetic. Youworkforthem.com has a catalog of script fonts that you can license for both print or the web.
Subtle gradients and depth: Add subtle gradients and depth to your illustrations to give them a more dynamic and layered appearance. This can make characters and elements stand out, adding richness to your design.
Subscribe to the newsletter for weekly web design articles.
03. Elevated brutalism
Web Brutalism has been around for years, but 2024 saw an elevated version of this style emerge, blending the raw, minimalist principles of Brutalism with refined aesthetics. Beverage brands like Iessi and Sar Studio showed off high end photography with utilitarian typography and visible grid lines. And Family Type uses creative scrolling effects against a dark mode background.
Tap into the trend
Less is more: Stick to a limited color palette like black, white and one bold pop of color like red.
Get creative within constraints: Give system fonts like Times New Roman or Ariel more impact by increasing their point size.
Elevate Utilitarianism with high impact photography: Transform functional and minimalist designs by integrating high-quality photography from sites like Stills to add emotional depth and visual appeal. (Creating a photography-rich site? Learn more about Wix Studio’s CMS.)
04. Interactive whimsy
In case you’ve been living under a rock, things are hard out here. Which is why the need to carve out moments of playfulness feels so necessary. Websites with unexpected uses of motion and playful scrolling or hover effects in their design delight the viewer without overwhelming them with animation effects. (Read more on scrollytelling.)
Take Vietnamese coffee brand Fat Milk which transforms its abstract logo into an animated expansion of white space that’s reminiscent of creamy coffee dripping down the screen. Welch’s Fruit Snacks also has fun with floating 3D elements that move and change scale as you scroll, and designer Bruno Simon takes play to a whole new level by creating a 3D world that viewers can navigate through by controlling a little car. For a more subdued example of this trend, look to Apple’s Air Pods Max site; the subtle scrolling animations add interactivity without too much distraction from the essential product information.
Tap into the trend
Use subtle animations: Incorporate website animations that enhance the experience, such as scrolling effects or subtle hover actions, to add interactivity without overwhelming users. (Learn more about no-code animated design features on Wix Studio.)
Neutral base: Employ neutral base colors (e.g., whites, grays and beiges) to keep the overall design clean and let the interactive elements pop.
Bold display fonts: Use bold display fonts for headlines and supporting text elements to create maximum impact. (These experimental typefaces should do the trick.)
05. Digital sustainability
Digital sustainability is less about a specific aesthetic and more about a set of practices that ensures the digital work you create leaves less of an environmental impact. The internet and all the systems behind it make up about 3.7% of the world's emissions, which is on par with the aviation industry. Let that sink in.
If you want an eco-friendly website, one important part of sustainable web design is cutting down on energy use. Designers are making websites more efficient by simplifying code, reducing HTTP requests and optimizing images for quicker load times.
Many of these practices also improve the accessibility of a website, so you're not only producing websites that are better for the environment, they’re better for people, too.
C40 Cities recently revamped their website using ecodesign practices and successfully reduced CO2 emissions from 6.7g to 0.34g per homepage view, achieving a decrease of over 90% compared to before the relaunch. Plus, the site now boasts a 98% score on the Google Lighthouse accessibility rating and a swift page load time of 1.2 seconds. Adding a dark mode toggle also improves energy efficiency as well as accessibility. Re-scripted and Perpetuum both offer creative uses of dark mode. Royalties, the team behind the 2024 Paris Olympics logo design and custom typeface, created a variable weight font and implemented a dark mode option for mobile users.
Tap into the trend
Use energy-efficient fonts: Choose system fonts or variable fonts over custom web fonts to reduce the number of HTTP requests and improve loading times. This minimizes energy consumption.
Opt for dark mode: Implement a dark mode design or use darker colors with high contrast fonts instead of pure white for backgrounds, as darker pixels consume less energy on OLED screens and improve accessibility for viewers with disabilities.
Test your design: Whether you’re designing a new website or making changes to an existing one, run the url through Website Carbon to calculate your carbon footprint, verify if your site is using green hosting, and that your content loads efficiently and is accessible to all users.
06. Maximalism
Dieter Rams famously said that “good design is as little design as possible.” Well, maximalists disagree. If there was one overarching web design trend that was big on the internet in 2023—and has only gained steam in 2024—it’s maximalism. Think: loud macro photography, dopamine colors, expressive typography, and a strong visual point of view.
We keep waiting for maximalism to reach peak market saturation, but so far, clients and their consumers can’t seem to get enough of the more-is-more approach. It has appeal across categories, but especially for the web presence of CPG, F&B and emerging brands catering to younger audiences. Consider JKR’s rebrand of mass-market soda Fanta; the playful primary colors and chubby, all-caps branding of celeb chef Molly Baz's website, and new book designed by Playlab Inc., More is More; and Collins’ new take on Disney-owned streaming service Freeform.
The trend has also spawned a variety of smaller identifiable sub-trends, including heritage revivalism and ’80s-inspired retro glamor (more on those below).
Tap into the trend
Bold typography: Use large, dramatic fonts like ITC Avant Garde Gothic, 'Montserrat' or 'Oswald' to make headings and key messages stand out. Pair them with vibrant colors to create a visually striking impact. 3D lettering is sure to make a splash.
Vibrant color palettes: Incorporate a range of bright, contrasting colors in your backgrounds, buttons and even text highlights to create a lively and energetic look, or use a gradient from Neon Pink (#FF6EC7) to Electric Blue (#7DF9FF) for headings and important text elements.
Add scale: Oversized text and images will add drama to the most basic font. Try adding buttons oversized to your site or scaling up the logo in a big website footer to fill the full width of the screen.
Create a maximalist site with these responsive templates on Wix Studio.
07. Heritage revivalism
This maximalist web design subtrend borrows from the excess, ornamentation and teeny tiny details of the 17th and 18th century Baroque and Rococo artistic movements. More broadly, it stems from a less generic, digitally-optimized visual heritage. This revival is possible, partly, because of improved tech, which can now support more visual details due to higher resolutions and bigger screen sizes.
Burberry’s February 2023 rebrand was an early sign that this trend was gaining traction. The brand revived its cobalt blue serif wordmark and 122-year-old equestrian knight motif and broke through a crowd of luxury fashion sans serifs. It was one of the most talked about things on design Twitter (now X) at the time.
On TV, Plains of Yonder’s White Lotus intro sequence fittingly evoked the murals of 16th century, sun-drenched Italian villas. That sense of luxury, escapism and timeless bespoke craftsmanship appeared on sites for perfume, tinned fish, even dog shampoo, and was a welcome respite from the sans-serif sameness that’s dominated screen design for years. It’s also an early sign that we're seeing new takes on maximalism as the aesthetic continues to increase in popularity.
Tap into the trend
Old-style fonts: Choose fonts like Garamond or Caslon for their historical significance and vintage feel, or spring for a more decorative font pack with speciality glyphs and vector elements to create a unique monogram logo.
Rich jewel tones and subdued neutrals: Pops of colors like burgundy, navy blue and emerald green add sophistication when paired with cream, taupe and antique white backgrounds.
Patterns and illustrations: Look for vintage floral patterns, ornamental frames or Toile De Jouy to add decorative elements that evoke the luxuries of the past.
08. '80s excess
Another maximalism spinoff channels the visuals related to '80s and early '90s excess and exclusivity, exemplified by successful startups like suncare brand Vacation, “members-only” winery Rochambeau Club and design-friendly $1,500 wine cooler brand Rocco.
This approach uses a few common callbacks, like grainy background textures, soft single-color gradients and heavy use of vintage photography and styling. It also uses old-school magazine layouting techniques, like thin-line motifs and bordered images. The type choices are retro, too: look for neutral semi serifs or thin serifs paired with secondary scripts.
But retroglam doesn't just embody '80s print media. Pepsi embraced the design approach with a reboot of its mid-’80s visual identity featuring vintage clips of Madonna in honor of its 125th anniversary, while bodycare brand Billie leaned into the kitschy, over-the-top infomercials of the past for its recent digital campaign.
Tap into the trend
Grainy background textures: Add grainy textures to backgrounds for a vintage feel.
Soft single-color gradients: Use gentle gradients, like pastel pink to light peach.
Magazine layout techniques: Frame images with thin lines and use bordered sections.
Retro fonts: Pair condensed serif fonts like ITC Garamond and Benton Modern with neutral sans serifs like Optima for a balance between over-the-top excess and readability.
Try it out and build an '80s-inspired scroll experience from this how-to video.
09. Dial-up design
There’s a nostalgia for the early web, when there were more niche online communities and fewer brand guidelines. Today, web designers are tapping into the spirit of experimentation from the early, Geocities era of the internet by utilizing low-fi social assets like memes and Y2K callbacks, like MS Paint and word art in their work.
Look to social collateral of major agencies like Droga5 and Wieden + Kennedy; the recently launched internet culture site Byline; the new Gen Z myspace-inspired app, NoSpace; and the female-run media startup for the “chronically online,” Boys Club as a few examples. And of course, we’d be remiss if we didn’t include Charli XCX’s viral album Brat as an example of peak Dial-up Design aesthetic, with its low-res sans-serif font against an aggressively slime green background. It’s all part of the Y2K craze and points to the continued dominance of this design approach moving into next year.
A solid meme also qualifies as an acceptable—if not preferred—design asset these days, especially for those clients targeting younger millennials, Gen Z and Gen Alpha. Look to social media accounts for popular communities like Seamoss Girlies (Gen Z’s anti-Goop?), the previously mentioned Boys Club, social-driven morning after pill Julie and messenger app Ghost for starters. But all you’ve got to do is scroll Instagram to see this trend in the wild.
Brands also utilized low-fi assets in order to respond to the fast pace of ephemeral, of-the-moment internet trends, like #tomatogirl (Hunts’ impressive collab with cool girl boutique Lisa Says Gah), and lean into an audience that’s chronically online. One unexpected brand to get in on the trend is Celestial Seasonings, the classic ’90s tea company whose Sleepytime Bear mascot organically became a meme this year, which the brand is now capitalizing on by blanketing its own official account with the internet-famous icon.
Tap into the trend
Pixelated fonts: Use bitmap fonts like Press Start 2P or Neue Pixel Grotesk to emulate the low-resolution text style of early web design.
Bright and brash colors: Opt for a color palette that includes bright, neon colors and contrasting backgrounds, like black with neon green (#39ff14) or blue with pink (#ff69b4), to reflect the vibrant, sometimes clashing hues of ’90s websites.
Early internet UI: Incorporate retro-style buttons with bevels and shadows, using large, blocky buttons in bold, capital letters. Integrate animated GIFs and tiled background images for an authentic throwback look.
10. Retrofuture femme
This one’s for the Dollz. The internet is getting cuter, thanks to web designs inspired by Kawaii, an endearingly cute Japanese aesthetic. Consider this the kid sister of dial-up design. This web design trend is hyper femme and glittery (see trendy agency for it-girl brands Air Milkshake), and covered in hearts (Studio Nari for Coach), bows and butterflies. This overlaps with fashion trends like balletcore and coquettecore, and it’s gaining traction at the same time as girly, feminine fashions from designers like the sell-out-level popular Sandy Liang.
Girly, femme design emerged with force in 2023 as yet another counterpoint to traditional corporate web design tropes, another indication that consumers—especially younger ones—are tired of the same old sans. As creative consultancy Digital Fairy explains, the creative expression of the early internet, as found on sites like Myspace, Tumblr and Blingee, still resonates with designers today, and they’ll continue to repurpose the cute aesthetic continuing through 2024 for clients looking to cater to younger, fluently online audiences.
Tap into the trend
Y2K fonts: Use futuristic typefaces like Orbitron or Space Mono combined with retro-inspired, psychedelic fonts like Cyber Angel to create a nostalgic yet modern look.
Softer color palettes: Integrate a pastel color palette with shades like mint green, baby pink and soft lavender, accented with metallics like silver or rose gold for a futuristic touch.
Bling those buttons: Design buttons with a combination of neon glow or glitter effects and vintage-inspired shapes, such as rounded rectangles or pill shapes, to blend the old with the new.
You've reached the bottom but it doesn't have to end. Subscribe to the newsletter.
.png)
