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.
2024’s top web design trends
Hyperreality
A human touch
Elevated brutalism
Interactive whimsy
Digital sustainability
01. Hyperreality
Hyperreality blurs the boundary between reality and simulation, making the simulated version feel more real or impactful than the actual experience. Introduced by Jean Baudrillard, this concept often applies to media, art, and culture, where simulations can appear more engaging than reality itself.
We see this now more than ever, largely due to the global rise of AI. Over the past two years, Google Trends has recorded a 1,700% surge in searches for AI design tools and an astonishing 8,500% increase in 'Generative AI' searches.
But AI is just one factor driving this trend. Designers and creators are constantly pushing the limits of what’s possible, both online and in real life. Examples include NPC characters on TikTok, MSCHF’s viral big red boots, Brompton House’s snackable brownies that you can "bite into" with each click, and Superorganism’s misty animation overlay that immerses users in a tropical rainforest-like experience. MSCHF’s website is also a source of surreal inspiration, especially with its warped video banners and animated elements in the shop section.
Tap into the Trend
Interactive 3D Elements: Incorporate 3D elements that users can manipulate, such as clickable objects that change state or appearance with each interaction, creating a more immersive experience.
Surreal Animations: Use animations that shift the perception of the digital environment, like overlays or dynamically changing backgrounds, to foster a sense of immersion and otherworldliness.
Unexpected Design Features: Integrate playful and surprising design elements, such as warped videos or animated features, to engage users and make the online experience feel more dynamic and intriguing.
02. A Human Touch
Some designers are adding warmth and humanity to the digital world through handmade illustrations and handwriting fonts.
For example, Dinner Ladies uses a fancy script wordmark paired with colorful art that mimics hand-drawn stipple and hatch mark techniques. Delicious Nuggets by the Earth Alliance employs loose pencil sketch-style illustrations, and Superkeen, an anti-inflammatory food brand, adds subtle gradients to the outlines of their whimsical cartoon mascots. These bespoke visuals, featuring unique, imperfect lines and organic textures, stand in stark contrast to the polished perfection of everyday digital graphics, making these websites feel more approachable and relatable.
Tap into the Trend
Handmade Illustrations: Incorporate hand-drawn illustrations with visible textures and organic linework to add a personal touch. Consider using these in hero images, icons, or backgrounds to make your site feel more inviting.
Script Lettering: Pair handmade illustrations with script fonts to enhance the handcrafted aesthetic. Use script fonts for headings or key text elements to create a warm, approachable feel.
Subtle Gradients and Depth: Add subtle gradients and depth to your illustrations to give them a more dynamic and layered look. This can make characters and elements stand out, adding richness to your design.
Subscribe to Cardinal Group Marketing's newsletter for weekly web design articles.
03. Elevated Brutalism
Web Brutalism has been around for years, but in 2024, we saw a more refined version emerge, combining the raw, minimalist principles of Brutalism with sophisticated aesthetics. Beverage brands like Iessi and Sar Studio have embraced this trend, showcasing high-end photography paired with utilitarian typography and visible grid lines. Family Type also uses creative scrolling effects against a dark mode background, adding a modern twist to the Brutalist style.
Tap into the Trend
Less is More: Stick to a minimal color palette, such as black, white, and one bold pop of color like red.
Get Creative within Constraints: Amplify the impact of system fonts like Times New Roman or Arial by increasing their size to create bold, striking typography.
Elevate Utilitarianism with High-Impact Photography: Enhance functional and minimalist designs by incorporating high-quality photography to add emotional depth and visual appeal.
Subscribe to Cardinal Group Marketing's newsletter for weekly web design articles.
04. Interactive Whimsy
In these challenging times, adding moments of playfulness to websites has become essential. Websites that incorporate unexpected uses of motion and playful scrolling or hover effects can engage viewers without overwhelming them with excessive animation.
Take Vietnamese coffee brand Fat Milk, for instance, which transforms its abstract logo into an animated expansion of white space, mimicking the look of creamy coffee dripping down the screen. Welch’s Fruit Snacks plays with floating 3D elements that shift and scale as you scroll, while designer Bruno Simon takes it a step further by creating a 3D world where users control a little car to explore the site. For a more subdued example, check out Apple’s AirPods Max page, where subtle scrolling animations add interactivity without distracting from the core product details.
Tap into the Trend
Use Subtle Animations: Implement animations that enhance the user experience, such as scrolling effects or gentle hover actions, to add interactivity without overwhelming visitors.
Neutral Base: Use neutral base colors like whites, grays, and beiges to keep the design clean and allow interactive elements to stand out.
Bold Display Fonts: Utilize bold display fonts for headlines and key text to make a strong visual impact.
Interactive whimsy is a designer's playground and makes no apologies for playful typefaces and an abundance of animations or interactions. Illustration by Ashger Zamana.
Subscribe to Cardinal Group Marketing's newsletter for weekly web design articles.
05. Digital Sustainability
Digital sustainability isn't tied to a specific aesthetic but rather a set of practices aimed at reducing the environmental impact of the digital work you create. The internet and the infrastructure supporting it account for about 3.7% of global emissions—comparable to the aviation industry.
To create an eco-friendly website, one key aspect is minimizing energy use. Designers are achieving this by simplifying code, reducing HTTP requests, and optimizing images for faster load times. Many of these practices not only benefit the environment but also improve website accessibility, making them more user-friendly.
C40 Cities recently revamped their site using sustainable web design principles, reducing CO2 emissions from 6.7g to 0.34g per homepage view—a 90% decrease. The site also achieved a 98% accessibility score on Google Lighthouse and a fast 1.2-second page load time. Adding a dark mode toggle further enhances energy efficiency and accessibility. Re-scripted and Perpetuum both creatively utilize dark mode, while Royalties, the team behind the 2024 Paris Olympics logo, created a variable weight font and implemented dark mode for mobile users.
Tap into the Trend
Use Energy-Efficient Fonts: Opt for system fonts or variable fonts instead of custom web fonts to reduce HTTP requests, improve load times, and minimize energy consumption.
Opt for Dark Mode: Implement a dark mode or use darker colors with high-contrast fonts instead of pure white backgrounds, as darker pixels consume less energy on OLED screens and enhance accessibility for people with visual impairments.
Test Your Design: Whether you're designing a new website or updating an existing one, run your URL through Website Carbon to calculate your carbon footprint. Ensure your site uses green hosting, loads efficiently, and is accessible to all users.
To design with digital sustainability, make creative choices that are eco-friendly and accessible to all types of users. Illustration by Ashger Zamana.
Subscribe to Cardinal Group Marketing's newsletter for weekly web design articles.
Comentarios